Mobile and web app development - Appchance - Digital Products Experts

04 stycznia, 2020

Jak dobrze zaprojektować interfejs aplikacji m-commerce.

Liczba osób dokonujących zakupów przez urządzenia mobilne rośnie lawinowo. Według danych Gemius, już 61% internautów kupuje przez urządzenia mobilne. Z tego względu coraz więcej firm decyduje się nie tylko na optymalizację mobilnej wersji strony internetowej, ale także na budowę aplikacji mobilnej, która daje wiele dodatkowych korzyści zarówno firmie, jak i klientowi. Jednym z największych wyzwań jest zaprojektowanie aplikacji w taki sposób, by jej użytkowanie było proste, łatwe i przyjemne.

Poniżej znajdziesz listę 7 zasad, które pomogą w osiągnięciu tych celów.

W zasięgu kciuka

Zważając na fakt, że większy odsetek użytkowników korzysta z urządzeń mobilnych trzymając je w prawej dłoni i posługując się kciukiem, aplikacje należy projektować tak, aby klient miał łatwy dostęp do najważniejszych funkcji. Duże znaczenie ma także to, że smartfony stały się w ostatnich latach o wiele większe. Odpowiednie rozmieszczenie kluczowych przycisków zwiększa komfort użytkowania, przyspiesza proces zakupowy oraz zmniejsza frustracje związane z uciążliwym sięganiem do daleko umiejscowionych  przycisków. Mając tę zasadę na uwadze przy projektowaniu interfejsu aplikacji, mamy możliwość redukcji niezadowolenia użytkownika oraz ułatwienia mu dosięgnięcia do kluczowych funkcji, zwiększając klikalność tego, na czym nam zależy.

Szybkie tworzenia konta

Tworząc ekran rejestracji powinniśmy pamiętać o kilku podstawowych zasadach. Po pierwsze, starajmy się, żeby rejestracja była przede wszystkim prosta i nie zajmowała zbyt wiele czasu. Prośmy tylko o informacje, które są niezbędne do założenia konta, żeby nie odstraszać użytkowników ilością danych jaką chcemy od nich uzyskać. Zamiast tego, możemy informować użytkownika  o możliwości uzupełnienia danych później, we właściwym kontekście, gdy dane te dadzą mu konkretne korzyści lub są niezbędne do dokończenia kluczowego procesu, np. zakupu. Informacją, którą warto podać, a która nie jest niezbędna by aplikację uruchomić po raz pierwszy, jest informacja o wieku dzieci, którą można podać w aplikacji z zabawkami lub odzieżą. Użytkownik może znaleźć odpowiednie produkty używając filtrów, ale jeśli zdecyduje się na udzielenie tej informacji, aplikacja spersonalizuje treści w taki sposób, by zmniejszyć liczbę kroków potrzebną do znalezienia adekwatnych produktów i interesujących promocji. 

Korzystajmy również z funkcjonalności jakie udostępniają nam media społecznościowe, czyli logowanie przez istniejące już konta. Klienci docenią możliwość rejestracji poprzez jedno kliknięcie, które ułatwia cały proces a dodatkowo pozwala zaoszczędzić ich czas. Wbrew temu, że coraz bardziej powszechnie dyskutuje się o zagrożeniach wynikających z udostępniania swoich danych wszelkim aplikacjom, użytkownicy bardzo chętnie korzystają z możliwości szybkiego założenia konta za pomocą posiadanego profilu na Facebooku czy w Google.

Ostatnią rzeczą którą warto rozważyć jest  możliwość przeglądania i dokonywania zakupów bez konieczności rejestracji. Jest to dodatkowa opcja, która daje klientowi możliwość zaznajomienia się z funkcjonalnościami aplikacji bez konieczności wiązania się z nią. Oczywiście dajemy mu wtedy ograniczony dostęp i umieszczamy informacje, jaka funkcjonalność po zarejestrowaniu się, będzie dostępna w danym miejscu.

Szukanie produktów

Głównym celem aplikacji e-commerce jest sprzedaż produktów. Jednak, aby do niej doszło klienci muszą w prosty i szybki sposób znaleźć produkty, które ich interesują. Wyszukiwanie produktów jest także kluczowe w przypadku aplikacji lojalnościowych dla firm z sektora retail, które sprzedają jedynie w sklepach stacjonarnych, ponieważ na podstawie wyszukanych ofert, klienci decydują często czy w ogóle się do danego sklepu wybrać.

Pole do bezpośredniego wyszukiwania produktów powinno znajdować się na samej górze ekranu startowego i być wyśrodkowane. W taki sposób na pewno będzie widoczne dla klientów. Ponadto pole to powinno posiadać autouzupełnianie i listę najpopularniejszych wyszukiwań, aby skrócić czas wpisywania treści do minimum.

W celu zapewnienia klientom bezproblemowego wyszukiwania produktów, powinniśmy dać im również dostęp do zaawansowanego filtrowania i sortowania. Należy jednak pamiętać, że o ile na początku pomagają one i przyspieszają cały proces poszukiwań, tak w późniejszych etapach mogą rozpraszać uwagę użytkowników.

Co natomiast w sytuacji, gdy klient ma wybrane produkty, które go interesują, ale nie jest on na razie zdecydowany na ich zakup? Z odsieczą nadciąga niepodważalnie wymagana funkcjonalność, czyli dodawanie produktów do folderu “ulubionye” “przechowalnia” lub “lista życzeń”. Przeważnie jest to odrębny ekran do którego wpadają wybrane przez nas produkty, zazwyczaj oznaczane za pomocą serduszka. Aplikacja powinna przechowywać ulubione artykuły do momentu, aż nie zostaną usunięte z listy przez użytkownika. Dodatkową korzyścią, wynikającą z zaimplementowania tej funkcji jest większa użyteczność danych na temat odstetka porzuconych koszyków. Gdy klient nie ma możliwości dodania produktu do ulubionych, zaczyna traktować koszyk, jak przechowalnię produktów, które mu się podobają, ale niekoniecznie jest już zainteresowany ich zakupem, co zaburza statystyki, nie pozwalając w pełni zrozumieć jego intencji

Pamiętajmy również o przejrzystości i prostocie procesu wyszukiwania. Użytkownicy szukający interesujących ich produktów powinni dojść do nich za pomocą trzech kliknięć. Możemy osiągnąć to tworząc tagi (na przykład: “długie sukienki”, “prezent na urodziny” czy “na randkę”) oraz podział na: kategorie, podkategorie i produkty.

Idealny koszyk

Zacznijmy od samego przycisku “Dodaj do koszyka”. Istotne jest, aby był on bardzo dobrze zauważalny, odróżniał się na tle aplikacji i nie zlewał z innymi przyciskami. Taki efekt możemy osiągnąć pracując nad jego rozmiarem, położeniem na ekranie, kolorem lub przezroczystością. Jednak dobierając mu barwę, powinniśmy pamiętać o psychologii kolorów w projektowaniu. Każdy kolor wywołuje inne  emocje i strategiczne podejście do tematu może spowodować, że Twoi klienci poczują się bardziej pewnie w sytuacji dodawania produktów do koszyka. Powinniśmy zatem wybierać kolory kojarzące się z pozytywnymi emocjami takimi jak bezpieczeństwo, aprobata i zaufanie. Wiele firm decyduje się jednak na użycie koloru, który jest elementem ich identyfikacji wizualnej, nie biorąc pod uwagę innych czynników. Temat ten jest na tyle obszerny, że będzie przedmiotem odrębnego artykułu, który wkrótce ukaże się na naszym blogu. 

Jeśli chodzi o wygląd przycisku, bardzo dobrym rozwiązaniem jest stworzenie przycisku na całą szerokość ekranu. Biorąc pod uwagę to, że około 20% użytkowników jest leworęcznych, stwarzamy idealne warunki do dodawania kolejnych produktów dla osób zarówno prawo-, jaki i leworęcznych.

Koszyk jest kluczowym elementem każdej aplikacji e-commerce, ponieważ jest ostatnim miejscem w którym znajduje się klient przed przejściem do płatności. Jak wygląda dobrze zaprojektowany koszyk? Zawiera przejrzyste podsumowanie zakupów, edytowalne pole ilości poszczególnych produktów, możliwość usunięcia ich z listy, pole do wprowadzania kodów promocyjnych, ostateczne podsumowanie ceny całkowitej oraz dwa ważne przyciski: “kontynuuj zakupy” i “przejdź do kasy”.Oczywiście, w zależności od rynku na jakim działa Twoja firma oraz typu oferowanych produktów, można dodawać kolejne elementy i funkcjonalności, takie jak propozycja dodatkowych usług lub zakupu innych, komplementarnych produktów. jednak te wyżej wymienione są absolutnym minimum.

Prosty proces płatności

Jak pokazują badania najbardziej stresującą częścią zakupów jest etap płatności. Często zdarza się, że klienci porzucają swoje koszyki, jeżeli aplikacja wymaga rejestracji konta przed dokonaniem zakupu. Dobrze zaprojektowana aplikacja daje użytkownikom możliwość kupowania jako gość i ta funkcjonalność powinna być bardzo dobrze widoczna. Już bez obaw porzucenia zakupów, do rejestracji konta możemy zachęcać po dokonaniu płatności, wyświetlając stosowny komunikat lub dając użytkownikowi wymierną korzyść (np. “zarejestruj się teraz by dostać bon na 20 zł przy następnych zakupach”)

Zarówno dla zalogowanego, jak i niezalogowanego użytkownika, stosując paski postępu, powinniśmy prezentować wszystkie kroki płatności oraz ten, na którym aktualnie się znajduje się. Dobrą praktyką jest wyświetlanie informacji o błędach w formularzu zakupowym. Zamiast szukać błędów i domyślać się co poszło nie tak, użytkownik otrzymuje komunikat, które pole musi poprawić.

Warto też pamiętać o tym, aby nasza aplikacja dawała możliwość szerokiego wyboru metod płatności.  Na końcowym etapie, gdy użytkownik wybiera sposób, w jaki uiści opłatę, nie możemy pozwolić sobie, aby stracić klienta ze względu na brak opcji, z której on zawsze korzysta.

Spójny design

Dobrze zaprojektowana aplikacja m-commerce, nie powinna być skomplikowana i zawiła. Im prostszy interfejs, tym większe prawdopodobieństwo, że klienci szybko znajdą to, czego szukają. Korzystając z Material Design stworzonego dla systemu Android oraz Human Interface Guidelines dla iOS, twórzmy aplikacje natywne, które będą intuicyjne i przewidywalne w dobrym tego słowa znaczeniu.

Pomoże w tym trzymanie się 3 zasad, takich jak:

1) odpowiedni dobór kolorów,

2) używanie jednego rodzaju czcionki w całym projekcie, gdzie bardzo bezpiecznym rozwiązaniem jest używanie domyślnych czcionek (San Francisco dla iOS i Roboto/Noto dla Android)

3) tworzenie sekcji za pomocą odpowiednich odstępów i typografii, które w przeciwieństwie do oddzielania np. za pomocą linii, nadają świeżości i nie zajmują dodatkowego miejsca.

W celu zachowania spójności design’u należy pamiętać, aby aplikacja stworzona była z powtarzających się elementów i interakcji. Oznacza to, że jeżeli w jednym miejscu stosujemy przyciski zaokrąglone, które po wciśnięciu rzucają większy cień, to w każdym kolejnym miejscu w aplikacji powinny one wyglądać tak samo i zachowywać się tak samo. Co więcej, jeżeli oprócz aplikacji na systemy Android, posiadamy również aplikację na system iOS oraz stronę internetową, to każdy z tych produktów powinien mieć podobne wzorce projektowe.

UX’owe przyprawy

Dopracowane szczegóły wyglądu i działania aplikacji, są kluczem do wyróżnienia się na tle innych. Stosowanie mikrointerakcji jest jednym z takich szczegółów, który może uatrakcyjnić kontakt między urządzeniem, a użytkownikiem. Ich wykorzystanie ma na celu poprawienie doświadczenia użytkownika, przy jednoczesnym wykonywaniu konkretnego zadania. Przykładami mikrointerakcji są: polubienie lub ocena produktu, wybór koloru bądź rozmiaru, czy nawet przesuwanie ekranu w dół dla odświeżenia treści.

Dzięki płynności i naturalności wywołują one większy komfort psychiczny użytkowników oraz powodują, że aplikacja jest przyjemniejsza w użyciu.

Drugą funkcjonalnością, która może sprawić, że Twoja aplikacja będzie bardziej atrakcyjna dla klientów jest możliwość powiększania zdjęć produktów. Badania wykazują, że aplikacje posiadające możliwość przybliżania zdjęć za pomocą gestów, takich jak dwuklik lub rozsuwanie dwoma palcami, mają o wiele  wyższe wyniki sprzedaży. Ze względu na to, że klienci często chcą zapoznać się ze szczegółami produktów przed zakupem, jest to opcja, którą powinniśmy rozważyć podczas projektowania. Aby miało to sens, decydując się na nią, musimy zadbać o to, by zamieścić w aplikacji zdjęcia w wysokiej rozdzielczości. Ponadto, warto rozważyć zamieszczenie ikony informującej o możliwości przybliżania.

Reasumując, przy projektowaniu aplikacji, powinniśmy pamiętać o:

1) umieszczaniu najważniejszych funkcjonalności w zasięgu kciuka,

2) tworzeniu prostych i szybkich do wypełniania formularzy, np. formularzy rejestracyjnych,

3) polu do łatwego wyszukiwania produktów, zaawansowanych filtrach do przyśpieszenia procesu, a także o liście ulubionych produktów do przechowywania,

4) przejrzystym i edytowalnym koszyku oraz łatwym umieszczaniu w nim produktów,

5) procesie płatności również dla niezalogowanych użytkowników oraz udostępnieniu wielu sposobów uiszczania opłat,

6) spójności w designie,

7) szczegółach poprawiających UX całej aplikacji, jak mikrointerakcje, czy dwuklik w celu powiększania zdjęć.

W celu zaspokojenia potrzeb klientów i poprawy sprzedaży naszych produktów, podczas projektowania aplikacji e-commerce powinniśmy kierować się określonymi regułami i zasadami.  W tym artykule poruszyliśmy i omówiliśmy najważniejsze z nich, dając podstawę do dalszych poszukiwań i - mamy nadzieję - motywację do zgłębiania wiedzy na temat projektowania skupionego na użytkowniku. Należy pamiętać o tym, żeby zawsze w centrum procesu projektowego stawiać się człowieka i jego potrzeby. Kluczowe jest dostarczanie mu pozytywnych wrażeń, aby zakupy stały się łatwe i przyjemne, co z pewnością znajdzie odzwierciedlenie w przychodach.