użyteczność stron www

74
Użyteczność stron WWW Karol Wolski

Upload: karol-wolski

Post on 05-Dec-2014

1.437 views

Category:

Education


2 download

DESCRIPTION

wrpwa

TRANSCRIPT

Page 1: Użyteczność stron www

Użyteczność stron WWW

Karol Wolski

Page 2: Użyteczność stron www

Są na świecie technologie, które kochamy…

http://www.apple.com/

Chociaż obiektywnie nie są najlepsze…

Page 3: Użyteczność stron www

Są też takie, które kochamy… trochę mniej…

http://www.laptopviews.com/assets/toshiba-satellite-m200-e413d-laptop.jpg

Page 4: Użyteczność stron www

Dlaczego tak się dzieje?

Spostrzegana użyteczność

Spostrzegana łatwość obsługi

Spostrzegana przyjemność korzystania

Model Akceptacji Technologii (Davis, 1986):

Page 5: Użyteczność stron www

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 6: Użyteczność stron www

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 7: Użyteczność stron www

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 8: Użyteczność stron www

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 9: Użyteczność stron www

Skąd to się wzięło

Page 10: Użyteczność stron www

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

Page 11: Użyteczność stron www

UX

Page 12: Użyteczność stron www

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ę

Page 13: Użyteczność stron www

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 14: Użyteczność stron www

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 15: Użyteczność stron www

UKŁAD - PRZYKŁADY

Page 16: Użyteczność stron www

Układ jednokolumnowy

Menu

Treść

Page 17: Użyteczność stron www
Page 18: Użyteczność stron www
Page 19: Użyteczność stron www

Układ dwukolumnowy

Menu

Treść

Treść Treść

Page 20: Użyteczność stron www

Układ dwukolumnowy

Menu

Treść

Treść Treść/Menu

Page 21: Użyteczność stron www

Układ dwukolumnowy

Menu

Treść

Treść Treść/Menu

Page 22: Użyteczność stron www
Page 23: Użyteczność stron www
Page 24: Użyteczność stron www

Układ trójkolumnowy

Menu

Treść Menu Menu

Page 25: Użyteczność stron www
Page 26: Użyteczność stron www

Układ trójkolumnowy

Menu

Treść

Treść Treść Treść

Page 27: Użyteczność stron www
Page 28: Użyteczność stron www
Page 29: Użyteczność stron www
Page 30: Użyteczność stron www

Układ blokowy/kostka - grid

Menu

Treść

Treść Treść Treść

Treść Treść Treść

Page 31: Użyteczność stron www
Page 32: Użyteczność stron www

MENU - RODZAJE

Page 33: Użyteczność stron www

Klasyczne menu

Page 34: Użyteczność stron www

Menu zakładki

Page 35: Użyteczność stron www

Menu kaskadowe

Page 36: Użyteczność stron www
Page 37: Użyteczność stron www

Breadcrumbs

Page 38: Użyteczność stron www

Chmura tagów

Page 39: Użyteczność stron www

FORMULARZE REJESTRACYJNE

Page 40: Użyteczność stron www

Gorzej

Lepiej – Etykiety pól lepiej wyrównać do prawej

Page 41: Użyteczność stron www

Niezrozumiałe nazwy kategorii

Page 42: Użyteczność stron www
Page 43: Użyteczność stron www

Opcja najlepsza

Opcja bardzo dobra

Page 44: Użyteczność stron www

Długi, nudny, nieczytelny

Page 45: Użyteczność stron www

Dzielenie na części

Czy pole nazwa użytkownika jest potrzebne?

Page 46: Użyteczność stron www

Podział na kroki – dobre rozwiązanie przy bardzo długich formularzach

Page 47: Użyteczność stron www

Grupowanie podobnych elementów

Page 48: Użyteczność stron www

Walidacja pól w czasie rzeczywistym ALE nie zbyt wcześnie: https://www.goldenline.pl/rejestracja?source=register-main

Page 49: Użyteczność stron www

Zaznaczanie aktualnie wypełnianego pola

Page 50: Użyteczność stron www

A jednak się da

Page 51: Użyteczność stron www

LOGOWANIE I REJESTRACJA

Page 52: Użyteczność stron www

Źle

Page 53: Użyteczność stron www
Page 54: Użyteczność stron www

WYSZUKIWARKA

Page 55: Użyteczność stron www

Wyszukiwarka w prawym górnym rogu

Page 56: Użyteczność stron www
Page 57: Użyteczność stron www

Coś tu jest źle…

Page 58: Użyteczność stron www

Lepiej

Page 59: Użyteczność stron www

Inaczej

Page 60: Użyteczność stron www

PRZYCISK AKCJI I CEL BIZNESOWY

Page 61: Użyteczność stron www
Page 62: Użyteczność stron www
Page 63: Użyteczność stron www
Page 64: Użyteczność stron www

Większa rejestracja niż logowanie

Page 65: Użyteczność stron www
Page 66: Użyteczność stron www
Page 67: Użyteczność stron www

CALL TO ACTION w dobrym miejscu

Page 68: Użyteczność stron www
Page 69: Użyteczność stron www

LANDING PAGE - KONWERSJA

Page 70: Użyteczność stron www
Page 71: Użyteczność stron www
Page 72: Użyteczność stron www
Page 73: Użyteczność stron www
Page 74: Użyteczność stron www