DWO 2011 - Usability

Usability

Usability

Co to jest i jak generuje zysk?

IV Edycja Dni Wolnego Oprogramowania

Mikołaj Pastuszko
5.03.2011
5.03.2011 Mikołaj Pastuszko 1/42

Agenda
 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ń


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


Czym jest usability?

http://streemo.pl/Image/559172_m.jpg
http://futureblog.pl/wp-content/uploads/2010/11/pushpulldoor.jpg


Cel

http://www.cadfanatic.com/wp-content/uploads/2009/08/DevWatchingUsabilityTest.png http://www.mbarronconsulting.com/happy-user.jpg


Kwestie 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?


Nauki 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


Uż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


Uż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ą!


Użytkownicy
 … mają konkretne zadania i intencje.

Logiczny Emocjonalny

Szybki Konkurencyjny Spontaniczny

Wolny Metodyczny Humanistyczny

Get Elastic Blog, www.getelastic.com


Rola 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!


Układ strony - rodzaje

http://desizntech.info/wp-content/uploads/2009/08/04_layout.jpg


Elementy 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


Jak znajdujemy?

 Nawigujemy  Wyszukujemy
 ang. browse  ang. search


Nawigacja
 … 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.


Typy nawigacji
 Sekcje, podsekcje
 Zakładki
 Menu poziome
 Menu pionowe
 Menu kaskadowe

 Nawigacja okruszkowa ang. breadcrumbs
 Dynamiczna
 Statyczna

 Tagi, chmury tagów

 Hiperłącza (linki)


Nawigacja – co jest ważne?
 Architektura informacji
 Liczba Millera - maksymalna liczba informacji jaką człowiek jest w stanie
rozróżnić bezpośrednio (Wikipedia).

7±2
 Intuicyjne nazwy kategorii

 Znacznik Tu jesteś
 Np. strzałka, trójkącik, pogrubienie, kolor...

 Znak oddzielający kategorie
 Np. nowa linia, |, »


Wyszukiwanie

 … pozwala znaleźć poszukiwaną treść.

 … powinno być szybkie.

 … powinno dawać trafne rezultaty.
 Trafne z perspektywy użytkownika, a nie naszej bazy danych!


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


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ść


Komunikaty 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ą!


Dostępność (ang. accessibility)

 Kolory

 Ostrość widzenia

 Czytniki ekranowe

 Captcha


Metody prototypowania

 Sortowanie kart

 Makiety papierowe

 Prototypy komputerowe

 Persony


Sortowanie kart

http://www.useit.com/papers/sun/cardsort.gif
http://kognitywna.nazwa.pl/blox/040.png


Makiety papierowe

http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAAACE/P5uDxoEfz1w/s1600/lmf_paper_prototype.gif


Prototypy komputerowe
 Programy graficzne

 Programy do tworzenia prezentacji
 Hiperłącza do odpowiednich slajdów

 HTML

 Programy specjalistyczne


Persony
 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


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


Analiza statystyk strony


Clicktracking

http://mozyrko.files.wordpress.com/2010/10/5-clicktracking.png


Wywiad indywidualny

http://www.usabilis.com/img/user-research-france/usability-testing.jpg
http://www.jungleminds.com/upload/public/image/2008/UsabilityTestDSC_1446.JPG


Zogniskowane wywiady grupowe

http://www.vernonresearch.com/site-images/FocusGroup.jpg


Okulografia (eye tracking)

http://www.reklamedia.pl/wp-content/uploads/2010/10/eyetracking-oczy-wzrok.jpg http://www.nosolousabilidad.com/articulos/img/eye03.jpg
http://www.egr.vcu.edu/images/bme/research/eye_tracking_features.gif
http://eyewriter.org/images/data/TEMPT-ONE/eye-tracking/ASL_EyeTracker.JPG


Testy on-line

http://www.windowsrenew.com/images/gallery/fullsize/home_computer_user.jpg


Testy A/B

http://www.sitedoublers.com/img/a-b-split-test.jpg
http://www.clickvalue.com/images/site_optimisation_ab_testing.jpg
http://blog.mindvalleylabs.com/files/2006/06/message2_image2_split_test1.gif


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.


Literatura


Inne ź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


Dziękuję

Pytania?

Mikołaj Pastuszko
mikolaj.pastuszko@gmail.com


DWO 2011 - Usability

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to DWO 2011 - Usability

Similar to DWO 2011 - Usability (20)

DWO 2011 - Usability