usability i ux - podstawy
DESCRIPTION
TRANSCRIPT
Usability and UX
Radosław Taraszka
„Engineer make things. We make people love them” – Karl Fast
5 elements of usability
1.Learnability – how?2.Efficiency – wow!3.Memorability - ok4.Errors - what?5.Satisfaction – yeah!
Learnability
Efficiency
Memorability
Errors
http://wallofawesome.pagodabox.com/one-of-the-best-404-pages-ever/
Satisfaction
Usa Today
Satisfaction
Usa Today
Relationship between usability and UX (almost)….
http://www.jpprufino.com/2008/08/ux-studies-usability-and-user-experience-part-ii/
…true relationship between usability and UX
http://www.neospot.se/usability-vs-user-experience/
Related areas to UX
Project Managemenet User Research Usability Evaluation Infomraction Architecture User Interface Design Interaction Design Visual Design Content Strategy Accessability Web Analytics
User Experience
Jak ugotować zupę?
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Rozwiązanie?
The Design of Everyday Things, Donald A. Norman
Rozwiązanie?
The Design of Everyday Things, Donald A. Norman
Mapowanie
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Mapowanie
The Design of Everyday Things, Donald A. Norman
Examples of good UX - microemotions
The White Stuff’s
Examples of good UX – social proof
Expedia
Examples of good UX – info about system status
Boxee
Examples of good UX – suggestion
Make Me A Cocktai
Examples of good UX – adaptability
Google maps - Hawaii
adaptability
Examples of good UX – better search engine
Meetup
Examples of good UX – understanding
Vimeo
Examples of good UX – understanding
Amsterdam Museum
Examples of good UX – persuasion
Examples of good UX – Luke, use the… data
Ebay
Testowanie i analizowanie
Radosłąw Taraszka
Testowanie
Typy testów
Jakościowe – użyteczność SurveyMonkey, CrazyEgg, TechSmith Morae, WebSort, Opiniac.com
Ilościowe – analityka Google Analytics, Omniture, Gemius, Coremetrics
Eksperymenty – testy a/b, wielowymiarowe Visual Website Optymizer, Google Website Optimize
Konkurencja – dane ilościowe i jakościowe, porównania Alexa, Quantcast, Compete.com, Hitwise, BDN, Manubia
Analiza danych
http://visualwebsiteoptimizer.com/split-testing-blog/human-landing-page-increase-conversion-rate/
A/B Tests
http://visualwebsiteoptimizer.com/split-testing-blog/human-landing-page-increase-conversion-rate/
A/B Tests
Analiza danych
+95%
http://visualwebsiteoptimizer.com/split-testing-blog/human-landing-page-increase-conversion-rate/
A/B Tests
A/B w Mall.cz
http://visualwebsiteoptimizer.com/split-testing-blog/larger-product-images-increase-conversion-rate/
+9,46%
Tworzenie interaktywnego
produktu
Radosław Taraszka
Cyfrowy produkt
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Ewolucja w tworzeniu produktów cyfrowych
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Decyzje o produkcie: formie i interakcji podejmowane PRZED fazą WYKONANIA
Dobry interfejs odpowiada na każdą interakcję
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Konwencja?
Komunikaty systemowe
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Komunikaty systemowe
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Jeśli aplikacja wykryła błąd, dlaczego go nie naprawi?
Możesz zniszczyć dwa „pudełka”, które jest wartościowe?
Co się stanie gdy klikniesz „cancel”?
Konstruktywne komunikaty
Czy komunikaty są poprawne?
Czy tłumaczą co się stało?
Czy wskazują miejsce problemu?
Czy podają rozwiązanie problemu?
Czy jeśli proszą o wpisanie danych, podają ich format?
Konstruktywne komunikaty
Na stronach korporacje.pekao.com.pl wyszukiwarka po nie znalezieniu poszukiwanej frazy proponuje skorzystanie z mapy strony lub skontaktowanie się w celu uzyskania potrzebnych informacji.
Nawigowanie
Radosław Taraszka
Nawigacja
Lewa nawigacja jest ignorowana.
Szczególnie gdy jest długa. Użytkownicy lubią
Content
Poziomą, dużą nawigację
Linki w okolicach tytułu
Drugi poziom nawigacji
Problematyczny z natury rzeczy bo..
po pierwszym kliku użytkownicy koncentrują się na treści.
nawigacja 2 poziomu zawsze słabo widoczna.
dopiero gdy użytkownik nic nie znajdzie w treści to zaczyna szukać dookoła – jeśli trafi na coś przed nawigacją 2 poziomu to może jej nie zauważyć.
Wyszukiwarka
Wyszukiwarka - prosta
Gov.uk
Wyszukiwarka - złożona
Tripadvisor
Wyszukiwarka – główny element
Verif
Rozwijane menu
Menu rozwijane umożliwia wygodny wybór kraju
Akordeonowe menu
Szybka metoda przeglądania
Od 2 do 10 pozycji na drugim poziomie
Do 2 poziomów
Jesteś tutaj
Działa na zasadzie „jesteś tutaj” na mapie
Stosowane najczęściej w menu
Zakładki
Ludzie je rozumieją
Ograniczenie ilości
Mało widoczny 2 poziom Trzeba dodatkowo mocno wyróżniać
Zakładki
BBC
Zakładki
Sport.pl
Dropdown
Nettuts+
Dropdown
Gateway
Mega dropdown
Sony store
Mega dropdown
Empik.com
Mega dropdown
Engadet
Mega dropdown
USAA
Lepsze lewe menu
Lepsze lewe menu
Filtrowanie
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Filtrowanie
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Badania usability
Radosław Taraszka
Metody badawcze
Usability Engineering, JAKOB NIELSEN
Dlaczego badać?
Projektant nie jest w stanie spojrzeć na witrynę jak jej użytkownik.
Im częściej testujesz tym mniejsze koszty, szybciej wykrywasz problemy użytkowników.
Konieczność zatrudnienia reprezentatywnej grupy użytkowników nie jest tak istotna jak mogłoby się wydawać. Większość osób w ten sam sposób postrzega serwisy WWW i ma podobne problemy.
Analiza ekspercka
W tej metodzie ekspert lub grupa ekspertów ocenia zgodność poszczególnych elementów serwisu z wytycznymi usability. Każdy znaleziony problem jest priorytetowany (zazwyczaj 3 poziomy) a następnie opisywany (najczęściej z sugestią jak go rozwiązać).
Zalecane jest użycie przynajmniej 2 ekspertów (analityków). Wyniki ich pracy zostają scalone do jednego raportu.
HeurystykiNielsen & Molich
1.Pokazuj status systemu.
2.Zachowaj zgodność pomiędzy systemem a rzeczywistością.
3.Daj użytkownikowi pełną kontrolę.
4.Trzymaj się standardów i zachowaj spójność.
5.Zapobiegaj błędom.
6.Pozwalaj wybierać zamiast zmuszać do pamiętania.
7.Zapewnij elastyczność i efektywność.
8.Dbaj o estetykę i umiar.
9.Zapewnij skuteczną obsługę błędów.
10.Zadbaj o pomoc i dokumentację.
Źródło: 1.Nielsen, J., and Landauer, T. K. 1993. A mathematical model of the finding of usability problems. Proceedings ACM/IFIP INTERCHI'93 Conference (Amsterdam, The Netherlands, April 24-29), 206-213.2.Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI'90 Conf. (Seattle, WA, 1-5 April), 249-256.3.Nielsen, J. 1992. Finding usability problems through heuristic evaluation. Proceedings ACM CHI'92 Conference (Monterey, CA, May 3-7), 373-380.4.Examining User Expectations for the Location of Common E-Commerce Web Objects
Click tracking
Crazy Egg
Eye-tracking
Eyetracking na mobile
http://www.slideshare.net/uservision/user-experience-in-action
Google Analytics
Badania z użytkownikami
Pierwsi użytkownicy zazwyczaj odkrywają najwięcej błędów. Jakob Nielsen i Tom Landauer wykazali, że testowanie z 5 użytkownikami
pozwala na wykrycie 85% problemów dotyczących funkcjonalności witryn. Zatrudnianie większej ilości użytkowników nie gwarantuje liniowego wzrostu liczny wykrytych błędów.
Zamiast jednego testu z 8 użytkownikami lepiej przeprowadzić dwie tury testów z 3 użytkownikami. Najczęściej duże błędu zasłaniają te mniejsze i dopiero usunięcie ich i przeprowadzeni drugiej tury pozwala na odkrycie mniejszych błędów.
W teście bierze udział także osoba przeprowadzająca test i obserwator.
Ilu użytkowników?
Pay-off ratio
Usability Engineering, JAKOB NIELSEN
Typy testów z użytkownikami
Zrozumieć witrynę – pokazujesz witrynę użytkownikowi a następnie sprawdzasz czy zrozumieli sposób zorganizowania informacji, nawigację i koncepcję witryny
Wykonanie czynności – użytkownik pracuje z serwisem
Zadania zamknięte
Zadania otwarte
Jak testować? Najpierw spróbuj samemu wykonać zadania testowe. Bądź uprzejmy i dbaj o poczucie własnej wartości użytkowników. Testujesz strony,
nie ludzi. 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
A po tym wszystkim…
Tak, tak- analiza danych
Projektowanie
Radosław Taraszka
Waterfall
http://project.samwho.co.uk/images/waterfall-model1.jpg
Projektowanie równoległe i iteracyjne
Usability Engineering, JAKOB NIELSEN
Scrum
http://www.maxxor.com/software-development-process
Lean
http://www.agilearts.nl/the-lean-agile-connection/
Lean
Sortowanie kart
http://www.slideshare.net/uservision/user-experience-in-action
Szkicuj…
Szkicuj…
http://sketchtoy.com/
Szkicuj…
Przepływ
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Prototypy
Usability Engineering, JAKOB NIELSEN
Visual Language Studies
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Responsive Design
Radosław Taraszka
Grid w projektowaniu
Usability — szybsza nauka używania dzięki konsekwecji pozycjonowania elementów na ekranie.
Ascetyczność i uporządkowanie
Efektywność – standardyzacja layoutu przyspiesza korzystanie z jego funkcji
About Face 3. The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin
Responsive Design
http://upload.wikimedia.org/wikipedia/commons/6/6a/Boston_Globe_responsive_website.jpg
Fluid Grids
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
Fluid Grids
http://www.alistapart.com/articles/fluid-images/
Media Queries
http://mediaqueri.es/
320px 480px 600px 768px 900px 1200px
Media Queries
http://mediaqueri.es/
Media Queries
http://mediaqueri.es/
Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514
Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514
Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514
Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514
Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514
Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514
Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514
Przykład RWD
United Pixelworks
User-Centered Design
Radosław Taraszka