Jak zaprojektować kasę UX jak profesjonalista

Doświadczenie kasy jest prawdopodobnie najważniejszym aspektem twojego sklepu internetowego. Każda czkawka i klient mogą zostać rozproszeni, rozczarowani lub opuścić firmę (która płaci twoją pensję) z cennych dochodów. Musi być doskonały. Jako projektant doznań dla użytkownika, Twoim zadaniem jest zapewnienie płynności i skuteczności realizacji płatności. Bez błędów.

W tym artykule chciałbym omówić projekt kasowy i kilka zasad, które zapewniają najlepsze wrażenia z zakupów. Wiem. Kiedy usłyszysz "projekt kasy", prawdopodobnie skaczesz z radości ...

... ale tam właśnie guma spotyka się z drogą, jeśli chodzi o zarabianie pieniędzy w Internecie. Bez zapłaty nie otrzymasz zapłaty. Więc lepiej bądź dobry.

Aby odpowiedzieć na to pytanie, co najlepiej sprawdza się w kasie, odszukałem trzech doświadczonych projektantów UX w głównych markach e-commerce: ThinkGeek, Shopify i REI. Firmy te widzą miliony i miliony dolarów, a użytkownicy codziennie przechodzą przez swoje "kasy". Trzema osobami byli:

• Matt Chwat , Dyrektor ds. User Experience w ThinkGeek . Matt jest w ThinkGeek, największym internetowym (i najbrzydszym) sklepie internetowym od dziewięciu lat. Jest tak samo zaawansowanym programistą, jak projektantem UX.
• Kevin Clark , Design Lead at Shopify . Kevin Clark jest kierownikiem projektu w zespole projektowym Shopify w Montrealu. Nadzoruje zespół odpowiedzialny za realizację płatności za pośrednictwem platformy e-commerce. Jak tylko użytkownik kliknie ikonę koszyka, wszedłeś do domeny zespołu Kevina. Wszystko, od e-maili, interakcji sprzedawców i klientów, po stronę statusu zamówienia na żywo - jeśli kupujesz coś na stronie Shopify, to dziwne, Kevin i jego zespół mieli w tym swój udział.
• Catherine Ho , Senior UX Designer at REI . Poprzednio w Intuit, Catherine była z REI przez dwa lata w Seattle. Uwielbia UX, ponieważ koncentruje się na ludziach i jest zarówno techniczna, jak i kreatywna. Jej rola w REI to hybryda między badaniami a projektowaniem. Jej projekty obejmowały urządzenia sklepowe, takie jak iPod touch dla systemu POS, aplikacje iOS oraz konta i konta, w szczególności przebudowujące doświadczenia logowania i listy życzeń.

Podczas moich rozmów z nimi zauważyłem 5 wspólnych zasad, o których należy pamiętać podczas projektowania bezproblemowych kas.

1. Trzy standardowe standardy Shopify w zakresie realizacji transakcji: łatwe do zrozumienia, proste i szybkie

W 2016 roku Kevin Clark i jego zespół byli odpowiedzialni za przeprojektowanie obsługi kas do wszystkich witryn Shopify. To prawie pół miliona sklepy. Jako top-chart w przestrzeni e-commerce oczekiwania były wysokie.

Współpracując ściśle z zespołem Themes, Kevin i jego zespół skupili się na standaryzacji uniwersalnego Shopify checkout. To samo dotyczy wszystkich motywów Shopify.

-Kevin Clark, Shopify

Poza podstawowym poczuciem bezpieczeństwa, zakup Shopify powinien być łatwy do zrozumienia, prosty i szybki.

Najlepszym sposobem na zaprojektowanie czegoś jako transakcyjnego i opartego na procesie jako kasy jest przetestowanie wszystkiego.

Na przykład, aby przetestować założenie o tym, ile kroków powinno być w trakcie realizacji transakcji, on i jego zespół przeprowadzili test porównujący jedną stronę, dwie strony i trzy strony - każda z tą samą informacją.

Przykład zamówienia jednej strony:

Przykład dwustronnego zamówienia:

Wyniki pokazały, że jedna strona była przytłaczająca dla użytkownika, ponieważ zawierała zbyt wiele informacji na jednej stronie, dwie strony dzieliły kroki niezręcznie, a trzy strony wydawały się proste i łatwe.

Te trzy kroki to informacje o kliencie, sposobie wysyłki i płatności:

-Kevin Clark, Shopify

Te trzy kroki są osadzone we wszystkich witrynach. Ale poza tym właściciele sklepów mają do dyspozycji garść dostosowań, które pasują do ich marki.

Ale z dostosowaniami Kevin zaleca, aby nie przesadzać:

Zamiast tego należy ustanowić mechanizmy kontrolne w celu ochrony podstawowych doświadczeń, które są spójne, znane i bezpieczne. Przykładem tego jest to, że system Shopify wie, jakich kolorów użyć i których nie używa w oparciu o algorytm kontrastu (tj. Jasny tekst na ciemnym tle) i dostosowuje się do czytelności.

System kasowy Kevin i jego zespół stworzył podstawy do przyszłych prac, które zostaną zbudowane na nim. Jest to system oparty na komponentach, więc można dodawać nowe komponenty, takie jak pola i elementy przycisków, a funkcje można modyfikować lub dodawać bez konieczności dokonywania przeglądu całego systemu.

2. Ostateczny cel: "brak tarcia"

Ojciec Windowsa i Internet Explorera, były legenda Microsoftu, Steven Sinofsky, obecnie doradza firmom takim jak Product Hunt, Box i zasiada w zarządzie Andreessen Horowitz. Jest projektantem w sercu i mistrzem rozwoju produktu. W swoim poście Bezstratny projekt produktu zwrócił uwagę na różnicę między minimalizmem a bezstratnym designem.

Napisał, że podczas gdy minimalistyczny projekt zmniejsza pole powierzchni doświadczenia, bezstratny projekt polega na zmniejszeniu energii wymaganej przez doświadczenie. Jest to szczególnie ważne przy projektowaniu kasy.

Daje 6 zasad konstrukcji bez tarcia:

1. Wybierz opcję domyślną, a nie opcje
2. Utwórz jedną ścieżkę do funkcji lub zadania
3. Zaproponuj personalizację, a nie personalizację
4. Trzymaj się zmian, które wprowadzasz
5. Twórz funkcje, a nie futzery
6. Odgadnij poprawnie przez cały czas

W REI Catherine niedawno wdrożyła przykład projektu bez tarcia. Jej zespół odkrył, że gdy klient jest gotowy do dodania produktu do koszyka, logowanie powoduje wysłanie klienta na nową stronę internetową, co powoduje przerwanie zakupów. Aby to naprawić, A / B przetestowała widżet logowania, który otwierał modulację logowania w dół, zachowując doświadczenie na stronie zamiast wysyłać kupującego na nową stronę logowania.

Analizy danych nie wykazały różnicy w ruchu ani porzuceniach, więc je zatrzymali. Odwiedzający mogli logować się i kontynuować zakupy z tej samej strony bez utraty poczucia miejsca. Jest to przykład zasady nr 2 Sinofsky'ego: Stwórz jedną ścieżkę do funkcji lub zadania. Zamiast tworzyć widelec na drodze do logowania lub kontynuowania zakupów, ścieżka użytkownika jest jednostronna.

Warto również wspomnieć o zasadzie Sinofsky'ego nr 5: Buduj cechy, a nie futzery. Co to do cholery jest "futzer?"

Futzer to słowo "futzing" (które prawdopodobnie brzmi bardziej znajomo), sprytnie zamaskowane jako rzeczownik. To jest rzecz, która powoduje bezsensowne błądzenie i stratę czasu.

Tu właśnie wpadają projektanci. Jak określić różnicę pomiędzy cechą a futzerem? Jak wspomina Sinofsky, wymaga to delikatnej równowagi w dawaniu użytkownikowi tego, czego chce, ale nie tak bardzo, że przytłacza je.

Dobrym sposobem na zilustrowanie tego jest zapoznanie się z najważniejszymi powodami, dla których kupujący porzucają koszyki na zakupy. Chciałbym podkreślić dwa badania zaniechania koszyka i wyciągnąć wnioski z obu.

W pierwsze badanie (2013), firma zajmująca się przetwarzaniem płatności Worldpay zbadała, dlaczego ludzie opuścili swoje koszyki zakupów online bez płacenia.

Sześć z podanych powodów jest związanych z tą równowagą między cechami i futzers. Sprawdź to:

1. "Nawigacja na stronie internetowej zbyt skomplikowana" ... Zbyt wielu futzerów.
2. "Proces trwał zbyt długo" ... Zbyt wielu futzerów.
3. "Nadmierne kontrole bezpieczeństwa płatności" ... Zbyt wielu futzerów.
4. "Obawy dotyczące bezpieczeństwa płatności" ... Brak wystarczającej liczby funkcji.
5. "Opcje dostawy były nieodpowiednie" ... Brak wystarczającej liczby funkcji.
6. "Cena prezentowana w obcej walucie" ... Brak wystarczającej liczby funkcji.

Innymi słowy, firmy tracą dochody, ponieważ kupujący wychodzą, gdy jest zbyt dużo futrówek i mało funkcji.

W podobne badanie przeprowadzone w 2016 przez Baymard Institute badacze użyteczności stwierdzili, że 27% amerykańskich kupujących online porzuciło swoje wózki wyłącznie z powodu "zbyt długiego / skomplikowanego procesu realizacji transakcji. "

Baza danych benchmarków Baymard wykazała, że ​​przeciętny przepływ w usłudze Google Checkout zawiera domyślnie 23,48 elementów formularza wyświetlanych użytkownikom. Jednak wyniki badania pokazały, że możliwe jest zmniejszenie średniej długości transakcji o 20-60%.

Testy jakościowe 1: 1 z moderowaną użytecznością i badanie śledzenia oczu w trakcie realizacji zamówienia pokazały, że idealny przepływ transakcji może zostać zredukowany do zaledwie 12 elementów formularza (7 pól formularza, 2 pola wyboru, 2 listy rozwijane i 1 przycisk radiowy berło).

Ile elementów formularza ma twoje zamówienie? Wszystko powyżej 12 może wskazywać na obecność futzerów w twoim przebiegu kasowym. Jak zmniejszyć liczbę elementów formularza? Unikalne testowanie to ostateczna odpowiedź, ale na razie wystarczą kolejne kroki.

3. Utrzymywanie danych

Oto pytanie, które należy zadać projektantom kasy: w jaki sposób wykorzystujesz dane podczas procesu realizacji transakcji?

Matt na ThinkGeek uważa, że ​​najlepsze doświadczenia w kasie zbierają tylko niezbędne dane, a następnie utrzymują te dane przez cały czas trwania transakcji:

Jeśli baza danych zawiera informacje o kliencie, użyj go, aby zmniejszyć liczbę pól, które musi wypełnić. Opcja zakupu za jednym kliknięciem Amazon jest tego najlepszym przykładem.

Znając dane klienta, może prawidłowo "odgadnąć" preferowany tryb wysyłki użytkownika, jego adres i szczegóły płatności bez dodatkowego wysiłku ze strony użytkownika. Dzięki jednokrotnemu zakupowi kasy z jednym kliknięciem, nie ma możliwości dla węzłów chokepunktów.

Shopify utrzymuje dane za pomocą "punktów kontrolnych". Oznacza to, że jeśli użytkownik przejdzie przez Wysyłkę, ale zrzeknie się podczas Płatności, zebrane dane zostaną zachowane, a użytkownik może odebrać podróż tam, gdzie ją przerwał.

4. Przebaczający projekt

Ostatnim wspólnym wątkiem wszystkich trzech marek była idea "wybaczającego projektu" - gdzie celem projektanta jest zapobieganie wszelkim błędom w procesie realizacji transakcji. Zamiast rygorystycznych błędów, dzięki wielkiej kasie użytkownicy nie mogą sobie pozwolić na bycie leniwym, z braku lepszego słowa.

Poniżej znajdują się trzy przykłady "wybaczającego projektu" w przepływie kasowym: 1) dodanie kart upominkowych i upustów, 2) wyłączenie przycisku "Prześlij" i 3) wprowadzenie numerów telefonów.

W pierwszym przykładzie wszystkie trzy marki mają karty podarunkowe i rabaty - dobrze znane narzędzia do zamykania sprzedaży online. Zazwyczaj jednak nie zawsze wiadomo, gdzie wpisać kody lub wykorzystać karty.

Według Kevina Clarka:

W Shopify znaczna praca inżynieryjna pozwoliła użytkownikom wkleić kartę podarunkową lub kod rabatowy do tego samego pola, a system automatycznie je sortuje. Nie można popełnić błędu.

Po drugie, czasami sklepy wyłączają lub "wyszarzają" przycisk "prześlij / kontynuuj", dopóki użytkownik nie wypełni wszystkich wymaganych pól.

Czy to zrobić? Jest to gorąca dyskusja w społeczności UX o tym, czy pozostawić włączony przycisk przesyłania / kontynuowania, ale zgodnie z tym, co nieoficjalne Badania jednego użytkownika w usłudze Stack Exchange, około 5% mniejszej liczby próbkowania witryn powoduje wyłączenie przycisku przesyłania / kontynuowania.

W Shopify, ThinkGeek i REI przycisk submit / continue jest zawsze włączony, nawet z brakującymi informacjami. Czemu? Z trzech powodów:

1. Zapobiega dezorientacji użytkownika. Przycisk "wyszarzony" informuje kupującego, że coś jest nie tak, ale nie wskazuje dokładnie, gdzie dokładnie i wysyła użytkownika na ślepe polowanie na błąd. Aktywny przycisk przekazywałby klikalność, co skutkowałoby prostym komunikatem (często w kolorze czerwonym) na polu wymagającym prawidłowego wejścia.
2. Jest dostępny. W niektórych przypadkach (rzadko) użytkownik może mieć wyłączoną obsługę Javascript w przeglądarce, która uniemożliwiłaby zmianę stanu dynamicznego przycisku wyłączonego na włączony.
3. Zapobiega wystąpieniu błędu programisty. Można było pominąć ważny przypadek użycia lub dane wejściowe, które powinny aktywować przycisk przesyłania / kontynuowania (np. Międzynarodowość), zatrzymując klienta bez opcji, ale w celu odświeżenia lub zakończenia.

Warby Parker wykonuje świetną robotę, przekształcając to, co zwykle jest irytujące, w szansę na sprytne wyrażenie pewnej osobowości marki.

Strona zamówienia ThinkGeek utrzymuje aktywny niebieski przycisk "Przejdź do kasy", nawet gdy pola są puste.

Niebieski przycisk "Kontynuuj" jest aktywny na pustej stronie kasy REI.

Wszystkie sklepy Shopify utrzymują niebieski przycisk "Kontynuuj do wysyłki" aktywny cały czas.

Wreszcie, trzecim przykładem wybaczającego projektu są numery telefonów. Jeden użytkownik opublikował następujący problem Stack Exchange :

Obecnie na mojej stronie użytkownicy są proszeni o wpisanie swojego numeru telefonu w bardzo konkretnym formacie (555-555-5555). Jeśli zapomnisz kresek, pęknie. Czy ktoś ma dobre sugestie, jak być bardziej elastycznym, pozwalając użytkownikom na wprowadzanie w dowolny sposób, ale nadal pozwala systemowi na sprawdzenie, czy jest to prawdziwy numer telefonu. W jaki sposób obsługiwane są rozszerzenia numerów telefonów?

Bezwzględny projekt wymaga tego konkretnego formatu (tj. Liczby znaków, kresek względem kropek, spacji). Zapominanie o projektowaniu pozwala użytkownikom na wprowadzanie tego, jak chcą, i pozwala systemowi określić, jaki jest numer.

Zapewniając maksymalną elastyczność w pisaniu numeru telefonu, użytkownik ma mniejszą szansę na "popełnienie błędu".

Kolejny użytkownik odpowiedział w jaki sposób to naprawić, korzystając z wybaczającego projektu:

Najlepszym podejściem do wygody użytkownika jest umożliwienie użytkownikowi wpisania numeru telefonu w formacie, który najbardziej mu odpowiada. Nie rozbijaj go na osobne pola, nie wymuszaj maską, pozwól, aby została wpisana jako swobodna. Następnie, po zakończeniu wprowadzania przez użytkownika pola (opuszczając pole do przesłania danych), sformatuj numer w standardowym formacie do swoich celów.

Ponieważ mówisz o witrynie sieci Web, możesz zrobić ten format na rozmycie za pomocą Google libphon numer http://code.google.com/p/libphonenumber/ projekt. To narzędzie obsługuje międzynarodowe numery telefonów i wiele różnych formatów.

Powodem, dla którego to podejście jest lepsze dla doświadczenia użytkownika, jest to, że pozwala on modelowi użytkownika pozostać niezmieniony i pozwala mu powiedzieć: "Nie zmuszaj mnie do myślenia". Maskowanie i oddzielne pola wymuszają na modelach umysłowych numery telefonów. wymaga więcej myślenia.

Podobnie jak w przypadku kart podarunkowych, numery telefonów powinny być akceptowane w dowolnym formacie, aby klienci mogli przejść "bez zastanowienia" lub zastanawiając się, czy są poprawne.

Wybaczanie projektowi pozwala zmniejszyć liczbę pól w przepływie kasowym, pomagając w ten sposób wyeliminować skargę 1 na 4 kupujących wyrażoną w badaniu użyteczności kasy firmy Baymard (zbyt długi / skomplikowany proces realizacji transakcji)

5. Typowe błędy w kasie, których należy unikać

Wreszcie wszyscy trzej eksperci ds. E-commerce wymienili i ostrzegli przed trzema prostymi błędami, które napotkali podczas projektowania kas:

Błąd nr 1: nie dołączaj recenzji zamówienia. Postaw się w sytuacji klienta, który nużąco wypełnia swoje informacje tylko po to, by mieć wątpliwości, czy zamówili odpowiednią rzecz lub ilość. Nie zobaczenie szansy na sprawdzenie zamówienia przed zakupem, doprowadzi ich do zwolnienia za kaucją i rozpoczęcia od nowa, lub co gorsza, poddania się. REI informuje kupującego w trakcie całego procesu kasowania za pomocą pływającego pola "Podsumowanie zamówień" i wyraźnej możliwości sprawdzenia przed złożeniem zamówienia.

Oprócz wyświetlania podsumowania zamówienia po prawej stronie w trakcie całego procesu realizacji zamówienia, REI zawiera końcową recenzję wraz z zamówieniem.

Błąd # 2: Niepomocne komunikaty o błędach. Klient może łatwo wprowadzić nieprawidłowe informacje w formularzach kasy. Zamiast wyświetlania "Nieważnej" lub podobnej niespecyficznej kopii, użyj adaptacyjnego powiadamiania o błędach. Komunikaty o błędach w ThinkGeek są aktualizowane na bieżąco z "To pole jest wymagane." Na "Wprowadź poprawne [puste]", aby pokazać klientowi, gdzie i dlaczego wystąpił błąd.

ThinkGeek dostosowuje komunikaty o błędach, aby wskazać bardziej szczegółowe instrukcje.

Błąd nr 3: nie jest przyjazny dla urządzeń mobilnych. Jeśli sprzedajesz online, nie musisz się zastanawiać. Proszę. Jeśli masz kasę online, nie narażaj klientów na powiększanie i pomniejszanie, przesuwanie i mrużąc oczy przy niezobowiązującym kasie.

Takeawayy i elementy akcji

Kasy są częścią każdego doświadczenia e-commerce. Jako ostatni krok przed zakupem produktu nie chcesz, aby coś poszło nie tak. Cieszyłem się, że Matt, Kevin i Catherine usłyszeli o pięciu zasadach, którymi kierują się, aby zaprojektować ścieżkę zakupów swoich klientów:

1. Aby uzyskać najlepsze płatności, upewnij się, że Twój projekt kasy jest spójny, znajomy i bezpieczny. Czy twoje kasy daje użytkownikowi poczucie poufności i bezpieczeństwa?
2. Ostatecznym celem jest brak tarcia. Przejdź przez 6 zasad Sinofsky'ego i oceń swoje doświadczenie w kasie, zwracając szczególną uwagę na # 2 i # 5. Czy są jakieś braki lub czy można usunąć futzery?
3. Gdy użytkownik przechodzi przez proces zakupu, zachowaj dane, aby było łatwiej i intuicyjnie. Ale pamiętaj, jeśli nie możesz odgadnąć poprawnie za każdym razem, nie zgaduj. Jakie masz już dane, które można wykorzystać do zapisania naciśnięć klawiszy użytkownika i usprawnienia procesu zakupu?
4. Użyj wyrozumiałego projektu, aby użytkownicy nie czuli, że popełnili błąd. Warto zwiększyć nakład pracy, aby uzyskać rozbudowane funkcje, gdy zwiększysz liczbę konwersji. Czy masz analitykę podłączoną do kasy? Gdzie jest największy punkt opuszczenia? Jak usunąć tę przeszkodę?
5. Unikaj prostych błędów. Nawet najlepsi projektanci nie są niepokonani, aby przeoczyć szczegóły, zwłaszcza jeśli chodzi o coś tak "nudnego" jak projekt kasowy. Co jakiś czas przechodź przez proces sprawdzania witryny w trybie incognito na komputerze, tablecie i urządzeniu mobilnym i zadaj sobie pytanie: "Czy to może być łatwiejsze? Prostsze? Bardziej intuicyjny? "

• ← Jak opanować mikrokopię
• 5 sposobów, w jakie zmienny przycisk akcji zwiększa UX →