Mobile first – nowoczesne oblicze projektowania sklepów online

Od dłuższego czasu w świecie eCommerce słyszy się o rosnącym trendzie projektowania sklepów internetowych z nakierowaniem na użyteczność i przejrzystość przede wszystkim w ich wersjach mobilnych. Teoria to jedno, jak sytuacja ma się jednak w kontekście praktycznego zastosowania tego trendu?

Mobile first – dlaczego to takie ważne?

Minęły już czasy, gdy klienci sklepów internetowych dokonywali zakupów tylko przy użyciu urządzeń desktopowych. Jak wynika z ogólnoświatowego raportu Digital 2029: Global Digital overview w ubiegłym roku na świecie liczba użytkowników korzystających głównie z urządzeń mobilnych na drodze zakupowej wzrosła o kolejne 124 miliony (żródło: https://wearesocial.com/).

Z raportu wynika, że średni dzienny czas korzystania z urządzeń mobilnych wynosi 3 godziny i 40 minut – każda z tych wspomnianych minut to dla właściciela sklepu okazja na sprzedaż. Rosnące słupki statystyczne pokazują, że klienci podczas swojej ścieżki zakupowej coraz rzadziej korzystają z urządzeń desktopowych, dlatego tak istotne jest, by podczas przeglądania ofert sklepów na telefonie:

• strona była responsywna
• grafiki skalowały się odpowiednio do rozdzielczości ekranu
• całość była przejrzysta dzięki ograniczeniu zbędnej treści

Klienci sklepów online korzystają z urządzeń mobilnych, kierując się głównie wygodą i komfortem użytkowania. Warto mieć na uwadze, że dopasowana, responsywna wersja sklepu internetowego powinna być łatwa do przeglądania na urządzeniach, których przekątna rozpoczyna się już od 5 cali.

Właściciele sklepów online są coraz bardziej świadomi, że proces zakupowy przestaje być już w wielu przypadkach spontaniczną decyzją, a klienci przed zakupem wielokrotnie przeglądają oferty sklepów i robią to w głównej mierze właśnie na urządzeniach mobilnych, chociażby podczas podróży czy przerwy w pracy.

Mobile first – rady od UX Designera

Świadome wykorzystanie Mobile first skupia się na odpowiednim przygotowaniu projektu, w taki sposób, aby jego wygląd był lekki i czytelny, bez zbędnych dodatkowych informacji, które mogą rozproszyć uwagę końcowego użytkownika. Z obserwacji wynika, że jedynie 5 sekund wystarczy, aby osoba przeglądająca dany serwis wyrobiła sobie o nim zdanie, a tylko w ciągu 3 sekund użytkownik wykonuje kaskadowe ruchy w poszukiwaniu najbardziej istotnych informacji.

Możemy wyróżnić 7 najważniejszych zasad, którymi powinniśmy się kierować w celu wyróżnienia swojego sklepu internetowego spośród licznej konkurencji.

Responsywność – korzystanie z witryny na każdym urządzeniu, nie tylko mobile, czy desktop staje się powoli powszechnym zjawiskiem. Odpowiednie przygotowanie jest bardzo ważne, a co za tym idzie optymalizacja użyteczności strony, dzięki któremu przeglądanie stron staje się łatwe i przyjemne.

Nawigacja – ważnym szczegółem jest widoczna nawigacja, dzięki której użytkownik trafia do pożądanej treści przy minimalnej ilości kliknięć. Wersja mobilna powinna posiadać proste i widoczne menu, które nie zostanie przesłonięte przez wyskakujące reklamy i banery. Natomiast droga do Homepage, powinna być wyrażona za pomocą adnotacji w menu lub możliwa za pomocą kliknięcia w logo, znajdującego się zazwyczaj na samej górze strony.

Interakcja z użytkownikiem – właściwe zastosowanie przycisków CTA (ang. call-to action) może przełożyć się na wzrost konwersji ze strony. Dzięki temu zmniejszamy ilość czasu potrzebnego użytkownikowi na przejście do interesujących go produktów/zagadnień. Przyciski powinny być widoczne na stronie, wyróżniające się kolorem, czy stylem.

Intuicyjna wyszukiwarka wewnętrzna – powinna być umiejscowiona w takim miejscu, aby użytkownik miał do niej dostęp w każdym momencie przeglądania na stronie. Najczęściej jest to góra witryny. Wyszukiwarka powinna być na tyle intuicyjna, aby można było odnaleźć w niej istotne informacje, a konkretne produkty były podpowiadane na zasadzie wpisywania kolejnych znaków.

Kolorystyka i grafika – jest ważnym elementem, od którego przede wszystkim zależy, czy użytkownik zostanie na stronie, czy ją opuści. Nie mówimy tu o indywidualnych upodobaniach, ale o psychologii koloru oraz wykorzystaniu maksymalnie 2-3 kolorów bazowych, które nawiązują do marki, wzbudzając pozytywne odczucia oraz pozwolą podkreślić najważniejsze informacje. To samo dotyczy grafiki, jednak podczas projektowania należy pamiętać o jej stosownej rozdzielczości, która odpowiednio dopasuje się do ekranu mobilnego w orientacji pion-poziom.

Czytelność strony – użytkownik przeglądając sklep, poszukuje konkretnych produktów, dlatego wygląd interfejsu nie powinien przysłaniać czytelności strony. Nawet najmniejszy element wpływa na przejrzystość, dlatego należy pamiętać, aby układ tekstów i grafik, zastosowane fonty (ich rodzaj, wielkość, grubość) był odpowiednio przemyślany.

Click-to-call oraz formularz kontaktowy – Click-to-all, czyli tak zwany szybki kontakt pozwala użytkownikowi na szybki kontakt telefoniczny/chat/mail. Jest przedstawiony za pomocą ikony z telefonem/kopertą/dymkiem chatu i umiejscowiony zazwyczaj w dolnym rogu witryny. Natomiast formularz kontaktowy powinien być prosty z funkcją autouzupełniania i autokorekty oraz wyraźnym zaznaczeniem pól posiadających błędy.

Ciekawostką jest, że użytkownicy z biegiem czasu wyrobili sobie odruch ignorowania elementów na stronie, które przypominają komunikaty reklamowe, czy zapisy do newsletterów. Jeśli chcemy umieścić na naszej stronie treść/grafikę o takim charakterze należy pamiętać nie tylko o kolorystyce, ale także o odpowiednim jej umiejscowieniu lub przedstawieniu jej w formie pop-upa, który nie przysłoni całego ekranu oraz będzie łatwy do zamknięcia.

Reasumując, projektowanie Mobile first powinno opierać się zatem przede wszystkim na użytkowym podejściu do projektowania interfejsów. Zajmuje się tym dziedzina UX, która odgrywa kluczową rolę w tworzeniu, wdrażaniu i jakości produktu. Zgodnie z założeniami cały proces projektowania skoncentrowany jest na użytkowniku, jego doświadczeniach i przyzwyczajeniach. Należy również pamiętać, że nierozerwalnym elementem w tworzeniu mobilnych interfejsów jest nadal przygotowanie wersji desktopowej, zwłaszcza w przypadku rozwiązań dla branży e-commerce.