Usablitiy - zasady budowania interfejsów użytkownika
-
Upload
lbnsocial-budzimy-potencjal-lublina -
Category
Internet
-
view
254 -
download
0
Transcript of Usablitiy - zasady budowania interfejsów użytkownika
![Page 1: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/1.jpg)
Usabilityzasady budowania interfejsów
użytkownika
Adrian Matylewicz
![Page 2: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/2.jpg)
Na wstępie…• co decyduje o powodzeniu/efektywności
serwisów www?• co sprawia, że użytkownicy chętniej wracają
do niektórych serwisów?
• co możesz zyskać dzięki dobremu usability?• ile kosztuje słabe usablitity?
![Page 3: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/3.jpg)
Usability a gotówka• Firma zatrudnia 40 000 pracowników (np. PGE)• Średnio godzina pracy kosztuje 50 zł / h• Jedna informacja w serwisie jest nieintuicyjna (np. źle
sformułowany nagłówek)• Każdy pracownik poświęca 5 sek. zastanawiając się co
oznacza• 15% osób kliknie w link niepotrzebnie i spędzi 30 sekund
czytając tekst zanim zorientuje się że nie zawiera użytecznych informacji• Wejście i wyjście z artykułu zajmie 5 sek.
![Page 4: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/4.jpg)
Usability a gotówka
![Page 5: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/5.jpg)
Efektywność w eCommerce
![Page 6: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/6.jpg)
KonwersjaKonwersja to sprecyzowana akcja, którą chcesz aby wykonali użytkownicy Twojej witryny. W zależności od biznesu konwersją może być:• zakup,• włożenie produktu do koszyka,• pobranie pliku / aplikacji,• rejestracja,• polecenie znajomemu,• otwarcie czatu,• wysłanie formularza kontaktowego,• inne.
![Page 7: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/7.jpg)
Współczynnik konwersji
![Page 8: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/8.jpg)
Współczynnik konwersji
![Page 9: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/9.jpg)
Projektowanie interakcjiz elementami psychologii perswazyjnej
![Page 10: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/10.jpg)
Unikaj wielokolumnowego layoutu
![Page 11: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/11.jpg)
Zaoferuj prezent przed zamknięciem transakcji
![Page 12: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/12.jpg)
Scalaj podobne funkcjonalności
![Page 13: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/13.jpg)
Używaj polecenia zamiast chwalenia się
![Page 14: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/14.jpg)
Staraj się powtórzyć główną akcję
![Page 15: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/15.jpg)
Rekomenduj zamiast dawać wybór
![Page 16: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/16.jpg)
Rekomenduj zamiast dawać wybór
![Page 17: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/17.jpg)
Bądź bezpośredni i nie używaj przypuszczeń
![Page 18: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/18.jpg)
Bądź bezpośredni i nie używaj przypuszczeń
![Page 19: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/19.jpg)
Wyróżniaj i nadawaj kontrast
![Page 20: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/20.jpg)
Unikaj zbyt rozbudowanych formularzy
![Page 21: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/21.jpg)
Wyeksponuj opcje zamiast je ukrywać
![Page 22: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/22.jpg)
![Page 23: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/23.jpg)
Spróbuj tworzyć łatwą do przewidzenia zawartość
![Page 24: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/24.jpg)
Skupiaj uwagę zamiast rozpraszać
![Page 25: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/25.jpg)
Pokazuj obecny stan
![Page 26: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/26.jpg)
Używaj języka korzyści zamiast zadań
![Page 27: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/27.jpg)
Używaj menu kontekstowego
![Page 28: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/28.jpg)
![Page 29: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/29.jpg)
Wyeksponuj pola zamiast tworzyć oddzielne strony
![Page 30: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/30.jpg)
Używaj płynnych przejść zamiast nagłych zmian
![Page 31: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/31.jpg)
Zaangażuj użytkownika do personalizacji produktu
![Page 32: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/32.jpg)
Unikaj zbyt wielu obramowań
![Page 33: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/33.jpg)
Oferuj korzyści zamiast funkcjonalności
![Page 34: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/34.jpg)
Proponuj rezygnację zamiast pytania o zgodę
![Page 35: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/35.jpg)
Nie przeciwstawiaj się konwencjom
![Page 36: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/36.jpg)
Wykorzystaj niechęć do straty
![Page 37: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/37.jpg)
Stosuj wizualną hierarchię
![Page 38: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/38.jpg)
![Page 39: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/39.jpg)
Stosuj walidację w miejscu błędu
![Page 40: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/40.jpg)
Wywołaj presję czasu
![Page 41: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/41.jpg)
Pokazuj rzadkość i unikalność
![Page 42: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/42.jpg)
Próbuj przywoływać zamiast odwoływać do pamięci
![Page 43: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/43.jpg)
Przeznacz większy obszar na główną akcję
![Page 44: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/44.jpg)
Wskazuj odwołania do "starych wartości"
![Page 45: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/45.jpg)
Używaj taktyki małych kroków
![Page 46: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/46.jpg)
Unikaj modalnych okien
![Page 47: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/47.jpg)
Unikaj modalnych okien
![Page 48: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/48.jpg)
Strona główna
![Page 49: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/49.jpg)
Strona główna
![Page 50: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/50.jpg)
![Page 51: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/51.jpg)
![Page 52: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/52.jpg)
Podsumowującco decyduje o powodzeniu/efektywności serwisów www?
co sprawia, że użytkownicy chętniej wracają do niektórych serwisów?
• korzystanie z konwencji sprzyjającym ludzkim przyzwyczajeniom (nie każemy użytkownikowi myśleć)• lepsze są małe zmiany (jeśli efekty serwisu są
niezadowalające, zastanów się co zmienić zamiast odrzucać całość)• każda optymalizacja usability pomaga w małym stopniu
zwiększyć konwersję• podsuwaj rozwiązania tam gdzie użytkownik tego szuka
![Page 54: Usablitiy - zasady budowania interfejsów użytkownika](https://reader036.fdocuments.net/reader036/viewer/2022081605/58f0836c1a28ab170f8b45f1/html5/thumbnails/54.jpg)
Źródła• Steve Krug - Don't Make Me Think: A Common Sense Approach to
Web Usability• Jakob Nielsen - Designing Web Usability: The Practice of Simplicity• www.conversion.pl• goodui.org• www.webusability.pl• analytics.google.com