View
0
Download
0
Category
Preview:
Citation preview
Szkolenie z użyteczności stron
www dla beneficjentów PO RPW
Leszek Rycharski Warszawa, 2012
Powitanie
• Leszek Rycharski
– Od 2007 w branży internetowej
– Certyfikaty AdWords i Analytics
– Wygrana w konkursie na najlepszą pracę magisterską o e-marketingu
• Nieważne kim jestem, ważne CZEGO PAŃSTWO
OCZEKUJĄ?
Warszawa, 2012
Agenda
• Teoria
– Wprowadzenie do użyteczności
– Wskazówki i zasady
– Najlepsze praktyki
– Ograniczenia analizy eksperckiej
• Praktyka
– Zadania
– Konsultacje
Warszawa, 2012
Cel szkolenia
• Przekazać Państwu wiedzę podstawową, która odpowiada za
80-90% dobrego projektowania użyteczności.
Warszawa, 2012
• Na szkoleniu pod pojęciem użyteczności będziemy rozumieć:
ŁATWOŚĆ I PRZYJEMNOŚĆ Z KORZYSTANIA ZE
STRONY WWW
UŻYTECZNOŚĆ = USABILITY = USER EXPERIENCE = UX [?]
Warszawa, 2012
Czym jest użyteczność?
• Na szkoleniu pod pojęciem użyteczności będziemy rozumieć:
ŁATWOŚĆ I PRZYJEMNOŚĆ Z KORZYSTANIA ZE
STRONY WWW
UŻYTECZNOŚĆ = USABILITY = USER EXPERIENCE = UX
Duże uproszczenie, ponieważ…
[?]
Warszawa, 2012
Czym jest użyteczność?
Użyteczność (ang. usability) – własność produktów decydująca o ich jakości użytkowej. Pojęcie to odnoszone jest najczęściej do interaktywnych urządzeń, aplikacji oraz stron internetowych (jako web usability).
Norma ISO 9241 z 1998 definiuje użyteczność jako miarę wydajności, efektywności i satysfakcji użytkownika z jaką dany produkt może być używany dla osiągnięcia danych celów przez danych użytkowników w danym kontekście.
Jakob Nielsen zdefiniował usability jako zbiór 5 elementów:
• nauczalność (learnability) - jak łatwo jest wykonać proste zadania przy pierwszym kontakcie z produktem
• efektywność (efficiency) - jak szybko korzystają z produktu użytkownicy, którzy już go znają
• zapamiętywalność (memorability) - łatwość przypomnienia sobie korzystania z produktu po dłuższej przerwie
• błędy - jak często są popełniane i jak łatwo użytkownicy mogą się z nich wydobyć
• satysfakcja - jak bardzo produkt przyjemny jest w korzystaniu.
Sama użyteczność bywa używana wymiennie z user experience (UX), jednak w odróżnieniu od UX obejmuje ona tylko tę część kontaktu z produktem, dotyczącą bezpośredniego korzystania z niego.
Źródło: Wikipedia
Warszawa, 2012
Czym jest użyteczność?
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.
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ę
Źródło: Wikipedia
Warszawa, 2012
Czym jest użyteczność?
• Zapomnijmy o długich definicjach!
UŻYTECZNOŚĆ = USABILITY = USER EXPERIENCE = UX
=
ŁATWOŚĆ I PRZYJEMNOŚĆ Z KORZYSTANIA ZE
STRONY WWW
Warszawa, 2012
Użyteczność nie jest „nauką” ścisłą!
• Nie istnieją zasady uniwersalne
• Nie istnieje jedyna słuszna odpowiedź
• Stronę można zrobić na milion różnych sposobów i każdy
wariant będzie dobry
• Nie ma stron idealnych. Każda ma wady
Warszawa, 2012
Użyteczność nie jest „nauką” ścisłą!
• Nie istnieją zasady uniwersalne
• Nie istnieje jedyna słuszna odpowiedź
• Stronę można zrobić na milion różnych sposobów i każdy
wariant będzie dobry
• Nie ma stron idealnych. Każda ma wady
• Nawet specjaliści mogą różnić się w swoich opiniach Dowód
Warszawa, 2012
Użyteczność nie jest „nauką” ścisłą!
Pierwsze wrażenia na temat - serwisu Tomasza Lisa
Mój pierwszy kontakt z serwisem wywołał swego rodzaju „efekt wow”. Inny
układ informacyjny, dużo zdjęć dobrej jakości, żywa kolorystyka. Spodobały
mi się również komentarze w postaci wtyczek Facebooka, ponieważ sprawia
to, że użytkownicy nie są anonimowi, a tym samym zamieszczają bardziej
przemyślane wypowiedzi.
Piotr Jordanowski, Symetria
Zaraz po wejściu na stronę NaTemat.pl sprawdziłam ustawienia przeglądarki
– zastanawiałam się, czy przypadkiem nie mam włączonego zoom'a. Nie
miałam, lecz takie wrażenie pozostało. Czcionka zastosowana w nagłówkach
jest tak duża, że aż utrudnia przeglądanie. Na ekranie mieści mi się tylko
jedna zajawka artykułu, co znacznie utrudnia przeglądanie treści portalu - a
jest jej dużo.
Małgorzata Pujszo, Digital One
Źródło: Interaktywnie.com
Warszawa, 2012
Heurystyki Nielsena
• Dziesięć zasad uważanych za kanon użyteczności na świecie
1. Widoczność stanu systemu
2. Dostosuj system do świata rzeczywistego
3. Poczucie kontroli i swoboda wyboru
4. Spójność i standardy
5. Zapobieganie błędów
6. Rozpoznawanie zamiast zapamiętywania
7. Elastyczność i wydajność
8. Estetyka i umiar
9. Obsługa błędów
10. Pomoc i dokumentacja
• Nie zawsze wszystkie zasady odnoszą się do danej strony
Warszawa, 2012
Heurystyki Nielsena: A co to znaczy heurystyka?
• Nieprzypadkowo mamy do czynienia z heurystykami a nie
zasadami
• Heurystyka (gr. heurisko – znajduję) – w języku logiki
umiejętność wykrywania nowych faktów oraz znajdowania
związków między faktami, zwłaszcza z wykorzystaniem
hipotez. Na podstawie istniejącej wiedzy stawia się hipotezy,
których nie trzeba udowadniać.
• Dopiero na podstawie heurystyk mogą być tworzone zasady
Warszawa, 2012
Heurystyki Nielsena: #1 Widoczność stanu systemu
• Użytkownik chce wiedzieć co się właśnie dzieje
• Po każdej akcji użytkownik powinien otrzymać informację
zwrotną od serwisu. Gdy dodajemy produkt do koszyka w
sklepie internetowym, powinniśmy zobaczyć komunikat, który
potwierdza dokonanie akcji. Gdy przelewamy pieniądze przez
Internet, powinniśmy otrzymać komunikat, że transakcja
została wykonana. Gdy wypełniliśmy formularz kontaktowy,
powinniśmy być poinformowani, że został on wysłany. Gdy
wysyłamy maila, powinniśmy widzieć, że wiadomość została
wysłana.
Warszawa, 2012
Heurystyki Nielsena: #1 Widoczność stanu systemu
Użytkownik zmienił stan systemu
1
1
2
1 – Co przed chwilą się zmieniło
2 – Obecny stan systemu
Warszawa, 2012
Heurystyki Nielsena: #1 Widoczność stanu systemu
System jest „zajęty”
1
1 – System informuje, że należy czekać
Warszawa, 2012
Heurystyki Nielsena: #1 Widoczność stanu systemu
1
Stan systemu zmieniony przez system
1 – System informuje o niepowodzeniu transakcji
Warszawa, 2012
Heurystyki Nielsena: #1 Widoczność stanu systemu
System może wykroczyć poza system informatyczny
1 – Realizacja zamówienia odbywa się w świecie
rzeczywistym
1
Warszawa, 2012
Heurystyki Nielsena: #2 Dostosuj system do świata
rzeczywistego
• System powinien mówić językiem użytkownika
• Należy opierać na konwencji użytkownika
Warszawa, 2012
Heurystyki Nielsena: #2 Dostosuj system do świata
rzeczywistego Używanie języka użytkownika
1 – Dni tygodnia zamiast dat
1
Warszawa, 2012
Heurystyki Nielsena: #2 Dostosuj system do świata
rzeczywistego Nieużywanie języka użytkownika
1 – Czym jest RCNT?
1
Warszawa, 2012
Heurystyki Nielsena: #2 Dostosuj system do świata
rzeczywistego Użytkownik zachowuje się inaczej niż byśmy się tego spodziewali.
Źródło: Steve Krug, Nie każ mi myśleć
Warszawa, 2012
Heurystyki Nielsena: #2 Dostosuj system do świata
rzeczywistego
• Użytkownicy nie czytają stron, oni je przeglądają
• W momencie znalezienia pierwszej satysfakcjonującej
strony (nie najlepszej) odpowiedzi użytkownik kończy
poszukiwania.
Warszawa, 2012
Heurystyki Nielsena: #3 Poczucie kontroli i swoboda
wyboru
• Internauta chce mieć swobodę podczas spędzania czasu na
stronie ani nie chce się obawiać, że wykonanie pewnej akcji
ograniczy tą swobodę.
• Należy pozwalać mu zmieniać zdanie czy cofać wcześniejsze
decyzje.
• Chodzi o poczucie kontroli użytkownika, dlatego
udostępnienia zbyt dużej liczby możliwości (mnogość
wyboru) również może być traktowane jako utrata kontroli.
Warszawa, 2012
Heurystyki Nielsena: #3 Poczucie kontroli i swoboda
wyboru
1
1 – Rozwiewa wątpliwość, że przejście do kasy odcina możliwość zmiany decyzji
Warszawa, 2012
Heurystyki Nielsena: #3 Poczucie kontroli i swoboda
wyboru
1
1 – Umożliwia przywrócenie przypadkiem usuniętej pisanej wiadomości
Warszawa, 2012
Heurystyki Nielsena: #4 Spójność i standardy
• Nie warto wymyślać koła na nowa.
• Stosowanie powszechnie używanych konwencji umożliwia
szybszą nawigację po stronie.
• Użytkownicy nie powinni się zastanawiać, czy zastosowanie
danego słowa, sytuacji lub działania oznaczają to samo.
Warszawa, 2012
Heurystyki Nielsena: #4 Spójność i standardy
• PRZYKŁADY:
– Logo w lewym górnym rogu, które linkuje do strony głównej.
– „Domek” jako symbol strony głównej
– „Koszyk” i „kasa” w sklepie internetowym.
– Górne lub boczne menu nawigacyjne.
Warszawa, 2012
Heurystyki Nielsena: #4 Spójność i standardy
• Standardy to rzecz umowna – mogą się zmieniać!
– Dlaczego w lewym górnym rogu? Bo kultura zachodnia czyta z lewej
do prawej z góry do dołu. Gdyby Japończycy lub Arabowie pierwsi
stworzyli Internet standardem mogło być logo w prawym górnym rogu
– Standardem staje się wstawiania oznakowania PO RPW w stopce.
Dlaczego? Bo tam najłatwiej było dodać oznakowanie, gdy strona już
istniała
– W e-commerce dlaczego koszyk, a nie wózek?
Warszawa, 2012
Heurystyki Nielsena: #5 Zapobieganie błędom
• Zamiast pisać dobre komunikaty o błędach lepiej zapobiegać
ich występowaniu.
Warszawa, 2012
Heurystyki Nielsena: #5 Zapobieganie błędom
1
1 – Pokazuje błąd zanim formularz zostanie wysłany. Można to było zrobić lepiej
Warszawa, 2012
Heurystyki Nielsena: #5 Zapobieganie błędom
1
1 – Trzy różne wariacje uznane jako właściwe. Dopiero ponad 5 cyfr uznawane jest za błąd
Warszawa, 2012
Heurystyki Nielsena: #5 Zapobieganie błędom
1
1 – Przy każdym polu pojawiają się porady i wyjaśnienia osobno
2 – Pod częścią pól pojawiają się wyraźne instrukcje.
1 2
Warszawa, 2012
Heurystyki Nielsena: #5 Zapobieganie błędom
1 – Ten błąd można było wykluczyć poprzez inną konstrukcję pytania w ankiecie
1
Warszawa, 2012
Heurystyki Nielsena: #6 Rozpoznawanie zamiast
zapamiętywania
• Należy zminimalizować wykorzystywanie pamięci
użytkownika poprzez pokazywanie obiektów.
• Nie można wymagać od użytkownika, by pamiętał informacje
między jedną, a drugą częścią interfejsu.
• Instrukcje i pomoc powinny być zawsze widoczne i łatwo
dostępne tam, gdzie są potrzebne.
Warszawa, 2012
Heurystyki Nielsena: #6 Rozpoznawanie zamiast
zapamiętywania
1
1 – Prosty przykład – Zmiana koloru linków wskazuje, że dana strona była odwiedzona
Warszawa, 2012
Heurystyki Nielsena: #6 Rozpoznawanie zamiast
zapamiętywania
1 – Onet nie wskazuje na wcześniej odwiedzone strony.
1
Dlaczego portal, który zatrudnia dział UX
nie wprowadził takiej funkcjonalności?
Kto zna odpowiedź?
Warszawa, 2012
Heurystyki Nielsena: #6 Rozpoznawanie zamiast
zapamiętywania
1 – Link4 przekaz słowny wspomaga grafiką
2 – oraz zdjęciem.
1
1
2
Warszawa, 2012
Heurystyki Nielsena: #6 Rozpoznawanie zamiast
zapamiętywania
1 – Empik.com pokazuje, czego ostatnio wyszukiwaliśmy i jakie produkty przeglądaliśmy.
2 – A także pokazuje, co jeszcze może nas zainteresować.
1
2
Warszawa, 2012
Heurystyki Nielsena: #7 Elastyczność i wydajność
• Na pierwszym planie powinny być widoczny funkcje
elementarne.
• Opcje zaawansowane dla doświadczonego użytkownika też
powinny być łatwo dostępne, ale ich ekspozycja nie może
odbywać się kosztem funkcji podstawowych.
Warszawa, 2012
Heurystyki Nielsena: #7 Elastyczność i wydajność
1
2
1
2
1 – Podstawowe funkcje widoczne od razu.
2 – Funkcje zaawansowane dostępne są dopiero, jak się użytkownik zagłębi.
Warszawa, 2012
Heurystyki Nielsena: #8 Estetyka i umiar
• Interface nie powinien zawierać informacji, które są nieistotne
lub rzadko potrzebne.
• Każda dodatkowa jednostka informacji w interfejsie konkuruje
z właściwymi jednostkami i zmniejsza ich względna
widoczność.
Warszawa, 2012
Heurystyki Nielsena: #8 Estetyka i UMIAR
Mówiąc o estetyce tak wygląda strona samego Nielsena. Co Państwo niej sądzicie?
Warszawa, 2012
Heurystyki Nielsena: #8 ESTETYKA i umiar
Badania w Japonii wykazały, że ludzie chętniej wypłacali pieniądze z bankomatów, które
miały ładniejszy interface.
Warszawa, 2012
Heurystyki Nielsena: #9 Obsługa błędów
• Komunikaty błędów powinny być wyrażone w zrozumiałym
języku (bez kodów systemu), dokładnie wskazać problem i
zaproponować konstruktywne rozwiązanie.
Warszawa, 2012
Heurystyki Nielsena: #9 Obsługa błędów
1
1 – Jakiej „prośby”? Nieudolne tłumaczenie „request”. Kod błędu: 1? Nic nam nie mówi!
Warszawa, 2012
Szkolenie z użyteczności stron www dla beneficjentów PO RPW 48
Heurystyki Nielsena: #10 Pomoc i dokumentacja
• Najlepiej, gdy system można stosować bez dokumentacji.
Niestety nie zawsze jest to możliwe.
• Wszelkie informacje dotyczące pomocy i dokumentacji
powinny być łatwe do wyszukania, koncentrować się na
zadaniu użytkownika (kontekstowe), zawierać wykaz
konkretny kroków, które mają być przeprowadzone, ale przy
tym nie mogą być zbyt obszerne.
Warszawa, 2012
Heurystyki Nielsena: #10 Pomoc i dokumentacja
1
1
1 – Najlepsza jest pomoc kontekstowa generowana dynamicznie.
Warszawa, 2012
Heurystyki Nielsena: ZADANIE
• Proszę ocenić wskazane strony wg 10 heurystyk Nielsena
• Materiały do zadania znajduję się w …
• Praca w grupach
• 15 minut na przygotowanie odpowiedzi
• Omówienie wyników przed wszystkimi uczestnikami
Warszawa, 2012
Najlepszy praktyki
• Heurystyki heurystykami, ale czy istnieją jakieś sprawdzone
najlepsze sposoby?
• Przyjrzyjmy się najpopularniejszym serwisom w Polsce:
– Google.pl (86%)
– Youtube.com (70%)
– Facebook.com (67%)
– Onet.pl (64%)
– Allegro.pl (56%)
– Wikipedia.org (48%)
– Chomikuj.pl (31%)
– Demotywatory.pl (24%)
– Zumi.pl (22%)
Źródło: Megapanel, marzec 2012
Warszawa, 2012
Najlepszy praktyki: Google Warszawa, 2012
Najlepszy praktyki: Youtube Warszawa, 2012
Najlepszy praktyki: Facebook Warszawa, 2012
Najlepszy praktyki: Onet Warszawa, 2012
Najlepszy praktyki: Allegro Warszawa, 2012
Najlepszy praktyki: Wikipedia Warszawa, 2012
Najlepszy praktyki: Chomikuj Warszawa, 2012
Najlepszy praktyki: Demotywatory Warszawa, 2012
Najlepszy praktyki: Zumi Warszawa, 2012
Najlepszy praktyki: ZADANIE
• Proszę wypisać jak najwięcej cech wspólnych omawianych
serwisów
• Materiały do zadania znajduję się w …
• 6 minut
• Wygrywa osoba, która znajdzie najwięcej cech wspólnych
Warszawa, 2012
Najlepszy praktyki: ROZWIĄZANIA ZADANIA
• Na pewno
– Język polski
– Wyszukiwarki (nawet na Chomikuj jest „Znajdź Chomika”)
• Prawie
– Logo u góry (z lewej x7 lub po środku x2)
– Białe tło (x6)
– Menu u góry lub z lewej (wyłączywszy Chomikuj)
– Reklamy (x5, x6 z YT, x7 z wiki i YT)
Warszawa, 2012
Najlepsze praktyki: NAJPIERW ZDEFINIUJ CEL
• Użyteczność nie ma znaczenia, gdy nie
umiemy udzielić odpowiedzi na pytania:
– Dlaczego robimy stronę internetową?
– Jaki cel strona ma realizować?
Warszawa, 2012
Najlepsze praktyki: Pamiętają Państwo przykład z
Onetem?
• Onet celowo nie pokazuje, gdzie użytkownik był, bo jeszcze
raz wejdzie. Każda odsłona to dodatkowa powierzchnia
reklamowa do sprzedaży.
• Onet z premedytacją zmniejsza użyteczność, by generować
więcej odsłon, czyli więcej zarabiać.
Warszawa, 2012
Najlepsze praktyki: Kiedy znamy cel tworzymy najlepsze
rozwiązania
Warszawa, 2012
Najlepsze praktyki: Kiedy znamy cel tworzymy najlepsze
rozwiązania
1
1
1
1
1 – kolor wskazuje w sekcji, którego województwa się znajdujemy
Warszawa, 2012
Najlepsze praktyki: Treść > Usability
• Zawartość jest ważniejsza od formy
Dobre UX Słabe UX
Dobra treść Dobra strona Słaba strona
Słaba treść Słaba strona Beznadziejna strona
Warszawa, 2012
Najlepsze praktyki: Usability > Estetyki
• Użytkownik odwiedza stronę z konkretnym celem, którym z
pewnością nie jest zachwycanie się piękną szatą graficzną.
• Estetyka strony to kwestia gustu
Warszawa, 2012
Najlepsze praktyki: Usability > Estetyki Warszawa, 2012
Najlepsze praktyki: Usability > Estetyki Warszawa, 2012
ZADANIA: Projekt strony a jej cel
• Proszę otworzyć plik …
• Materiały do zadania znajduję się w …
• Proszę zaprojektować stronę internetową z podanych
elementów, wiedząc, że…
• 15-20 minut na przygotowanie odpowiedzi
• Omówienie wyników przed wszystkimi uczestnikami
Warszawa, 2012
Ograniczenia analizy eksperckiej
• Ekspert jest jeden
• Ekspert wie za dużo
• ROZWIĄZANIE:
– Badania z użytkownikami
– Badania eyetracking
– Monitorowanie statystyk w serwisie
Warszawa, 2012
Ograniczenia analizy eksperckiej: Badania z
użytkownikami
• Kilku użytkowników ma wykonać określone zadanie na stronie zdefiniowane przez badacza np. – Kupić prezent dla mamy w sklepie internetowym
– Zapisać się na newsletter
– Znaleźć określone informacje
• Nieocenione źródło wiedzy o stronie, ale trzeba uważać na zróżnicowanie typów badanych
• Minusem są także „warunki laboratoryjne” – badani wiedzą, że są obserwowani.
Warszawa, 2012
Ograniczenia analizy eksperckiej: Eyetracking
• Kilku użytkowników ma wykonać określone zadania, ale tym
razem śledzony jest ruch gałek ocznych, bo zidentyfikować na
co patrzą.
• Minusy: kosztowne w przeprowadzeniu / wcale nie eliminuje
problemów związanych z warunkami laboratoryjnymi
Warszawa, 2012
Ograniczenia analizy eksperckiej: Eyetracking Warszawa, 2012
Ograniczenia analizy eksperckiej: Monitorowanie
statystyk
• Google Analytics
– Liczba użytkowników
– Źródła odwiedzin (też frazy z Google)
– Obejrzane podstrony
– Długość pobytu na stronie
– „Ucieczki”
– Wykonanie określonych celów
• Google Analytics jest darmowy i najlepszy. Nie warto
stosować czegoś innego!
Warszawa, 2012
Ograniczenia analizy eksperckiej: Monitorowanie
statystyk
• Stat24 emituje reklamy!
1
1 – Pojawia się reklama komercyjnego serialu na stronie urzędu. Użytkownik może to
pomylić z inicjatywą samego urzędu.
Warszawa, 2012
Użyteczność nie jest „nauką” ścisłą!
• PROSZĘ NIE WIERZYĆ WE WSZYSTKO, CO
POWIEDZIAŁEM!
Warszawa, 2012
Użyteczność nie jest „nauką” ścisłą!
• Ja mogę nie mieć racji
• Państwo mogą nie mieć racji
• Ale rację zawsze mają…
Warszawa, 2012
Użyteczność jest „nauką” humanistyczną!
• … użytkownicy Państwa strony
Warszawa, 2012
Podsumowanie
• Użyteczność to łatwość i przyjemność korzystania ze strony
internetowej
• Tworząc stronę należy pamiętać, że najważniejsze jest
zdefiniowanie CELU
– Na podstawie CELU przygotowana jest treść
– Pod treść budowany jest projekt UX strony
– Na samym końcu tworzy się grafikę
Warszawa, 2012
Kontakt
Leszek Rycharski
Leszek.rycharski@they.pl
+48 664 145 280
Warszawa, 2012
Recommended