Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.
-
Upload
tomasz-karwatka -
Category
Design
-
view
2.894 -
download
0
description
Transcript of Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.
Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.
Tomasz Karwatka {Divante i Ideacto}
Plan
• Stworzyć projekt serwisu WWW– Zgodnie z User-Centered Design– Przy użyciu prototypowania
Nie jest lekko
We’re surrounded.
That simplifies our problem of getting to these people and killing them.*
- Chesty Puller
* Motto z naszego biura
Cel biznesowy
• Cel biznesowy: …• Potrzeby użytkowników: …
Analiza
• Analiza kontekstu użytkownika
• Przegląd rozwiązań konkurencyjnych
Analiza kontekstu użytkownika
• Jakie indywidualne cechy użytkowników mogą wpłynąć na ich zachowanie / percepcję podczas korzystania z serwisu?
• Jakie doświadczenie i wiedzę mają użytkownicy w wykonywaniu zadań?
• Jak silnie są zmotywowani użytkownicy, podczas wykonywania zadania?
• Jakie są przyczyny tego, że użytkownicy wykonują swoje zadania?• Jakie doświadczenie i wiedzę mają w korzystaniu z innych
serwisów?• Wszystkie aspekty związane z użytkownikami, które będą miały
znaczenie przy korzystaniu przez nich z serwisu
Analiza kontekstu użytkownika
• Zebranie grupy ludzi, którzy najczęściej kontaktują się z użytkownikami, np. obsługa klienta
• Zrobienie listy potencjalnych użytkowników – podział na kluczowe segmenty wg wieku, wykształcenia, doświadczenia z Internetem, zawodu , ról jakie pełnią korzystając z systemu itp.
• Określenie jakie zadania będą wykonywać poszczególne grupy: publikacja ogłoszeń, przeglądanie ogłoszeń, kupno domu dla rodziny, kupno samochodu dla żony, znalezienie wakacyjnej pracy – poziom szczegółowości zadań
• Opis użytkowników – źródła wiedzy• Wybór metody weryfikującej założenia (badania jakościowe)
• Obserwacje• Wywiady
Źródła wiedzy o użytkownikach
• Użytkownicy• Statystyki• Ludzie kontaktujący się z użytkownikami• Fora internetowe• Znajomi• Artefakty• Eksperci• My sami, jako użytkownicy
Analiza - Testy porównawcze
Analiza - Zasięg
Alexa.com
Generowanie koncepcji
• Burze mózgów– Techniki kreatywne– Archiwizacja
• Ewaluacja ekspercka
Ewaluacja - Less is more
• Rozwiązuj jeden problem• Omijaj trudne problemy• Tylko niezbędne funkcje• Nie dokumentuj, twórz prototypy• Uruchamiaj jak najwcześniej• Trzy osoby to idealny team
Prototypowanie
1. Scenariusze (use case) – wybierzmy jeden
2. Diagramy przejść
3. Struktura
4. Architektura informacji
5. Makiety funkcjonalne
6. Działające prototypy
7. Dokumentacja
Diagramy przejść
Struktura serwisu
Mało, kto wie, że „mały gwint” to E14. Aby zadowolić wszystkich użytkowników do kategorii dodano obrazki.
Struktura
• http://freemind.sourceforge.net/wiki/index.php/Main_Page#Download.
Architektura informacji - Patterns
• http://developer.yahoo.com/ypatterns/• http://interface.fh-potsdam.de/infodesignpatterns/patterns.php
Makiety funkcjonalne
Makiety funkcjonalne - Axure
Testowanie - Test Kruga
• Co to jest za witryna (identyfikator witryny)?• Na jakiej jestem stronie (nazwa strony)?• Jakie są główne kategorie?• Jakie mam opcje do wyboru na tym poziomie
struktury?• Gdzie znajduję się w odniesieniu do całej
struktury?• W jaki sposób mogę czegoś poszukać?
Testowanie – testy z użytkownikami• Na podstawie celów biznesowych serwisu i ustaleń z klientem
opracuj zadania testowe do badania. W czasie jednego badania użytkownik zrealizuje od 4 do 12 zadań. Zadania należy dopasować tak aby całe badanie nie trwało dłużej niż 90 minut.
• Przetestuj realizowalność zadań.• Przygotuj kwestionariusze wywiadu przed badaniem i po badaniu.
Warto przeprowadzić krótki wywiad z użytkownikiem przed badaniem aby dowiedzieć się czegoś o sposobie w jaki korzysta z Internetu. Po badaniu warto poznać ogólne opinie o badanym serwisie.
• Przygotuj dokumenty potrzebne do przeprowadzenia badań. Będą to umowa z osobą badaną, klauzula poufności, zezwolenie na ew. nagranie badań, wydruk zadań testowych oraz kwestionariuszy wywiadu, formatki do prowadzenie notatek podczas badania.
Testowanie – testy z użytkownikami• Zrekrutuj użytkowników. Zapewnij sobie minimum 30 minut
przerwy pomiędzy badaniami abyś mógł przygotować środowisko testowe i omówić wyniki badania.
• Ustal harmonogram testów. Testy najlepiej prowadzić z obserwatorem. Moderator może wtedy skupić się na prowadzeniu badania, bez obawy, że pominie jakiś szczegół w notatkach.
• Zapewnij odpowiednie miejsce do przeprowadzenia testów oraz odpowiedni sprzęt, dobre łącze do Internetu, ewentualny sprzęt nagrywający.
Testowanie – testy z użytkownikami• Przeprowadź testy. Zacznij od próbnego zadania na rozgrzewkę, aby
odstresować badanego. Bądź uprzejmy i dbaj o poczucie własnej wartości użytkowników. Testujesz strony, nie ludzi. Podczas testów:– Zachęcaj do głośnego myślenia.– Jeśli nie wiesz, co myśli użytkownik – zapytaj o to. – Nie udzielaj wskazówek dotyczących tego jak mają postępować.– Wydawaj proste i klarowne polecenia.– Bezpośrednio po sesji rób notatki.– Uprzedź użytkownika, że:
• Będzie nagrywany• Nie będziesz w trakcie testu odpowiadać na jego pytania• Wynagrodzenie nie zależy od wyniku testów
• Omów notatki z testów i przygotuj wnioski. Opcjonalnie opracuj nagrania video z testów.
Testy użyteczności a testy grupoweTesty grupowe Testy użyteczności
Niewielka grupa osób Pojedynczy użytkownik
Uczestnicy reagują na koncepcje i projekty,
które im się przedstawia
Prosi się użytkownika o określenie co to
jest, do czego służy lub aby użył danej
rzeczy
Dobre do szybkiego uzyskania próbek opinii i
odczuć użytkowników. Nadają się do
sprawdzenia oczekiwań odbiorców,
określenia ich potrzeb. Pozwalają ocenić
pomysł na bazie, którego powstać ma
witryna. Można sprawdzić też
wykorzystywane w witrynie słownictwo.
Sprawdzenie czy witryna funkcjonuje
poprawnie i określenie na jakie problemy
napotyka użytkownik.
Wykonywane na początku procesu tworzenia
serwisu.
Wykonywane na końcu procesu
tworzenia serwisu.
Porównawcze testy usabilityWersja 01 Wersja 02
Strona główna
- skojarzenie ze sklepem, z możliwością porównania cen z innych sklepów- kojarzy się ze sklepem ze sprzętem komputerowym, ale też sprzedają inne rzeczy [bo widoczne różne zdjęcia]- nie rzuca się w oczy że jest to porównywarka - można coś kupić, dowiedzieć się jaka jest najlepsza cena, porównać, dowiedzieć się na co zwrócić uwagę - kojarzy się ze stroną, która jest bardziej nastawiona na sprzęt, na określoną tematykę [ze względu na zdjęcia]- kategorie w kolumnach lepiej się czyta niż listy w drugiej wersji, - zostawić kolumny kategorii ale dodać z poprzedniego ikony Box „Najlepsze ceny” - dobrze, że jest ale mało rzuca się w oczy, powinny być bardziej przejrzyste, może sama nazwą lub wyraźne okienko z najlepszą ceną..
- bardziej zaznaczone, że porównywarka ale wciąż mało rzuca się w oczy- kojarzy się ze stroną Allegro (podobna lista)- bardziej przejrzysta, klarowna, widoczna- przydałyby się te dwa kwadraty z I wersji, ale b. przejrzyste- można zakupić przez Internet, pooglądać, dowiedzieć się gdzie można kupić - jeśli szuka się ogólnie, różnych rzeczy to ta jest lepsza
Optymalizacja
Dokumentacja produkcyjna
Jakość
• http://validator.w3.org• http://www.w3.org/WAI/• http://ready.mobi • http://www.browsercam.com• http://mtld.mobi/emulator.php• http://validator.w3.org/checklink
Dziękuję za uwagę!
Konsulting www.ideacto.plEnterprise 2.0 www.divante.pl
Tomasz Karwatka