Szkolenie z użyteczności stron www dla beneficjentów PO RPW. Leszek Rycharski Warszawa, 2012

Transkrypt

1 Szkolenie z użyteczności stron www dla beneficjentów PO RPW Leszek Rycharski

2 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Ą?

3 Agenda Teoria Wprowadzenie do użyteczności Wskazówki i zasady Najlepsze praktyki Ograniczenia analizy eksperckiej Praktyka Zadania Konsultacje

4 Cel szkolenia Przekazać Państwu wiedzę podstawową, która odpowiada za 80-90% dobrego projektowania użyteczności.

5 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

6 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ż

7 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

8 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

9 Czym jest użyteczność? Zapomnijmy o długich definicjach! UŻYTECZNOŚĆ = USABILITY = USER EXPERIENCE = UX = ŁATWOŚĆ I PRZYJEMNOŚĆ Z KORZYSTANIA ZE STRONY WWW

10 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

11 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

12 Użyteczność nie jest nauką ścisłą! Pierwsze wrażenia na temat - serwisu Tomasza Lisa Piotr Jordanowski, Symetria 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. 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

13 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

14 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

15 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.

16 Heurystyki Nielsena: #1 Widoczność stanu systemu Użytkownik zmienił stan systemu Co przed chwilą się zmieniło 2 Obecny stan systemu

17 Heurystyki Nielsena: #1 Widoczność stanu systemu System jest zajęty 1 1 System informuje, że należy czekać

18 Heurystyki Nielsena: #1 Widoczność stanu systemu Stan systemu zmieniony przez system 1 1 System informuje o niepowodzeniu transakcji

19 Heurystyki Nielsena: #1 Widoczność stanu systemu System może wykroczyć poza system informatyczny 1 1 Realizacja zamówienia odbywa się w świecie rzeczywistym

20 Heurystyki Nielsena: #2 Dostosuj system do świata rzeczywistego System powinien mówić językiem użytkownika Należy opierać na konwencji użytkownika

21 Heurystyki Nielsena: #2 Dostosuj system do świata rzeczywistego Używanie języka użytkownika 1 1 Dni tygodnia zamiast dat

22 Heurystyki Nielsena: #2 Dostosuj system do świata rzeczywistego Nieużywanie języka użytkownika 1 1 Czym jest RCNT?

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

24 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.

25 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.

26 Heurystyki Nielsena: #3 Poczucie kontroli i swoboda wyboru 1 1 Rozwiewa wątpliwość, że przejście do kasy odcina możliwość zmiany decyzji

27 Heurystyki Nielsena: #3 Poczucie kontroli i swoboda wyboru 1 1 Umożliwia przywrócenie przypadkiem usuniętej pisanej wiadomości

28 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.

29 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.

30 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?

31 Heurystyki Nielsena: #5 Zapobieganie błędom Zamiast pisać dobre komunikaty o błędach lepiej zapobiegać ich występowaniu.

32 Heurystyki Nielsena: #5 Zapobieganie błędom 1 1 Pokazuje błąd zanim formularz zostanie wysłany. Można to było zrobić lepiej

33 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

34 Heurystyki Nielsena: #5 Zapobieganie błędom Przy każdym polu pojawiają się porady i wyjaśnienia osobno 2 Pod częścią pól pojawiają się wyraźne instrukcje.

35 Heurystyki Nielsena: #5 Zapobieganie błędom 1 1 Ten błąd można było wykluczyć poprzez inną konstrukcję pytania w ankiecie

36 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.

37 Heurystyki Nielsena: #6 Rozpoznawanie zamiast zapamiętywania 1 1 Prosty przykład Zmiana koloru linków wskazuje, że dana strona była odwiedzona

38 Heurystyki Nielsena: #6 Rozpoznawanie zamiast zapamiętywania 1 Dlaczego portal, który zatrudnia dział UX nie wprowadził takiej funkcjonalności? Kto zna odpowiedź? 1 Onet nie wskazuje na wcześniej odwiedzone strony.

39 Heurystyki Nielsena: #6 Rozpoznawanie zamiast zapamiętywania Link4 przekaz słowny wspomaga grafiką 2 oraz zdjęciem.

40 Heurystyki Nielsena: #6 Rozpoznawanie zamiast zapamiętywania Empik.com pokazuje, czego ostatnio wyszukiwaliśmy i jakie produkty przeglądaliśmy. 2 A także pokazuje, co jeszcze może nas zainteresować.

41 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.

42 Heurystyki Nielsena: #7 Elastyczność i wydajność Podstawowe funkcje widoczne od razu. 2 Funkcje zaawansowane dostępne są dopiero, jak się użytkownik zagłębi.

43 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ść.

44 Heurystyki Nielsena: #8 Estetyka i UMIAR Mówiąc o estetyce tak wygląda strona samego Nielsena. Co Państwo niej sądzicie?

45 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.

46 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.

47 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!

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. Szkolenie z użyteczności stron www dla beneficjentów PO RPW 48

49 Heurystyki Nielsena: #10 Pomoc i dokumentacja Najlepsza jest pomoc kontekstowa generowana dynamicznie.

50 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

51 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

52 Najlepszy praktyki: Google

53 Najlepszy praktyki: Youtube

54 Najlepszy praktyki: Facebook

55 Najlepszy praktyki: Onet

56 Najlepszy praktyki: Allegro

57 Najlepszy praktyki: Wikipedia

58 Najlepszy praktyki: Chomikuj

59 Najlepszy praktyki: Demotywatory

60 Najlepszy praktyki: Zumi

61 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

62 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)

63 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ć?

64 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ć.

65 Najlepsze praktyki: Kiedy znamy cel tworzymy najlepsze rozwiązania

66 Najlepsze praktyki: Kiedy znamy cel tworzymy najlepsze rozwiązania kolor wskazuje w sekcji, którego województwa się znajdujemy

67 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

68 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

69 Najlepsze praktyki: Usability > Estetyki

70 Najlepsze praktyki: Usability > Estetyki

71 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 minut na przygotowanie odpowiedzi Omówienie wyników przed wszystkimi uczestnikami

72 Ograniczenia analizy eksperckiej Ekspert jest jeden Ekspert wie za dużo ROZWIĄZANIE: Badania z użytkownikami Badania eyetracking Monitorowanie statystyk w serwisie

73 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.

74 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

75 Ograniczenia analizy eksperckiej: Eyetracking

76 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!

77 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.

78 Użyteczność nie jest nauką ścisłą! PROSZĘ NIE WIERZYĆ WE WSZYSTKO, CO POWIEDZIAŁEM!

79 Użyteczność nie jest nauką ścisłą! Ja mogę nie mieć racji Państwo mogą nie mieć racji Ale rację zawsze mają

80 Użyteczność jest nauką humanistyczną! użytkownicy Państwa strony

81 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ę

82 Kontakt Leszek Rycharski