usability i ux - podstawy

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

http://www.tui.pl

Examples of good UX – persuasion

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