Zarządzanie treścią (CMS)

Transkrypt

1 (CMS) Wykład 06: Użyteczność Systemów Zarządzania Treścią dr inż. Mariusz Trzaska,

2 Wykorzystane materiały M. Kasperski, A. Boguska-Torbicz: Projektowanie stron WWW. Użyteczność w praktyce. ISBN: Helion wanie_stron_www_uzytecznosc_ w_praktyce_marek_kasperski_an na_boguska_torbicz,wwprot.htm 2

3 Zagadnienia Użyteczność Wprowadzenie do projektowania witryn Testy użyteczności Najczęstsze błędy Prototypowanie Badania Podsumowanie 3

4 Użyteczność Nauka zajmująca się ergonomią interaktywnych urządzeń oraz aplikacji (źródło: Wikipedia): o Intuicyjna nawigacja, o Ułatwienia w dostępie do poszukiwanej informacji, o zapewnienie zrozumiałej dla użytkownika komunikacji. Ergonomia (wg normy ISO 9241) miara: o wydajności, o efektywności o satysfakcji użytkownika z jaką dany produkt może być używany dla osiągnięcia określonych celów przez określonych użytkowników.

5 Użyteczność (2) Kryteria oceny: o Łatwość użycia o Efektywność o Łatwość zapamiętywania o Błędy: Ile? Jak poważne? Czy nastąpiła utrata danych? Naprawianie o Przyjemność Czy osiągnęliśmy swój cel?

6 Użyteczność (3) Kluczowa cecha dla IU (UI) w tym GIU (GUI) Jeżeli: o Strona www jest trudna w użyciu, o Nie wiadomo do czego służy i co oferuje, o Użytkownik się zagubi na stronie, o Informacje są trudne do odnalezienia, Użytkownik odejdzie do konkurencji! A tej przeważnie nie brakuje

7 Użyteczność (4) e-commerce: jeżeli klient nie będzie w stanie znaleźć towaru to nie będzie w stanie też go kupić Intranet: pracownicy korzystający ze stron o niskiej użyteczności są mniej wydajni - bo marnują czas (czyli pieniądze) na walkę ze źle zaprojektowanym serwisem.

8 Układ strony Pionowy, np. artykuły. Poziomy, np. galerie zdjęć. Centralny (bez pasków przewijania). Różne lokalizacje menu oraz treści o (wielo) kolumnowe (asymetryczne), o Stałe/zmienne rozmiary (szerokość), 8

9 Układ strony (2) Zagospodarowanie przestrzeni o Stała szerokość o Fluid 9

10 Układ strony (3) Zagospodarowanie przestrzeni c. d. o Responsive layout 10

11 Układ strony (4) o Responsive layout c. d. HTML5 CSS3 (Media Queries) Więcej informacji, np.: screen and (device-aspect-ratio: 16/9) { screen and (device-aspect-ratio: 32/18) { screen and (device-aspect-ratio: 1280/720) { screen and (min-width: 500px) and (max-width: 800px) {... all and (orientation: portrait) {... } 11

12 Układ strony (5) Zagospodarowanie przestrzeni c.d o Responsive layout, użyteczne framework i, np.: (Twitter) Bootstrap Skeleton HTML5 Boilerplate Foundation HTML KickStart 12

13 Układ strony (6) Nawigacja o Gdzie jestem? o Gdzie mogę pójść? o Jak się tam dostanę? o Jak mogę wrócić? o Gdzie już byłem? 13

14 Układ strony (7) Lokalizacja menu głównego (badania Jakoba Nielsena z 2002): o Pasek nawigacji po lewej 30% o Zakładki 30% o Łącza u góry strony 18% o Kategorie pośrodku strony 12% o Manu kaskadowe 10% o Inne 6% Dziś może to wyglądać inaczej (popularne rozwiązania z menu z prawej strony blogi). 14

15 Układ strony (8) Logo. Lewy, górny róg linkowany do strony głównej. Wyszukiwarka. Potencjalne problemy niektórych użytkowników w rozróżnieniu witryny i globalnej wyszukiwarki. Logowanie/rejestracja. 15

16 Elementy GUI Przyciski o Kształt o Styl o Kolor o Czcionka o Symbole Hiperłącza o Kolorystyka odwiedzonych linków 16

17 Elementy GUI (2) Text field Text area Droplist/Combobox Check box Radio button Pasek przewijania Wskaźnik postępu (spinner) o Kursory Ikony i metafory 17

18 Reklama Różne formy reklamowe o Full banner: 468 x 60 o Half Banner: 234 x 60 o Button: 120 x 90, 120 x 60 o Vertical Banner: 120 x 240 o Square Banner: 160 x 150, 180 x 200, o o Pełnoekranowe/zasłaniające treść. Skuteczność reklamy, a irytowanie użytkowników. 18

19 Reklama (2) Ważne czynniki: o Czytelność dla oka i umysłu (prostota przekazu) o Wezwanie do działania ( kliknij tutaj ) o Animacja poprawia efekt (ale bez przesady) o Uwaga na sztuczki (udawanie treści przez reklamę) o Dopasowanie do grupy docelowej Ślepota na banery 19

20 Czcionki Szeryfowe o Times New Roman o Times o Georgia o Baskerville o Garamond Bezszeryfowe o Arial, Helvetica o Verdana 20

21 Czcionki (2) Najpopularniejsze czcionki w Internecie (za J. Nielsen, 2007): o Arial (czytelna gdy rozmiar > 10) o Georgia (czytelna gdy rozmiar > 10) o Times New Roman (czytelna gdy rozmiar > 12) o Verdana (sprawdza się nawet gdy rozmiar < 10) Rozmiar o Piksele o Punkty o Em o Procenty 21

22 Czcionki (3) Rozmiar c.d. o W przybliżeniu: 1em = 12pt = 16px = 100% o Zaleca się używać em ów lub %. Źródło: 22

23 Czcionki (4) Kolory o Właściwy kontrast! o Ciemny kolor czcionki na jasnym tle. o Uwaga na kontrast negatywowy - obniża czytelność o 10%-40%. o Narzędzia html 23

24 Czcionki (5) Narzędzia c.d. o Lorem ipsum: o Type tester: o o 24

25 Błędy Komunikaty błędów o Techniczne o Popularne /żartobliwe Propozycja rozwiązania problemu Widoczność komunikatu o Kolor o Czcionka o Grafika Spójność komunikatów 25

26 Formularze Wypełnianie formularzy należy do najmniej lubianych czynności Właściwa motywacja użytkownika Minimalna/Niezbędna (!!!) liczba pól obowiązkowych Właściwy rozmiar pól Czytelny rozkład elementów 26

27 Formularze (2) Opcjonalne opisy Pogrupowane pola Podział na etapy (przy dużej liczbie pól) Możliwość powrotu do wprowadzonych danych Natychmiastowe (AJAX) walidowanie pól Czytelny komunikat o zakończeniu procesu 27

28 Testy użyteczności Testy z wykorzystaniem użytkowników: o Reprezentatywność testujących o Scenariusz - realizacja konkretnych (typowych) zadań o Obserwowanie: Co użytkownicy robią? W których miejscach mają trudności? Rejestrowanie, np. kamera, specjalne programy.

29 Testy użyteczności (2) o Testujący powinni być zdani tylko na siebie - całkowity zakaz: udzielania rad, podpowiadania, pomagania, itp.

30 Testy użyteczności (3) Liczba testujących o Inaczej niż w badaniach statystycznych, nie zawsze wymagana jest duża liczba osób, o Zwykle grupa 5-ciu osób jest w stanie wychwycić główne problemy związane z użytecznością, o Osoby w liczniejszych grupach przeważnie identyfikują te same problemy, o Lepiej iteracyjnie ulepszać projekt i testować go na małych grupach.

31 Testy użyteczności (4) Ważniejsze jest obserwowanie co testujący robią niż wysłuchanie ich późniejszego komentarza (który oczywiście też może być użyteczny). Zanim zaczniemy nowy projekt, przetestujmy jego poprzednią wersję (oczywiście gdy jakaś była): o Zidentyfikujmy pozytywne i negatywne elementy, o Rozbudujmy te pierwsze i wyeliminujmy te drugie. Przetestowanie rozwiązań konkurencji,

32 Testy użyteczności (5) Wykorzystanie prototypu: o Papierowego, o Komputerowego Praca iteracyjna każda iteracja kończy się testami Sprawdzenie projektu w kontekście znanych zaleceń dotyczących użyteczności.

33 Testy użyteczności (6) Wydanie 10% budżetu na testy użyteczności może spowodować dwukrotny wzrost miar jakości serwisu: o Skrócenie czasu szkoleń o połowę i dwukrotne podniesienie liczby operacji wykonywanych przez pracowników w ciągu godziny o Podwojenie sprzedaży, zarejestrowanych użytkowników, itp.

34 Użyteczność - najczęstsze błędy na stronach www Niewykorzystywanie całej powierzchni okna (stała szerokość strony). Nadużywanie plików PDF: o Informacje on-line nie powinny być wyświetlane jako PDF, o Pliki PDF są wygodne do dystrybucji informacji oraz drukowania, o Problemy z nawigacją (niespójność ze stroną www)

35 Użyteczność - najczęstsze błędy na stronach www (2) Brak kolorowania odwiedzonych linków Ściana tekstu, brak wykorzystania: o Nagłówków, o List, o Krótkich paragrafów Konstrukcja strony uniemożliwiająca zmianę wielkości liter

36 Użyteczność - najczęstsze błędy na stronach www (3) Niewłaściwe tytuły stron o Dezorientacja użytkownika, o Błędne działanie wyszukiwarek, o Konieczność edycji przed dodaniem do Ulubionych, o Ważne z punktu widzenia SEO, o Nieodpowiedni tytuł okna w systemie (ponieważ przeważnie pochodzi on właśnie od tytułu strony).

37 Użyteczność - najczęstsze błędy na stronach www (4) Upodabnianie treści do reklam o Kształt lub lokalizacja podobna do banera o Nachalna animacja o Wyskakujące okna

38 Użyteczność - najczęstsze błędy na stronach www (5) Brak spójności o Nieoczekiwany sposób obsługi, nawigowania, itp. o Użytkownicy formułują swoje oczekiwania na podstawie tego co już widzieli Automatyczne otwieranie odnośników (links) w nowych oknach

39 Użyteczność - najczęstsze błędy na stronach www (6) Niespełnianie oczekiwań użytkowników o Większość użytkowników korzysta z web u w konkretnym celu o Nie mają chęci/czasu na czytanie marketingowych tekstów o Chcą przejść od razu do celu swojej wizyty, np. poznania ceny

40 Praca z użytkownikami - testowanie Sortowanie kard (Card sorting) Makiety o Papierowe, o Papierowo elektroniczne, o Elektroniczne. Persony 40

41 Sortowanie kart Sortowanie otwarte (open sort) o Uczestnicy otrzymują karty z nazwami (ikonami, zdjęciami, itp.) badanych elementów; o Ich zadaniem jest pogrupować karty, a utworzone grupy nazwać; Sortowanie zamknięte (closed/tree sort) o Analogicznie jak wyżej, ale karty należy pogrupować wg kategorii wyższego rzędu. 41

42 Sortowanie kart (2) Wolna lista (free list) o Uczestnikom tłumaczymy czego dotyczy badanie (tematyka strony, funkcjonalności, treści); o Następnie samodzielnie powinni przygotować odpowiednie karty i je pogrupować. 42

43 Sortowanie kart (3) Zalecana liczba uczestników: 5. Liczba kart: Dla większych projektów należy przeprowadzić kilka badań. Warto rozważyć skorzystanie z kolorowych kartek. Samo tłumaczące się nazwy. Najlepiej unikać podawania wyjaśnień na drugiej stronie karty. Przeprowadzenie ankiety na koniec. 43

44 Sortowanie kart (4) Korzyści z badania: o Wiedza na temat postrzegania treści/portalu przez użytkowników (np. sposób grupowania towarów), o Niskie koszty, o Łatwość przeprowadzenia. Przydatne narzędzia: o o o 44

45 Sortowanie kart (5) Analiza danych: o Ocena bliskości. Matryca zawierająca nazwy elementów w kolumnach oraz wierszach. Na ich przecięciu znajduje się ocena bliskości. o Ocena hierarchiczności: wykorzystanie dendrogramów (wykresy drzewiaste). Pamięć ludzka: zasada 7 +/- 2; szczególnie warta uwzględnienia przy okazji grupowania. 45

46 Makiety papierowe Cel Uwzględnienie: o Architektury informacji (mapa strony, diagram przepływów), o Listy funkcjonalności (z ewentualnym opisem np. animacja mapy ), o Terminologii, o Zawartości witryny. 46

47 Makiety papierowe (2) Makiety papierowe o Rysowane, o Wycinane, o Mieszane. 47

48 Makiety papierowe (3) Kiedy się przydają? o Mało czasu, o Niski budżet, o Praca z osobami, które niezbyt dobrze radzą sobie z komputerami, o Ilustracja pewnych pomysłów Ah-Hoc, o Uzupełnienie metody sortowania kart, o Praca w terenie ;) 48

49 Makiety papierowe (4) Wykorzystanie w czasie testów: o Użyteczności, o Funkcjonalnych. Czas trwania sesji: minut (z uwzględnieniem poprawek nawet 90 min.). Testy A/B. Wady: o Brak uwzględnienia technicznych możliwości/ograniczeń, o Nie uwzględniają sposobu oraz czasu pobierania danych, o Raczej szkic niż projekt. Czy nadal warto ich używać? 49

50 Makiety papierowo-elektroniczne W stosunku do prototypów papierowych różnią się sposobem wykonania. Reszta pozostaje bez zmian. MS Visio 50

51 Makiety elektroniczne Symulacja działania witryny za pomocą innego oprogramowania, np. o MS PowerPoint Wygląd, Interakcja. o MS Visio Wzorniki kształtów (w tym dodatkowe, np. wykorzystanie D&D. 51

52 Makiety elektroniczne (2) Inne narzędzia: o o o Zalety o Bardziej realistyczne zachowanie aplikacji, o Lepsza interakcja, o Możliwość symulacji czasu reakcji w zależności od ilości danych. 52

53 Persony Spojrzenie na witrynę oczami użytkownika, a nie projektanta. Określenie grupy docelowej użytkowników witryny Persona wyobrażenie typowego użytkownika Tworzone są na podstawie badań: o Wywiady indywidualne, o Wywiady fokusowe, o Ankiety/formularze on-line, o Statystyki dotyczące strony www. 53

54 Persony (2) Staramy się aby wymyślona postać była jak najbardziej realna: o Zdjęcie, o Imię i nazwisko, o Wiek, płeć, wykształcenie, stan cywilny, zawód, o Cechy charakteru, o Sytuacja życiowa, o Status materialny, o Opis środowiska. 54

55 Persony (3) Staramy się aby wymyślona postać była jak najbardziej realna c.d.: o Motywacja do korzystania z witryny, o Cele, o Wzorce zachowań związane ze stroną. Nie należy tworzyć ich zbyt wiele. 55

56 Rodzaje badań Badania jakościowe o Zogniskowane wywiady grupowe (badania fokusowe), o Wywiady indywidualne, Testy funkcjonalności oraz użyteczności, Clicktracing o o o 56

57 Rodzaje badań (2) Testy A/B o Dwie lub więcej wersji danego rozwiązania/witryny, o W ten sposób można automatycznie badać, np.: Skuteczność reklam, Elementy graficzne, Układ strony, Efektywność, np. zakupów. o Połączenie z clicktracking iem. 57

58 Rodzaje badań (3) Eyetracking o Mierzy czas przez który gałki oczne badanych osób skoncentrowane są na poszczególnych elementach, o Wymaga specjalistycznego sprzętu, o Badanie: ergonomii, reklam, grafiki, itp. 58

59 Rodzaje badań (4) Analiza statystyk www: o Kraj, o System operacyjny, o Przeglądarka, o Źródło wejścia, o Rozdzielczość ekranu, o Głębia koloru, o Dostępność technologii (np. plugin do Flash a). 59

60 Podsumowanie Projektowanie systemu zarządzania treścią (witryny www) jest skomplikowanym, interdyscyplinarnym procesem. Właściwie zaprojektowana witryna musi charakteryzować się wysoką użytecznością (usability). Jest to szczególnie ważne biorąc pod uwagę konkurencję panującą w Internecie oraz łatwość migracji użytkowników. 60