Mikołaj Pastuszko5.03.2011 1/42
UsabilityUsability
UsabilityUsability
Co to jest i jak generuje zysk?Co to jest i jak generuje zysk?
IV Edycja Dni Wolnego OprogramowaniaIV Edycja Dni Wolnego Oprogramowania
Mikołaj PastuszkoMikołaj Pastuszko5.03.20115.03.2011
Mikołaj Pastuszko5.03.2011 2/42
AgendaAgenda
Wstęp
Czym jest usability?
Kwestie nazewnicze
Nauki pokrewne
Zagadnienia kluczowe
Użytkownicy
Rola konwencji i standardów
Układ strony i jej elementów
Nawigacja, kategoryzowanie i wyszukiwanie informacji
Formularze
Komunikaty błędów
Dostępność
Metody prototypowania
Metody badań
Mikołaj Pastuszko5.03.2011 3/42
Mikołaj Pastuszko5.03.2011 4/42
Mikołaj Pastuszko5.03.2011 5/42
Mikołaj Pastuszko5.03.2011 6/42
Czym jest usability?Czym jest usability?
http://www.workableweb.com/images/_images_these/tespot_unusable.jpg http://www.grannysteacozies.com/images/products/tea_pots/amsterdam/green_teapot.jpg
http://www.usernomics.com/images/unusable.gif http://studioogrodow.pl/img/p/12-73-large.jpg
Mikołaj Pastuszko5.03.2011 7/42
Czym jest usability?Czym jest usability?
http://streemo.pl/Image/559172_m.jpghttp://futureblog.pl/wp-content/uploads/2010/11/pushpulldoor.jpg
Mikołaj Pastuszko5.03.2011 8/42
CelCel
http://www.cadfanatic.com/wp-content/uploads/2009/08/DevWatchingUsabilityTest.png http://www.mbarronconsulting.com/happy-user.jpg
Mikołaj Pastuszko5.03.2011 9/42
Kwestie nazewniczeKwestie nazewnicze
Usability
Usable: 1. available or convenient for use. 2. capable of being used
Dictionary.com Unabridged
Użyteczność czy używalność?
Użyteczny 1. przynoszący pożytek, potrzebny do czegoś 2. pomagający komuś w czymś
Używalność 1. przydatność do tego, żeby być używanym 2. możność korzystania z czegoś
Słownik Języka Polskiego PWN
Funkcjonalny?
Mikołaj Pastuszko5.03.2011 10/42
Nauki pokrewneNauki pokrewne
User Experience (UX)
Termin opisujący całość wrażeń jakich doświadcza użytkownik podczas korzystania z produktu interaktywnego.
Wikipedia
User Experience Design
Projektowanie produktów interaktywnych ze szczególnym zwróceniem uwagi na to, aby interakcja z nimi dostarczała użytkownikom pozytywnych doświadczeń.
Wikipedia
User Centered Design (UCD)
Web Usability
http://www.montparnas.com/articles/wp-content/uploads/2006/10/user%20experience%20design%20explained.gif
Mikołaj Pastuszko5.03.2011 11/42
UżytkownicyUżytkownicy
… nie chcą myśleć.
Pierwsze prawo Kruga: Nie każ mi myśleć!
… kierują się intuicją.
… nie zastanawiają się jak coś działa. Chcą po prostu przebrnąć.
… nie lubią instrukcji (szczególnie długich).
… nie wybierają tego co optymalne, ale to co satysfakcjonujące.
… są niecierpliwi.
91% osób poddaje się po maksymalnie 3 nieudanych próbach wykonania czynności na stronie WWW.
Badania firmy Empirix, 2006
Mikołaj Pastuszko5.03.2011 12/42
UżytkownicyUżytkownicy
… nie czytają stron. Użytkownicy skanują je wzrokiem.
… nie skanują wszystkiego, tylko niektóre elementy strony.
… nie widzą reklam, szczególnie jeśli te migają/hałasują/pląsają!
Mikołaj Pastuszko5.03.2011 13/42
UżytkownicyUżytkownicy
… mają konkretne zadania i intencje.
Logiczny Emocjonalny
Szybki Konkurencyjny Spontaniczny
Wolny Metodyczny Humanistyczny
Get Elastic Blog, www.getelastic.com
Mikołaj Pastuszko5.03.2011 14/42
Rola konwencji i standardówRola konwencji i standardów
Internetowe konwencje są często starsze niż Internet.
Prasa, bibliotekoznawstwo, typografia, telewizja...
Konwencje i standardy pozwalają użytkownikowi nie myśleć.
Czyli to co lubi najbardziej :)
Ułatwiają szybkie poruszanie się w Internecie.
Zwiększają zadowolenie użytkownika.
Mogą być celowo łamane
Ale tylko przy pełnej świadomości konwekwencji!
Mikołaj Pastuszko5.03.2011 15/42
Układ strony - rodzajeUkład strony - rodzaje
http://desizntech.info/wp-content/uploads/2009/08/04_layout.jpg
Mikołaj Pastuszko5.03.2011 16/42
Elementy stronyElementy strony
Logo
Zwykle w lewym górnym rogu
Nawigacja
U góry
W lewej kolumnie
W prawej kolumnie
Narzędzia (koszyk, mapa strony, kontakt, pomoc itp.)
W prawym górnym rogu
Wyszukiwarka
Zwykle w prawym górnym rogu, pod narzędziami
Czasem u góry na środku
Panel logowania (lub link do strony logowania)
Zwykle w prawym górnym rogu
Czasem z lewej strony
Mikołaj Pastuszko5.03.2011 17/42
Jak znajdujemy?Jak znajdujemy?
Nawigujemy
ang. browse
Wyszukujemy
ang. search
Mikołaj Pastuszko5.03.2011 18/42
NawigacjaNawigacja
… pozwala znaleźć poszukiwaną treść.
… informuje gdzie jesteśmy.
… informuje gdzie możemy iść.
… informuje gdzie byliśmy.
… pozwala wrócić do wcześniej odwiedzonego miejsca.
… daje poczucie stabilności i orientacji w strukturze serwisu.
Użytkownik czuje się bardziej spokojny.
Mikołaj Pastuszko5.03.2011 19/42
Typy nawigacjiTypy nawigacji
Sekcje, podsekcje
Zakładki
Menu poziome
Menu pionowe
Menu kaskadowe
Nawigacja okruszkowa ang. breadcrumbs
Dynamiczna
Statyczna
Tagi, chmury tagów
Hiperłącza (linki)
Mikołaj Pastuszko5.03.2011 20/42
Nawigacja – co jest ważne?Nawigacja – co jest ważne?
Architektura informacji
Liczba Millera - maksymalna liczba informacji jaką człowiek jest w stanie rozróżnić bezpośrednio (Wikipedia).
Intuicyjne nazwy kategorii
Znacznik Tu jesteś
Np. strzałka, trójkącik, pogrubienie, kolor...
Znak oddzielający kategorie
Np. nowa linia, |, »
7 ± 2
Mikołaj Pastuszko5.03.2011 21/42
WyszukiwanieWyszukiwanie
… pozwala znaleźć poszukiwaną treść.
… powinno być szybkie.
… powinno dawać trafne rezultaty.
Trafne z perspektywy użytkownika, a nie naszej bazy danych!
Mikołaj Pastuszko5.03.2011 22/42
Wyszukiwanie – co jest ważne?Wyszukiwanie – co jest ważne?
Określenie zakresu wyszukiwania
Aktualna kategoria Cała witryna
Intuicyjne etykiety
Umiejscowienie: Z lewej, ponad, na przycisku... Unikać niepotrzebnych słów, np. Wyszukaj słowa kluczowe
Prostota wyszukiwarki
Jak najmniej pól Krótkie listy rozwijalne
Wyszukiwanie zaawansowane
Nie zawsze potrzebne Można pokazać przy wynikach wyszkiwania → filtrowanie wyników
Mikołaj Pastuszko5.03.2011 23/42
Formularze – co jest ważne?Formularze – co jest ważne?
Ilość pól, elementów list, pól typu checkbox i radio button
Jak najmniej... Jeżeli dużo, to:
Grupowanie
Podział procesu na kroki
Pola obowiązkowe
Czy naprawdę potrzebujemy Twój rozmiar buta?
Obsługa nieprawidłowych danych
Jak, kiedy i gdzie informować użytkownika?
Rozmiary pól
Graficzne wyrównanie pól i ich opisów (etykiet) czytelność→
Mikołaj Pastuszko5.03.2011 24/42
Komunikaty błędówKomunikaty błędów
Widoczność
Wyróżnienie ramką, kolorem, ikoną Zazwyczaj u góry strony
Odpowiedzi na pytania:
Co się stało? Jak należy dalej postąpić?
Treść
Zrozumiała dla użytkownika Jak najkrótsza Życzliwa Użytkownik nie może poczuć się winny bądź wystraszony sytuacją!
Mikołaj Pastuszko5.03.2011 25/42
Dostępność Dostępność (ang. accessibility)(ang. accessibility)
Kolory
Ostrość widzenia
Czytniki ekranowe
Captcha
Mikołaj Pastuszko5.03.2011 26/42
Metody prototypowaniaMetody prototypowania
Sortowanie kart
Makiety papierowe
Prototypy komputerowe
Persony
Mikołaj Pastuszko5.03.2011 27/42
Sortowanie kartSortowanie kart
http://www.useit.com/papers/sun/cardsort.gifhttp://kognitywna.nazwa.pl/blox/040.png
Mikołaj Pastuszko5.03.2011 28/42
Makiety papieroweMakiety papierowe
http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAAACE/P5uDxoEfz1w/s1600/lmf_paper_prototype.gif
Mikołaj Pastuszko5.03.2011 29/42
Prototypy komputerowePrototypy komputerowe
Programy graficzne
Programy do tworzenia prezentacji
Hiperłącza do odpowiednich slajdów
HTML
Programy specjalistyczne
Mikołaj Pastuszko5.03.2011 30/42
PersonyPersony
Reprezentują typowe grupy użytkowników
Charakterystyka persony
Zdjęcie Imię i nazwisko Wiek, płeć, wykształcenie itp. Cechy charakteru Sytuacja życiowa Warunki materialne (sprzęt itp.) Motywacja Cele interakcji Wzorce zachowań, sposób korzystania ze strony
Mikołaj Pastuszko5.03.2011 31/42
Metody badańMetody badań
Analiza statystyk strony
Click tracking
Testy z użytkownikami
Wywiad indywidualny Zogniskowane wywiady grupowe ang. focus group
Okulografia ang. eye tracking
Testy on-line
Testy A/B
Mikołaj Pastuszko5.03.2011 32/42
Analiza statystyk stronyAnaliza statystyk strony
Mikołaj Pastuszko5.03.2011 33/42
ClicktrackingClicktracking
http://mozyrko.files.wordpress.com/2010/10/5-clicktracking.png
Mikołaj Pastuszko5.03.2011 34/42
Wywiad indywidualnyWywiad indywidualny
http://www.usabilis.com/img/user-research-france/usability-testing.jpghttp://www.jungleminds.com/upload/public/image/2008/UsabilityTestDSC_1446.JPG
Mikołaj Pastuszko5.03.2011 35/42
Zogniskowane wywiady grupoweZogniskowane wywiady grupowe
http://www.vernonresearch.com/site-images/FocusGroup.jpg
Mikołaj Pastuszko5.03.2011 36/42
Okulografia Okulografia (eye tracking)(eye tracking)
http://www.reklamedia.pl/wp-content/uploads/2010/10/eyetracking-oczy-wzrok.jpg http://www.nosolousabilidad.com/articulos/img/eye03.jpghttp://www.egr.vcu.edu/images/bme/research/eye_tracking_features.gif
http://eyewriter.org/images/data/TEMPT-ONE/eye-tracking/ASL_EyeTracker.JPG
Mikołaj Pastuszko5.03.2011 37/42
Testy on-lineTesty on-line
http://www.windowsrenew.com/images/gallery/fullsize/home_computer_user.jpg
Mikołaj Pastuszko5.03.2011 38/42
Testy A/BTesty A/B
http://www.sitedoublers.com/img/a-b-split-test.jpghttp://www.clickvalue.com/images/site_optimisation_ab_testing.jpg
http://blog.mindvalleylabs.com/files/2006/06/message2_image2_split_test1.gif
Mikołaj Pastuszko5.03.2011 39/42
Po co to wszystko?Po co to wszystko?
Zadowolenie użytkowników
Użytkownik zadowolony = użytkownik chętny do:
Zakupów Korzystania z usług Polecania serisu znajomym
Użytkownik niezadowolony ucieka do konkurencji
Aby projektować systemy dla człowieka, musimy na nie spoglądać jego oczami na każdym etapie procesu ich powstawania.
Mikołaj Pastuszko5.03.2011 40/42
LiteraturaLiteratura
Mikołaj Pastuszko5.03.2011 41/42
Inne źródłaInne źródła
WebAudit Blog: Robert Drózd
http://www.webaudit.pl/blog/
UI Design: Marek Kasperski
http://ui.blox.pl/
Usability On Air: Krzysztof Piwowar
http://www.usability-onair.com/
What Is User Experience Design
http://www.montparnas.com/articles/what-is-user-experience-design/
Wikipedia
Mikołaj Pastuszko5.03.2011 42/42
DziękujęDziękuję
Pytania?Pytania?
Mikołaj PastuszkoMikołaj [email protected]@gmail.com