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

tkarwatka@ideacto.pl