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.
![Page 1: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/1.jpg)
Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.
Tomasz Karwatka {Divante i Ideacto}
![Page 2: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/2.jpg)
Plan
• Stworzyć projekt serwisu WWW– Zgodnie z User-Centered Design– Przy użyciu prototypowania
![Page 3: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/3.jpg)
Nie jest lekko
We’re surrounded.
That simplifies our problem of getting to these people and killing them.*
- Chesty Puller
* Motto z naszego biura
![Page 4: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/4.jpg)
![Page 5: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/5.jpg)
![Page 6: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/6.jpg)
Cel biznesowy
• Cel biznesowy: …• Potrzeby użytkowników: …
![Page 7: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/7.jpg)
Analiza
• Analiza kontekstu użytkownika
• Przegląd rozwiązań konkurencyjnych
![Page 8: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/8.jpg)
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
![Page 9: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/9.jpg)
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
![Page 10: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/10.jpg)
Ź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
![Page 11: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/11.jpg)
Analiza - Testy porównawcze
![Page 12: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/12.jpg)
Analiza - Zasięg
Alexa.com
![Page 13: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/13.jpg)
Generowanie koncepcji
• Burze mózgów– Techniki kreatywne– Archiwizacja
• Ewaluacja ekspercka
![Page 14: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/14.jpg)
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
![Page 15: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/15.jpg)
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
![Page 16: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/16.jpg)
Diagramy przejść
![Page 17: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/17.jpg)
Struktura serwisu
Mało, kto wie, że „mały gwint” to E14. Aby zadowolić wszystkich użytkowników do kategorii dodano obrazki.
![Page 18: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/18.jpg)
Struktura
• http://freemind.sourceforge.net/wiki/index.php/Main_Page#Download.
![Page 19: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/19.jpg)
Architektura informacji - Patterns
• http://developer.yahoo.com/ypatterns/• http://interface.fh-potsdam.de/infodesignpatterns/patterns.php
![Page 20: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/20.jpg)
Makiety funkcjonalne
![Page 21: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/21.jpg)
Makiety funkcjonalne - Axure
![Page 22: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/22.jpg)
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ć?
![Page 23: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/23.jpg)
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.
![Page 24: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/24.jpg)
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.
![Page 25: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/25.jpg)
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.
![Page 26: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/26.jpg)
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.
![Page 27: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/27.jpg)
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
![Page 28: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/28.jpg)
Optymalizacja
![Page 29: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/29.jpg)
Dokumentacja produkcyjna
![Page 30: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/30.jpg)
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
![Page 31: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/31.jpg)
![Page 32: Warsztat: Zabawa w agencję interaktywną. Projekt od A do Z.](https://reader034.fdocuments.in/reader034/viewer/2022051411/546f9401af79594b488b4671/html5/thumbnails/32.jpg)
Dziękuję za uwagę!
Konsulting www.ideacto.plEnterprise 2.0 www.divante.pl
Tomasz Karwatka