Audyt UX templatki sklepu  internetowego + (szablon Excel ENG.)

Audyt UX (badanie użyteczności)  zapewnia wgląd oraz podstawy do oceny przydatności  badanego systemu oraz sprawdza w jaki sposób system wspiera wykonywanie zadań przez użytkowników. Zazwyczaj przybiera on formę scenariusz z celem. Może to być wykonanie czynności np. zamówienie biletu, lub sprawdzenie ceny lotu. W przypadku aplikacji sprawne korzystanie z systemu.
Aby to zrobić, należy najpierw zdefiniować kilka scenariuszy dla  użytkownika. Powinny one obejmować wspólne i ważne czynności, które są kluczowe dla powodzenia systemu. Na przykład, jeśli jest to sklep to może to być zamówienie przedmiotu, odnalezienie produktu, zostawienie kontaktu.

Będzie on również zależny od wersji z jakiej korzystam np. mobilna lub wersja desktopowa.

Do każdego ze scenariusz powinno również przygotować odpowiedzi na następujące pytania?

  1. Kto korzysta z systemu? Czy używała go wcześniej? – nie trzeba budować bogatej osobowość wystarczą te podstawowe informację.
  2. Co on lub ona próbuje zrobić? Jakie zadanie użytkownik próbuje podjąć? Czy jest to pierwszy raz kiedy ta osoba zmaga się z tym zadaniem?
  3. Dlaczego użytkownik korzysta z systemu? Jaki jest jego cel?
  4. Jakie jest urządzenie użytkownika i gdzie z niego korzysta?

Liczba scenariuszy zależy od rozmiaru badania oraz samego systemu. W moim artykule skupię się na jednym – odnalezieniu itemu i złożeniu zamówienia na desktopie.

Po zdefiniowaniu każdego scenariusz sprawdzamy jakie jest prawdopodobieństwo podjęcia akcji przez użytkownika  oraz jak osiąga swój cel. Oczywiście to to niemożliwe, aby wiedzieć dokładnie, jakie działania podejmie, więc najlepiej jest oprzeć nasze  przypuszczenia na następujących pytaniach:

  1. Czy użytkownik wie, co zrobić?
  2. Czy istnieje wyraźna droga którą użytkownik ma podjąć? Czy jest oczywiste, co użytkownik musi zrobić na tym etapie?
  3. Czy użytkownik widzi co ma zrobić?
  4. Czy wezwanie do działania jest oczywiste? Czy jasne jest, w jaki sposób użytkownik zakończy ten krok?
  5. Czy użytkownik wie, czy jego  działanie jest prawidłowe?
  6. Czy występuję sprzężenie zwrotne (czy system reaguję na działania użytkownika)? Czy jest jasne dla użytkownik, że  znajduje się na właściwej ścieżce lub etapie?

Tyle w teorii!

Czas na Audyt UX! Zaczynajmy!

Temlatka REF: Atelier – Creative Multi-Purpose eCommerce Theme

Wersja Live-preview

Cel: Kupno koszulki.

Choć nie jestem specjalistą, możemy wstępnie uznać, że ten audyt jest ekspercką analiza heurystyczna, która opiera się na weryfikacji kluczowych aspektów z perspektywy usability  (np. czy dostępna jest wyszukiwarka produktów; czy użytkownicy są informowani, gdzie się znajdują etc.). Analiza posiada również elementy wędrówki (ang. cognitive walkthrough), która pozwoli ocenić serwis w ujęciu osiągania celów. Znajdziesz tu również kilka moich skromnych uwag.

[alert-success]O różnicy między testem eksperckim a testem użyteczności można przeczytać tutaj: http://www.webcredible.com/blog/expert-usability-review-vs-usability-testing/[/alert-success]

Omawiane tu będą moje subiektywne wrażenia z korzystania ze strony. Również te wizualne.  Sam audyt UX znajduję się w excelu w tabelce do ściągnięcia na dole wpisu. Zawiera on więcej szczegółów i jest w języku angielskim ( lvl. easy). Źródło oryginalne: http://www.uxforthemasses.com/blog/wp-content/uploads/2011/02/Usability-review-template.xls

Pierwszą rzeczą jaka mi się spodobała to „przekazanie” odwiedzającem natychmiastowej informacji o tym, że jest się na stronie sklepu. To na pewno nie jest, blog, portal ani aplikacja.

1ux

Od razu rzuciło mi się w oczy pasek informujący o:

  1. Darmowej dostawie (nieważne, że powyżej 100$).
  2. Transporcie w każdy kont świata, szybkiej wysyłce.
  3. Oraz prezencie!

Jeszcze nic nie zamówiłem a już mi się tu podoba. Rozwiany został mój „strach” na temat drogiej dostawy, możliwości samego transportu, poinformowano mnie również, że towar zostanie natychmiast wysłany!

Uwielbiam jak każdy, szybkie wysyłki. Dodajcie jeszcze możliwość śledzenia i „jestem w domu”.

W dodatku czeka na mnie jakiś prezent!

Następnie przewijam sobie od góry do dołu. Mam władzę i nic mnie nie blokuję. Elementy delikatnie animują by zwrócić na siebię moją uwagę. Sprawdzam dane teleadresowe strony aby upewnić się, że to prawdziwy sklep. W wersji demo takich danych nie ma ale miejsce na te informacji jest przygotowane i wyeksponowane.

2UX

Na środku strony odnajduję kategorie koszulek. Jestem praktycznie pewny, że  przycisk przekieruje mnie do strony kategorii. Najechałem na niego  i zareagował. To przycisk. Klikam.

3ux

Strona kategorii ma wszystko to czego potrzeba. Duży tytuł, po lewej najpotrzebniejsze filtry, po prawej bardziej szczegółowe.

4ux

Bardzo cieszy mnie, że jest sortowanie po popularności. Jeżeli na czymś się nie znam (w tym przypadku modzie) to patrzę co jest najbardziej popularne w interesującej mnie cenie.  Wykorzystam wiedzę innych.

Strona produktowa zawiera wszystko co trzeba. Cena mogłaby być większa ale to mi nie przeszkadza. Są również oceny użytkowników ale myślę, ze to ryzykowne zagranie. Wymagana jest tu pilna i regularna administracja. Osobiście czytam je jeżeli wyglądają naturalnie i dotyczą sprzętu technologicznego.

5ux

Mimo jednolitego design od razu widzę gdzie znajduję się przycisk dodaj do koszyka.

Zdziwiły mnie przyciski social media. Nigdy nie widziałem, żeby ktoś wrzucił coś takiego na walla choć, może to wynikać ze rodzaju moich znajomych.

Na dole znajdujemy oczywiście podobne produkty. Bardzo dobry pomysł, może coś wpadnie mi w oko.

6ux

Podoba mi się wybrana koszulka. Dodaję do koszyka.

Strona (system) zareagowała. Symbol koszyka zawibrowałprzekierował mój wzrok na symbol mojego koszyka. W dodatku prawym górnym rogu pojawiło się okienko z moim zamówieniem. Ujawnia się ono także za każdym razem gdy najeżdżam na koszyk.

koszyk UX

 

 

Czas zaglądnąć do swojego koszyka. Można do niego wejść używając ikonki lub klikając w duży buton.

Na tym etapie zabrakło dodatkowego okienka. Mowa tu o: Kupujący ten produkt zamawiali również.

W wersji demo sklep nie posiada żadnych danych więc może to wynikać z tego powodu.  Może też po prostu nie być tej opcji.

7ux

Postanowiłem kupić, dwie takie koszulki.  Zwiększam ilość. Nic się nie dzieje 🙁

Bardzo szybko odnajduję jednak: Zaktualizuj koszyk. Klikam.

Strona zareagowała i uwzględniła moje zmiany. System potwierdził zmianę odpowiednim i widocznym komunikatem.

Wszystko się zgadza.

Miejsce na wpisanie kuponu jest trochę zwodnicze ponieważ nie do końca  wiadomo, czy jest to okienko do wpisywania. Opisałbym go po prawej stronie a w miejscu okienka umieścił przykładowy format kodu.

Przechodzimy do realizacji zakupów.

8ux

Na stronie odnajduję…

  1. Numer telefonu do obsługi klienta
  2. Wezwanie do zalogowania dla stałego klienta.
  3. Wezwanie do wprowadzeniu kuponu.
  4. Email do obsługi oraz FAQ
  5. Po lewej standardowe  i niezbędne pola na dane do realizacji wysyłki.
  6. Po prawej rodzaje płatności oraz podsumowanie zamówienia.

Podczas wprowadzania danych strona reaguję na moje działania. Gdy wprowadzam prawidłowe dane pola podkreślane są na zielono. Gdy pojawia się problem (np. nieprawidłowy email) podkreślane są na pomarańczowo.

Tu brakuję mi przykładowych formatów.

9ux

Po wypełnieniu danych przechodzimy do wyboru płatności.

9ux

Podoba mi się, że strona tłumaczy mi od razu, że mimo braku konta Paypal będę mógł zapłacić. Znajdują się tu również link do informacji: Czym jest Paypal.

Jeszcze wykaz błędów:

10 ux bledy

Formularz reaguję tylko na błąd zawarty w email. Numer zaakceptowany!

11 ux

Po więcej szczegółów dotyczących oceny templatki w pliku.

Zachęcam do lektury każdą osobę zajmującą się na co dzień, obsługą, tworzeniem oraz audytowaniem stron e-commerce.

[alert-success]Ściągnij plik:  Audyt UX.[/alert-success]

Ocena templatki według arkusza audytu UX: 89/100 punktów.
Ja oceniam ją również bardzo dobrze.

Na koniec podsyłam wam coś na rozluźnienie na temat audytów UX.

Your website should be so simple, a drunk person could use it.

You can’t test that. I’ll do it for you.

Więcej o projekcie na stronie http://theuserisdrunk.com/

Jestem gotowy rozpocząć taki projekt? Są chętni?!

Źródło części teoretycznej i fotografii:

http://www.uxforthemasses.com/usability-reviews/

Harris & Ewing,, photographer. [Woman seated with a psychograph, a phrenology machine, on her head] http://loc.gov/pictures/resource/hec.36580/

2 komentarze

  • Zasugeruję tylko jedno: jeśli zmieniasz liczbę sztuk i koszyk się nei aktualizuje to imho powinien to zrobic sam 😉 Tak to zmuszasz użytkownika do aktualizacji czym zmuszasz go do myślenia….

    • Witam! Też bym to zmienił. Templatka ma pare wad oraz wiele rzeczy nie mogłem do końca sprawdzić. W porównaniu jednak do takich kwiatków „Najlepszy sklep internetowy 2015 Ranking Money.pl” http://ranking.money.pl/ W którym pierwsze miejsce zajmuję sklep bez wersji mobilnej to myślę, że moje próby poruszania tematu są warte zachodu.

Dodaj komentarz