Mobile First Design: klucz do sukcesu w sprzedaży online

Mobile First Bold

Dla jednej czwartej użytkowników mobilnych telefon lub tablet jest jedynym narzędziem dostępu do sieci. Idąc tropem tych danych trafiamy na genialną w swojej prostocie koncepcję: Mobile First Design

Koniec roku 2014, każdy klient zamawiający projekt graficzny i wdrożenie serwisu, sklepu czy strony wizerunkowej na pierwszym spotkaniu z wykonawcą nerwowo upewnia się, czy zostanie przygotowana wersja mobilna projektu. Zazwyczaj niuanse wyboru technologii czy metodyki pracy nie zaprzątają jego myśli.

Zleceniodawca wie jednak, że na telefonach i tabletach projekt wyświetlać się musi. Kompletnie, poprawnie i czytelnie. Zgodnie z jego życzeniem agencja dostosowuje więc projekt gotowej strony do wersji mobilnej. Opisane podejście jest oczywiście jak najbardziej słuszne. Zastanówmy się jednak, jak zoptymalizować proces, by skutecznie dotrzeć do użytkownika mobilnego.

M-commerce 2014

Badania przeprowadzone w marcu 2014 roku w ramach raportu “E-Commerce w Polsce 2014. Gemius dla e-Commerce Polska” jasno określają, że co trzeci kupujący korzysta podczas procesu zakupowego ze smartfona, a co piąty z tabletu. Użytkownicy do 18 roku życia zawyżają te statystyki: aż 52% i 33% nastolatków naciska przycisk “Kup” odpowiednio na telefonie oraz tablecie.

Co ciekawe, jeśli zapytamy ankietowanych o wysokość rachunku podczas mobilnych e-zakupów w porównaniu do tych “desktopowych”, to blisko jedna trzeci stwierdzi, że tym kanałem wydaje mniej pieniędzy.

Najbardziej prawdopodobną przyczyną mogą być trudności, jakie klienci napotykają podczas wizyt w e-sklepach, a które skutecznie potrafią obniżyć jakość doświadczenia zakupowego lub wręcz doprowadzić do porzucenia koszyka. Do najczęściej wymienianych problemów wg raportu Gemiusa można zaliczyć: niewygodne formularze (66%), niedostosowanie strony do urządzenia wyświetlającego (59%), małe litery (49%), skomplikowanie procesu finalizacji transakcji (45%) oraz brak aplikacji mobilnej (41%).

Badanie własne przeprowadzone przez Bold Brand Commerce w październiku 2014 wśród klientów marketów sektora DIY dostarcza dodatkowych danych. Aż 21% użytkowników nie znajduje wszystkich kluczowych dla siebie informacji, a w szczególności ceny, czyli jednego z fundamentalnych czynników poddawanych ocenie podczas procesu zakupowego.

Sposób na rozwiązanie bolączek klientów związanych z technicznym niedostosowaniem serwisów do urządzeń wyświetlających wydaje się być prosty. Prawdziwe wyzwanie pojawia się dopiero, kiedy zaczniemy postrzegać wersję mobilną, jako odrębny byt rządzący się swoimi prawami oraz jako narzędzie wykorzystywane w zupełnie innych warunkach niż jego desktopowy odpowiednik.

Ciekawa wydaje się koncepcja, by potraktować wersję mobilną jako punkt wyjścia do wszelkich prac projektowych nad serwisem. Warto zbadać zachowania “mobilne” użytkowników sklepów z interesującej nas branży, a wyniki wykorzystać do lepszej organizacji treści na mobilnej wersji systemu e-commerce.

Krok ku Mobile First Design

Dla ok. 25% użytkowników mobilnych w USA telefon lub/i tablet jest jedynym narzędziem dostępu do sieci, tylko sporadycznie korzystają oni z klasycznych desktopów. Idąc tropem tych danych trafiamy na genialną w swojej prostocie koncepcję: Mobile First Design zainicjowaną przez Luka Wróblewskiego już 2009 roku.

Uwypukla ona wysokie prawdopodobieństwo, że wielu użytkowników pierwszy raz odwiedzi nasz serwis, nie podczas wieczornego surfowania na swoim olbrzymim iMacu, lecz w pośpiechu, w tramwaju, podczas wykonywania innej czynności, korzystając z telefonu lub tabletu. Treści, które zaprezentujemy muszą być po pierwsze ściśle przeselekcjonowane,  a następnie shierarchizowane i czytelne wyświetlone.

Aktualnie dominuje podejście Responsive Web Design (RWD), czyli technika projektowania serwisów www, zakładająca automatyczne dostosowanie jego wyglądu i układu do rozmiaru okna urządzenia, na którym jest wyświetlany. RWD to gwarancja poprawności oraz jakości technicznej.

Koncepcja Mobile First Design stanowi otwarcie na indywidualne potrzeby odbiorcy i na niej właśnie warto oprzeć proces projektowania, w którym mobile to pierwszy etap prac.

Skupiając się na dostosowywaniu serwisu do urządzeń wyświetlających łatwo można wpaść w “pułapkę rozmiaru”. Kierując się wyłącznie wielkością ekranu w procesie projektowania można przecież:

  • zapomnieć o filozofii, kontekście i potencjale korzystania z urządzeń mobilnych,
  • pominąć preferencje użytkownika, który niecierpliwie poszukuje podstawowych informacji oraz jasno zakomunikowanych funkcji,
  • nie zauważyć, że wersja mobilna, to nic innego, jak szkielet i fundament serwisu desktopowego,
  • zignorować różnice sprzętowe w wyposażeniu urządzeń mobilnych oraz desktopowych (geolokalizacja, akcelerometr, wysokiej klasy aparat fotograficzny, ekran dotykowy z technologią umożliwiającą wprowadzanie treści rysikiem, symultaniczne gesty).

Mobile First Design to koncepcja, która na pierwszym miejscu stawia właśnie tę “mobilną” odrębność, pomaga zrozumieć potrzeby użytkownika i wykorzystać jego zachowania do realizacji celów sprzedażowych.

Dodatkowo, biorąc pod uwagę liczbę platform i urządzeń, z których nasz zabiegany użytkownik może korzystać, warto wcielić w życie kolejną wskazówkę: projektowanie z poziomu przeglądarki. Aktualnie designerzy mają do dyspozycji szereg dedykowanych programów.

Paradoksalnie, trudno wyobrazić sobie jednak tworzenie uniwersalnych rozwiązań, spełniających wymagania niezliczonej ilości urządzeń z wykorzystaniem statycznych narzędzi, np. popularnego Photoshopa.

Metodą pozwalającą uniknąć błędów jest testowanie prototypu (nawet pojedynczej strony) w przeglądarce, już w początkowej fazie projektu. Zabieg ten pozwoli szybko zweryfikować wybór fonta webowego, styl dla tekstu paragrafu, skalę, jaką przyjmujemy czy zakres informacji wyświetlanych na pojedynczym ekranie. Tylko tyle i aż tyle!

Blokada w umysłach projektantów

Mimo, że pewne fakty i koncepcje znane są twórcą serwisów od dawna, nadal zatwardziale realizują oni proces projektowania oraz wdrożenie według tradycyjnego schematu rozpoczynającego się od szkiców wersji desktopowej, a kończącego na testach następujących już po wdrożeniu, kwestionując koncepcję Lean UX, która szerzej zostanie omówiona w dziale 3x (szkic + prototyp + projekt).

Projektanci sami przyznają, że największą barierą nie są wymagania klienta czy niemożliwe do przemodelowania procesy zachodzące w zespole, lecz schematy myślowe oraz ramy działania, poza które trudno im wyjść.

Priorytetyzacja wersji mobilnej w istocie stanowi duże ułatwienie dla twórców oraz zleceniodawców:

  • gwarantuje świeże i lapidarne spojrzenie na projekt,
  • umożliwia prowadzenie prac w trybie ewolucyjnym, gdzie od mobilnego ogółu przechodzimy do desktopowego szczegółu,
  • pozwala uniknąć problemów przeniesienia rozbudowanego kontentu w ograniczone ramy urządzeń telefonu czy tabletu, co znacząco przyspiesza prace,
  • uwrażliwia projektanta na bogate spectrum możliwości technicznych urządzenia mobilnego,
  • zwiększa szanse zachowania prostoty i użyteczności, mimo poźniejszej rozbudowy treści i funkcji w wersji desktopowej, co wprost przekłada się na efekty sprzedażowe.

Mobile First;//content

Już 8 lat temu Oliver Reichenstein, jeden z twórców fenomenalnej aplikacji iA Writer, postawił tezę, równie często cytowaną, jak też głęboko niezrozumianą: Web Design to w 95 procentach typografia. Siłą rzeczy najważniejsza w procesie projektowania powinna stać się architektura informacji (AI), czyli sztuka organizowania treści, wspierająca użyteczność prezentowanych informacji.

Pod tym pojęciem w większości przypadków rozumiemy po prostu makrotypografię, czyli całościową strukturę testu. Kiedy web designerzy dopiero dostrzegają, jak istotna ona dla użytkownika, typografowie od zawsze poświęcają jej uwagę podczas książkowego składu, bazując na wskazówkach redaktora. To, które dane, w jakiej kolejności oraz jak wyeksponowane w serwisie odnajdzie użytkownik ma kluczowe znaczenie dla jego zachowań oraz oceny jakości naszej witryny.

Mimo, iż minęło 8 lat od eseju Reichenstein’a, a na telefonach tekst stanowi obecnie ponad 98%, nadal niewielu jest jednak projektantów i front-end developerów, dla których typografia responsywna (dopasowanie cech fontu do urządzenia), to coś więcej niż wybór kroju wyświetlającego się poprawnie na różnych ekranach. Równie nieliczni etap prac nad User Experience oraz grafiką rozpoczynają od szczegółowego omówienia potrzeb oraz bolączek użytkownika mobilnego zgodnie z podejściem Mobile First Design.

Mobile First;//text

“Pływające” paragrafy tekstu i elastyczne przyciski dostosowujące się do szerokości ekranu to nie jedyne narzędzia, jakimi dysponujemy, żeby podnieść jakość doświadczenia użytkownika korzystającego ze strony na smartfonie lub tablecie. Sterować można przecież także interlinią (odległością między wersami), kerningiem (odległością między parami liter), krojem, stopniem, rodzajem i kolorem pisma.

Celem nie jest stworzenie kilkunastu różnych wariantów, lecz wypracowanie uniwersalnych rozwiązań. Niezwykle pomocne, może się okazać przygotowanie wstępnego prototypu dla tekstu, bazującego na założeniach przygotowanych przez projektanta informacji.

W erze pre RWD kontent tworzony był na końcu, a za jego wygląd najczęściej odpowiedzialny był edytor uzupełniający CMS według ogólnych wskazówek projektanta. Efektem takiej kolejności działań była zazwyczaj smutna konstatacja klienta: “na podglądzie wyglądało lepiej”. Przygotowanie poprawnego prototypu tekstu dostarczy danych niezbędnych do przeprocesowania kolejnych etapów projektowania serwisu, a dotyczących m.in. wyboru skalowalnego kroju, optymalizacji długości wersów czy kontrastu.

Odpowiedni kontrast pomaga porządkować informacje. Na poziomie całościowej struktury testu zazwyczaj mówimy o różnicowaniu stopnia i koloru pisma oraz zestawieniu krojów szeryfowych i bezszeryfowych. Na poziomie mikrotypograficznym (dotyczącym pojedynczej litery) mamy na myśli zróżnicowanie elementów w niektórych krojach dwuelemetowych, czyli takich, w których kreski w literze różnią się grubością. Współczesną pułapką są podświetlane matryce, które uwypuklają te różnice, obniżając czytelność.

Szkic + prototyp + projekt + test

Kolejny etap po prototypowaniu tekstu, które powinno zagwarantować wybór optymalnych rozwiązań typograficznych, stanowi szkicowanie kluczowych podstron serwisu. Projektowanie należy rozpocząć od najmniejszego urządzenia: smartfona, przez tablet, na desktopie skończywszy.

Wypracowanie zadowalającej struktury dla urządzenia najmniejszego (smartfona), pozwala na przejście do etapu tworzenia interaktywnego prototypu dla tego samego urządzenia, z równoczesnym szkicowaniem rozwiązań dla urządzenia większego (tabletu). Idąc dalej: zamknięcie prototypowania jednego urządzenia, rozpoczyna projektowanie graficzne na potrzeby tegoż, z równoczesnym prototypowaniem urządzenia większego. Proces toczy się aż do momentu powstania interfejsu graficznego dla 3 urządzeń: smartfona, tabletu i komputera.

Zwolennicy Lean UX, nowatorskiej metodyki projektowania doświadczenia użytkownika, sugerują, żeby już na tym etapie na bieżąco weryfikować efekty pracy. Warto przeprowadzać testy z użytkownikami w modelu iteracyjnym, zapętlonym, bazując na powstających prototypach oraz projektach graficznych. Inna reguła inspirowana podejściem typu agile zachęca do zaangażowania w prace projektowe, oprócz ux designera oraz grafika, także klienta i developera.

Pozwala to na zbliżenie do siebie poszczególnych faz, minimalizację dokumentacji oraz przyspieszenie wdrożenia. Dzięki zastosowaniu powyższych instrukcji podczas realizowanego aktualnie przez Bold Brand Commerce wdrożenia jednej z największych na rynku e-księgarni (docelowo 0,5 miliona pozycji w skali najbliższych 3 lat) udało się skrócić czas etapu developmentu o ok. 30%.

Omówiony proces przestawia poniższa grafika:

Mobile First Bold Agency

Mobile First Design to proces minimalizujący występowanie czynników ryzyka w projektach webowych, dzięki wymuszeniu na projektantach konieczności podejmowania świadomych decyzji już w fazie wstępnej prac. W połączeniu z metodyką Lean UX, gwarantuje szybką i trafną diagnozę nieprawidłowości i możliwość proaktywnego zarządzania nimi.

Największym beneficjentem jest jednak użytkownik końcowy, który otrzyma produkt ściśle odpowiadający jego potrzebom, co wprost przełoży się np. na wysokie wyniki sprzedaży w obszarze m-commerce. Potrzebna jest tylko  odwaga, by zredefiniować indywidulane przyzwyczajenia członków zespołu projektowego oraz oczekiwania klienta.

Masza Łojek jest ekspertką Izby Gospodarki Elektronicznej i UX menedżerem. Posiada wieloletnie doświadczenie w prowadzeniu projektów: zarówno interaktywnych, eventowo-kulturalnych, jak i wydawniczych.

W Bold Brand Commerce zarządza działem Grafika & UX, dba o jakość doświadczenia zakupowego oraz nadzoruje procesy projektowe od strony klienta.

Reklama

SCF 2017 Spring