Badania i analiza użyteczności strony internetowej Pracownia: Badania Użyteczności prowadzący: prof. asp. dr hab. W. Gdowicz dr M. Więckowska Zakład Badań Wizualnych i Interakcji Akademia Sztuk Pięknych w Katowicach
Autor: Izabela Walusiak
Spis treści 1. Przedstawienie strony Alma24.pl 2. Cele i użytkownicy strony. 3. Schemat strony. 4. Architektura informacji 5. Dostępne funkcje 6. Ocena strony internetowej 7. Analiza budowy strony. 8. Analiza budowy storny - produkt. 9. Cechy wizualne - typografia, grafika, kolorystyka. 10. Wyróżnienie rodzajów interakcji 11. Poruszanie się po stronie / dokonanie zakupu 12. Podsumowanie 13. Pytania 14. Cel badania 15. Opis badania 16. Scenariusz badania 17. Wyniki ankiety I 18-21. Wyniki badania 19. Wyniki ankiety II 20. Podsumowanie 21. Załączniki
Przedstawienie strony Alma24.pl Alma24 to delikatesy Internetowe z dostawą do domu. W ofercie dania gotowe, pieczywo, owoce i warzywa, napoje, nabiał, mięso i wędliny , słodycze, przetwory i inne artykuły spożywcze.
Cele i użyktownicy strony Cele: - zakup produktów przez Internet - pozyskiwanie nowych klientów - kreowanie wizerunku sklepu - promowanie produktów spożywczych - umożliwienie dokonania zakupów bez wychodzenia z domu
Grupa docelowa: - osoby zaintereoswane zakupami przez internet - klienci indywidualni - klienci korzystający z dowozu produktów do domu
Schemat strony moje dane listy zakupowe wyszukiwarka
ALMA24.PL
pomoc przepisy
kategorie
KOSZYK podkategorie
Analiza budowy strony 2
1. LOGO FIRMY - nadają stronie wizerunek 2. WYSZUKIWARKA - pozwala wyszukać poszczególne produkty 3. Pasek odnośników 4. IKONY - możliwość przejścia do poszczególnych podstron 5. MENU - składa się z czternastu elementów - pozwalają na łatwe wyszukiwanie produktów 6. REKLAMA - szybki dostęp oraz reklama poszczególnych produktów 7. KOSZYK - szybki i łatwy dostęp do wybranych produktów 8. Pasek aktualnych promocji - na głównej stronie znajduje się bardzo duża ilość produktów promocyjnych, brak wyszczególnionych artykułów posiadających stałe ceny 9. Aktualności produktów 10. Aktualne promocje 11. Reklama 12. Szczególne polecane promocje 13. Produkty najlepiej oceniane 14. Pasek wielofunkcyjny (nr kontaktowy, pomoc, dane urzytkownika, regulamin) 15.Opis strony 16. Dane firmy projektowej strony www
3
1
4
5 6
7
8 9
10
11
12
13 14
15 16
Analiza budowy strony Strona podzielona jest na 2 kategorie - pierwsza to elementy stałe gdzie znajduję się logo, wyszukiwarka, koszyk, konto użytkownika, pomoc, kategorie i podkategorie produktów. W dolnej części znajduje się krótka mapa serwisu oraz informacje o sklepie i o twórcach tego portalu. Drugą kategorią są elementy zmieniające się - reklamy, banery, promocje, które znajdują się na środku strony. Długość strony internetowej wynosi 3 ekrany. Wnioski: Strona jest czytelna i przejrzysta. Elementy stałe i zmienne pozwalają na łatwe poruszanie się po stronie i wyszukiwanie potrzebnych infromacji czy produktów.
elementy stałe elementy zmienne podział ekranu
Analiza budowy podstrony - prezentacja produktów w wybranej kategorii Stona z produktami podzielona jest na 6 kolumn i 10 rzędów. Każdy element eksponuje zdjęcie, nazwe produktu, cene oraz wagę. Dzięki zastosowaniu kontrastu piktogramu (zielone tło, biała ikona) można w szybki i łatwy sposób dodać wybrany produkt do koszyka. Elementy stałe takie jak menu, piktogramy, koszyk dają użytkownikowi poczucie bezpieczeństwa dzięki którym można w szybki sposób zmienić kategorię produktu.
elementy stałe elementy zmienne produkty podział ekranu
Analiza budowy podstrony produktu Na stronie z produktem zawsze znajduje się: -zdjęcie produktu -nazwa produktu -cena -waga -pole kupna produktu -informacje o produkcie (opis, skład, wartości odżywcze, inne) - elementy stałe strony (logo, pasek menu, moje dane itp.) - koszyk - filtry wyszukiwania np. marka Pod wybranym produktem pokazuje się lista podobnych produktów z wybranej kategorii. Wnioski: Produkt jest dobrze eksponowany. W łatwy i czytelny sposób możemy przeczytać informacje o produkcie. Element dodania do koszyka jest podkreślony na zielono, dzięki takiemu działaniu element wyróżnia się. Po prawej stonie widoczny jest koszyk, który pokazuje nam listę wybranych produktów oraz podliczony rachunek za zakupy.
Cechy wizualne - typografia, grafika, kolorystyka Typografia: - krój jednoelementowy - OPEN SANS - spójna typografia - jeden krój, dwie wersje (regular, bold) - punktacja kroju 13-18px
Moje dane
Promocje
Kontakt
Grafika strony: - linie odzielające poszczególne elementy - zdjęcia produktów - dużo informacji (reklama, promocje) - elementy stałe i zmieniające się - piktogramy są zawarte w kole (moje dane, listy zakupów, pomoc, przepisy) Kolorystyka: Strona charakteryzuje się stonowaną gamą kolorów (zielony, brązowy, pomarańczowy, biały) Dominuje biały kolor, który jest tłem strony. Kolorem wyróżniającym się jest zielony, gdyż pokazuje on ważniejsze aspekty - takie jak obcja wyszukiwania, wybór kategorii i podkategorii produktów, znak koszyka oraz ocena produktów. Tyopografia strony ma kolor czarny. Wnioski: Dzięki zastosowaniu różnych odmian pisma, można wyszczególnić ważniejsze elementy strony takie jak np. menu. Zastosowany krój pisma jest czytelny. Poprzez zastosowanie białego tła, poczczególne elementy wyróżniają się i tworzą wiekszy kontrast między elementami. Grafika oraz kolory są spójne.
R: 29 G: 42 B: 38
R: 59 G: 162 B: 15
R: 203 G: 193 B: 106
R: 252 G: 252 B: 246
R: 0 G: 0 B: 0
Dostępne funkcje
wyszukiwarka - umożliwia wyszukiwanie produktów dane osobiste - informacje o zamówieniach, - adres wysyłkowy lista zakupów - możliwość sporządzenia własnej listy potrzebnych produktów, którą można wykorzystać przy robieniu zakupów pomoc - informacje dotyczące płatności, zamówień,dostawy, produktów oraz logowaniu i rejestracji - odpowiedzi na często zadawane pytania konsumentów przepisy - proponowane przez sklep przepisy dań koszyk - miejsce gdzie znajdują się dodane produkty, które można anulować, zwiększyć/zmiejszyć ich ilość czy też zakończyć proces zakupu kontakt - informacje dotyczące sklepu, telefon kontaktowy oraz adres mail logowanie się - funkcja ta pozwala na dokonanie zakupu
Funkcje piktogramów
poprzez kliknięcie na logo firmy, można powrócić na główną stronę
przejście na podstrony wybranie terminu dostawy
dodanie produktu do koszyka
możliwość oceny produktów
Wnioski: Białe tło wyróżnia piktogramy, w ten sposób są bardziej czytelne. Poprzez kilikanie możemy wrócić czy wybrać poszczególne podstrony.
Wyróżnienie rodzajów interakcji - rozwijanie po naciśnięciu
- możliwość scrollowania
- klikanie - podkreślenia - zmiana koloru po najechaniu na element
- przyciemnianie - rozjaśnianie
Interakcje pomagają w poruszaniu się po stronie. Dzięki klikaniu możemy przejść na pod strony czy wybrać dany element. Zmiana koloru pokazuje nam jaką kategorie produktów wybraliśmy i na jakiej kategorii obecnie się znajdujemy.
Poruszanie się po stronie / dokonanie zakupu Forma dostawy: - odbiór zakupów w wybranym sklepie Alma - dowóz zakupów kurierem na adres wybrany przez zamawiającego (dowóz zakupów przez kuriera jest ograniczony do wybranych miast) Zamówienia dostarcza firma kurierska. Czas dostarczenia przysyłki zależy od dostępności terminów dostawy. Formy płatności: a. Płatność gotówką u Dostawcy b. Płatność kartą płatniczą w terminalu u dostawcy c. Przelewem internetowym d. Bonami Alma, Sodexo, Bonus u dostawcy. e. Płatność kartą płatniczą przez Internet Koszty dowozu: rachunek 0-50zł - dowóz 9,90-14,90 zł rachunek 50-100zł> - dowóz 0,00 zł
założenie konta
logowanie
Podsumowanie zamówienia
wybór produktu
przekierowanie na stronę banku
dodanie produktu do koszyka
zapłacenie zamówienia
określenie ilości i wagi przejście do koszyka wybranie adresu dostawy
Wnioski: Złożenie zamówienia dokonuję się od 12-14 kroków. Ilość kroków zależy od tego czy dana osoba posiada konto w serwisie czy też kupuje produkt na wagę czy na sztuki. Forma zakupu jest łatwa i nieskomplikowana. Dowóz zakupów kurierem jest ograniczony.
wybranie sposobu pakowania
wybranie formy dostawy wybranie terminu dostawy wybranie płatności
Ocena strony internetowej Osoby ankietowane musiały ocenić w skali od 1 do 6 poszczególne cechy wizualne zrzutu ekranu strony internetowej Alma24.pl. Test został wykonany za pomocą portalu DRAFTEST. W teście brało udział 20 ankietowanych. Osoby ankietowane musiały ocenić w skali od 1 do 6 poszczególne cechy wizualne. Średnia ocena wyników: 1
2
3
4
pierwsze wrażenie
3,55
kolorystyka
3,2
ekspozycja marki innowacyjność prezentacja informacji użyteczność
5
3,45 3,05 3,65 4
6
Podsumowanie
+ - przejrzysta strona internetowa łatwa i przyjemna w użyciu - łatwo znaleźć dany produkt - możliwość wybrania terminu dostawy - wygodna wyszukiwarka - zastosowanie filtrów - możliwość sporządzenia własnej listy zakupów, którą można zapisać na stornie serwisu i wykorzystać ją w kolejnych zakupach - jako pierwsze widoczne są promocje - można zobaczyć gazetkę pomocyjną - podczas dokonywania zakupów w zakładce koszyk widoczna jest lista wybranych produktów oraz podliczany rachunek
- trzeba założyć konto aby dokonać zakupu - kolorystyka i nastrój odbiega od założeń estetycznych sklepu stacjonarnego - dostawa produktów dostępna tylko wybranych miejscach - brak storny anglojęzycznej - zbyt dużna liczba promocji na głównej stronie
Pytania 1. Ile kroków potrzeba aby badany odnalazł na stronie dany produkt i jaki czas jest pomiędzy tymi krokami? 2. Ile kroków potrzeba aby zakupić dany produkt? 3. Czy użytkownik podczas wyszukiwania napotka jakieś problemy? Jeśli tak, to jakie? 4. Czy nawigacja na stronie nie sprawia problemów? 5. Jakie są pierwsze wrażenia osoby odwiedzającej stronę? 6. Czy użytkownik korzysta z filtrów? 7. Czy użytkownik korzysta z banerów reklamowych i informacyjnych?
Cel badania Cel: Zbadanie procesu zakupu produktu. Zbadanie użyteczności zastosowanych opcji wyszukiwania.
Przedmiot badania
Obserwacja zachowania użytkowników w trakcie obsługi strony internetowej, weryfikacja opini respondentów oraz zapis zrozumienia zapisu strony
Osoby badane: Podział na 2 grupy badawcze, ze względu na: częstotliwośc robienia zakupów w internecie (lub) doświadczenie związane z zakupami na danej
Opis badania Ankieta:
informacje dotyczące : • opini użytkownika dotyczącej strony • określenie profilu użytkownika • ocena użyteczności
Badanie użyteczności:
czas wykonywania zadania i przejścia pomiędzy krokami droga użytkownika do kupna produktów: rodzaje akcji, kroki, błędy, efektywność, przysfajalność, wykonanie zadania.
Sposób pomiaru zachowań użytkownika:
• obserwacja procesu zakupu • dokumentacja filmowa procesu zakupu • zapis komentarzy użytkownika, • pomiar czasu wykonywania polcecenia • ankieta po badaniu sprawdzająca stopień zrozumienia informacji
Scenariusz badania I Etap–ankieta przed badaniem Aniekta przed badaniem okresla grupę badawczą oraz dostarcza informacji o doświadczeniu respondenta związanym z zakupami internetowymi.
II Etap–badanie użyteczności Respondenci wykonują polecenia: (czas wykonania poleceń jest nieograniczony. Badani w trakcie wykonywania poleceń mogą wypowiadać swoje uwagi i komentować przebieg.) 1. Wypierz i dodaj do koszyka produkt z podanej kategorii (pieczywo, cukiernia–ciemny, krojony). 2. Dodaj do koszyka 1 produkt ze strefy promocyjnej. 3. Zrób zakupy z dostawą do domu, zgodnie z listą. • opakowanie ryżu białego • śmietane 18 % • 300 g żółtego sera • 4 jasne bułki • 2 soki pomaranczowe • 1 kg białego winogrona • przecier pomidorowy • 2 opakowania worków na śmieci • wypielająca pasta do zębów 4. Stwórz liste zakupów, dodaj 3 wybranych przez siebie produkty artykułów spożywczych i 2 z kategorii dziecko.
III Etap–ankieta po badaniu Respondent otrzymuje aniekte, która umożliwia ocene użyteczności strony oraz określić stopień trudności wykonywanych poleceń.
Informacje o osobach badanych, wyniki ankiety I Żadna z osób badanych nie korzystała z witryny Alma24.pl. Wszyscy respondenci dokonywali zakupów przez internet. Najczęściej korzystali z takich platform jak: Allegro, Zalando, Matras, Ebay, Zara, Empik. 4 osoby badane odpowiedziały, iż dokonują zakupów przez internet kilka razy w miesiącu. Natomiast jedna osoba korzysta ze sklepów kilka razy w roku.
Wyniki badania - analiza zachowań użytkowników Treść zadania I: Wybierz i dodaj do koszyka produkt z podanej kategorii: świeże, dania gotowane, pierogi ruskie. C
E
A
D
B
użytkownik E użytkownik D użytkownik C użytkownik B użytkownik A 0,50
kliknięcie - menu kliknięcie- produkty kliknięcie- podkategorie produktu błądzenie po stronie scrollowanie dodanie produktu do koszyka wyszukiwarka
0,10
0,15
0,20
0,25
0,30
0,35
0,40
Wnioski: Najszybszym sposobem na wykonanie zadania było skorzystanie z wyszukiwarki. Najszybciej zrobił to użytkownik E (6 s). Najdłuższy czas wykonywanego zadania to 40 s (respondent C). Użytkownik (C) początkowo korzystał z menu produktów, przez długi czas nie umiał znaleźć danej rzeczy więc skorzystał z wyszukiwarki. Opcja ta znacznie skróciła czas wykowanego polecenia.
Wyniki badania - analiza zachowań użytkowników Treść zadania II: Dodaj do koszyka 1 produkt ze strefy promocyjnej. A D B
E
C użytkownik E użytkownik D użytkownik C użytkownik B użytkownik A 0,50
0,10
błądzenie po stronie scrollowanie kliknięcie - menu produktów dodanie produktu do koszyka
0,15
0,20
Wnioski: Zadanie można było wykonać na 2 sposoby. Pierwszy z nich to dodanie promocyjnego produktu do koszyka, które znajdowało się na głównej stronie. Drugi sposób to przejście bezpośrednio na stronę z produktami promocyjnymi. Drugi sposób okazał się dłuższy, gdyż wymagał wyszukania w menu produktów kategorii promocje. 4 osoby badane wybrały sposób pierwszy. Dzięki temu zadanie wykonali szybciej niż osoba która wybrała drugą opcje - przejście do strony z produktami promocyjnymi.
Wyniki badania - analiza zachowań użytkowników Treść zadania III: Zrób zakupy z dostawą do domu, zgodnie z listą: śmietane 18 % , przecier pomidorowy, 2 soki pomarańczowe, ryż biały, 1 kg kiwi, papier toaletowy, najtańszy szampon do włosów. użytkownik E
użytkownik D
użytkownik C
użytkownik B
użytkownik A
Etapy dokonywania zakupów: wyszukanie produktu wyszukiwarka kategorie podkategorie filtry
3:36 min
3:42 min
3:62 min
4:20 min
5:61 min
zakup produktu kliknięcie ikony koszyk przejście na stronę produktu dodanie produktu do koszyka przejście do koszyka zakończenie zamówienia logowanie wybranie formy dostawy wybór terminu realizacji dokonanie przelewu czas wykonanych poleceń
Wnioski: Wszystkie osoby badane korzystały z wyszukiwarki. Ta forma znajdowania produktów okazała się szybsza i łatwiejsza niż wyszukiwanie za pomocą menu produktów. Jedna osoba aby wykonać całe polecenie korzystała z wszystkich dostępnych funkcji wyszukiwania produktów, co znacznie wydłużyło czas wykonywanego polecenia. Przy pierwszym dodaniu produktów do koszyka 4 osoby badane nie kliknęły w ikonę koszyk (opcja ta pozwoliłaby na szybsze dokonanie zakupów). Osoby te wolały przejść bezpośrednio na stronę z produktem i dodać go koszyka na późniejszym etapie gdy zapoznali się z interfejsem strony produktu. Wszytskie osoby badane miały probelm z dodaniem produktu o określonej wadze. Każda z respondentów chciała wpisać ręcznie za pomocą cyfr ilość oraz wagę produktów. Funkcja ta jest mylna - aby powiększyć ilość produktu należy kilkakrotnie klikać w ikonę koszyk.
Wyniki badania - analiza zachowań użytkowników Treść zadania IV: Stwórz listę zakupów, dodaj 2 wybrane przez siebie produkty artykułów spożywczych oraz 2 z kategorii dziecko. C
A
E
B
D użytkownik E użytkownik D użytkownik C użytkownik B użytkownik A 0,10
0,20
0,30
0,40
0,50
kiliknięcie- koszyk dodanie produktudo koszyka kliknięcie menu - produkt kliknięcie - listy zakupowe stworzenie listy zakupowej błądzenie po stronie scrollowanie
0,60
1,10
1,20
1,30
1,40
1,50
1,60
2,10
2,20 2,30
2,40
2,50
2,60
3,10
3,20
3,30
3,40
Wnioski: Aby wykonać najszybciej zadanie, należało po odnalezieniu danego produktu kliknąć w piktogram ‘serce’ (bezpośrednie dodanie produktu do listy zakupowej), które znajdowało się w lewym górnym rogu zdjęcia z danym produktem. Kolejnym sposób to zapisanie jako listę zakupową zawartość koszyka. Najdłuższy czas wykonanego polecenia to 3,50 min. Najkrótszy to 3 min. Pozostałe 3 osoby wykonały zadanie w podobnym odstępie czasowym około 3,24 min. Wykonując zadanie osoby były zdezorientowane. Respondenci kilka razy klikali w opcje listy zakupowe, gdzie czytali instrukcje jak wykonać zadanie. Instrukcja ta była niezrozumiała i nie logiczna. Przez co użytkownicy nie umieli przez dłuższy czas wykonać polecenia. Wszyscy respondenci wykonali zadanie wykorzystując drugi sposób (opcja - serduszko nie została przez nikogo zauważona).
3,50
Wyniki ankiety II dotyczące oceny korzytsania ze strony internetowej Wszystkie osoby badane określiły korzystanie ze strony jako dość łatwe. Elementy ułatwiające osobom badanym wykonywanie poleceń: bezpośrednia opcja wyszukiwania produktów poprzez wpisywanie haseł w wyszukiwarkę, menu produktów oraz podkategorie produktów. Elementy strony utrudniające wykonanie poleceń: opcja stworzenia listy zakupowej, dodawanie jednego rodzaju produktu w większych ilościach do koszyka.
Podsumowanie Storna Alam24.pl chodź atrakcyjnie wizualna posiada kilka funkcji, które utrudniają dokonywania zakupów. Sporym problemem okazało się sporządzenie listy zakupowej. Piktogram ten jest zauważalny przez użytkowników, lecz instrukcja która jest w niej zawarta jest nie zrozumiała i nie logiczna. Schemat strony, oraz kolorystyka nie budzą zastrzeżeń. Użytkownicy bez większych problemów poruszają się po stronie i odnajdują dane produkty.
1. Ile kroków potrzeba aby badany odnalazł na stronie dany produkt i jaki czas jest pomiędzy tymi krokami? - Ilość kroków aby badany odnalazł dany produkt zależy, od formy wyszukania produtków. Pierwszą opcją jest bezpośrednie wpisanie nazwy produktu np. sok pomarańczowy do wyszukiwarki (jest to najszybszy sposób wyszukania produktu). Drugą formą jest wyszukiwanie produktu za pomocą menu i podkategorii menu. Opcja ta jest znacznie dłuższa (wykresy I,II,IV). 2. Ile kroków potrzeba aby zakupić dany produkt? - Ilość kroków zależy od formy wyszukiwania porduktu. Najktórsza droga zamyka się w 12 krokach (osoba posiada konto, oraz przy dodaniu produktu do koszyka nie określa ilości i wagi produktów). Najdłuższa droga 14-17 kroków (założenie konta, wyszukanie produktu za pomocą wyszukiwarki lub menu) (wykresy I,II,III,iV). 3. Czy użytkownik podczas wyszukiwania napotka jakieś problemy? Jeśli tak, to jakie? -Użytkownicy nie napotkali problemów podczas wyszukiwania produktów. 4. Czy użytkownik korzysta z filtrów? - Każdy z użytkowników korzystał z filtrów. Opcja ta ułatwiła wyszukiwanie produktów (wykres III).
Załączniki Ankieta przed i po badaniu