Materiały szkoleniowe
Z ZAKRE S U UŻY TE CZN OŚ CI
SERWISÓW INTERNETOWYCH
Warszawa, 10-11 grudnia 2012 r.
Spis treści
BLOK 1. WPROWADZENIE DO UŻYTECZNOŚCI................................................................................ 4
1. Omówienie podstawowych pojęć używanych podczas szkolenia ................................................. 4
2. HCI - Human Computer Interaction .............................................................................................. 7
3. Modele mentalne .......................................................................................................................... 9
4. Model UCD - User Centered Design ............................................................................................ 10
BLOK 2. DEFINIOWANIE I ANALIZA WYMAGAŃ UŻYTKOWNIKÓW ................................................ 11
1. Analiza celów biznesowych ......................................................................................................... 11
2. Wywiady pogłębione................................................................................................................... 12
4. Persony........................................................................................................................................ 14
5. Warsztat - Persony ...................................................................................................................... 16
OMÓWIENIE POJĘĆ SPECJALISTYCZNYCH ..................................................................................................... 17
SECTION 508 - elektronika i technologia informacyjna .................................................................. 17
ELMER 2 / ELMER 2.1 - formularze internetowe............................................................................. 17
PAS 78 Guide to good practice in commissioning accessible websites ........................................... 18
BS 8878 - strony, serwisy, aplikacje internetowe ............................................................................ 18
Normy ISO związane z użytecznością ............................................................................................ 20
Omówienie normy WCAG w kontekście projektów internetowych ................................................ 22
Uwzględnienie standardów, norm i przepisów prawa w procesie projektowania ......................... 24
BLOK 3. ARCHITEKTURA INFORMACJI .......................................................................................... 25
WPROWADZENIE DO ARCHITEKTURY INFORMACJI ......................................................................................... 25
Perspektywa i definicja ................................................................................................................... 25
Grupowanie danych ........................................................................................................................ 25
Nazewnictwo i etykiety ................................................................................................................... 30
Nawigacja ....................................................................................................................................... 34
Wyszukiwanie ................................................................................................................................. 37
Metadane........................................................................................................................................ 40
Odnajdywalność (findability) .......................................................................................................... 40
Współczynnik zagubienia ................................................................................................................ 41
Prawo trzech kliknięć - prawda czy mit? ......................................................................................... 41
WARSZTATY CARDSORTING I NAVIGATION STRESS TEST .................................................................................. 42
Cardsorting ..................................................................................................................................... 42
Navigation stress test ..................................................................................................................... 42
BLOK 4. PROJEKTOWANIE ROZWIĄZAŃ WEBOWYCH I MOBILNYCH ............................................. 43
PARTICIPATORY DESIGN ........................................................................................................................... 43
Cardsorting 1994 Jakob Nielsen ...................................................................................................... 43
Prototypowanie na papierze ........................................................................................................... 43
Strona 2 z 73
Prototypowanie komputerowe ....................................................................................................... 44
WARSZTAT – PROJEKTOWANIE, SZKICOWANIE ............................................................................................. 44
WZORCE PROJEKTOWE ............................................................................................................................ 45
Gridy ................................................................................................................................................ 45
Nawigacja ....................................................................................................................................... 47
Menu horyzontalne ......................................................................................................................... 48
Breadcrumb menu – menu okruszkowe.......................................................................................... 48
Paginacja......................................................................................................................................... 49
Przewijanie z doczytywaniem ......................................................................................................... 49
Wizard (kreator).............................................................................................................................. 50
Captcha ........................................................................................................................................... 50
Stopka ............................................................................................................................................. 51
FORMULARZE ......................................................................................................................................... 51
TECHNOLOGIE ........................................................................................................................................ 56
RESPONSIVE DESIGN (LIQUID) ................................................................................................................... 57
ISTOTNE OGRANICZENIA ........................................................................................................................... 57
BLOK 5. TECHNIKI I METODY BADANIA UŻYTECZNOŚCI ................................................................ 59
1. Istota badań w projekcie ............................................................................................................. 59
2. Analiza heurystyczna................................................................................................................... 60
3. Warsztat...................................................................................................................................... 62
4. Listy kontrolne ............................................................................................................................. 62
5. Badania użyteczności vs User Acceptance Testing ..................................................................... 63
6. Laboratoryjne badania użyteczności z użytkownikami ............................................................... 64
7. Zdalne badania użyteczności ...................................................................................................... 68
8. Badania użyteczności zdalne a badania laboratoryjne ............................................................... 70
9. Wizard of Oz ................................................................................................................................ 71
10. Inne metody badawcze ............................................................................................................. 72
Strona 3 z 73
Blok 1. Wprowadzenie do użyteczności
1. Omówienie podstawowych pojęć używanych podczas szkolenia
Słowa kluczowe: użyteczność, ergonomia, interakcja, dostępność, HCI, UCD,
WCAG, WAI, architektura informacji, prototypy, prototypy hi-fi, prototypy low-fi,
wireframes, user experience, service design.
Lista pojęć i definicji wykorzystywanych w trakcie szkolenia:
Projektowanie interakcji (interaction design, IxD) - zajmuje się teorią,
badaniami
oraz
praktyką
projektowania
interaktywnych
produktów,
wspierających komunikowanie się i oddziaływanie na siebie ludzi w codziennych
relacjach.
Bill Moggridge, Designinng Interaction
Ergonomia - dziedzina nauki zajmująca się dostosowaniem otoczenia człowieka,
w szczególności otoczenia pracy, do wymagań i ograniczeń ludzkiego organizmu,
fizycznych, psychofizjologicznych oraz poznawczych.
Interakcja człowiek-komputer (Human-Computer Interaction, HCI) - jest
dziedziną
a
i
nauki
komputerem;
wdrażania
zajmującą
się
badaniem
koncentruje
się
na
interaktywnych
relacji
badaniach
systemów
między
człowiekiem
projektowania,
komputerowych
ewaluacji
używanych
przez
człowieka oraz wszystkich aspektów relacji między systemem a człowiekiem.
Użyteczność – jest miarą wydajności, efektywności i satysfakcji, z jaką
użytkownicy realizują określone cele w systemie w zdefiniowanymi kontekście.
Użyteczność określa się głównie poprzez:
Strona 4 z 73
 efektywność wykonywania zadań przez użytkownika,
 liczbę popełnianych błędów,
 łatwość nauczenia się obsługi systemu,
 łatwość zapamiętania jego obsługi,
 satysfakcję z użytkowania.
Projektowanie zorientowane na użytkownika (User-Centered Design,
UCD) - metodyka projektowania interakcji, która koncentruje się na potrzebach
i wymaganiach końcowego użytkownika. Metodyka UCD w całym procesie
projektowania angażuje techniki i metody uwzględniające użytkownika.
Projektowanie doświadczenia użytkownika (User Experience, UX) projektowanie
wszystkich
aspektów
relacji
użytkownika
z
interaktywnym
produktem, ze szczególnym uwzględnieniem elementów wywołujących reakcje
emocjonalne i kształtujących pozytywne doświadczenia.
Morville proponuje sześć wymiarów UX:
 znajdywalność,
 wiarygodność,
 dostępność,
 użyteczność,
 funkcjonalność,
 wzbudzanie pożądania.
Strona 5 z 73
Projektowanie usług (Service Design) - kształtowanie wszystkich aspektów
kontaktu (tzw. touchpoint) klienta z marką, produktem, usługą lub firmą.
Dostępność - dziedzina wiedzy z zakresu interakcji człowieka z komputerem
zajmująca
dostępnych
się
dla
problematyką
jak
tworzenia
najszerszego
stron
grona
i
serwisów
odbiorców,
ze
internetowych
szczególnym
uwzględnieniem osób niepełnosprawnych. Dostępność serwisu internetowego
oznacza stopień, w jakim może być on postrzegany, rozumiany i przeglądany
przez wszystkich użytkowników, niezależnie od ich cech lub upośledzeń, a także
niezależnie od właściwości używanego przez nich oprogramowania i sprzętu.
WCAG - Web Content Accessibility Guidelines - rekomendacje dotyczące
dostępności stron internetowych przygotowane przez WAI.
Strona 6 z 73
WAI - Web Accessibility Initiative -
inicjatywa W3C (World Wide Web
Consortium - od 1994 roku - 400 instytucji) mająca na celu zwiększenie szeroko
rozumianej dostępności stron WWW.
Architektura informacji - jest dziedziną wiedzy, która zajmuje się sposobami
gromadzenia, organizacji i prezentacji informacji tak, by dotarcie do nich i ich
wykorzystywanie było możliwie najłatwiejsze.
Prototypy - funkcjonalne makiety symulujące działanie serwisów internetowych,
zazwyczaj zawierające większość interakcji, które zostaną potem wdrożone jako
serwis WWW. Prototyp nie symuluje jednak bardziej zaawansowanych funkcji
związanych np. z operacjami na bazie danych. Pokazuje raczej wybrane,
najważniejsze funkcje serwisu dla przykładowych danych.
Wireframes (makiety) - statyczne (nieklikalne) schematy poszczególnych stron
serwisu, zazwyczaj w odcieniach szarości (low fidelity) lub kolorowe symulujące
ostateczny wygląd witryny (high fidelity).
2. HCI - Human Computer Interaction
Słowa
kluczowe:
charakterystyki
użytkowników,
popełnianie
błędów,
rozwiązywanie problemów, odczucia, umiejętność nauki, niepewność.
Psychologiczne aspekty interakcji z komputerem - charakterystyki poznawcze
użytkowników.
Strona 7 z 73
Pamięć
Podstawowe efekty poznawcze dotyczące pamięci mają zastosowanie i wpływa na
projektowanie systemów komputerowych:

efekt świeżości,

efekt pierwszeństwa,

porcjowanie, tzw. chunking,

kategoryzowanie,

liczba Millera 7+/-2: liczba elementów przechowywanych w pamięci
krótkotrwałej. Rola liczby Millera w projektowaniu nawigacji.
Wskazane jest tworzenie interfejsów w sposób znaczący i pokategoryzowany, np.
Shneiderman sugeruje:

nazwy komend znaczące i wyróżniające się,

grupowanie komend,

konsekwentne stosowanie skrótów,

możliwość tworzenia skrótów dla zaawansowanych użytkowników,

ograniczenie liczby sposobów realizacji zadań.
Percepcja i uwaga:
- postrzeganie kontrastu,
- postrzeganie koloru,
- prawa Gestalt:
zasada kontrastu,
zasada grupowania,
zasada bliskości,
zasada ilości,
- selektywność uwagi (cognitive overload).
Strona 8 z 73
Zdolności motoryczne i wybór
Prawo Fittsa - czas potrzeby do przesunięcia się w kierunku celu na ekranie jest
funkcją rozmiaru celu i dystansu do jego osiągnięcia.
Prawo Hicksa – czas podjęcia decyzji rośnie linearnie do ilości informacji.
Nabywanie umiejętności
Interakcja z komputerem różni się w zależności od poziomu zaawansowania
użytkownika. W zależności od poziomu zaawansowania użytkownicy potrzebują
różnego rodzaju wsparcia i możliwości oferowanych przez system.
Model użytkownika z perspektywy projektanta - GOMS:
- cele,
- operacje (elementarna, percepcyjna, motoryczna, poznawcza),
- metody – sekwencja operacji,
- zasady wyboru między metodami w celu osiągnięcia selection rules.
Najczęściej stosowany model to KLM (Keystroke Level Models), który pozwala
ocenić czas potrzebny do wykonania poszczególnych operacji, w szczególności
przydatny do porównania alternatywnych projektów zaawansowanych systemów
eksperckich.
3. Modele mentalne
Model mentalny to model funkcjonowania systemu tworzony przez użytkownika
w trakcie interakcji z nim. Modele mentalne wynikają z metafor i analogii,
którymi posługują się użytkownicy w próbie zrozumienia systemu.
Modele mentalne projektantów są bardzo często różne od modeli użytkowników.
Strona 9 z 73
4. Model UCD - User Centered Design
Omówienie modelu UCD/HCD
Metodyka
projektowania
systemów
interaktywnych
skoncentrowana
na
potrzebach i wymaganiach użytkownika. Użytkownicy i ich potrzeby kształtują
cały
proces
projektowania
systemu.
Projektant
systemu
ma
za
zadanie
przełożenie celów i potrzeb użytkownika na zadania, które użytkownik będzie
mógł zrealizować w systemie.
UCD charakteryzuje się:
1. zaangażowaniem
użytkowników
na
wszystkich
etapach
projektowania,
2. projektowaniem iteracyjnym,
3. wielowymiarowym procesem badawczym w trakcie projektowania.
Etapy metodyki UCD:
1. analiza biznesowa oraz badanie potrzeb użytkowników:
a. analiza wymagań biznesowych projektu,
b. badania jakościowe i ilościowe potrzeb użytkowników,
c. tworzenie person,
d. tworzenie ścieżek użycia,
2. prototypowanie systemu:
a. tworzenie architektury informacji,
b. projektowanie makiet i prototypów,
c. projekt graficzny (visual design),
3. testowanie i weryfikowanie założeń z użytkownikami:
a. oceny eksperckie,
b. testy użyteczności.
Strona 10 z 73
procesu
Blok 2. Definiowanie i analiza wymagań
użytkowników
1. Analiza celów biznesowych
Metody stosowane na etapie analizy celów biznesowych to:
a. warsztaty z interesariuszami,
b. benchmark (analiza konkurencji).
Warsztaty
–
spotkanie
ze
wszystkimi
zainteresowanymi
stronami
(interesariuszami).
Cele warsztatów:

prezentacji
metodyki
i
procesu
projektowania
w
szerokim
gronie
zainteresowanych stron,

uzyskanie wiedzy o klientach, produktach, procesach od różnych grup,

zdefiniowane
warunków
brzegowych
projektu
(ograniczeń
technologicznych, prawnych, czasowych),

określenie kluczowych wskaźników efektywności projektu (niezbędna do
oszacowania zwrotu z inwestycji – ROI).
Porównanie konkurencji
Porównanie własnego produktu w odniesieniu do bezpośredniej lub pośredniej
konkurencji według kluczowych z punktu widzenia interesariuszy kryteriów.
Cele:

usytuowanie produktu na tle konkurencji pozwala wyraźnie określić
zdefiniować cele biznesowe,

możliwość określenia najsłabszych i najmocniejszych cech systemu,

zdefiniowane wskaźników efektywności na tle konkurencji.
Strona 11 z 73
2. Wywiady pogłębione
Opis metody badawczej, przykłady scenariuszy rozmowy.
Wywiady pogłębione - najczęściej stosowana metoda badań potrzeb i wymagań
użytkownika; służy uzyskaniu szczegółowych informacji od pojedynczych osób;
pozwala uzyskać różne informacje od różnych typów osób, dzięki czemu możemy
uzyskać szerszą perspektywę oraz daje możliwość pogłębienia tematów i wątków
kluczowych z punktu widzenia projektu.
Obok wywiadów pogłębionych stosowane są inne metody analiz potrzeb
i wymagań użytkowników:
- grupy fokusowe,
- ankiety,
- analizy etnograficzne.
Wybór rodzaju wywiadu oraz sposobu analizy danych:
a. ustrukturyzowany,
b. nieustrukturyzowany,
c. mieszany,
d. telefoniczny,
e. osobisty.
Etapy:
1. Znajomość problemu, wymagań biznesowych, użytkowników (person).
2. Rekrutacja respondentów.
3. Przygotowanie scenariusza.
4. Przeprowadzenie wywiadu.
5. Analiza wyników (np. affinity diagram, nadanie wynikom priorytetów).
6. Przygotowanie raportu.
Strona 12 z 73
Tworzenie pytań do wywiadu pogłębionego:

krótkie zdania (mniej niż 20 słów),

w jednym pytaniu jeden problem,

konkretne i odnoszące się do doświadczeń użytkownika,

sformułowane prostym i klarownym językiem (pilotaż!),

unikanie wieloznacznych sformułowań,

unikanie specjalistycznej, hermetycznej terminologii,

unikanie pytań sugerujących.
Zasada 5 faz prowadzenia wywiadu:
1. Wprowadzenie.
2. „Rozgrzewka”.
3. Właściwy wywiad.
4. Zakończenie.
5. Podsumowanie.
Materiały:
- protokół,
- lista pytań,
- materiały do notowania,
- materiały i sprzęt do nagrywania.
Korzyści:

możliwość uzyskania dużej ilości szczegółowych informacji,

możliwość uzyskanie szerszej perspektywy badanego problemu,

możliwość uzyskania danych koniecznych na innych etapach procesu
projektowania.
Strona 13 z 73
Wady:
- czasochłonność,
- brak możliwości uzyskania danych od bardzo dużej próbki,
- mniejsza
możliwości
uzyskania
danych
wrażliwych
(np.
finansowych,
osobistych).
4. Persony
Opis metody badawczej.
Persona to archetypowy, konkretny, reprezentant docelowych użytkowników,
który stanowi centrum oraz punkt odniesienia w projektowania UCD. Persony
tworzone są, aby koncentrować się na konkretnym użytkowniku i jego
potrzebach od początku procesu projektowania.
Persony są zestawem fikcyjnych cech reprezentujących użytkownika, jego
zachowań, postaw i celów, stworzonym w oparciu o dane pozyskane w fazie
badań użytkownika.
Persony
charakteryzują
się
posiadaniem
tożsamości
-
zdjęcia,
imienia,
osobowości, umiejętności, celów, także życiowych motywów, zadań, relacji,
wymagań,
oczekiwań,
reprezentacją
osobistej
użytkowników,
ale
historii.
Persona
nie
charakterystycznym
jest
uśrednioną
przedstawicielem
użytkowników. Persony są podstawą tworzenia scenariuszy użycia.
Tworzenie person: rekomenduje się tworzenie 3-5 kluczowych person dla danego
systemu.
Kluczowe charakterystyki person zawierają:

Tożsamość: imię, nazwisko, wiek, płeć, inne istotne dane demograficzne
(np. miejsce zamieszkania), zdjęcie (!).
Strona 14 z 73

Status
persony:
rodzaj
użytkownika
-
pierwszo-,
drugo-planowy,
antyużytkownik (osoba, która nie będzie używała produktu).

Cele: ogólne cele użytkownika, nie tylko odnoszące się do danego
produktu.

Umiejętności: jaki jest poziom wiedzy i umiejętności, obszary, w których
jest ekspertem; wykształcenie, szkolenia, inne specjalne umiejętności.

Zadania: jakiego typu zadania realizuje użytkownik, ich częstotliwość,
ważność, czas trwania.

Powiązania: powiązanie z istotnymi osobami, także z innymi personami.

Potrzeby i wymagania: rzeczywiste potrzeby użytkownika, które warto
wesprzeć cytatami.

Oczekiwania.
Persony różnią się od segmentów odbiorców definiowanych i stosowanych
w marketingu:
Persony
Segmenty
Jednostkowa
grupowe
dane jakościowe
dane ilościowe
dane narracyjne, cele, motywy,
dane demograficzne i/lub
zadania
psychograficzne
Strona 15 z 73
Przykładowe użycie person w zespole projektowym:
Korzyści wynikające z zastosowania person:

personalizacja i humanizacja użytkownika,

ułatwia skoncentrowanie na potrzebach docelowych użytkowników,

wpływa
pozytywnie
na
komunikowanie
i
współpracę
różnych
grup
projektowych,

są podstawą do innych etapów i technik badawczych (np. w badaniach
użytkowników oraz w różnych metodach badań użyteczności),

persony nie zastępują testowania produktu z użytkownikami.
5. Warsztat - Persony
Przygotowanie person przez uczestników szkolenia dla serwisu Warszawy
www.um.warszawa.pl
Strona 16 z 73
Omówienie pojęć specjalistycznych
SECTION 508 - elektronika i technologia informacyjna
www.section508.gov
Fragment aktu uchwalonego przez Kongres Stanów Zjednoczonych dotyczący
elektroniki i technologii informacyjnych (z roku 1998). Zawiera wytyczne dla
agencji
federalnych,
by
te
kupowały
elektronikę
i
produkty
związane
z technologią informacyjną dostępne dla osób niepełnosprawnych.
SECTION 508 zawiera jeden specyficzny zapis ponad to, co znajduje się w WCAG
1.0 (z 1999 roku):
Timed Responses: When a timed response is required, the user shall be alerted
and given sufficient time to indicate more time is required.
Jeśli
wymagamy
od
użytkownika
podjęcia
akcji
(wypełnienia
formularza,
przeczytania tekstu itp.) w zadanym czasie, to musimy brać pod uwagę, że ze
względu na niepełnosprawność może mu to zająć więcej czasu. Zanim czas
upłynie powinniśmy poinformować użytkownika, że czas się kończy i dać mu
możliwość przedłużenia czasu.
ELMER 2 / ELMER 2.1 - formularze internetowe
http://www.brreg.no/elmer/elmer_2_1_english.pdf
Dokument przygotowany przez norweskie Ministerstwo Handlu i Przemysłu
skupiający się na użyteczności formularzy internetowych.
Zawiera specyfikację:
●
Elementy strony formularza:
○
Nawigacja,
○
Część informacyjna (podpowiedzi),
Strona 17 z 73
○
Elementy stałe (Pomoc, przyciski: dalej i wstecz, tytuł, walidacja,
przycisk: wyślij formularz).
●
●
●
●
Struktura i kolejność:
○
Ukrywanie pól zależnych,
○
Paginacja,
○
Struktura strony.
Elementy formularza:
○
Nagłówki i etykiety,
○
Tabele,
○
Przetwarzanie liczb,
○
Konwencje i symbole (gwiazdki, ukryte pola, tabulacja).
Pomoc i interakcja:
○
Automatycznie wypełnione pola,
○
Podpowiedzi,
○
Błędy i ostrzeżenia,
Kontekst formularza:
○
Podsumowanie (potwierdzenie, drukowanie, e-mail).
PAS 78 Guide to good practice in commissioning accessible websites
http://en.wikipedia.org/wiki/PAS_78,
http://www.equalityhumanrights.com/uploaded_files/pas78.pdf
Publicly Available Specification (marzec 2006) to dokument powstały po raporcie
z badań przeprowadzonych w 2004 roku, które pokazały, że 81% stron nie
spełnia nawet najniższych wymagań dostępności (poziom A) WCAG 1.0.
BS 8878 - strony, serwisy, aplikacje internetowe
http://www.access8878.co.uk
Strona 18 z 73
http://www.slideshare.net/Nomensa/bs8878-web-accessibility-code-ofpractice#btnNext
British Standards Institution (BSI)
Powstaje w grudniu 2010 roku.
Uwzględnienie aspektów dostępności na wszystkich etapach życia projektu:
●
●
●
Definiowanie, specyfikacja wymagań:
○
cel, kontekst użycia,
○
definiowanie grupy docelowej,
○
potrzeby odbiorców,
○
wymagania technologiczne,
○
cele i zadania do wykonania.
Decyzje strategiczne:
○
poziom user experience,
○
personalizacja, design,
○
wspieranie przeglądarek, systemów operacyjnych, urządzeń.
Zamawianie:
○
●
●
Produkcja:
○
czy wybrana technologia wspiera dostępność, kontekst urządzeń?,
○
najlepsze praktyki dostępności związane z wybraną technologią.
Badanie:
○
●
zlecanie, własna produkcja.
weryfikowanie aspektów dostępności podczas produkcji.
Uruchomienie i utrzymanie:
○
plan aktualizacji, weryfikacji i udoskonalania.
Strona 19 z 73
Normy ISO związane z użytecznością
ISO 9241-210 Human-centred design for interactive systems
Zasady, dzięki którym projektowanie jest zorientowane na użytkownika:
●
projekt
być
tworzony
w
odniesieniu
do
wiedzy
o
użytkownikach,
zadaniach, które mają oni wykonać i odniesieniu do środowiska, w którym
się znajdują,
●
użytkownicy
powinni
być
zaangażowani
na
etapie
projektowania
i wdrażania,
●
projekt
powinien
być
tworzony
i
weryfikowany
poprzez
testy
z użytkownikami,
●
proces projektowy powinien być iteracyjny,
●
projekt powinien odnosić się do
wszystkich aspektów doświadczeń
użytkownika (percepcja, emocje),
●
zespół projektowy powinien składać się ze specjalistów z różnych dziedzin:
nie tylko graficy, programiści i UX, ale też eksperci od dostępności,
marketingu, biznesu, użytkownicy końcowi, pomoc techniczna.
ISO 9241-151 Software ergonomics for World Wide Web user interfaces
Zakres:
●
decyzje projektowe i strategiczne: cele strony i przełożenie na interfejs,
kim są użytkownicy i czego oczekują od strony,
●
projektowanie treści: koncepcja, o którą oparta jest strona, organizacja
strony,
●
nawigacja:
organizacja
treści,
aby
dotarcie
do
nich
było
łatwe,
wyszukiwanie treści,
●
prezentacja treści: wygląd stron i linków pomagający w osiągnięciu celów
użytkownika,
●
ogólne aspekty projektowe: pomoc i wsparcie, unikanie i komunikowanie
błędów.
Strona 20 z 73
ISO 9126 (oraz ISO 25010) Software engineering - Product quality
Zestaw pojęć opisujących jakość oprogramowania takich, jak:
●
Funkcjonalność: przydatność, dokładność, współdziałanie, bezpieczeństwo
●
Niezawodność: dojrzałość, tolerancja błędów, przywracalność,
●
Użyteczność:
zrozumiałość,
przyswajalność
(nauka),
używalność,
atrakcyjność,
●
Wydajność: zachowanie w czasie, zużywanie zasobów,
●
Łatwość konserwacji: przejrzystość, łatwość modyfikacji, przewidywalność,
łatwość testowania,
●
Przenośność:
adaptowalność,
łatwość
instalacji,
koegzystencja,
zastępowalność.
ISO 25010
Zakres:
●
Bezpieczeństwo: poufność, integralność, odporność, pewność,
●
Kompatybilność: możliwość zastąpienia, współdziałanie, koegzystencja.
Inne normy ISO związanych z ergonomią i użytecznością:

User interfaces
http://www.iso.org/iso/home/store/catalogue_tc/catalogue_tc_browse.ht
m?commid=45382&published=on

Software and systems engineering
http://www.iso.org/iso/home/store/catalogue_tc/catalogue_tc_browse.ht
m?commid=45086&published=on
Strona 21 z 73
Omówienie normy WCAG w kontekście projektów internetowych
WCAG 2.0 (2008) staje się standardem ISO 40500 (2012).
Twórcą normy jest Web Accessibility Initiative (WAI) (http://www.w3.org/WAI/),
działająca przy W3C (World Wide Web Consortium).
Zakres:
1. Percepcja - informacje i komponenty interfejsu muszą być dostępne,
2. Funkcjonalność
-
komponenty
interfejsu
i
nawigacja
muszą
być
funkcjonalne,
3. Zrozumiałość - treść oraz obsługa interfejsu musi być zrozumiała,
4. Rzetelność - walidujący się kod, zgodność ze specyfikacją.
Strona normy: http://www.w3.org/TR/WCAG20/
Rekomendacja na stronie Komisji Europejskiej:
http://ec.europa.eu/ipg/standards/accessibility/wcag-20/index_en.htm
Widzialni.org:
http://www.widzialni.org/container/podrecznik6-www.pdf
WCAG 2.0 a polskie ustawodawstwo
W maju 2012 weszło w życie Rozporządzenie Rady Ministrów w sprawie
Krajowych Ram Interoperacyjności, które zobowiązuje podmioty realizujące
zadania publiczne do dostosowania swoich stron internetowych dla potrzeb osób
wykluczonych cyfrowo. Nakłada obowiązek przystosowania serwisów WWW
zgodnie z wytycznymi WCAG 2.0 na poziomie AA w ciągu 3 lat. Mówi również
o tym, że każda większa modernizacja serwisu powinna zostać przeprowadzona
już zgodnie z nowymi wytycznymi.
Strona 22 z 73
Rozporządzenie do pobrania: http://dziennikustaw.gov.pl/DU/2012/526/1
Strona 23 z 73
Uwzględnienie standardów, norm i przepisów prawa w procesie
projektowania
W Polsce nie ma ustawy, która odnosiłoby się wprost do obowiązku stosowania
standardów dostępności. Jednakże wiążące w tym temacie są przepisy:
●
Konstytucji RP (w tym art. 32 i art. 69),
●
Ustawa o dostępie do informacji publicznej (z dnia 6 września 2001 r.),
●
Ustawa o informatyzacji działalności podmiotów realizujących zadania
publiczne (z dnia 17 lutego 2005 r.),
●
Karty Osób Niepełnosprawnych (Uchwała Sejmu Rzeczypospolitej Polskiej
z 1 sierpnia 1997 r.).
W powyższych dokumentach jest mowa o równości obywateli w dostępie do
informacji bez dyskryminacji ze względu na jakiekolwiek kryteria - w tym stopień
sprawności.
W Stanach Zjednoczonych obowiązuje Section 508, w UE - WCAG 2.0.
Strona 24 z 73
Blok 3. Architektura informacji
Wprowadzenie do architektury informacji
Perspektywa i definicja
Jednym z wyzwań społeczeństwa informacyjnego, którego siłą napędową jest
Internet, jest radzenie sobie z nadmiarem informacji. Jeszcze kilka lat temu,
tworzenie treści, które znajdowały się na stronach internetowych, było zajęciem
dla wąskiej grupy ludzi, którzy posiadali wiedzę o języku znaczników HTML. Dziś
każdy
może
być
twórcą
treści
internetowych.
Portale
społecznościowe
i informacyjne, możliwość łatwej publikacji tekstów, zdjęć i filmów powodują, że
informacji w Internecie przybywa bardzo szybko. Odnajdywanie pośród nich tych
cennych, tych, na których nam zależy, jest nie lada sztuką.
Architektura informacji jest dziedziną wiedzy, która zajmuje się sposobami
gromadzenia, organizacji i prezentacji informacji tak, by dotarcie do nich
i ich wykorzystywanie było możliwie najłatwiejsze
Cel
architektury
informacji:
najłatwiejsze
dotarcie
do
informacji
i
jej
wykorzystanie.
Grupowanie danych
Schemat alfabetyczny (http://www.bbc.co.uk/a-z/b.shtml)
Częste pytania:
●
Czy powtarzać informacje pod różnymi nazwami? TAK.
●
Czy
używać
nietechnicznych
(czasem
etykiet? TAK.
Strona 25 z 73
niepoprawnych),
ale
znanych
●
Czy uwzględniać wszystkie strony lub tematy? Niekoniecznie, ważne by
były wszystkie najpopularniejsze treści, których szukają użytkownicy
(google analytics)
Strona 26 z 73
Schemat geograficzny (http://www.wacom.com/global-sites)
Geolokalizacja: http://html5demos.com/geo
Schemat tematyczny (www.bbc.co.uk)
Strona 27 z 73
Schemat wg audytorium (http://www.dell.com)
Schemat zadaniowy (https://www.paypal.com/pl/webapps/mpp/home)
Strona 28 z 73
Schemat bazodanowy (www.ceneo.pl)
Strona 29 z 73
Głębokość i szerokość struktury
Rekomendacja: nie za głęboko i nie za szeroko. Jeśli struktura rozrasta się
zanadto trzeba zastanowić się nad podziałami wyższego rzędu.
Nazewnictwo i etykiety
Najważniejszym kryterium, jakie powinny spełniać etykiety, jest skuteczność
przekazywania informacji.
Nagłówki
Nie powinny przekraczać 8 słów i powinien spełniać kryteria: przejrzystości,
kompletności.
Strona 30 z 73
Nagłówek nie powinien być zdaniem:

„Prawda w sieci nie jest zawsze jasna” – zdanie,

„Prawda w sieci nie zawsze jasna” – nagłówek.
Linki
Odnośniki zawarte w tekście powinny jasno informować co stanie się, gdy
zostaną użyte (gdzie przekierują użytkownika, jaka akcja zostanie wykonana).
Jeśli dla przykładu link prowadzi do pobrania dokumentu PDF, to powinno się tę
informację zawrzeć w linku i uzupełnić ją o rozmiar pliku, co ma szczególne
znaczenie na urządzeniach mobilnych.
Np. Czytaj fragment książki (PDF 0,8 MB).
Etykiety elementów nawigacyjnych
Zazwyczaj etykiety nawigacyjne mają duże ograniczenia długości co sprawia, że
słowa
należy
dobierać
wyjątkowo
ostrożnie,
uwzględniając
przekazania informacji jak największej grupie użytkowników.
Strona 31 z 73
możliwość
Dylemat skuteczności etykiety:
●
MGOPS,
●
Miejsko-Gminny Ośrodek Pomocy Społecznej,
●
Pomoc społeczna.
Badanie wyników wyszukiwania w serwisie i słów kluczowych, dzięki którym
użytkownicy docierają do treści, jest dobrym źródłem wiedzy o tym, jakie
etykiety są przez użytkowników zrozumiałe.
Etykiety graficzne - ikony
Słabością ikon jest fakt, że przy ich pomocy można skutecznie przedstawić
bardzo ograniczoną ilość terminów. Bez problemu utworzymy ikony dla takich
tematów jak sport (np. piłka), motoryzacja (np. samochód) czy mapy (kształt
państwa lub kontynentu), jednak kiedy pojawiają się pojęcia abstrakcyjne, jak
np. „zintegrowanie zarządzanie”, „polityka prywatności” lub „spółki prawa
handlowego”, język ikon okazuje się bezradny.
Strona 32 z 73
Strona 33 z 73
Nawigacja
Adres URL (Uniform Resource Locator)
Konstrukcja
adresu
strony
internetowej
wydaje
się
bez
znaczenia
pod
warunkiem, że klikając w link, dostaniemy się na odpowiednią witrynę. Jednak
dobrze zbudowany adres może przekazać wiele informacji o stronie, do której
prowadzi, np. o jej położeniu w strukturze serwisu.
●
http://www.apple.com/itunes/download/
●
http://www.znak.com.pl/kartoteka,ksiazka,2529,Blysk-Potega-przeczucia
●
http://epuap.gov.pl/wps/portal/E2_ZdarzeniaZyciowe/leId=16&forAdm=fa
lse
●
http://epuap.gov.pl/wps/portal/!ut/p/c1/04_SB8K8xLLM9MSSzPy8xBz9CP
0os3g3Z4-gYG93QwMLRydXA89go2CXYENnAwtnM_2CbEdFAK5HOwg!/
Nawigacja globalna
Duże serwisy internetowe potrzebują jasnego rozdzielenia treści na główne grupy
tematyczne. Odpowiedzialność za taki podział spoczywa na nawigacji globalnej,
tj. elemencie nawigacyjnym, który pojawia się w takiej samej formie na
wszystkich podstronach danego serwisu.
Strona 34 z 73
Nawigacja lokalna
Zadaniem nawigacji lokalnej jest przedstawienie najbliższego tematycznego
otoczenia strony, na której się znajdujemy.
Warto zwrócić uwagę, że czasem stosuje się rozwiązanie polegające na łączeniu
nawigacji globalnej i lokalnej. Rozważając takie rozwiązanie trzeba pamiętać, że
tworzenie bardzo rozbudowanego menu z wieloma pozycjami pierwszego
i drugiego poziomu to tylko pozór użyteczności. Gdyby zapytać użytkowników,
to z pewnością chcieliby dostać bardzo szeroki wachlarz opcji do wyboru. Jednak
w tym przypadku „więcej” nie oznacza „lepiej”.
Dostarczanie zbyt wielu opcji wyboru zawęża możliwość szybkiego i racjonalnego
podjęcia decyzji o wyborze właściwej ścieżki nawigacyjnej.
Strona 35 z 73
Mapa strony
Strona 36 z 73
Przewodniki
Wyszukiwanie
Procesy wyszukiwania:

Wpisanie frazy > przycisk “Szukaj” > analiza wyników > klikanie i
szukanie treści
lub

Wpisanie frazy > analiza podpowiedzi > analiza wyników > klikanie i
szukanie treści
Strona 37 z 73
Strona 38 z 73
Strona 39 z 73
Aby skutecznie pomagać użytkownikowi w odnajdywaniu treści nie można
pozostawić kwestii wyszukiwania jedynie algorytmowi porównującemu wyrazy.
Trzeba posłużyć się tzw. słownikiem kontrolowanym, czyli bazą fraz dla
których
będziemy
sterować
wynikami
wyszukiwania.
Frazy
do
słownika
kontrolowanego można pozyskać z analizy słów kluczowych (Google Analytics)
lub poprzez analizę fraz wyszukiwanych w wyszukiwarce lokalnej.
Metadane
Metadane to dodatkowe informacje opisujące treści internetowe, które mogą być
użyte do sprawniejszego indeksowania treści oraz do polepszenia mechanizmów
wyszukiwania. Mogą być generowane w sposób automatyczny na podstawie
słowników lub częściowo edytowane przez ekspertów tworzących treści.
Np. Artykuł dotyczący robota kuchennego „Zelmer” możemy dodatkowo opisać
używając synonimów: mikser, mixer, robotkuchenny (bez spacji), Zelmer.
Odnajdywalność (findability)
Termin
określający
możliwość
dotarcia
do
treści
wewnątrz
serwisu
internetowego, a także docieranie z innych portali.
Peter Morville (definicja): możliwość określenia właściwej strony internetowej
(dla danego tematu, problemu) oraz przejście przez jej strukturę nawigacyjną
w celu dotarcia do poszukiwanej informacji.
Strona 40 z 73
Współczynnik zagubienia
L: współczynnik zagubienia
N: liczba różnych stron odwiedzonych podczas wykonywania zadania
S: liczba wszystkich stron odwiedzonych podczas wykonywania zadania
(wliczając ponowne odwiedziny tych samych stron)
R: minimum stron potrzebnych do wykonania zadania
Przeprowadzone przez Pauline A. Smith badania wykazały, że wartością
graniczną, powyżej której pojawia się u badanych uczucie zagubienia, jest
wartość 0,42.
Prawo trzech kliknięć - prawda czy mit?
MIT. Reguła ma polegać na tym iż rzekomo użytkownicy, którzy na stronie
internetowej nie są w stanie odnaleźć pożądanych treści za pomocą trzech
kliknięć, zamykają stronę i przechodzą do innej. Żaden z autorów, którym
przypisywane jest to prawo, nie przyznaje się do niego.
Lepsze rozumienie prawa:
●
Nie zmuszaj użytkownika do niepotrzebnego, nieuzasadnionego klikania.
●
Każde kliknięcie jest uzasadnione, jeśli w istotny sposób przybliża
użytkownika do osiągnięcia zamierzonego celu.
Strona 41 z 73
Warsztaty cardsorting i navigation stress test
Cardsorting
Zamknięte sortowanie etykiet pierwszego i drugiego poziomu nawigacji witryny
um.warszawa.pl
Navigation stress test
Analiza nawigacji strony:
http://www.warsawtour.pl/aktywny_wypoczynek/baza_adresowa/pl/28
Odpowiedz na pytania:
●
O czym jest ta strona? (zakreśl tytuł strony)
●
Jaka to strona? (zakreśl nazwę strony)
●
Jakie są główne działy na tej stronie? (zaznacz X)
●
W której z głównych sekcji znajduje się ta strona? (zaznacz X)
●
Jak dotrzeć do strony głównej? (zaznacz literą H - Home)
●
Jak trafić do strony głównej działu, w którym jestem? (zaznacz literą T Top)
●
●
Grupy linków:
○
D - Details - strony bardziej szczegółowe
○
N - Nearby - strony na tym samym poziomie sekcji
○
S - Same page - strony na tej samej witrynie, ale dalsze
○
O - Off-site - linki do stron zewnętrznych
Jak dotrę do tej strony ze strony głównej? - ścieżka wizualna
Strona 42 z 73
Blok 4. Projektowanie rozwiązań webowych
i mobilnych
Participatory design
Współprojektowanie (cooperative design). Opis technik wspomagających wspólne
projektowanie.
Korzyści: możliwość spojrzenia z innej perspektywy, zrozumienia problemów,
słownictwa, toku rozumowania użytkowników.
Problemy: użytkownicy często nie są wstanie precyzyjnie określić swoich potrzeb,
trzeba filtrować ich uwagi.
Cardsorting 1994 Jakob Nielsen
Sortowanie karteczek pozwala z dystansem spojrzeć na strukturę informacyjną
serwisu, dowiedzieć się, jakimi nazwami posługują się użytkownicy i jak budują
między nimi relacje.
Metoda ta wpływa pozytywnie na odnajdywalność treści.
Narzędzia zdalne: www.optimalworkshop.com/
Prototypowanie na papierze
Korzyści:
●
Metoda pozwala na szybkie zilustrowanie ogólnej koncepcji i większości
funkcji serwisu.
●
Mogą się w nią zaangażować również osoby nie mające doświadczenia
w używaniu narzędzi do prototypowania.
●
Usprawnia komunikację, można szybko pokazać swoje idee.
●
Można przeprowadzić proste testy.
Strona 43 z 73
Wady:
●
Brak interaktywności i pomijanie aspektów technologicznych.
●
Brak przewijania, różnych rozdzielczości.
●
Niska wartość estetyczna.
●
Trudne do wykonania w przypadku dużych projektów.
Prototypowanie komputerowe
Szeroki wachlarz narzędzi do prototypowania: od Power Point do Axure. Nawet
przy pomocy prostych narzędzi, które mają możliwość tworzenia linków, można
zasymulować dużo ścieżek użytkownika i mechanizmów, które znajdą się na
stronie.
Prototypy komputerowe działające w przeglądarce internetowej mogą być już na
wczesnym etapie testowane i weryfikowane z użytkownikami. Im wcześniej
pokażemy użytkownikom choćby nie w pełni funkcjonalne makiety, tym lepiej.
Ewentualne korekty dużo łatwiej wykonywać na wczesnych etapach, niż kiedy
prototyp jest już na ukończeniu.
Warsztat – projektowanie, szkicowanie
Współprojektowanie serwisu (wersja przenośna & stacjonarna)
Przeprojektowanie strony: http://www.um.warszawa.pl
Projektowanie serwisu pod rozdzielczości 1200px (wersja Web), 768px (wersja
tabletowa), 320px (wersja smartfonowa).
Strona 44 z 73
Wzorce projektowe
http://ui-patterns.com
Gridy
http://twitter.github.com/bootstrap/
http://goldengridsystem.com
Strona 45 z 73
http://960.gs
Strona 46 z 73
Nawigacja
Strona 47 z 73
Menu horyzontalne
Breadcrumb menu – menu okruszkowe
Strona 48 z 73
Paginacja
Przewijanie z doczytywaniem
Strona 49 z 73
Wizard (kreator)
Captcha
Strona 50 z 73
Stopka
Formularze
Najlepsze praktyki przy projektowaniu formularzy:
http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-formusability/
Formularze pełnią często kluczową rolę w komunikacji. Rejestracja, koszyk,
logowanie, przelewanie pieniędzy - to niezwykle delikatne procesy, gdzie błędy
mogą być kosztowne.
6 komponentów składowych:
●
etykiety (labels),
●
pola input,
●
akcje – butony,
Strona 51 z 73
●
pomoc,
●
informacje potwierdzające lub negujące,
●
walidacja.
Strona 52 z 73
Gdzie umieszczać etykiety
●
u góry: proste formularze
czas dotarcia wzroku od etykiety do pola input: 50ms
●
do prawej: średnio skomplikowane formularze
czas dotarcia wzroku od etykiety do pola input: 240ms
●
do lewej: rozbudowane formularze
czas dotarcia wzroku od etykiety do pola input: 500ms
Przyciski akcji
Strona 53 z 73
Zawsze jedna kolumna
Pomoc
●
statyczna: obok pól input np. liczba znaków w haśle (np. min 6 znaków),
●
wywoływana przez użytkownika po naciśnięciu ikony informacyjnej.
Strona 54 z 73
Informacje potwierdzające lub/i walidacja:
●
wartości pól input powinny być walidowane na bieżąco po wpisaniu
kolejnych liter lub po przejściu do kolejnego pola,
●
walidacja końcowa tylko wtedy, kiedy konieczna.
Strona 55 z 73
Dobry przykład rozdzielenia logowania i rejestracji: Dropbox
Technologie
Przegląd
technologii
mobilnych
w
kontekście
urządzania
Omówienie przykładów:
●
http://jquerymobile.com/demos/1.2.0/
●
http://twitter.github.com/bootstrap/
Strona 56 z 73
projektowania
na
nieznane
Responsive design (liquid)
Rozwiązania mobilne a natywne aplikacje
http://www.lukew.com/ff/entry.asp?1193
Wersja mobilna - w przeglądarce:
●
dzielenie się treściami poprzez link,
●
linki nie otwierają aplikacji,
●
brak cenzora przy produkowaniu treści,
●
silniki większości przeglądarek mobilnych pozwalają tworzyć nowoczesny
kod,
●
konsumpcja treści poprzez przeglądarki mobilne ciągle rośnie,
●
HTML5 co raz lepiej wspierany (browser storage, geolokalizacja).
Natywne aplikacje
●
większość osób używa mniej niż 6 aplikacji w ciągu dnia,
●
niepewność, czy aplikacja przejdzie poprawnie akceptację do App Store,
●
większe koszty wdrożenia,
●
szybkość działania jest przewagą, ale silniki javascript są też co raz
szybsze,
●
możliwość działania bez dostępu do internetu,
●
łatwa monetyzacja w przypadku aplikacji płatnych.
Istotne ograniczenia
Ograniczenia związane z urządzeniami mobilnymi; kontekst użytkowania aplikacji
na urządzeniach mobilnych - ograniczenia skupienia uwagi.
Na urządzeniach mobilnych należy realizować tylko najistotniejsze zadania.
Strona 57 z 73
Minimalne
rozmiary
punktów
dotyku
(target
touch
points)
to
według
rekomendacji Apple 44x44px, według Microsoftu 34x34px, a według Nokii to
28x28px.
Średni rozmiar palca to 45 – 57 px, a w przypadku kciuka 72px.
http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-designideal-mobile-touchscreen-target-sizes/
Strona 58 z 73
Blok 5. Techniki i metody badania
użyteczności
1. Istota badań w projekcie
Omówienie UCD i roli badań w tej metodyki
Badania użyteczności służą przede wszystkim uzyskanie informacji zwrotnej
o działaniu systemu. Ocena użyteczności ma na celu:
a. sprawdzenie działania systemu,
b. diagnozę problemów,
c. porównanie alternatywnych projektów,
d. weryfikację
spełnienia
warunków
i
celów
systemu
z
perspektywy
użytkownika.
Badania użyteczności są wykorzystywane we wszystkich etapach procesu
projektowania zorientowanego na użytkownika:
- wstępna ocena problemów na etapie analizy potrzeb użytkowników,
- analiza prototypów,
- oceny przed- i po-wdrożeniowe.
Metody testowania użyteczności są realizowane w dwóch wymiarach:

oceny nie oparte na wykonaniu - ocena dokonywana na podstawie
wiedzy i umiejętności eksperckich oraz w oparciu o opinię użytkowników,

testy
wykonaniowe
(behawioralne)
-
ocena
dokonywania
podstawie obserwacji interakcji użytkownika z systemem.
Strona 59 z 73
na
2. Analiza heurystyczna
Opis metody badawczej, podstawowe heurystyki
Metoda polegająca na weryfikacji interfejsu w odniesieniu do heurystyk, czyli
ogólnych zasad użyteczności.
Najczęściej stosowane heurystyki w analizie heurystycznej zostały sformułowane
przez Nielsena. Inne heurystyki to np. 8 zasad Shneidermana, 30 zasad
użyteczności Connella, 10 zasad projektowania Togga.
Heurystyki Nielsena:
1. Widoczność stanu systemu
System powinien zawsze informować użytkownika co się w nim dzieje,
dzięki zastosowaniu odpowiednio zastosowanego systemu komunikacji.
2. Dostosowanie systemu do świata rzeczywistego
System powinien komunikować się z użytkownikiem jego językiem
i posługiwać się zrozumiałymi analogiami do rzeczywistości.
3. Poczucie kontroli i swoboda wyboru.
Użytkownicy popełniający błędy powinni mieć łatwą możliwość wyjścia
z sytuacji awaryjnej, najlepiej dzięki udostępnieniu opcji „anuluj”, „wróć”.
5. Spójność i standardy
W systemie powinno być zastosowane konsekwentne użycie tych samych
słów, symboli i działań, zgodne z przyjętymi zasadami i standardami.
6. Zapobieganie błędom
System powinien w pierwszej kolejności zapobiegać popełnianiu błędów,
Strona 60 z 73
dzięki właściwie zaprojektowanemu systemowi komunikacji.
7. Rozpoznawania zamiast zapamiętywania
System
nie
powinien
znacząco
obciążać
systemu
poznawczego
użytkowników i nie powinni oni musieć zapamiętywać informacji przy
przechodzeniu między różnymi stanami systemu.
8. Elastyczność i wydajność
Użytkownicy powinni mieć możliwość dopasowania sposobu wykonania
typowych zadań do poziomu swoich umiejętności oraz dostępu „na skróty”
do wybranych funkcji.
9. Estetyka i umiar
Oszczędny układ graficzny zwiększa czytelność, zmniejsza obciążenie
wzroku i skraca czas odszukania informacji.
10.Skuteczna obsługa błędów
Komunikaty błędów powinny być skonstruowane prostym, zrozumiałym
językiem i jasno wskazywać typ problemu oraz sposób jego rozwiązania.
11.Pomoc i dokumentacja
Dokumentacja systemu powinna umożliwiać szybkie odnalezienie żądanej
informacji.
Korzyści:

rozpowszechnienie metody,

uniwersalność heurystyk,

kluczowe
kryteria
z
punktów
widzenia
np. komunikowanie użytkownikowi błędów.
Strona 61 z 73
projektowania
interakcji,
Wady:

wymaga dużego doświadczenia audytora,

ogólnikowy
charakter
heurystyk,
nie
uwzględniający
różnic
między
systemami.
3. Warsztat
Uproszczona analiza heurystyczna wybranej strony internetowej.
Dokonaj
analizy
heurystycznej
strony
internetowej
Warszawy
www.um.warszawa.pl w odniesieniu do trzech wybranych heurystyk.
4. Listy kontrolne
Opis metody badawczej
Listy kontrolne to metoda oceny użyteczności, opierająca się na listach kryteriów
i warunków, które powinien spełniać interaktywny projekt, w szczególności
strona
internetowa.
Listy
kontrolne
mogą
być
sformułowane
w
oparciu
o istniejące standardy i zasady projektowania, a także mogą być autorską listą
sformułowaną w oparciu o własne doświadczenia projektowe i badawcze. Metoda
polega na dokonaniu oceny projektu w odniesieniu do wszystkich warunków
zawartych w liście kontrolnej.
Najbardziej wyczerpującym zestawem jest lista 247 warunków przygotowana
przez firmę Userfocus (http://www.userfocus.co.uk/resources/guidelines.html)
w następujących kategoriach:

Użyteczność strony głównej (20 kryteriów oceny strony głównej),

Orientacja na zadania (44 kryteria oceny wspierania realizacji zadań przez
stronę internetową),
Strona 62 z 73

Nawigacja i architektura informacji (29 kryteriów oceny nawigowania po
stronie),

Formularze i wprowadzanie danych (23 kryteria oceny obsługi formularzy),

Zaufanie i wiarygodność (13 kryteriów oceny zaufania i wiarygodności
strony),

Język oraz jakość zawartości (23 kryteria oceny treści serwisu),

Layout i projekt graficzny (38 kryteriów oceny warstwy wizualnej),

Wyszukiwanie (20 kryteria oceny użyteczności),

Pomoc, informacja zwrotna, tolerancja na błędy (37 kryteriów oceny
wsparcia dla użytkownika).
Korzyści:

skonkretyzowane kryteria (w porównaniu z heurystykami),

mniej obarczona błędem subiektywnej oceny,

dostępność metody (nie wymaga doświadczenia osoby oceniającej stronę).
Wady:

arbitralność kryteriów,

nieadekwatność we wszystkich przypadkach użycia systemu.
5. Badania użyteczności vs User Acceptance Testing
Wskazanie różnic pomiędzy badaniami użyteczności a testami odbiorczymi,
skupionymi na funkcjonalnościach.
Testy odbiorcze (User Acceptance Testing, UAT) - etap kontroli jakości (Quality
Assurance)
systemu,
polegający
na
weryfikacji
stawianych mu wymagań, głównie funkcjonalnych.
Strona 63 z 73
spełnienia
przez
system
Zasadniczą różnicą między badaniami użyteczności a testami odbiorczymi jest ich
cel. W przypadku badań użyteczności celem jest identyfikacja problemów
występujących w systemie. Natomiast testy odbiorcze koncentrują się na
realizacji przez system wymagań, założonych na etapie projektowania (nie
wyklucza to identyfikacji błędów).
Testy UAT mają charakter testów okołowdrożeniowych, zazwyczaj na ostatnim
etapie procesu produkcji lub na początku wdrożenia. Natomiast stosowanie
testów użyteczności rekomendowane jest na wszystkich etapach procesu
projektowania i wdrożenia. Im wcześniej rozpoczynamy ich stosowanie, tym są
efektywniejsze.
Najważniejszą różnicą jest jednak wykorzystanie osób badanych. W przypadku
UAT są to dowolni użytkownicy, niekoniecznie z grupy docelowej systemu,
natomiast w testach użyteczności jednym z warunków ich stosowania jest
badania z udziałem docelowych użytkowników systemu, opartych m.in. na
personach.
6. Laboratoryjne badania użyteczności z użytkownikami
Opis metody badawczej, scenariusz badania, niezbędne dokumenty, thinking
aloud protocol, popularne technologie i produkty, standardy badań.
Laboratoryjne
badania
użyteczności
są
kluczowym
komponentem
metody
projektowania zorientowanego na użytkownika. Celem testów jest uzyskanie
informacji zwrotnej wprost od potencjalnych użytkowników, dostarczającej
obiektywnych danych, a nie opinii. Ważną cechą testowania użyteczności jest
duży wpływ na zwrot z inwestycji (tzw. ROI), m.in. poprzez oszczędność czasu
wprowadzania poprawek do systemu.
Testy polegają na obserwacji używania i realizowania zadań w systemie przez
Strona 64 z 73
potencjalnych użytkowników. Oceny dokonuje się na podstawie obserwowanego
zachowania użytkownika w interakcji z systemem (w odróżnieniu od metod
opartych na deklaratywnej ocenie). Testy użyteczności mają charakter stałego
procesu testowania systemu, a nie jednorazowej oceny.
Rodzaje testów:
a. testy podsumowujące (summative) - testy na gotowym systemie lub na
zakończenie procesu projektowania,
b. testy projektowe (formative) - w trakcie procesu projektowania, wykonane
na prototypie, weryfikujące założone cele.
Scenariusz badań
1. Analiza systemu
2. Rekrutacja osób badanych

Rekrutując
osoby
do
testów
należy
uwzględnić
aktualny
i potencjalny poziom wiedzy i umiejętności użytkowników w danej
dziedzinie oraz poziom umiejętności obsługi komputera (i/lub
internetu) przez użytkowników.

Liczba osób badanych - 10 osób w testach podsumowujących
(ok.
95%
zidentyfikowanych
błędów,
5-6
osób
w
testach
projektowych)
3. Przygotowanie zadań i scenariuszy

Zadania - krótkie, skoncentrowane na celu. Przydatne w sytuacji,
kiedy użytkownik nie wymaga wprowadzenia w kontekst użycia.

Scenariusze - dostarczają dodatkowego kontekstu i motywacji.
Scenariusze tworzą historię i zwiększają zrozumienie sytuacji
badawczej, dodatkowo urealniają sytuacje testową. Scenariusze
zawierają zadania do wykonania.
4. Przeprowadzenie testu

Test wykonywany jest przez osobę badaną w obecności moderatora,
Strona 65 z 73
który dokonuje na wstępie wprowadzenia i udziela wyjaśnień
niezbędnych do przeprowadzenia badania. Moderator ma za zadanie
wspomagać użytkownika w trakcie realizacji zadań wtedy, gdy jest
to koniecznie.

Protokół głośnego myślenia (Thinking Aloud Protocol)
o Protokół głośnego myślenia - badany podczas wykonywania
zadań proszony jest o „głośne myślenie”, czyli bieżące
relacjonowanie tego, co robi, swoich myśli oraz spostrzeżeń.

Etapy wykonania testu:
a. instrukcja
(kluczowe
informacje
dla
użytkownika
- przedmiotem testów jest systemu, a nie umiejętności
i
wiedza
użytkownika,
wprowadzenie
protokołu
głośnego
myślenia, zgoda na rejestrowanie sesji),
b. wykonanie zadań przez badanego,
c. obserwacja
badanego
użytkownika,
(notowanie
zwracanie
uwagi
wszystkich
zachowań
wahania,
nietypowe
na
zachowania, niejasność sytuacji; przypominanie o protokole
głośnego
myślenia;
pogłębianie
interesujących
wątków;
unikanie naprowadzających pytań),
d. pytania i kwestionariusze potestowe.
5. Analiza wyników


Analiza wyników testów użyteczności zawiera:
o
analizę problemów w odniesieniu do realizacji zadań,
o
nadanie priorytetów zidentyfikowanym problemom,
o
przygotowanie rekomendacji.
Dane uzyskiwane z testów:
o
Metryki wykonania:

liczba poprawnie zrealizowanych zadań

liczba
poprawnych/błędnych
wykonania zadania.
Strona 66 z 73
kroków
w
trakcie
o
Metryki błędów:

liczba nieudanych kroków,

liczba ponownych prób w wykonaniu zadania,

liczba
błędów
w
poszczególnych
zdaniach
(indywidualnie lub w grupie badanych).
o
Metryki efektywności:

czas wykonania poszczególnych zadań,

liczba kroków wymaganych do ukończenia zadania,

liczba zadań wykonanych w określonym czasie.
6. Przygotowanie raportu

Raport z testów użyteczności powinien zawierać:
o
opis i przeznaczenie testów,
o
metodykę badań,
o
opis wyników,
o
analiza wyników i rekomendacje w formie raportu.
Niezbędne materiały i dokumenty

System (aplikacja, strona internetowa, itp.),

Oprogramowanie do analizy,

Zadania/scenariusze,

Arkusze obserwacyjne,

Kwestionariusze, formularze do oceny.
Technologie i produkty
Morae (Windows)
Camtasia
Silverback (Mac OS X)
Strona 67 z 73
7. Zdalne badania użyteczności
Opis metody badawczej, scenariusz badania, niezbędne dokumenty, badania
moderowane i niemoderowane, popularne technologie i produkty.
Zdalne testy użyteczności – w odróżnieniu od testów laboratoryjnych nie
wymagają obecności testowanych osób w laboratorium. Moderator testów oraz
osoba badana mogą znajdować się w różnych lokalizacjach, najczęściej osoba
badana znajduje się w naturalnym dla siebie środowisku (dom lub praca).
Zdalne testy użyteczności stosuje się, gdy:
-
badani znajdują się w wielu, różnych, rozproszonych lokalizacjach,
-
testy wymagają przeprowadzenia badań na dużej grupie badanych,
-
istnieją wskazania do ograniczenia kosztów przeprowadzenia badań.
Wskazania do przeprowadzenia testów zdalnych:

możliwość znacznego zwiększenia badanej próby,

chęć obserwacji interakcji i zachowania badanego w jego naturalnym
środowisku,

testy zdalne ułatwiają zebranie danych ilościowych.
Scenariusz badań zdalnych jest analogiczny do badań laboratoryjnych - jedyne
ograniczenia narzuca wykorzystywana technologia, np. możliwość prezentacji
treści zadań lub pytań potestowych.
Badania moderowane:

osoba badana oraz moderator obserwują ten sam ekran, jednak w różnych
lokalizacjach,

komunikują
się
ze
sobą
poprzez
telefonicznie.
Strona 68 z 73
wykorzystywane
narzędzie
lub
Badania niemoderowane:

testowany wykonuje zadania samodzielnie wykorzystując pytania, które
prezentowane są za pośrednictwem wykorzystywanego narzędzia,

odpowiedzi oraz zachowania badanego są rejestrowane do dalszej analizy.
Zalety badań niemoderowanych:

duża liczba, równolegle realizowanych badań, bez ograniczeń dotyczących
lokalizacji badanych,

realizacja badań w dowolnym terminie,

brak wpływu eksperymentatora,

automatyzacja zbierania i analizy danych.
Wady badań niemoderowanych:

badania niemoderowane wykluczają interakcje z badanym użytkownikiem,
ograniczając w ten sposób możliwość uzyskania pogłębionej wiedzy
o ewentualnych problemach,

niemożność obserwowania zachowania badanego.

brak możliwość bieżącego reagowania na zachowanie i wykonanie zadań.
Popularne technologie i produkty stosowane w testach zdalnych:

www.loop11.com

www.usabilitytools.com

www.usabilla.com

www.userfly.com

www.userplus.com

www.verify.com

www.usertesting.com

www.userfeel.com

www.webnographer.com

www.openhalway.com
Strona 69 z 73

www.gazehawk.com
8. Badania użyteczności zdalne a badania laboratoryjne
Porównanie zalet i wad każdego typu badań. Wskazanie rekomendowanych
przypadków.
Rodzaj badań
Laboratoryjne
Zdalne
możliwość interakcji z
możliwość badań na dużej
badanym
grupie
możliwość moderowania sesji
niższe koszty realizacji
użyteczności
Zalety
(zadawania dodatkowych
pytań, reagowania na
pojawiające się problemy)
większa kontrola nad
większa elastyczność w
procesem rekrutacji osób
planowaniu i przeprowadzeniu
badanych, a przede
badań (w szczególności
wszystkim ich motywacji
niemoderowanych)
możliwość szczegółowego
możliwość przeprowadzenia
wprowadzenia użytkownika w
testów na różnych wersjach
kontekst badawczy i
systemu
wyjaśnienia, zwłaszcza w
przypadku skomplikowanych
zadań
możliwość obserwowania
automatyzacja procesu
niewerbalnego zachowania
analizy wyników
użytkownika
Strona 70 z 73
Rodzaj badań
Laboratoryjne
Zdalne
stosunkowo mała grupa
mniejsza możliwości interakcji
badawcza, niewystarczająca
i obserwacji badanego przez
dla różnych grup interesów do
moderatora
użyteczności
Wady
podejmowania decyzji
biznesowych
wyższe koszty realizacji
brak możliwości
badań: koszty dotarcia,
kontrolowania warunków
koszty wynajmu laboratorium
przeprowadzenia testów
bardziej wymagające
badany musi być
logistycznie
zaznajomiony z technologią
(np. konieczność instalacji
oprogramowania lub
rejestracji)
9. Wizard of Oz
Opis
metody
badawczej,
przykłady
użycia,
kontekst
użycia
dla
aplikacji
mobilnych
Wizard of Oz
Metoda testowania oparta na interakcji użytkownika z systemem, w którym efekt
interakcji jest generowany nie przez system, a przez nieznaną badanemu osobę
lub grupę osób („wizard”).
Sposób przeprowadzenia:
Metoda
realizowana
przygotowania
jest
podobnych
analogicznie
do
narzędzi
oraz
Strona 71 z 73
testów
użyteczności
materiałów.
i
wymaga
Natomiast
samo
przeprowadzenie badania wymaga przygotowania i zaangażowania drugiego obok
moderatora osoby pełniącej rolę operatora systemu (tzw. „wizarda”). „Wizard”
obsługuje system zdalnie i użytkownik nie wie o jego występowaniu w trakcie
badań.
Zalety:

szybka (i czasem tańsza) metoda prototypowania,

możliwość stworzenia wielu iteracji,

bardziej realna niż prototypowanie na papierze.
Wady:

interakcje mogą być prezentowane w nieadekwatny i wprowadzający
w błąd sposób,

może prezentować sposoby interakcji, które nie są dostępne,

wymaga treningu i przygotowania osoby pełniącej rolę „wizarda”.
10. Inne metody badawcze
Wskazanie listy innych, popularnych, metod badawczych.
Inne, popularne metody badań użyteczności:

Wędrówka/spacer poznawczy (cognitive walkthrough) - metoda
oceny eksperckiej, polegająca na realizowaniu przez co najmniej jednego
eksperta typowych zadań użytkownika systemu, np. logowania do systemu
transakcyjnego, dokonania przelewu.

Badania
śledzenia
użyteczności
wzroku
wykorzystująca
(eye
tracking)
specjalistyczny
-
sprzęt
metoda
badań
pozwalający
na
śledzenie wzroku użytkownika w trakcie realizacji zadań w systemie.
Strona 72 z 73
Rezultatem badania są jakościowe oraz ilościowe wyniki w formie:
o
map ciepła - obszarów, na których najdłużej spoczywał wzrok
badanych,
o
ścieżek wzroku - dokładnego odwzorowania punktów zatrzymania
i przemieszczenia wzroku poszczególnych badanych,
o
obszarów zainteresowania -
szczegółowych analiz dotyczących
zdefiniowanych elementów o kluczowym znaczeniu.
Znane, rzadziej stosowane metody:

testy porównawcze (benchmark testing),

partyzanckie testy użyteczności (guerilla usability testing),

grupy fokusowe.
Strona 73 z 73
Download

Materiały szkoleniowe z zakresu użyteczności serwisów internetowych