Użyteczność stron www – wprowadzenie
-
Upload
karol-wolski -
Category
Education
-
view
1.729 -
download
0
description
Transcript of Użyteczność stron www – wprowadzenie
![Page 1: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/1.jpg)
Użyteczność stron WWW – wprowadzenie
Karol Wolski
![Page 2: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/2.jpg)
Skąd to się wzięło
![Page 3: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/3.jpg)
Parę pojęć
• User experience (ang. "doświadczenie użytkownika"), w skrócie UX, to termin opisujący całość wrażeń jakich doświadcza użytkownik podczas korzystania z produktu interaktywnego.
• Pojęcie to używane jest najczęściej w odniesieniu do oprogramowania, serwisów internetowych lub urządzeń elektronicznych. W kontekście interakcji człowiek-komputer stosowane było już w latach 70. XX-wieku
Wikipedia
![Page 4: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/4.jpg)
UX
![Page 5: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/5.jpg)
UX design
• Projektowanie user experience (ang. user experience design) to projektowanie produktów interaktywnych ze szczególnym zwróceniem uwagi na to, aby interakcja z nimi dostarczała użytkownikom pozytywnych doświadczeń. Produkt powinien: – prezentować się w sposób atrakcyjny dla użytkownika
– być funkcjonalny, ergonomiczny, użyteczny
– korzystanie z niego powinno sprawiać przyjemność i dawać satysfakcję
Wikipedia
![Page 6: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/6.jpg)
UCD
• Projektowanie zorientowane na użytkownika (ang. User-centered design) to podejście do projektowania interakcji człowieka z komputerem w którym potrzeby, wymagania i ograniczenia końcowego użytkownika są szczegółowo badane na każdym etapie procesu projektowego. Jest jedną z podstawowych metod użyteczności.
![Page 7: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/7.jpg)
Użyteczność a funkcjonalność
• Funkcjonalność (functionality) – posiadanie przez program, aplikację czy stronę określonych funkcji oraz prawidłowe ich działanie
• Użyteczność (usability) – łatwość korzystania z tych funkcji
![Page 8: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/8.jpg)
TEORIA NORMANA
![Page 9: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/9.jpg)
http://2.bp.blogspot.com/bcNLvBRQdW8/TeD8pTe6PBI/AAAAAAAAE6I/TEcbeJROZ4M/s1600/black+hawk+cockpit+%25288%2529.jpg
![Page 10: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/10.jpg)
Aktywność użytkownika według Normana (2002)
Formułowanie celów
Intencja działania
Określenie sekwencji działań
Wykonanie sekwencji działań
Percepcja stanu rzeczywistego
Interpretacja stanu rzeczywistego
Ocena wyniku interpretacji
![Page 11: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/11.jpg)
Aktywność użytkownika według Normana (2002)
Formułowanie celów
Intencja działania
Określenie sekwencji działań
Wykonanie sekwencji działań
Percepcja stanu rzeczywistego
Interpretacja stanu rzeczywistego
Ocena wyniku interpretacji
Obszar wykonania
![Page 12: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/12.jpg)
Aktywność użytkownika według Normana (2002)
Formułowanie celów
Intencja działania
Określenie sekwencji działań
Wykonanie sekwencji działań
Percepcja stanu rzeczywistego
Interpretacja stanu rzeczywistego
Ocena wyniku interpretacji
Obszar wykonania Obszar ewaluacji
![Page 13: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/13.jpg)
Aktywność użytkownika według Normana (2002)
Luki w obszarze wykonania (gulf of execution)
Luki w obszarze ewaluacji (gulf of evaluation)
Rozdźwięk pomiędzy intencjami użytkownika a możliwymi do wykonania czynnościami, na jakie pozwala oprogramowanie lub urządzenie
Wysiłek, który musi podjąć użytkownik, aby zinterpretować stan, w jakim znajduje się urządzenie i odpowiedzieć sobie na pytanie, czy zakładany cel został osiągnięty
![Page 14: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/14.jpg)
Użytkownicy doceniają jakość i wiarygodność Użytkownicy szybko skanują strony WWW zamiast czytać ich treść
Użytkownicy są niecierpliwi i nie lubią odraczać gratyfikacji
Użytkownicy nie chcą czuć się głupio
(Cooper i wsp. 2007; Maier, Leggett; 2009)
![Page 15: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/15.jpg)
Użyteczność…
![Page 16: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/16.jpg)
UKŁAD
![Page 17: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/17.jpg)
Ślepota na bannery
![Page 18: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/18.jpg)
![Page 19: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/19.jpg)
CALL TO ACTION w dobrym miejscu
![Page 20: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/20.jpg)
![Page 21: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/21.jpg)
Większa rejestracja niż logowanie
![Page 22: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/22.jpg)
![Page 23: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/23.jpg)
Wyszukiwarka w prawym górnym rogu
![Page 24: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/24.jpg)
![Page 25: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/25.jpg)
![Page 26: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/26.jpg)
FORMULARZE REJESTRACYJNE
![Page 27: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/27.jpg)
Gorzej
Lepiej – Etykiety pól lepiej wyrównać do prawej
![Page 28: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/28.jpg)
Niezrozumiałe nazwy kategorii
![Page 29: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/29.jpg)
![Page 30: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/30.jpg)
Opcja najlepsza
Opcja bardzo dobra
![Page 31: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/31.jpg)
Długi, nudny, nieczytelny
![Page 32: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/32.jpg)
Dzielenie na części
Czy pole nazwa użytkownika jest potrzebne?
![Page 33: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/33.jpg)
Podział na kroki – dobre rozwiązanie przy bardzo długich formularzach
![Page 34: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/34.jpg)
Grupowanie podobnych elementów
![Page 35: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/35.jpg)
Walidacja pól w czasie rzeczywistym ALE nie zbyt wcześnie: https://www.goldenline.pl/rejestracja?source=register-main
![Page 36: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/36.jpg)
Zaznaczanie aktualnie wypełnianego pola
![Page 37: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/37.jpg)
A jednak się da
![Page 38: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/38.jpg)
MENU
![Page 39: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/39.jpg)
Klasyczne menu
![Page 40: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/40.jpg)
Menu zakładki
![Page 41: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/41.jpg)
Menu kaskadowe
![Page 42: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/42.jpg)
![Page 43: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/43.jpg)
Breadcrumbs
![Page 44: Użyteczność stron www – wprowadzenie](https://reader034.fdocument.pub/reader034/viewer/2022051610/5486a508b479590a0d8b5239/html5/thumbnails/44.jpg)
Chmura tagów