Szkolenie z użyteczności stron www dla …porpw.parp.gov.pl/files/74/151/278/561/14084.pdfmi się...

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ć:


STRONY WWW

UŻYTECZNOŚĆ = USABILITY = USER EXPERIENCE = UX

Duże uproszczenie, ponieważ…

[?]

Warszawa, 2012


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


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


• Zapomnijmy o długich definicjach!

UŻYTECZNOŚĆ = USABILITY = USER EXPERIENCE = UX

=


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


• 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


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


Użytkownik zmienił stan systemu

1

1

2

1 – Co przed chwilą się zmieniło

2 – Obecny stan systemu

Warszawa, 2012


System jest „zajęty”

1

1 – System informuje, że należy czekać

Warszawa, 2012


1

Stan systemu zmieniony przez system

1 – System informuje o niepowodzeniu transakcji

Warszawa, 2012


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


rzeczywistego Używanie języka użytkownika

1 – Dni tygodnia zamiast dat

1

Warszawa, 2012


rzeczywistego Nieużywanie języka użytkownika

1 – Czym jest RCNT?

1

Warszawa, 2012


rzeczywistego Użytkownik zachowuje się inaczej niż byśmy się tego spodziewali.

Źródło: Steve Krug, Nie każ mi myśleć

Warszawa, 2012


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


wyboru

1

1 – Rozwiewa wątpliwość, że przejście do kasy odcina możliwość zmiany decyzji

Warszawa, 2012


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


• 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


• 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


1

1 – Pokazuje błąd zanim formularz zostanie wysłany. Można to było zrobić lepiej

Warszawa, 2012


1

1 – Trzy różne wariacje uznane jako właściwe. Dopiero ponad 5 cyfr uznawane jest za błąd

Warszawa, 2012


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


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


zapamiętywania

1

1 – Prosty przykład – Zmiana koloru linków wskazuje, że dana strona była odwiedzona

Warszawa, 2012


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


zapamiętywania

1 – Link4 przekaz słowny wspomaga grafiką

2 – oraz zdjęciem.

1

1

2

Warszawa, 2012


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


• 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

ZADANIA: Projekt strony a jej cel

• Proszę otworzyć plik …


• 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


• PROSZĘ NIE WIERZYĆ WE WSZYSTKO, CO

POWIEDZIAŁEM!

Warszawa, 2012


• 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

[email protected]

+48 664 145 280

Warszawa, 2012

mailto:[email protected]

Szkolenie z użyteczności stron www dla …porpw.parp.gov.pl/files/74/151/278/561/14084.pdfmi się...

Documents

Transcript of Szkolenie z użyteczności stron www dla …porpw.parp.gov.pl/files/74/151/278/561/14084.pdfmi się...