Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DWO 2011 - Usability

722 views

Published on

Usability introduction presented at Dni Wolnego Programowania 2011 in Bielsko-Biała, Poland

Note: Slide no. 20 (Nawigacja - co jest ważne?) includes outdated information about optimal number of information people can perceive (known as Miller's law). Please consult the following pages:
http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two
http://drdobbs.com/web-development/184412300

Published in: Technology
  • Login to see the comments

  • Be the first to like this

DWO 2011 - Usability

  1. 1. Usability Usability Co to jest i jak generuje zysk? IV Edycja Dni Wolnego Oprogramowania Mikołaj Pastuszko 5.03.20115.03.2011 Mikołaj Pastuszko 1/42
  2. 2. 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ń5.03.2011 Mikołaj Pastuszko 2/42
  3. 3. 5.03.2011 Mikołaj Pastuszko 3/42
  4. 4. 5.03.2011 Mikołaj Pastuszko 4/42
  5. 5. 5.03.2011 Mikołaj Pastuszko 5/42
  6. 6. 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.jpg5.03.2011 Mikołaj Pastuszko 6/42
  7. 7. Czym jest usability? http://streemo.pl/Image/559172_m.jpg http://futureblog.pl/wp-content/uploads/2010/11/pushpulldoor.jpg5.03.2011 Mikołaj Pastuszko 7/42
  8. 8. Cel http://www.cadfanatic.com/wp-content/uploads/2009/08/DevWatchingUsabilityTest.png http://www.mbarronconsulting.com/happy-user.jpg5.03.2011 Mikołaj Pastuszko 8/42
  9. 9. 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?5.03.2011 Mikołaj Pastuszko 9/42
  10. 10. 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 Usabilityhttp://www.montparnas.com/articles/wp-content/uploads/2006/10/user%20experience%20design%20explained.gif5.03.2011 Mikołaj Pastuszko 10/42
  11. 11. 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, 20065.03.2011 Mikołaj Pastuszko 11/42
  12. 12. 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ą!5.03.2011 Mikołaj Pastuszko 12/42
  13. 13. Użytkownicy  … mają konkretne zadania i intencje. Logiczny Emocjonalny Szybki Konkurencyjny Spontaniczny Wolny Metodyczny Humanistyczny Get Elastic Blog, www.getelastic.com5.03.2011 Mikołaj Pastuszko 13/42
  14. 14. 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!5.03.2011 Mikołaj Pastuszko 14/42
  15. 15. Układ strony - rodzaje http://desizntech.info/wp-content/uploads/2009/08/04_layout.jpg5.03.2011 Mikołaj Pastuszko 15/42
  16. 16. 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 strony5.03.2011 Mikołaj Pastuszko 16/42
  17. 17. Jak znajdujemy?  Nawigujemy  Wyszukujemy  ang. browse  ang. search5.03.2011 Mikołaj Pastuszko 17/42
  18. 18. 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.5.03.2011 Mikołaj Pastuszko 18/42
  19. 19. 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)5.03.2011 Mikołaj Pastuszko 19/42
  20. 20. 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, |, »5.03.2011 Mikołaj Pastuszko 20/42
  21. 21. Wyszukiwanie  … pozwala znaleźć poszukiwaną treść.  … powinno być szybkie.  … powinno dawać trafne rezultaty.  Trafne z perspektywy użytkownika, a nie naszej bazy danych!5.03.2011 Mikołaj Pastuszko 21/42
  22. 22. 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ów5.03.2011 Mikołaj Pastuszko 22/42
  23. 23. 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ść5.03.2011 Mikołaj Pastuszko 23/42
  24. 24. 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ą!5.03.2011 Mikołaj Pastuszko 24/42
  25. 25. Dostępność (ang. accessibility)  Kolory  Ostrość widzenia  Czytniki ekranowe  Captcha5.03.2011 Mikołaj Pastuszko 25/42
  26. 26. Metody prototypowania  Sortowanie kart  Makiety papierowe  Prototypy komputerowe  Persony5.03.2011 Mikołaj Pastuszko 26/42
  27. 27. Sortowanie kart http://www.useit.com/papers/sun/cardsort.gif http://kognitywna.nazwa.pl/blox/040.png5.03.2011 Mikołaj Pastuszko 27/42
  28. 28. Makiety papierowe http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAAACE/P5uDxoEfz1w/s1600/lmf_paper_prototype.gif5.03.2011 Mikołaj Pastuszko 28/42
  29. 29. Prototypy komputerowe  Programy graficzne  Programy do tworzenia prezentacji  Hiperłącza do odpowiednich slajdów  HTML  Programy specjalistyczne5.03.2011 Mikołaj Pastuszko 29/42
  30. 30. 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 strony5.03.2011 Mikołaj Pastuszko 30/42
  31. 31. 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/B5.03.2011 Mikołaj Pastuszko 31/42
  32. 32. Analiza statystyk strony5.03.2011 Mikołaj Pastuszko 32/42
  33. 33. Clicktracking http://mozyrko.files.wordpress.com/2010/10/5-clicktracking.png5.03.2011 Mikołaj Pastuszko 33/42
  34. 34. Wywiad indywidualny http://www.usabilis.com/img/user-research-france/usability-testing.jpg http://www.jungleminds.com/upload/public/image/2008/UsabilityTestDSC_1446.JPG5.03.2011 Mikołaj Pastuszko 34/42
  35. 35. Zogniskowane wywiady grupowe http://www.vernonresearch.com/site-images/FocusGroup.jpg5.03.2011 Mikołaj Pastuszko 35/42
  36. 36. 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.JPG5.03.2011 Mikołaj Pastuszko 36/42
  37. 37. Testy on-line http://www.windowsrenew.com/images/gallery/fullsize/home_computer_user.jpg5.03.2011 Mikołaj Pastuszko 37/42
  38. 38. 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.gif5.03.2011 Mikołaj Pastuszko 38/42
  39. 39. 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.5.03.2011 Mikołaj Pastuszko 39/42
  40. 40. Literatura5.03.2011 Mikołaj Pastuszko 40/42
  41. 41. 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/  Wikipedia5.03.2011 Mikołaj Pastuszko 41/42
  42. 42. Dziękuję Pytania? Mikołaj Pastuszko mikolaj.pastuszko@gmail.com5.03.2011 Mikołaj Pastuszko 42/42

×