Badanie użyteczności stron www portalu Bonito

BADANIE UŻYTECZNOŚCI STRONY INTERNETOWEJ autor: Jacek Nosiła prowadzący: prof. ASP dr hab. Wiesław Gdowicz, asyst. dr Marta Więckowska Badania Użyteczności rok II, wzornictwo 2017/2018 Zakład Badań Wizualnych i Interakcji Akademia Sztuk Pięknych

1

SPIS TREŚCI 1. Prezentacja strony 2. Cel i grupa odbiorców strony 3. Budowa strony 4. Cechy wizualne 5. Wersje mobilne 6. Dostępne funkcje 7. Struktura budowy strony 8. Scenariusz zakupu 9. Wnioski z analizy strony 10. Opis badania 11. Badanie 12. Analiza badania 13. Wnioski

2

PREZENTACJA STRONY Czym jest strona bonito.pl?

Strona bonito.pl to internetowa księgarnia, w której poza książkami można zakupić również audiobooki, płyty z muzyką, płyty z filmami, zabawki, puzzle, gry, artykuły papiernicze, programy itp. Właściciel serwisu zatrudnia 300 osób, które realizują ponad 200 tysięcy zamówień miesięcznie.

Podział na ekrany

Użytkownik serwisu może bezpłatnie odebrać zamówiony towar w jednym z 20 punktów odbioru które znajdują się w Krakowie, Warszawie, Wrocławiu, Poznaniu, Łodzi, Katowicach i w Rzeszowie, lub zamówić wysyłkę pod wskazany adres. Łącznie bonito.pl zapewnia 4 rodzaje odbioru osobistego i 4 rodzaje wysyłki (różnią się ceną i warunkami dostawy). Informacji dodatkowych (drogą mailową lub telefonicznie) mogą udzielić pracownicy działu obsługi klienta.

3

CEL I GRUPA ODBIORCÓW STRONY Cele strony • Sprzedaż internetowa • Pozyskiwanie nowych klientów • Prezentowanie nowości • Przywiązywanie stałych klientów • Umożliwienie kontaktu z klientami • Pozyskiwanie kontrahentów • Informowanie o kosztach, zasadach współpracy, o firmie i pracownikach • Informowanie o promocjach • Budowanie więzi z klientem (linki do portali społecznościowych)

Odbiorcy • Czytelnicy książek • Użytkownicy pozostałych produktów • Osoby korzystające z internetu • Osoby szukające najniższych cen • Wydawcy • Partnerzy handlowi

Oczekiwania odbiorców • profesjonalizm • prostota procesu zakupów • szybkość operacji • możliwość korzystania z serwisu w telefonie/tablecie • łatwe znalezienie informacji • pewność i zaufanie czytelność

4

BUDOWA STRONY GŁÓWNEJ

strona główna 1. Logo

Elementy strony 1. Logo 2. Menu informacyjne 3. Menu główne 4. Wyszukiwarka 5. Koszyk 6. Baner-odnośnik do konta społecznościowego 7. Banery informacyjne 8. Banery z promocjami 9. Panel z ostatnio oglądanymi produktami 10. Panel z polecanymi tytułami 11. Panel z bestsellerami 12. Stopka

Funkcje strony głównej Wszystkie podstrony, w tym strona główna, różnią się od siebie jedynie środkowym panelem.

Strona główna odróżnia się wyświetlaniem panelu z polecanymi tytułami i bestsellerami. Wyszukiwanie produktu możliwe jest poprzez użycie wyszukiwarki lub menu głównego, które rozwija się na podkategorie.

Koszyk znajduje się cały czas w części menu informacyjnego, którego forma jest niezmienna.

4. Wyszukiwarka 8. Banery z promocjami 9. Panel z ostatnio oglądanymi produktami

8. Banery z promocjami

5. Koszyk 2. Menu informacyjne

8. Banery z promocjami

10. Panel z polecanymi tytułami

3. Menu główne

11. Panel z bestsellerami

7. Banery informacyjne 6. Baner konta społecznościowego

5

12. Stopka

BUDOWA STRONY PREZENTUJĄCEJ PRODUKT

strona prezentująca produkt

Elementy strony 1. Logo 2. Menu informacyjne 3. Menu główne 4. Wyszukiwarka 5. Koszyk 6. Banery informacyjne 7. Banery z promocjami 8. Panel z ostatnio oglądanymi produktami 9. Panel z opisem cech wybranego produktu oraz zdjęciem 10. Informacje o wysyłce, kontakt i dokładny opis produktu 11. Opinie klientów (jeśli są) 12. Proponowane produkty 13. Stopka

9. Panel z opisem cech wybranego produktu oraz zdjęciem

10. Informacje o wysyłce, kontakt i dokładny opis produktu

11. Opinie klientów (jeśli są)

Funkcje strony prezentującej produkt Strona prezentująca wybrany produkt, podobnie jak wszystkie podstrony, wyróżnia się jedynie środkowym panelem, który można podzielić na dwa segmenty: część z opisem cech wybranego produktu oraz zdjęciem i drugą część, z informacjami o wysyłce, kontaktem i dokładnym opisem produktu. Część pierwsza zawiera u góry drogę z podkategoriami, która ułatwia szybki powrót do przeglądania ich zawartości. Pojawia się również odnośnik do koszyka oraz schowka.

Druga część, to informacje o wysyłce, pełny opis produktu oraz opinie klientów o produkcie, jeśli takie istnieją. Pojawiają się wówczas proponowane produkty, które wybrali klienci, którzy kupili wybrany przez nas produkt.

12. Proponowane produkty

6

BUDOWA STRONY Z KONTEM UŻYTKOWNIKA

konto użytkownika

Elementy strony 1. Logo 2. Menu informacyjne 3. Menu główne 4. Wyszukiwarka 5. Koszyk 6. Baner-odnośnik do kona społecznościowego 7. Banery informacyjne 8. Banery z promocjami 9. Panel z ostatnio oglądanymi produktami 10. Panel z danymi użytkownika i ustawieniami 11. Informacje o stanie ostatniego zamówienia 12. Informacje o historii zamówień 13. Stopka

10. Panel z danymi użytkownika i ustawieniami

11. Informacje o stanie ostatniego zamówienia

12. Informacje o historii zamówień

Logowanie Aby móc kupić wybrany produkt w serwisie bonito.pl należy się zarejestrować i zalogować. Strona logowania i rejestracji to ta sama zakładka. Rejestracja nie wymaga potwierdzania poprzez klikanie link w zwrotnym mailu, nie ma wbudowanej Captchy a hasło nie musi zawierać wielkich liter, cyfr ani znaków szczególnych. Należy podać jedynie login, hasło, imię i nazwisko oraz e-mail.

Po zalogowaniu pokazuje się nowa karta, podzielona na trzy części: dane osobowe i ustawienia, stan ostatniego zamówienia oraz historię zamówień. Historia zamówień prezentowana jest graficznie (wykres). Automatycznie liczona jest wysokość rabatu (na podstawie historii zamówień).

7

BUDOWA STRONY KOSZYK

koszyk

Elementy strony 1. Logo 2. Menu informacyjne 3. Menu główne 4. Wyszukiwarka 5. Koszyk 6. Baner-odnośnik do konta społecznościowego 7. Banery informacyjne 8. Banery z promocjami 9. Panel z ostatnio oglądanymi produktami 10. Panel z opisem cech wybranego produktu oraz zdjęciem 11. Zawartość koszyka 12. Panel wyboru sposobu dostawy 13. Panel z potwierdzeniem i podsumowaniem 14. Stopka

11. Zawartość koszyka

12. Panel wyboru sposobu dostawy

13. Panel z potwierdzeniem i podsumowaniem

Zamawianie Na stronie Koszyka nowym elementem jest panel z trzema częściami: zawartością koszyka, wyborem sposobu wysyłki oraz potwierdzeniem adresudostawy i całości zamówienia. Zawartość koszyka podsumowuje wartość produktów oraz koszt dostawy, a także informuje o warunkach darmowej dostawy. W części z wyborem dostawy wyświetla się dodatkowo terminarz realizacji zamówienia. Zamówienie zostaje zatwierdzone w momencie kliknięcia przycisku „Złóż zamówienie” po uprzednim potwierdzeniu znajomości regulaminu, zgód na przetwarzanie danych i podaniu adresu dostawy.

8

BUDOWA STRONY. PODSUMOWANIE Stałe elementy strony Strona bonito.pl zbudowana jest w oparciu o schemat, w którym duża część elementów jest stała. Duża statyczność strony sprawia, że nie podąża ona za kolejnymi krokami użytkownika (klienta), nie nakierowując go.

Z drugiej strony, niezmienność wielu elementów może działać korzystnie w przypadku osób nieprzyzwyczajonych do responsywnych interfejsów (np. osoby starsze).

strona prezentująca produkt

strona główna

Zmienne elementy strony Jedynym zmiennym elementem witryny jest środkowy panel, między dwoma menu oraz dolną częścią.

Wyświetlane treści wyglądają niespójnie, często chaotycznie (wielość użytych wysokości pisma, mnogość kolorów, niespójne ze sobą przyciski itp.). Od objętości wyświetlanego panelu zależy, jak bardzo wydłuży się strona w pionie, co niesie ze sobą konieczność męczącego skrollowania.

9

konto użytkownika

koszyk

CECHY WIZUALNE Kolorystyka Strona luźno nawiązuje swoją kolorystyką do barw logotypu bonito.pl. Czerwone akcenty kolorystyczne mocno kontrastują z odcieniami szarości, w których utrzymane są tła poszczególnych pól.

Kontrasty kolorystyczne

Elementy strony i kolorystyka

Mocno wyróżniają się nazwy elementów menu informacyjnego, biały lub żółty tekst na czerownym tle. Większość pozostałych tekstów, to jasne tło i ciemne litery.

Zmiennym elementem strony jest zawartość pola między bocznym menu po lewej stronie a górnym menu, które są nieruchomymi elementami. Strona używa nieznanego kroju pisma z rodziny sans-serif, wyjątkowo użyto kroju Verdana.

Elementy strony i kolorystyka Kolorystyka logotypu

Zmiennym elementem strony jest zawartość pola między bocznym menu po lewej stronie a górnym menu, które są nieruchomymi elementami. Strona używa nieznanego kroju pisma z rodziny sans-serif, wyjątkowo użyto kroju Verdana.

Elementy strony i kolorystyka Typografia Zmiennym elementem strony jest

Strona używa nieznanego kroju pisma sanzawartość polaz rodziny między bocznym menu po lewej stronie górnym s-serif w różnych odmianach, wyjątkowo użyto akroju menu, które są nieruchomymi eleVerdana. mentami. Strona używa nieznanego Wysokości pisma, jakiej użyto budowie strony to: wykrojuprzy pisma z rodziny sans-serif, 9 px, 11 px, 12 px, 13 px, 15 px, 16 px, 17 px, 19Verdana. px, 21 px. jątkowo użyto kroju Wysokości pisma, jakiej użyto przy budowie strony to: 9 px, 11 px, 12 px,

Wysokości verdana pisma, jakiej użyto przy budowie strony to: 9 px 9 px, 11 px,11 px 12 px, 13 px,12 px 15 px, 16 px, 17 px,13 px 19 px, 21 px.

15 px

10

verdana Wysokości pisma, jakiej użyto przy 9 px to: budowie strony 9 px, 11 px 11 px, 12 px, 12 px 13 px, 15 px, 16 px, 13 px 17 px, 19 px, 15 px 21 px.

16 px 17 pxlogotypu Kolorystyka 19 px

verdana 9 px 11 px 12 px 13 px 15 px 16 px 17 px 19 px 21 px

6

DOSTĘPNE FUNKCJE. PRODUKT Menu główne Składa się z 9 głównych kategorii: 1.Książki 2.Audiobooki 3.Muzyka 4.Filmy 5.Zabawki 6.Puzzle 7.Gry planszowe 8.Artykuły papiernicze i biurowe 9.Gry i programy Podkategorie widoczne są w menu głównym cały czas.

Po kliknięciu w główną kategorię, w środkowym panelu pojawia się zdublowane drzewo kategorii (z podkategoriami) i wybrane produkt.

Wyszukiwarka i sortowanie W serwisie są dwie wyszukiwarki. Ta, która jest stałym elementem, proponuje podpowiedzi. Wyszukiwarka z panelu kategorii nie proponuje podpowiedzi, wyświetla jedynie ostatnie wpisywane hasła w danej sesji.

Sortowanie pozwala wybrać kolejność wyświetlania produktów. Domyślnie ustawiona jest wartość „bestseller”.

Można wybrać również sortowanie wg daty, ceny, lub alfabetyczne.

11

DOSTĘPNE FUNKCJE. PRODUKT Banery reklamowe Na stronie Bonito.pl są trzy różne banery informujące o promocjach. Jeden z nich jest widoczny cały czas. Kliknięcie w nie otwiera w środkowym panelu listę z wybranymi pozycjami objętymi promocją.

Banery informacyjne i społecznościowe Banery umieszczone na dole strony, zaraz nad stopką, mają formę kwadratów, a poniżej nich podłużny baner z odnośnikiem do Facebooka. Dwa z nich pełnią funkcję informacyjną, dotyczącą dwóch rodzajów wysyłek oraz sposobu płatności. Dwa z nich po kliknięciu przenoszą użytkownika na podstronę dotyczącą wysyłki. Baner o sposobie płatności jest nieaktywny. Banery zapraszające do odwiedzenia profilu na koncie społecznościowym, po kliknięciu w nie, otwierają stronę serwisu (Instagram lub Facebook).

12

DOSTĘPNE FUNKCJE. INFORMACJA Menu informacyjne Menu znajduje się w górnym pasku. Składa się z 10 elementów.

1. O nas W panelu środkowym wyświetlają się informacje przygotowane przez bonito.pl. Są zdjęcia, wykres oraz film promoujący, podlinkowany z Youtube.

2. Regulamin

3. Kontakt Wyświetla się spis miejsc do odbioru osobistego, dane rejestracyjne firmy oraz numer na infolinię. Można również kliknąć w formularz kontaktowy przy zdjęciu jednego z 4 doradców. Wówczas otwiera się nowe okno z formularzem, w którym musimy podać swój adres e-mail, i wpisać treść (można dodać załącznik).

13

DOSTĘPNE FUNKCJE. INFORMACJA 4. Koszty dostawy

5. Odbiór osobisty Podstrona zawiera spis adresów, które po kliknięciu otwierają nowe okno z mapą Google.

6. Rabaty 7. Nowości Strona pokazuje nowe produkty, które od razu można dodać do koszyka. W panelu środkowym wyświetlane są pozycje, które można bezpośrednio otworzyć jako podstronę produktu. Wówczas stronę można podzielić, uwaga, na 10 ekranów.

14

DOSTĘPNE FUNKCJE. INFORMACJA 8. Zapowiedzi Wyświetla w panelu środkowym listę pozycji, które wkrótce się pojawią. Po kliknięciu danej pozycji otwiera się podstrona, na której można podać e-mail, pod który sklep przyśle wiadomość o dostępności pozycji.

pełna długość podstrony „Zapowiedzi”

Strona wyświetlana jest na, uwaga, ok. 35 ekranach...

9. Dla wydawców 10. Sprzedaż hurtowa

15

WERSJA MOBILNA Strona nie posiada wersji mobilnej.

Uruchomiona na jakimkolwiek urządzeniu skaluje się do jego rozdzielczości, ale nie jest responsywna. Aby móc korzystać ze strony na urządzeniu mobilnym, konieczne jest powiększanie wybranych fragmentów, w przeciwnym razie teksty są całkowicie nieczytelne.

Strona uruchomiona na wirtualnych urządzeniach w usłudze Browserstack wciąż poprawnie wyświetla się w środowisku Windows XP i przeglądarce Internet Explorer 6.0 (niewspieranej od kwietnia 2014 roku), co świadczy, że dla takich środowisk była projektowana.

Bonito.pl nie występuje jako osobna aplikacja na platformie Sklep Play (Android), Sklep (Microsoft Windows) ani na iTunes (Apple).

strona wyświetlana na iPadzie

16

strona wyświetlana na Nexusie 5X

INTERAKCJE Strona bonito.pl nie posiada nowoczesnych interakcji, w których elementy po najechaniu na nie kursorem rozwijają się, a po cofnięciu – chowają. Interakcje są bardzo proste i delikatne. Zaobserwowane przeze mnie zmiany można podzielić na trzy rodzaje: 1. Zmiana koloru tekstu na szary.

Po najechaniu kursorem na wybrany tekst, zmienia on swój kolor na szary. Po kliknięciu jego kolor wraca do podstawowej wartości.

2. Podkreślenie Po najechaniu kursorem, tekst podkreśla się, a po cofnięciu, wraca do podstawowej wartości.

3. Zmiana koloru piktogramu na niebieski Zaobserwowana tylko w obszarze wyszukiwarki, okienko wyboru po najechaniu kursorem zmienia kolor na niebieski.

4. Wyświetlenie dodatkowej informacji Po najechaniu kursorem na wybrany tekst pojawia się żółta ramka z dodatkowymi informacjami. Po cofnięciu kursora ramka z tekstem znika. Często występuje w połączeniu z innymi interakcjami.

17

książki

audiobooki

muzyka

filmy

zabawki

puzzle

gry planszowe

g r y art. i probiurowe gramy

koszyk

poziom 2 poziom 3

131

p. 4

logowanie rejestracja

19

182

14

23

22

9

7

9

7

2 Menu Menu Menu główne główne główne

2

ostatnio oglądane

93

strona produktu

banery

strona z wynikami wyszukiwań

zaawansowana

wyszukiwarka

koszyk

logowanie rejestracja

ał e st elem ro e ny n ty

Etap II wybór produktów

st

p. 5

Poziomy kategorii produktów

poziom 1

STRUKTURA STRONY

SCENARIUSZ ZAKUPÓW Etap 1 Wybór produktów Produkty można oglądać, przechodząc na stronę prezentującą produkt. Wyświetlane są tam informacje takie jak: cena, informacje szczegółowe, opis wydawcy, zdjęcie, opnie użytkowników, koszty wysyłki itp. Przejść do strony produktu można kilkoma ścieżkami.

Etap Zamówienie, płatność i dostawa wybór produktów

Po przejściu na stronę koszyka tylko jeden krok dzieli użytkownika od sfinalizowania procesu zakupu. Na jeden podstronie następuje wybór płatności, dostawy i pozostałych parametrów.

logowanie

Logowanie / rejestracja Aby przeglądać produkty w sklepie Bonito.pl nie trzeba być zalogowanym. Własne konto ułatwia jednak proces zamówienia (nie trzeba m.in. podawać adresu dostawy). W przypadku, kiedy użytkownik nie posiada konta, należy przejść proces rejestracji.

zamówienie, płatność, dostawa

19

rejestracja

WNIOSKI Z ANALIZY STRONY Wady strony: 1. Bardzo długie podstrony, za którymi nie podąża menu. Podczas skrolowania w dół, aby powrócić do menu, trzeba pokonać tę samą drogę z powrotem.

2. Duże rozbudowanie kategorii „książki” (zarówno ilość poziomów jak i ilość produktów), budzi pytanie, czy to wokół niej nie powinna być zbudowana cała strona.

3. Menu informacyjne nie zawiera wiele treści, a zajmuje bardzo duży obszar strony i nie chowa się (jest stałym elementem) 4. Menu główne zawsze wyświetla wszystkie podkategorie z drugiego poziomu, choć mogłoby się chować i zabierać mniej miejsca, przez co na jednym ekranie zmieściłoby się więcej kategorii.

5. Poprzez zastosowanie ogromnej ilości wielkości pisma i różnych graficznych elementów, strona sprawia wrażenie chaotycznej i może utrudniać prawidłowe odczytanie hierarchii ważności.

6. Panel środkowy jest dość wąski, przez co mieści się na nim mało treści. Konieczne jest przenoszenie ich niżej, co zmusza użytkownika do skrolowania w dół (patrz: uwaga dot. menu głównego).

8. Strona nie dopasowuje się do ekranów o różnej rozdzielczości.

9. Wygląd i budowa są dość archaiczne.

Zalety strony: 1. Logowanie nie jest niezbędne, żeby dokonać zakupu.

Jeśli nawet klient zdecyduje się założyć konto, strona nie wymaga skomplikowanych haseł i sama procedura trwa krótko.

2. Duża ilość stałych elementów może ułatwiać nawigację osobom nie przyzwyczajonym do interaktywnych interfejsów. Większość elementów nigdy nie zmienia swojego położenia.

3. Strona daje dużo możliwości dotarcia do wybranego produktu, m.in. wyszukiwarkę główną i przypisaną do danej kategorii, drzewko menu głównego, banery, wyświetlanie ostatnio oglądanych produktów.

4. Minimalna ilość kroków potrzebna do zrealizowania zamówienia, to tylko trzy (w tym wypełnienie pola z adresem i danymi do dostawy).

7. Wyszukiwarka oparta na prostym silniku wyszukuje tylko nazwy produktów, dopasowując wyniki do wpisanych liter (indeksuje tytuł, autora, wydawnictwo, ISBN lub kod paskowy i oprawę). Nie da się za jej pomocą wyszukać np. kategorii.

20

Podsumowanie Sposób działania serwisu bonito.pl trudno uznać za dopracowany. Użytkownik nigdy nie może mieć pewności, jakie skutki wywoła określona czynność – często pojawiają się jakieś „wyjątki” od reguły (np. jeden z 4 podobnych banerów jest nieaktywny, albo inny jest skutek kliknięcia w kat. „Książki” niż każdą inną kategorię).

Znajduje to swoje odzwierciedlenie w estetyce strony.

Widać, że stworzona wiele lat temu systematycznie była wzbogacana o nowe elementy, często niespójne z resztą.

OPIS BADANIA Pytania: Jak wygląda proces robienia zakupów?

1. Czy użytkownicy korzystają z menu głównego?

2. Znajdź płytę Katarzyny Nosowskiej „8”. Kategoria Muzyka, podkategoria Alternatywna.

3. Znajdź kategorię, w której znajdziesz podręcznik do plastyki dla klasy 4 szkoły podstawowej.

2. Czy użytkownicy korzystają z wyszukiwarki?

3. Czy użytkownicy dostrzegają banery i korzystają z nich?

4. Dodaj do koszyka książkę „Fiat Punto”, która jest w promocji -50 %.

4. Czy użytkownicy potrafią dodać produkt do koszyka?

Warunki badania:

Cel badania:

Osoby badane wykonują zadanie w siedząc przy stole z laptopem. Mogą korzystać z myszy lub gładzika.

Podczas badania towarzyszy im badacz.

Poznanie, z jakich narzędzi dostępnych na stronie korzysta użytkownik aby znaleźć i kupić produkt?

Badanie: Badanie polega na obserwowaniu sposobu poruszania się po stronie osoby badanej, podczas wykonywania poleceń.

Polecenia dotyczą procesu wyszukiwania produktu, kategorii oraz finalizowania procesu poprzez dodanie produktu do koszyka.

Czas na wykonanie poleceń jest nieograniczony.

Polecenia: 1. Zapoznaj się ze stroną. Masz na to 2 minuty.

21

POLECENIE 1 STRUKTURA STRONY Zadanie nr 1 polegało na znalezieniu płyty Katarzyny Nosowskiej. Badani poznali nie tylko tytuł płyty, ale również nazwę kategorii i podkategorii, w której płyta się znajdowała. Sugestia ta miała dać odpowiedź na pytanie, czy przyzywczajenie badanych do korzystania z wyszukiwarek okaże się silniejsze niż skorzystanie z podpowiedzi i odszukanie kategorii w menu głównym.

poziom 1

Droga A

muzyka

Droga B 23

strona produktu

strona z wynikami zaawansowana

strona produktu

wyszukiwarka

22

POLECENIE 1 Osoba 1 Zadanie nr 1 polegało na znalezieniu płyty Katarzyny start Nosowskiej. Badani poznali nie tylko tytuł płyty, ale również nazwę kategorii i podkategorii, w której płyta się znajdowała. Sugestia ta miała dać odpowiedź na pytanie, czy przyzywczajenie badanych do korzystania z wyszukiwarek okaże się silniejsze niż skorzystanie z podpowiedzi i odszukanie kategorii w menu głównym.

start

0:08

0:22

0:28

Osoba 2 0:06

0:16

0:22

Osoba 3 start

10 s.

10 s. – 45 mm

0:07

0:21

Osoba 4 0:14

start

0:21

– wpisywanie hasła w wyszukiwarkę

Osoba 5 0:29

start

23

0:37

POLECENIE 2 STRUKTURA STRONY

poziom 1

Zadanie nr 1 polegało na znalezieniu płyty Katarzyny Nosowskiej. Badani poznali nie tylko tytuł płyty, ale również nazwę kategorii i podkategorii, w której płyta się znajdowała. Sugestia ta miała dać odpowiedź na pytanie, czy przyzywczajenie badanych do korzystania z wyszukiwarek okaże się silniejsze niż skorzystanie z podpowiedzi i odszukanie kategorii w menu głównym.

poziom 2

19

poziom 3

131

poziom 3

p. 5

poziom 2

19

131

93

strona produktu

strona z wynikami

p. 4 p. 5

Droga B

p. 4

poziom 1

Droga A

zaawansowana

93

strona produktu

24

wyszukiwarka

POLECENIE 2 Osoba 1 start Zadanie nr 2 polegało na dotarciu do odpowiedniej podkategorii, w której są podręczniki do klasy 4 szkoły podstawowej.

Tak sformułowane polecenie miało symulować sytuację, w której ktoś potrzebuje kupić książkę nie znając jej tytułu, ale jest w stanie rozpoznać ją po okładce spośród pozostałych książek z danej kategorii. Utrudnienie polega na tym, że wyszukiwarka nie znajduje kategorii. start

0:10

0:18

!

!

0:25 0:31

!

0:49

0:57

1:04 1:09

!

Osoba 2

0:12 0:08 0:18

0:26

0:30

1:00

!

1:24 1:29 1:34

!

Osoba 3

start

0:13 0:21 0:09 0:17

Osoba 4 10 s.

10 s. – 18 mm

start

0:10

0:21

0:28

0:35

– wybranie błędnej ! kategorii lub wpisanie zwłego hasła do wyszukiwarki – wpisywanie hasła w wyszukiwarkę

Osoba 5 start 0:06

0:17

0:22

25

0:51 0:39 0:44

0:56

1:09 1:16

POLECENIE 3 STRUKTURA STRONY Zadanie nr 3 polegało na dodaniu do koszyka książki „Fiat Punto”. Dodatkowo w poleceniu zawarto podpowiedź, że produkt jest obecnie w promocji. Takie sformułowanie polecenia miało pozwolić na sprawdzenie, czy osoby korzystające ze strony zauważają banery i korzystają z nich. Dodanie do koszyka może odbywać się na dwa różne sposoby, poprzez otwarcie strony produktu i kliknięcie w odpowiedni przycisk, lub też kliknięcie w przycisk z koszykiem w miniaturze produktu na stronie z wynikami wyszukiwania (pomijając otwieranie strony produktu).

strona z wynikami

koszyk

Droga C

poziom 2

banery

19

poziom 3

strona produktu

poziom 1

Droga A

131

Droga B

strona produktu strona produktu

strona z wynikami zaawansowana

koszyk koszyk

wyszukiwarka

26

POLECENIE 3 Osoba 1 Zadanie nr 3 polegało na dodaniu do koszyka książki start „Fiat Punto”. Dodatkowo w poleceniu zawarto podpowiedź, że produkt jest obecnie w promocji. Takie sformułowanie polecenia miało pozwolić na sprawdzenie, czy osoby korzystające ze strony zauważają banery i korzystają z nich. Dodanie do koszyka może odbywać się na dwa różne sposoby, poprzez otwarcie strony produktu i kliknięcie w odpowiedni przycisk, lub też kliknięcie w przycisk z koszykiem w miniaturze produktu na start stronie z wynikami wyszukiwania (pomijając otwieranie strony produktu).

0:10

0:17

0:22

0:27

Osoba 2 0:08

0:16

Osoba 3 start

10 s.

10 s. – 30 mm

0:09

0:13

0:17

Osoba 4 start

0:08 0:06

0:14

– wybranie błędnej ! kategorii lub wpisanie

0:29

0:33

!! !

zwłego hasła do wyszukiwarki – wpisywanie hasła w wyszukiwarkę

0:22 0:25 0:20

Osoba 5 start

0:07

0:12

!

!

0:30

27

0:34

0:40

0:47

ANALIZA BADANIA Osoba 1, kobieta, lat 27.

Osoba 3, mężczyzna, lat 37.

Osoba 5, mężczyzna, lat 67.

Do nawigacji używała myszy.

Na poznanie strony potrzebowała mniej czasu niż 2 minuty (40 sekund). #1 użyła drzewka kategorii z lewej strony oraz wyszukiwarki przypisanej do podkategorii „Alternatywna” #2. Wybrała błędną kategorię z drrzewka po lewej i próbowała w niej wyszukać pasujący tytuł. Sama dostrzegła błąd, po czym wybrała poprawną kategorię w drzewku po lewej stronie i kolejne podkategorie w panelu środkowym. #3. dopiero przy trzecim zadaniu zorientowała się, że istnieje główna wyszukiwarka, będąca stałym elementem strony. Po użyciu jej, od razu znajduje produkt. Dodaje go do koszyka po wcześniejszym otwarciu strony produktu.

Do nawigacji używał myszy.

Zapoznając się ze stroną wszedł w jedną z zakładek i miał problem z powrotem do strony głównej (dla konsumentów). #1. użył drzewka kategorii z lewej strony wybierając odpowiednią pod kategorię po czym znalazł produkt skrolując w dół strony. #2. Bezbłędnie znalazł ostatnią pod kategorię korzystając początkowo z drzewka po lewej stronie a później z listy w panelu środkowym (z produktami danej kategorii) #3. Użył baneru z promocjami i wyprzedażami a następnie wybrał produkt z wyświetlonych w panelu środkowym. Po wejściu w stronę produktu dodał go do koszyka.

Do nawigacji używał myszy.

Na poznanie strony potrzebował mniej czasu niż 2 minuty (30 sekund). #1. użył głównej wyszukiwarki i skorzystał z podpowiedzi frazy. #2. Użył głównej wyszukiwarki i po wpisaniu frazy „podreczniki” otworzył podktategorię „podręczniki” wyświetloną w wynikach wyszukiwania. Następnie droga nawigacji była poprawna i zakończyła się sukcesem.

Korzystał z listy w panelu środkowym. #3. Użył głównej wyszukiwarki i skorzystał z podpowiedzi frazy. Po wejściu w stronę produktu dodał go do koszyka.

Osoba 2, kobieta, lat 37.

Do nawigacji używała myszy.

Na poznanie strony wykorzystała pełne 2 minuty. #1. użyła drzewka kategorii z lewej strony oraz wyszukiwarki przypisanej do podkategorii „Alternatywna” #2. Początkowo wybrała błędną kategorię, którą zmieniła na poprawną. Po dojściu do przedostatniej podkategorii zamiast wybrać podkategorię „plastyka”, wpisała hasło do wyszukiwarki i twierdziła, że wykotnała całe zadanie. Po sugestii, żeby wykonała polecenie ponownie, poprawnie nawiguje przez wszystkie podkategorie używając drzewka po lewej stronie. #3. Zauważyła pozycję podpowiedzianą w elemencie „Ostatnio oglądane”. Po kliknięciu w nią otworzyła stronę produktu i dodała do koszyka.

Osoba 4, mężczyzna, lat 35.

Do nawigacji używał myszy.

Na poznanie strony wykorzystał pełne 2 minuty. #1. użył głównej wyszukiwarki i skorzystał z podpowiedzi frazy. #2. Po znalezeniu podstawowej kategorii użył głównej wyszukiwarki wpisując frazę „plastyka klasa 4”. Po przypomnieniu, że ma znaleźć kategorię, poprawnie nawigował przez podkategorie. #3. Użył wyszukiwarki i po wpisaniu frazy nie zauważył produktu, który był na pierwszym miejscu w liście.

Następnie użył baneru z promocjami i wyprzedażami (także nie zauważył produktu). Po wybraniu z listy podkategorii (poradniki), wpisał w jej wyszukiwarce frazę „fiat punto”, gdzie nie znaleziono produktu. Ostatecznie użył głównej wyszukiwarki i odnalazł produkt.

28

UŻYCIE ELEMENTÓW INTERFEJSU - WSZYSCY BADANI

X

kli iloś kn ć ięć

na jc kli zęś ele ka cie m ny j en t

Polecenie nr 1 0:02

3

1. menu główne (podkategoria „alternatywna”)

5

2. miniatura płyty z opisem (w wyświetlanych wynikach wyszukiwania lub podkategorii)

2

3. wyszukiwarka główna

2

4. wyszukiwarka zaawansowana

0:04

0:06

0:08

0:10

Osoba 1

0:12

0:14

0:16

0:18

0:20

Osoba 3 21.s Osoba 4 21.s

Osoba 2 Osoba 3 Osoba 4 Osoba 5

29

0:22

0:24

0:26

0:28

0:30

0:32

0:34

Osoba 5 37.s

0:36

0:38

Polecenie nr 1 1. go me ria nu „a gł lte ów rn ne at ( yw po na dk 2. ”) at e(w mi wy w nia y sz św tu uk ie ra iw tla pły an ny ty ia ch z lu w op b yn is po ik em 3. wy dk ac at h sz eg uk or iw ii) ar ka gł ów na 4. wy sz uk iw ar ka za aw an so wa na

na kli jmn kn ie ięć j łą c z kli na kn ilo ięć ść

na kli jwię kn ce ięć j

UŻYCIE ELEMENTÓW INTERFEJSU

X 3 Osoba 1 1 1 1

X 3 Osoba 2 1 1 1

X 2 Osoba 3 1 1

X 2 Osoba 4 1 1

X 2 Osoba 5 1 1

30

UŻYCIE ELEMENTÓW INTERFEJSU - WSZYSCY BADANI

X

0:08 0:16 0:24 0:32 0:40 0:48 0:56 1:04 1:12 1:20 1:30 1:38 0:04 0:12 0:20 0:28 0:36 0:44 0:52 1:00 1:08 1:16 1:24 1:34

kli iloś kn ć ięć

na jc kli zęś ele ka cie m ny j en t

Polecenie nr 2

5

1. menu główne (podkategoria „podręczniki”)

6

2. menu główne (podkategoria „szkoła podstawowa”)

4

3. menu główne (podkategoria „klasa 4”)

4

4. menu główne (podkategoria „plastyka”)

3

5. menu główne (podkategoria „dla dzieci i młodzieży”)

4

6. wyszukiwarka główna

7. wyszukiwarka zaawansowana

Osoba 1

Osoba 3 21.s

Osoba 2 1:34.s

Osoba 2 Osoba 3 Osoba 4 Osoba 5

31

Polecenie nr 2

X X

1. go me ria nu „p gł od ów rę ne cz ( ni po ki” dk 2. ) at „s me ezk n oł u g a po łów ds ne ta (p wo o wa dk 3. ”) ate m „k e go la nu ria sa g 4” łó ) wn e (p od ka 4. te „p me go la n ria st u yk gł a” ów ) ne (p od ka 5. te m go „d e ria la nu dz g ie łów ci i m ne ło (po dz d ie ka 6. ży te wy ”) go sz ria uk iw ar ka gł ów na

na kli jmn kn ie ięć j łą c z kli na kn ilo ięć ść

na kli jwię kn ce ięć j

UŻYCIE ELEMENTÓW INTERFEJSU

6 Osoba 1 1 1 1 1 1 1

8 Osoba 2 1 2 1 1 2 1

3 Osoba 3 1 1

5 Osoba 4 1 2 1

4 Osoba 5 1 1

1

32

1

1 1

UŻYCIE ELEMENTÓW INTERFEJSU - WSZYSCY BADANI

X

kli iloś kn ć ięć

na jc kli zęś ele ka cie m ny j en t

Polecenie nr 3

1

1. menu główne (podkategoria „rozrywka i hobby”)

1

2. menu główne (podkategoria „poradniki”)

1

3.miniatura książki z opisem (w wyświetlanych wynikach wyszukiwania lub podkategorii)

2

4. baner „promocje i wyprzedaże”

3

5. wyszukiwarka zaawansowana

1

6. miniatura książki (w wyświetlanych wynikach wyszukiwania lub podkategorii)

1 X

Osoba 1 Osoba 2 Osoba 3 Osoba 4 Osoba 5

0:03

0:06

0:09

0:012

0:15

0:18

0:21

0:24

0:27

0:30

0:33

0:36

0:39

0:42

0:45

7. okienko „ostatnio oglądane”

3

8. przycisk „dodaj do koszyka” (na stronie produktu)

2

9. przycisk „do koszyka” przy miniaturze produktu

Osoba 2 16.s

33

Osoba 5 47.s

0:48

0:51

Polecenie nr 3

3 Osoba 1

X 2 Osoba 2

X 2 Osoba 3

X 4 Osoba 4

X 4 Osoba 5

1

1

1

34

1 1

ys

zu kiw a

rk a za 6. aw św mi an n wy iet ia so sz lan tu wa uk yc ra na iw h ks an wy iąż ia ni ki lu ka (w b ch w po ydk 7. ok at e ie go nk rii o ) „o st at ni o 8 og (n . prz lą da a y c st is ne ro k ” ni „d e o pr da od j uk do tu ko 9. ) sz m pr yk in zy a” ia cis tu k rz „d e pr o k od os uk zy tu ka ”p rz y

5. w

1. „r me oz n ry u g wk łó a wn i h e ob (p by od 2. ”) ka te „p me go or nu ria ad g ni łó ki” w ) ne (p od ka 3.m te (w in go wy w iat ria y u sz św r uk ie a k iw tla si an ny ąż ia ch ki z lu w o b yn p 4. po ik ise b i w an dk ac m yp er at h eg rz „p ed ro or aż m ii) e” oc je

na kli jmn kn ie ięć j łą c z kli na kn ilo ięć ść

na kli jwię kn ce ięć j

UŻYCIE ELEMENTÓW INTERFEJSU

1 1

1

1

1 1

1

1 1

1

UŻYCIE ELEMENTÓW INTERFEJSU Osoba 1

Osoba 2

Osoba 3

- menu główne (podkategoria „alternatywna”)

1

1

1

- miniatura płyty z opisem (w wyświetlanych wynikach wyszukiwania lub podkategorii)

3

3

2

Osoba 4

Osoba 5

2

2

1

1

Polecenie nr 1

- wyszukiwarka główna

2

2

- menu główne (podkategoria „podręczniki”)

1

1

1/3

1

1

- menu główne (podkategoria „szkoła podstawowa”)

2

2

4

2

2

- menu główne (podkategoria „klasa 4”)

3

3

5

3

3

- menu główne (podkategoria „plastyka”)

4

4

6

4

4

- wyszukiwarka zaawansowana

Polecenie nr 2

- wyszukiwarka główna

2

- wyszukiwarka zaawansowana

1

-

kolejność wykonywania kroków 35

UŻYCIE ELEMENTÓW INTERFEJSU Osoba 1

Osoba 2

Osoba 3

Osoba 4

Osoba 5

Polecenie nr 3 - menu główne (podkategoria „rozrywka i hobby”)

1

- menu główne (podkategoria „poradniki”) - miniatura książki z opisem (w wyświetlanych wynikach wyszukiwania lub podkategorii)

2

- baner „promocje i wyprzedaże”

2

- wyszukiwarka zaawansowana

3

- miniatura książki (w wyświetlanych wynikach wyszukiwania lub podkategorii)

1

1/4

3

2 5

1

-

3

1

2

3

4

1

- okienko „ostatnio oglądane” - przycisk „dodaj do koszyka” (na stronie produktu)

2

kolejność wykonywania kroków 36

√

√

√

Osoba 2

√

√

√

Osoba 3

√

wyszukiwarka

baner z promocjami

Osoba 1

wyszukiwarka

Polecenie nr 3

wyszukiwarka

Polecenie nr 2

menu (drzewko kategorii)

Tabela przedstawia wykorzystanie przez osoby badane wybranych narzędzi.

Wyniki wskazują, że przyzwyczajenie do korzystania z wyszukiwarki było na tyle wysokie, że używano ją również w sytuacjach, w których była nieprzydatna z powodu swoich ograniczeń.

Baner z promocjami został zauważony tylko przez jedną osobę.

Polecenie nr 1

menu (drzewko kategorii)

ANALIZA BADANIA

√

√

√

√

Osoba 4

√

√

√

Osoba 5

√

√

√

37

√

√

√

WNIOSKI

Menu główne łą ws czn zy y c st za kic s h wy za ko da na ń ni (s a łą ek cz un na dy lic ) zb a ws zy st kic h kr o

kó

w

1. Uzytkownicy korzystają z menu głównego.

Podczas wykonywania poleceń każdy badany przynajmniej raz użył drzewka kategorii.

Wyszukiwarka 2. Badani użytkownicy strony Bonito.pl korzystają z wyszukiwarki. Tylko jedna osoba ani razu jej nie użyła. Była to ta sama osoba (numer 3), która najszybciej wykonywała polecenia.

Baner

Osoba 1 Osoba 2 Osoba 3

3. Tylko jeden badany dostrzegł i użył baneru promocyjnego. Również tym razem była to osoba numer 3.

Osoba 4

Koszyk

Osoba 5

4. Wszsyscy badani poradzili sobie z poleceniem nr 4 i prawidłowo dodali produkt do koszyka. Dwie osoby skorzystały z minaturki koszyka przy produkcie, trzy osoby użyły dedykowanego przycisku dopiero po wejściu na podstronę prezentującą produkt.

124

12

132

13

59

7

130

11

135

10

38

Wbrew hipotezie wysuniętej po przeprowadzeniu badań własnych, strona bonito.pl spełnia swoje podstawowe cele – wszyscy badani byli w stanie wykonać wszystkie polecenia, tj. odszukać konkretny produkt, kategorię oraz dodać produkt do koszyka.

Mimo anachronicznego interfejsu i layoutu użytkownicy sprawnie poruszali się po serwisie. Osoba, która najszybciej wykonała zadania, była tą samą osoba, która wykonała najmniej kroków. Zastanawiające, że ograniczyła ona korzystanie z wyszukiwarki. Biorąc pod uwagę jej prymitywne i mało skuteczne działanie, mogło się to okazać powodem takiego stanu rzeczy.