18 witryn handlu elektronicznego z bezbłędnym designem UX (i 3 wielkie nazwiska, które są do bani)

Jeśli dołączyłeś do nas w naszym artykule UX na początku tego miesiąca, będziesz wiedział, że omówiliśmy 25 podstawowych elementów projektu UX dla Twojej witryny.


Podstawowa idea jest taka: projektowanie UX polega na dostaniu się do głowy odwiedzającego. Chodzi o stworzenie prostego, bezproblemowego i przyjemnego doświadczenia dla użytkowników. Chodzi o to, aby szybko dostarczać informacje, a nawet wywoływać uśmiech.

Dobry projekt UX wywołuje u gości dopaminę i szczęście. A to sprawia, że ​​bardziej Ci ufają. Co najważniejsze, sprawia, że ​​częściej kupują od Ciebie.

Po omówieniu 25 podstaw w naszym ostatnim artykule na temat projektowania UX, rzućmy okiem na to, jak to działa w akcji. W szczególności przyglądamy się projektowi UX stron internetowych e-commerce.

W jaki sposób strony te wykorzystują sprytne sztuczki projektowania UX, aby zachęcić odwiedzających do zakupu?

1. Asos

Często używam przykładu Asos, ale jest ku temu dobry powód. Ich konstrukcja UX jest genialna.

Wszystko zaczyna się od propozycji wartości typu knock-out. Świetny wizerunek, prosty objaśnienie, gwarancja „bezpłatnej dostawy” i oczywiste wezwania do działania kierujące do sekcji męskiej lub damskiej.

asos2

Jedną z ich wyróżniających się funkcji UX jest wybieg wideo, dzięki któremu odwiedzający mogą zobaczyć, jak wygląda strój. Daje to klientom najlepszy możliwy widok przedmiotów i daje im pewność zakupu.

Mają także doskonałą nową funkcję o nazwie „szybki podgląd”. Na stronie produktu naciskasz „szybki podgląd” i pojawia się małe okienko wyskakujące z dodatkowymi obrazami i wszystkimi potrzebnymi informacjami. Oszczędza to klientowi klikanie w tę iz powrotem na różnych stronach. Prosta, intuicyjna konstrukcja.

asos

2. Zara

Strona internetowa Zary to mistrzowska klasa w prostocie. Czysty, intuicyjny i ograniczony. Jest to oda prawa Hicka: zasada projektowania, która ogranicza wybór nawigacji i daje użytkownikowi jasne, ale ograniczone opcje.

Chodzi o to, że zbyt wiele opcji przytłoczy odwiedzającego. Oferując mniej opcji, czują się bardziej pewni siebie. W tym poście przyjrzymy się doskonalszej nawigacji, ale Zara jest jedną z najlepszych.

zara

3. Abof

Abof (All About Fashion) używa na swojej stronie diabelnie sprytnej sztuczki UX. Po otwarciu strony głównej nie wygląda ona jak tradycyjna witryna e-commerce. Zamiast tego wygląda bardziej jak blog. Jest pełen soczystych treści, które inspirują odbiorców.

abof

Następnie w swoich opowiadaniach i artykułach podkreślają ubrania w widocznej części zatytułowanej „Kupuj historię”. W naszym poprzednim artykule na temat UX mówiliśmy o znaczeniu tworzenia relacji z odbiorcami. Abof robi to doskonale dzięki powiązanym historiom i treściom.

na 2

Dopiero gdy klient się zainspiruje, próbuje coś sprzedać.

Na stronie produktu mają przydatne „wskazówki dotyczące stylu”, które są idealnymi przykładami „mikro-interakcji” – małych samorodków, które docierają i angażują odbiorców.

na 3

Zwróć uwagę, że mają również „przewodnik po rozmiarach”, który pomaga klientom w prawidłowym pomiarze dokładnych pomiarów (obawa przed niedopasowaniem ubrań jest jednym z największych powodów, dla których porzucamy koszyki na zakupy). Korzystają również z sekcji „szacowana dostawa”, aby zapewnić klientom jeszcze więcej informacji.

4. Berghaus

Berghaus to marka odzieży outdoorowej, ale dowiesz się o tym w ciągu pierwszej sekundy od lądowania na swojej stronie.

berghaus

Jest to marka, która dokładnie rozumie swoją grupę docelową i dba o jak najszybsze nawiązanie z nią kontaktu. Pierwszy strzał bohatera jest inspirującym zaproszeniem. Łączy się ze społecznością i zachęca.

Jedyny minus? Silniejsze wezwanie do działania naprawdę przypieczętuje umowę.

5. Apple

Można się spodziewać, że firma, która stawia na design i innowacje w swojej klasie, przoduje w projektowaniu UX i tak właśnie jest. Na początek sprawdź ich strony produktów.

Używają przewijania paralaksy, aby obrazy były dynamiczne, przyciągając użytkownika i eliminując wszelkie punkty wyjścia. Jesteś zanurzony w świecie Apple.

Zrzut ekranu 2016-07-28 o 8.43.00

Sprytne animacje pokazują dokładnie, jak działają produkty, takie jak nowy dotyk 3D. Przewijane galerie zapraszają do interakcji i odkrywania, a sprytna kopia mówi dokładnie, jak nowy iPhone poprawi twoje życie (zamiast długiej listy funkcji).

Ich nawigacja jest prosta i przejrzysta, a ja uwielbiam ich użycie do dalszego różnicowania opcji (skanujemy sieć, więc słowa mają zwyczaj przenikania się)

jabłko 2

Podczas realizacji transakcji dają ci możliwość porozmawiania ze specjalistą podczas zakupu. To prosta, ale przydatna sztuczka. Zapewnia początkującym pomoc przez linię, ale nie przeszkadza pewnym kupującym w wydostaniu się z karty kredytowej.

6. Bellroy

Jako stosunkowo nowy sprzedawca e-commerce Twoim pierwszym zadaniem jest pokazanie klientom, czym się różnisz od wszystkich innych. Bellroy robi to doskonale dzięki gamie wąskich, kompaktowych portfeli.

Bellroy 3

Co więcej, na stronach produktów każdy portfel ma własne wideo, pokazujące klientom wszystkie unikalne funkcje.

Bellroy 4

7. Wynajmij pas startowy

Rent The Runway ma dość unikalną koncepcję: pożyczasz sukienkę lub strój na kilka dni, zamiast go kupować. Jest to idealne na wesela lub wydarzenia, w których nie chcesz się wystroić na strój, którego nigdy nie będziesz nosić.

Witryna po prostu wprowadza tę koncepcję, a następnie zachęca użytkowników do interakcji, zachęcając ich do wybrania okazji.

czynsz za pas startowy

Dodatkowe znaki dla kalendarza dostaw, dzięki czemu klienci wiedzą dokładnie, kiedy przybędzie strój i kiedy należy go zwrócić.

czynsz za pas startowy 2

Tak proste, ale takie uspokajające.

8. Amazon

Amazon jest największą witryną e-commerce na świecie i, szczerze mówiąc, jedną z najlepszych. Możesz wybrać dowolną z ich funkcji jako przykład projektu UX.

Od sprytnych pakietów po rekomendacje klientów, przewidują potrzeby użytkowników i dostarczają. Podkreślamy jednak ich system zamówień jednym kliknięciem.

amazonka

To wciąż najlepszy przykład wydajności wymeldowania w Internecie. Podstawą projektowania e-commerce w UX jest proces koszyka i kasy. Im płynniej tym lepiej. I to nie jest płynniejsze niż zamawianie jednym kliknięciem!

9. Pasa

Obraz, który mówi ci wszystko, co musisz wiedzieć. Formułowanie i projektowanie z osobowością. Natychmiastowa zniżka dla nowych użytkowników oraz duże, odważne wezwanie do działania.

wypasać

Jest to prosta klasa mistrzowska w projektowaniu UX.

10. TopShop

Sklepy, które sprzedają wiele produktów, mają znacznie trudniejszą pracę, jeśli chodzi o projektowanie UX. Jak uporządkujesz każdą parę dżinsów i je prezentujesz?

Na szczęście TopShop ma świetny plan. Dzięki dużemu, masywnemu pokrętłu filtra, które unosi się na stronie, możesz stale dostosowywać i zmieniać styl, kolor, dopasowanie i cenę swoich produktów.

Topshop 2

Co więcej, każdy produkt przełącza się na zdjęcie modelu noszącego je, gdy najedziesz myszką. Zachęca do interakcji i pozwala klientom lepiej przyjrzeć się przedmiotom.

11. Protest

Protest może mieć po prostu największą, najgrubszą nawigację w sieci.

P.

To jasne, zwięzłe i uporządkowane. Zmniejsza to również ryzyko odejścia klienta. Niebieski kolor utrzymuje uwagę klienta dokładnie tam, gdzie tego chce.

Protest wykorzystuje również mnóstwo drobnych animacji na swojej stronie. Każdy wyzwala się po przewinięciu. Zachowuje uwagę klientów, zachęca do interakcji i sprawia, że ​​cała strona jest dynamiczna.

12. Nowy wygląd

New Look zajmuje miejsce na liście innowacyjnych koszyków. Przez cały czas znajduje się na pasku nawigacyjnym z pogrubionym wskaźnikiem przypominającym, że tam jest.

Nowy wygląd 2

Kliknięcie go nie powoduje odciągnięcia Cię na inną stronę. Zamiast tego przesuwasz się z boku przesuwany panel, który pokazuje ci, co masz w torbie. Oznacza to, że klienci nigdy się nie zgubią i mogą łatwo realizować transakcje w dowolnym momencie.

Nowy wygląd

13. Ołówek, do 53

Jeśli zamierzasz sprzedać rysik za prawie 60 USD, musisz go naprawdę sprzedać! Na szczęście „Pencil” autorstwa 53 wykonuje świetną robotę, wykorzystując wiele sztuczek projektowych UX.

Używają długiej, przewijanej strony paralaksy, aby wyjaśnić wszystkie funkcje i pokazać dokładnie, co możesz z tym zrobić.

ołówek 2

Wykorzystują także świetne recenzje, aby wyjaśnić, dlaczego są o wiele lepsze niż inne dostępne opcje. Cytat z „Wired” to genialna sztuczka, aby nadać produktowi wiarygodności i przedstawić jego zalety.

Ołówek

14. Farmdrop

W naszym ostatnim artykule na temat projektowania UX wyjaśniliśmy, jak ważne jest zrozumienie grupy docelowej i nawiązanie z nią kontaktu. Farmdrop robi to, umieszczając swoją misję na pierwszym planie.

gospodarstwo rolne

Są „zmęczeni widzeniem, że jedzenie pochodzi z wielu kilometrów”. To jest coś, z czym większość klientów może skorzystać. Zanim spróbują cokolwiek sprzedać, łączą się z tobą i dają ci powód do zakupu.

15. Sid Mashburn

Kolejne świetne menu rozwijane z małymi ikonami. To prosta sztuczka, która pomaga nam zrozumieć rozbudowane menu. Ponadto nadaje stronie nieco więcej osobowości.

ikony

16. Powolne zegarki

To zegarek z jedną ręką. Jest to dość wyjątkowa koncepcja, więc wymaga wyjaśnienia! Slow Watches robi to naprawdę dobrze z pełnoekranowym filmem wyjaśniającym.

powolne zegarki

Oprócz objaśnienia koncepcji, rozmawiają o swojej filozofii stojącej za jej stworzeniem (idealne do kontaktu z klientem) i używają pięknych zdjęć, które podkreślają i docierają do ich idealnej grupy docelowej.

17. Firebox

Jeśli Twoje produkty nie mieszczą się w normalnych kategoriach, bądź kreatywny! Firebox specjalizuje się w nietypowych prezentach i lekceważących przedmiotach. Ich lista 50 najlepszych to idealny sposób na poznanie ich najpopularniejszych produktów.

obrazy

Układ pudełka jest świetny do szybkiego przeglądania produktów, a wiele obrazów jest dynamicznych, poruszających się i wchodzących w interakcje z klientem.

Ponieważ specjalizują się w prezentach, na pasku nawigacyjnym znajdują się również „narzędzie do wyszukiwania prezentów”, co jest fantastycznym sposobem na zawężenie opcji.

18. Lazy Oaf

Zakupy online często wyglądają tak samo, a wielu przeoczy stary proces przeszukiwania magazynu lub katalogu.

Lazy Oaf przywraca to ze swoją fajną sekcją „lookbooks”. Zamiast układać ubrania pojedynczo, pokazują stroje w różnych kombinacjach naraz. W końcu tak wyglądali w katalogu.

leniwy

Kliknij na zdjęcia, a pojawi się okno „szybkiego zakupu”, aby wybrać każdy z trzech prezentowanych produktów. Jest to bardziej oldschoolowy i wciągający sposób na zakupy.

Czego nie robić!

Nie lubimy rozrywać innych stron na kawałki, ale istnieją wielkie nazwiska, które źle to wszystko… Oto jeden lub dwóch najgorszych przestępców.

1. House of Fraser

Są jednym z największych domów towarowych na świecie, ale popełniają jeden wielki błąd, gdy tylko załadujesz swoją witrynę.

Natychmiast pojawia się wyskakujące okienko na całej stronie z prośbą o subskrypcję biuletynu.

Hourse of Fraser

Mimo że są znanym sklepem, jest to bardzo natarczywa taktyka, która zniechęci większość kupujących. Pamiętaj, że to pierwsze wrażenie. O wiele lepiej jest stworzyć podróż użytkownika, która edukuje i inspiruje odwiedzającego, zanim poprosi o adres e-mail.

Mało tego, ale nie ma prawdziwej zachęty do zapisania się do newslettera. Zniżka na kod kuponu byłaby tutaj świetną opcją i może pomóc klientom wybaczyć inwazyjne wyskakujące okienko.

2. Wal Mart

Wal Mart ma trudne wyzwanie. Sprzedają prawie wszystko, więc jak kategoryzować to i upraszczać? Nie jestem pewien… ale nie tak…

ściana mart

Niestety jest to po prostu bałagan kategorii, w którym prawie niemożliwe jest znalezienie tego, czego szukasz.

Po prostu dzieje się tu zbyt wiele informacji. Gdy przedstawisz użytkownikom zbyt wiele opcji, często wpadają w panikę i wychodzą.

3. Ray-Ban

Jest to nieco wredny wybór, ponieważ większość stron Ray-Ban jest bardzo przyjazna dla użytkownika. W rzeczywistości ma mnóstwo fajnych funkcji.

Robią jednak coś, co robi wiele witryn e-commerce, co naprawdę denerwuje klientów. To:

ray ban

Prawdopodobnie widziałeś taką stronę sto razy. Nie wydaje się tak źle, ale w rzeczywistości tworzy jeszcze jedną barierę dla sprzedaży.

Jeśli jesteś powracającym klientem, zastanawiasz się, jakie hasło utworzyłeś. Jeśli go nie pamiętasz, będziesz musiał przejść przez cały proces „zapomnienia hasła”. W dowolnym momencie możesz stracić tego klienta…

Jeśli jesteś nowym klientem, istnieje pewna opcja kasy dla gości, ale wystarczy, że klikniesz inny przycisk. Kolejna szansa na kliknięcie.

W tym momencie klient jest całkowicie odłączony od koszyka i procesu zakupu. Nie wyciągaj go, po prostu zablokuj sprzedaż!

Świetny design UX polega na drobnych poprawkach, które ułatwiają twoim klientom. Te 18 stron internetowych robi to doskonale.

Z jakich funkcji będziesz korzystać na własnej stronie internetowej?

Kim Martin Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map