Audyt UX
dla sklepu internetowego
z winami
Przedstawiamy fragment analizy heurystycznej UX opartej o 10 zasad użyteczności Jakoba Nielsena z konkretnymi rekomendacjami naprawczymi.
Wstep
Analiza zostala przeprowadzona w oparciu o 10 heurystyk uzytecznosci Jakoba Nielsena – sprawdzone, naukowe standardy, do ktorych Twoi klienci sa po prostu przyzwyczajeni.
Pokazuj status systemu
Widocznosc statusu systemu
Co to znaczy: Zawsze informuj uzytkownika o tym, co sie dzieje.
Przyklad: Pokazuj pasek postepu podczas ladowania pliku, wyraznie komunikuj "Dodano do koszyka!" albo pokazuj, na ktorym etapie zamowienia jest klient.
Zachowaj zgodnosc pomiedzy systemem a rzeczywistoscia
Co to znaczy: Mow jezykiem klienta, a nie technicznym zargonem. Uzywaj ikon i pojec, ktore ludzie znaja z prawdziwego zycia.
Przyklad: Uzywaj ikony koszyka na zakupy, pisz "Blad platnosci", a nie "Blad deserializacji JSON 500".
Daj uzytkownikowi pelna kontrole
Kontrola i wolnosc uzytkownika
Co to znaczy: Uzytkownicy czesto robia cos przez pomylke. Musza miec "wyjscie awaryjne".
Przyklad: Wyrazny przycisk "Anuluj", mozliwosc powrotu do poprzedniego kroku w formularzu.
Trzymaj sie standardow i zachowaj spojnosc
Co to znaczy: Nie wymyslaj kola na nowo. Uzywaj tych samych nazw i ikon do tych samych rzeczy w calej witrynie.
Przyklad: Jesli koszyk jest w prawym gornym rogu na stronie glownej, musi byc dokladnie tam na kazdej innej podstronie.
Zapobiegaj bledom
Co to znaczy: Lepiej jest zaprojektowac cos tak, zeby blad w ogole nie mogl wystapic, niz potem pisac piekny komunikat o bledzie.
Przyklad: Zamiast pozwalac wpisac "jutro" w polu daty i wywalac blad, po prostu daj kalendarz.
Pozwalaj wybierac zamiast zmuszac do pamietania
Rozpoznawalnosc zamiast przypominania
Co to znaczy: Nie kaz uzytkownikowi pamietac, co robil na poprzednim ekranie. Pokazuj mu opcje i kontekst.
Przyklad: W sklepie pokazuj "Ostatnio ogladane produkty". W formularzu nie kasuj danych, jesli uzytkownik przeladuje strone.
Zapewnij elastycznosc i efektywnosc
Dla nowicjuszy i ekspertow
Co to znaczy: Strona ma byc prosta dla laika, ale oferowac skroty dla zaawansowanych.
Przyklad: Mozliwosc normalnego przejscia przez kase, ale tez opcja "Kup teraz 1-kliknieciem" dla zalogowanych.
Dbaj o estetyka i minimalizm
Co to znaczy: Kazdy dodatkowy, niepotrzebny element na stronie to "szum informacyjny", ktory odciaga uwage od tego, co wazne.
Przyklad: Usun wszystko, co nie jest absolutnie konieczne do wykonania zadania. Czysty, prosty design zawsze wygrywa.
Zapewnij zrozumiale komunikaty o bledach
Co to znaczy: Kiedy juz blad wystapi, powiedz o tym po ludzku.
Przyklad: Zamiast "Blad #4001: Pole nieprawidlowe", napisz: "Ups! Wpisales zly kod pocztowy. Poprawny format to XX-XXX".
Zapewnij pomoc i dokumentacje
Co to znaczy: W idealnym swiecie pomoc nie jest potrzebna, ale w realnym – musi byc latwo dostepna.
Przyklad: Przycisk "Pomoc" z lista FAQ, kontekstowe podpowiedzi obok skomplikowanych pol w formularzu.
Analiza sekcji krytycznej (Above-The-Fold)
Pierwszy ekran (ATF) to najważniejsze 5 sekund Twojej strony – to tutaj klient decyduje, czy zostać, czy uciec. Obecnie, ten ekran, zamiast sprzedawać, aktywnie zniechęca użytkowników, łamiąc kluczowe zasady użyteczności.
Krytycznie zepsute CTA
Główny przycisk na stronie, "ODKRYJ KOLEKCJĘ", jest błędnie podlinkowany i kieruje użytkownika prosto do zakładki "KONTAKT". To tak, jakbyś wysłał klienta zainteresowanego zakupem prosto do działu reklamacji ;)
🔴 Złamana Heurystyka #3: Kontrola i wolność użytkownika
Użytkownik wykonuje akcję i otrzymuje zupełnie nieoczekiwany, frustrujący rezultat. Traci kontrolę nad procesem i nie może wykonać zamierzonej akcji.
Produkt jest niewidoczny
Strona wita obietnicą "WYŚMIENITE WINA PREMIUM", ale sam produkt jest prawie niewidoczny. Klient widzi tylko dwie szyjki butelek na dole ekranu. W branży premium produkt musi być bohaterem, a nie chować się za zasłoną.
🔴 Złamana Heurystyka #8: Estetyka i minimalizm
Interfejs powinien koncentrować uwagę użytkownika na kluczowych elementach. Zasłanianie produktu odciąga uwagę od tego, co naprawdę ważne.
Niestandardowy i zdublowany koszyk
W interfejsie znajdują się dwa koszyki: jeden standardowo w menu głównym (w prawym górnym rogu) i drugi, pływający w lewym dolnym rogu. Ten lewy jest w niestandardowym miejscu, przez co jest ignorowany, a do tego wygląda jak nieostylowany element wtyczki.
🔴 Złamana Heurystyka #4: Spójność i standardy
Użytkownicy są przyzwyczajeni do szukania koszyka w prawym górnym rogu. Łamanie tej konwencji i dublowanie funkcji wprowadza niepotrzebny chaos.
Brak kluczowych funkcji (logowanie)
W menu głównym brakuje absolutnej podstawy dla sklepu internetowego: linków "Zaloguj się / Moje konto". Zostało to również zauważone przez klienta.
🟡 Złamana Heurystyka #4: Spójność i standardy
Użytkownicy oczekują możliwości zalogowania się do swojego konta w sklepie. Brak tej standardowej funkcji utrudnia zakupy powracającym klientom.
Błędy techniczne widoczne w ATF
Link do Instagrama w prawym górnym rogu jest zepsuty i prowadzi donikąd. Dodatkowo strona posiada podwójny nagłówek H1, co jest krytycznym błędem SEO.
🔴 Złamana Heurystyka #9: Pomoc w rozpoznawaniu i obsłudze błędów
Użytkownik klika link i trafia na błąd (np. 404). System w żaden sposób nie pomaga mu wrócić ani zrozumieć, co się stało. To psuje wizerunek firmy.
Paraliż decyzyjny
Strona główna nie ma JEDNEGO celu. Użytkownik dostaje 4 różne komunikaty i co gorsza każdy z nich kieruje gdzie indziej: "Poznaj naszą ofertę" do kontaktu, "Sklep" do sklepu, "Oferta" do strony z opisem win, a "Gdzie kupić" do restauracji.
🟡 Złamana Heurystyka #8: Estetyka i minimalizm
Strona powinna mieć jasny, główny cel. Zbyt wiele równorzędnych opcji powoduje paraliż decyzyjny – użytkownik nie wie, co wybrać, więc często nie wybiera nic.
Rekomendacja Poprawki
Poniższy wireframe prezentuje rekomendowany układ sekcji Above-The-Fold, który adresuje zidentyfikowane problemy i jest zoptymalizowany pod kątem konwersji.
Analiza strony "Sklep"
Strona sklepu to serce Twojego biznesu e-commerce. W obecnej formie zawiera ona szereg krytycznych błędów funkcjonalnych i wizualnych, które bezpośrednio blokują zakupy i obniżają postrzeganą wartość marki.
Brak kluczowych filtrów produktowych
Obecna strona oferuje jedynie trzy podstawowe filtry: "Cena", "Kategoria" i "Pojemność". W branży winiarskiej jest to absolutnie niewystarczające. Brak możliwości filtrowania po kluczowych atrybutach, takich jak smak (wytrawne, słodkie, półsłodkie), typ (białe, czerwone, różowe) czy rocznik, uniemożliwia klientom znalezienie produktu dopasowanego do ich preferencji.
🔴 Złamana Heurystyka #7: Elastyczność i efektywność
System nie jest elastyczny. Nie ułatwia ani nowicjuszom (szukającym "słodkie"), ani ekspertom (szukającym "wytrawne 2023") szybkiego dotarcia do celu. Użytkownik jest zmuszony do ręcznego przewijania całego katalogu.
Niespójna prezentacja wizualna produktów
W katalogu brakuje jednolitej strategii wizualnej. Produkty prezentowane są w co najmniej trzech różnych, konkurujących ze sobą stylach: klimatyczne zdjęcia premium (zestawy prezentowe), proste zdjęcia butelek na czystym, białym tle oraz ucięte butelki. Taki chaos wizualny wygląda nieprofesjonalnie i obniża postrzeganą wartość Twojej marki.
🔴 Złamana Heurystyka #4: Spójność i standardy + #8: Estetyka i minimalizm
Brak spójności wizualnej w obrębie tej samej funkcji (katalog produktów). Różne style graficzne tworzą "szum informacyjny" i psują ogólną estetykę, która powinna wspierać wizerunek premium.
Błędy zarządzania katalogiem
Obecny widok sklepu zawiera kilka błędów, które aktywnie frustrują klienta: produkty z oznaczeniem "Brak w magazynie" wyświetlane na równi z dostępnymi (frustracja użytkownika), brak informacji o kodach rabatowych (zmniejsza skuteczność marketingową), brak kategorii "Nowość" (standard w e-commerce). Te błędy bezpośrednio blokują sprzedaż.
🔴 Złamana Heurystyka #9: Pomoc w rozpoznawaniu i obsłudze błędów
Pokazywanie niedostępnego produktu bez żadnej akcji (np. "powiadom o dostępności") jest formą błędu systemowego, który nie pomaga użytkownikowi rozwiązać problemu.
Zbędna redundancja treści
Umieszczenie pełnego formularza kontaktowego na samym dole strony "Sklep" jest niepotrzebnym powieleniem treści. Formularz ten istnieje już na dedykowanej podstronie "Kontakt" oraz na innych stronach (Strona Główna, Oferta). Zajmuje to cenne miejsce, które mogłoby być wykorzystane np. na opinie klientów lub bestsellery.
🟡 Złamana Heurystyka #8: Estetyka i minimalizm
Strona zawiera nieistotne, powielone informacje, które odciągają uwagę od głównego celu tej strony, jakim są zakupy.
Rekomendacja Poprawki
Poniższy wireframe prezentuje rekomendowany układ strony "Sklep", który adresuje zidentyfikowane problemy i jest zoptymalizowany pod kątem konwersji.
Chcesz taki audyt dla swojego sklepu?
Podczas bezpłatnej rozmowy pokażę Ci 3 konkretne błędy, które blokują sprzedaż w Twoim sklepie.
Chcesz taki audyt dla swojego sklepu?
Podczas bezpłatnej rozmowy przeanalizuję Twoją stronę i od razu pokażę 3 konkretne błędy, które kosztują Cię klientów.
Pokaż mi swój sklep