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 Pastuszkomikolaj.pastuszko@gmail.commikolaj.pastuszko@gmail.com