23 stycznia 2022 48:28 Odcinek 058

Wersja mobilna e-sklepu. Jak zadbać o m-Commerce?

Najczęściej już ponad 50% użytkowników odwiedzi Twój sklep internetowy na urządzeniu mobilnym. To, co zostaną, na pewno wpłynie na ich decyzje zakupowe. Jeśli nie zadbasz o dostosowanie sklepu do smartfonów, te decyzje raczej Ci się nie spodobają. Na co zwrócić uwagę przy projektowaniu sklepu na urządzenia mobilne?

W tym odcinku opowiem Ci o tym, na jakie błędy skarżą się klienci mobilni i podpowiem, jak można je naprawić. Dowiesz się między innymi, jak poprawić wydajność sklepu, gdzie szukać optymalizacji w interfejsie i co można zrobić z procesem zakupowym, żeby nie był dla Twoich klientów drogą przez mękę.

Listen to „058 – Wersja mobilna e-sklepu. Jak zadbać o m-Commerce?” on Spreaker.

Dodatkowe materiały

Jeśli zainteresował Cię ten odcinek, posłuchaj również:

  1. Odcinka Dobre praktyki UX w e-Commerce – Grzegorz Żarnowski, w którym trochę szerzej rozmawiałem z moim gościem o UX w sklepie internetowym
    https://marekkich.pl/sztuka-ecommerce/051-dobre-praktyki-ux-w-e-commerce-grzegorz-zarnowski/
  2. Odcinka Dlaczego klienci wchodzą i wychodzą? Poznaj 5 podstawowych błędów, w którym omawiam najczęstsze powody porzuceń sklepu internetowego przez klientów
    https://marekkich.pl/sztuka-ecommerce/042-dlaczego-klienci-wchodza-i-wychodza-poznaj-5-podstawowych-bledow/
  3. Odcinka PWA – przyszłość e-Commerce czy chwilowy trend? – Maciej Harbuz, w którym omawiamy jeden z najnowszych trendów w m-Commerce, czyli PWA
    https://marekkich.pl/sztuka-ecommerce/020-pwa-przyszlosc-e-commerce-czy-chwilowy-trend-maciej-harbuz/

Transkrypcja odcinka

Można śmiało powiedzieć, że w przypadku wersji mobilnej sklepu internetowego mamy do czynienia z „Rokiem Świstaka”, to znaczy od przynajmniej pięciu lat na konferencjach i w materiałach branżowych w pewnym momencie pojawia się ktoś, kto z pełną powagą stwierdza, że oto mamy do czynienia z rokiem mobile – tym razem to tak na serio jest ten rok mobile, więc jeżeli ktoś się jeszcze nie przestawił, to już niedobrze. 

Potem wszyscy wracają do codzienności i życie toczy się dalej, i tak aż do następnego roku, kiedy to znowu pojawi się ktoś, kto przypomni, że teraz to mobile dopiero wystrzeli, i tak dalej. 

Ja tymczasem sprawdziłem sobie przed nagraniem na wyrywki statystyki moich klientów i jeżeli chodzi o udział sesji, to najwyższy wskaźnik dla mobile w Analyticsie, jaki zaobserwowałem, wyniósł już 75%. W przypadku konwersji jest, oczywiście, trochę gorzej, no i pewnie dzisiaj jeszcze trochę o tym będzie. Tutaj najwyższy wynik to 54%. 

Tak czy inaczej, mówienie, że ten rok będzie rokiem mobile czy nawet, że rok mobile już był dawno temu, w mojej ocenie zbyt odkrywczy już nie jest. Z jakiegoś powodu też nie mówimy, że na przykład ten rok będzie tym, w którym ludzkość będzie jeździć samochodami do pracy. Tak po prostu już jest i tyle. Tak samo już po prostu jest, że telefony komórkowe na stałe zagościły w naszych dłoniach, a zakupy przez Internet z wykorzystaniem właśnie tych narzędzi to po prostu codzienność, standard, i raczej nie powinniśmy nawet jakoś specjalnie o tym myśleć. 

Z drugiej strony, jeżeli spojrzysz w raporty czy nawet pochodzisz po różnych sklepach internetowych, to z tą wersją mobilną bywa różnie, żeby nie powiedzieć, że bywa nawet bardzo słabo. W tym odcinku spróbujemy razem odpowiedzieć sobie na pytania, dlaczego nie opłaca się zaniedbywać użytkowników mobile w e-Commerce, jakie są możliwości wdrożenia, no i jak sprawić, żeby Twój sklep internetowy spełniał oczekiwania nowoczesnego klienta.

Coraz większa rola urządzeń mobilnych w rynku e-Commerce

Najpierw porozmawiamy sobie trochę o świecie mobile. Tak na chłopski rozum, gdybyś pomyślał o swoim dniu, to najprawdopodobniej smartfon stanowi w tym dniu spory udział. Najczęściej telefon zawsze jest pod ręką. Trudno się oderwać od powiadomień (o ile masz je, oczywiście, włączone), a jest też spora szansa, że nawet tego odcinka słuchasz właśnie na urządzeniu mobilnym, bo statystyki wskazują, że Sztuki e-Commerce najczęściej słucha się właśnie na smartfonach. 

Statystyki podają różnie, ale dziennie używamy telefonów komórkowych przez kilka godzin. Widziałem informacje o trzech, pięciu godzinach. Jest to pewnie też w dużej mierze zależne od wieku korzystającego. Myślę, że też płeć może mieć tutaj znaczenie. Sprawdziłem u siebie i udaje mi się nie schodzić poniżej godziny. Raczej mam pomiędzy godziną a dwiema, ale jest to związane też trochę z tym, że raczej staram się świadomie odchodzić od ekranu, no i mam powyłączane powiadomienia, nie mam poczty na telefonie, żeby przypadkiem nie kusiło, by odpisywać po dwudziestej. W moim przypadku tych godzin jest raczej mało, ale statystycznie rzecz biorąc, telefonów używamy całkiem sporo. 

Bez wątpienia rozwój urządzeń mobilnych wspiera wzrosty, bo smartfony są coraz większe, szybsze i w niektórych przypadkach często użytkownikom zastępują nawet laptopy. W końcu o wiele wygodniej rozwalić się na kanapie w takiej pozycji, która niejednego fizjoterapeutę przyprawia o ból głowy i pewnie wylew, niż grzecznie siedzieć sobie z laptopem na kolanach czy nawet przy biurku tak, żeby ci fizjoterapeuci byli szczęśliwi. 

Telefonów komórkowych używamy więc coraz więcej, coraz częściej i w coraz szerszej skali, to znaczy coraz więcej zadań możemy wykonać przy ich użyciu. Trochę więcej statystyk na ten temat możesz znaleźć chociażby w ubiegłorocznym raporcie „E-Commerce w Polsce„, i z tych najciekawszych, to z osób robiących zakupy online aż 76% wykorzystuje do tego celu smartfona, natomiast w grupie docelowej, tej wchodzącej na rynek, czyli 15-24 lat, która w wielu branżach jest najważniejszą grupą wiekową, ten wskaźnik wynosi aż 92%. 

Warto też pamiętać o tym, że tak naprawdę, jeżeli myślimy o e-Commerce i smartfonach, to ta ścieżka zakupowa klienta to nie jest tylko czynność zakupu. To może być też research, inspirowanie się, szukanie artykułów wiedzowych, porównywanie cen, kompletacja koszyka. Mamy więc taki świat, który jest multichannelowy i niekoniecznie jest tak, że klient musi kończyć zakupy na smartfonie, ale bardzo często ta jego podróż zakupowa na smartfonie się zaczyna. 

Poza tym, nawet gdyby było tak, że użytkownik niechętnie wchodzi na sklepy internetowe w telefonie komórkowym, to z drugiej strony są też aplikacje mobilne takie jak Instagram, Facebook, TikTok czy nawet zwykła poczta e-mail, którą najczęściej jednak odbieramy w smartfonie, a Instagram to w ogóle najczęściej używamy na smartfonie. Tam też bardzo często linkuje się bezpośrednio do sklepu internetowego. Możemy dostać, na przykład, newsletter i w nim jest produkt, klikamy, przechodzimy na sklep internetowy, i to, co tam zastaniemy, to też będzie rzutowało na to, co zrobimy dalej. 

Te wszystkie działania, które mogą się dziać, na przykład, w social mediach czy na e-mailu, będą nas przesuwały w procesie zakupowym, o ile tylko trafimy na taki grunt, który nie utrudni nam tej podróży zakupowej, czyli po prostu trafimy do sklepu, który będzie dostosowany do urządzeń mobilnych. Z tym też bywa różnie. 

Znowu, jeśli wrócimy sobie do tego raportu „E-Commerce w Polsce”, to użytkownicy zgłaszają różnego typu problemy. Z tych najbardziej popularnych (chociaż może przytoczę wszystkie) to najważniejsze to: niewygodne wypełnianie formularzy, ogólnie ujęte niedostosowanie strony do zakupów na urządzeniach mobilnych, za małe litery, zbyt wolne łącze internetowe, problemy z dokonaniem płatności, za duża liczba czynności, które trzeba było wykonać podczas zakupu, brak aplikacji mobilnej, niewygodny sposób płatności. 

Tylko 21% użytkowników odpowiedziało, że z żadną z tych sytuacji nigdy się nie spotkało w sklepie internetowym. Mam wrażenie, że mogą być to użytkownicy, którzy używają jednego czy dwóch sklepów internetowych i raczej mają swoich faworytów, którzy są po prostu dobrze wykonani, bo tak statystycznie, jeżeli się tych sklepów używa dużo i szuka się nowych rozwiązań czy sklepów pod produkty, których się potrzebuje, to jest bardzo duża szansa, że jednak trafi się na sklep, który jest taki sobie. 

Z jednej strony więc mamy cały czas rosnące zużycie czy wykorzystanie telefonów komórkowych, chociaż tabletów też się używa może nie aż tak dużo i nie aż tak to rośnie, ale ogólnie rzecz biorąc, urządzenia mobilne są coraz bardziej popularne. W tej młodszej grupie stanowią już w jakimś sensie przedłużenie ręki. Z drugiej strony ta podróż zakupowa użytkownika dzieje się na wielu różnych poziomach. O ile smartfon rzeczywiście nie musi być używany do takiego stricte zakupu, czyli do dokończenia procesu, bo umówmy się, że nie każdy lubi to robić, to ta część, nazwijmy to, researchowa, czy porównywanie cen, czy inspirowanie się, czy po prostu przeglądanie produktów i kompletacja koszyka – to zdecydowanie się odbywa na tych telefonach komórkowych. 

Z drugiej strony mamy sklepy, które jedne sobie radzą z potrzebami użytkowników, drugie nie. Niestety, nie da się uniknąć tego, żeby użytkownik z naszym sklepem nie wszedł w interakcję przez telefon komórkowy, chociażby właśnie dlatego, że może się zainspirować jakimś tam artykułem na Facebooku czy, jak pokazują statystyki, może podczas rozmowy zacząć porównywać ceny, czy może na przykład wejść do sklepu i tam zacząć porównywać ceny w Internecie, i tak dalej. Tak czy inaczej, w którymś momencie ta interakcja przez telefon komórkowy będzie. W zależności od tego, jak nasz sklep sobie poradzi, tak ten użytkownik albo zostanie na dłużej i być może dokona tego zakupu, już nawet nie na urządzeniu mobilnym, albo wyjdzie, bo ten sklep nie będzie spełniał jego oczekiwań i szansa, że wróci, po prostu maleje. 

Każdy z tych punktów jeszcze sobie dzisiaj rozwiniemy przy dobrych praktykach, ale jeszcze opowiem Ci o kilku elementach, które ja spotykam na sklepach i są notorycznie popełnianymi błędami, które zasługują na wyraźne zaadresowanie, mimo że później będziemy o nich mówić w kategoriach dobrych praktyk. 

Najczęstsze błędy w wersjach mobilnych sklepów internetowych

Przede wszystkim sklepy mają problemy wydajnościowe, to znaczy są tak naprawdę przynajmniej dwa wymiary tego typu problemów. Z jednej strony może to być zbyt duży rozmiar strony, który wynika na przykład z tego, że mamy bardzo dużo zdjęć, jakieś dodatkowe fonty, dużo skryptów. Trzeba pamiętać, że czasami telefonu używa się w biurze na Wi-Fi, a czasami używa się w wiosce, gdzie trudno nawet o 3G, więc strona, która jest „ciężka”, może się po prostu ładować bardzo długo.

Z drugiej strony, jak już mówiłem o tych skryptach, to też może być problem wydajnościowy, ale w sensie użyteczności takiego sklepu. Jest to szczególnie duży problem w przypadku kupowanych szablonów, bo tam rzeczywiście skryptów JS-owych jest dużo. One wszystkie ładują się najczęściej naraz niezależnie od tego, czy je wykorzystujemy, czy nie, więc z jednej strony rozmiar, a z drugiej strony, jeżeli sklep jest przepakowany jakimiś animacjami, to może się okazać, że starsze telefony tak nie do końca z nimi radzą. 

Później, gdy będziemy rozmawiali o tych dobrych praktykach, na pewno zwrócę uwagę na tę wydajność przynajmniej pod tymi płaszczyznami, żeby rzeczywiście ta strona była odchudzona, i aby też na tych telefonach, które nie są najnowszej generacji, dało się po prostu tego sklepu używać. 

Drugi notoryczny błąd, to doładowywanie się elementów w sposób, który utrudnia klikanie. Jest to plaga, z którą między innymi walczy Google w tej ostatniej aktualizacji związanej z Core Web Vitals. Polega to na tym, że elementy (na przykład zdjęcia) doładowują się, w taki sposób, że sklep nie przewiduje jakiegoś miejsca, które odpowiada rozmiarowi tych elementów, które mają się doładować. Czyli mamy na przykład do czynienia na liście produktów z sytuacją, że użytkownik zjeżdża do dołu, żeby kliknąć następną stronę paginacji, ale w międzyczasie po scrollu doładowują się zdjęcia, rozmiar strony się zwiększa, i użytkownik, zamiast kliknąć w stronę numer dwa na paginacji, klika zdjęcie produktu i przenosi go na kartę, co zdecydowanie utrudnia nawigację i powoduje, że użytkownicy po prostu się frustrują. 

Trzeci problem, który najczęściej się pojawia, to brak możliwości powiększania zdjęć. Jest to o tyle trudne, że ekrany, mimo że ostatnio jest trend rosnący, mimo wszystko jeszcze nie są tak duże jak ekrany monitorów, w związku z czym to powiększanie zdjęć jest bardzo istotną kwestią. Często zdjęcia są na tyle małe, że albo interfejs, albo rozmiar zdjęć nie pozwala na to, żeby przybliżyć sobie jakiś detal produktu, więc trochę trudniej podejmuje się decyzję zakupową. 

Takim, można by było pomyśleć, że trywialnym, ale często zaniedbanym błędem, który powoduje bardzo dużo frustracji, a często po prostu porzucenie strony, jest też to, że zwyczajnie przykrywamy sobie na sklepie interfejs jego innymi elementami. Tutaj prym wiodą różnego rodzaju livechaty, supporty, jakieś dymki z FAQ i tak dalej, które po prostu ładują się na stronie, w związku z czym ograniczają nam przestrzeń do czytania, a często też jest tak, że ograniczają nam możliwość kliknięcia, bo na przykład zakrywają nam jakiś ważny link czy ograniczają przestrzeń na link, którą możemy kliknąć. Wydawałoby się, że to dość prosta rzecz, a jest to coś naprawdę notorycznego.

Z bardzo podobnej półki jest też armagedon pop-upów, które bardzo trudno zamknąć. Jeżeli mamy na przykład tak, że na sklepie ładuje się newsletter, warto zadbać o to, żeby, po pierwsze, łatwo było go zamknąć, po drugie, żeby tych pop-upów nie było zbyt dużo, bo to też w dość dużym stopniu rozprasza. Mam wrażenie, że na desktopie ten problem nie jest aż tak duży, natomiast na mobile najczęściej jest tak, że w ogóle, żeby zamknąć pop-up z rzeczonym newsletterem czy jakikolwiek inny, to już trzeba sobie przescrollować gdzieś w ogóle w inne miejsce, bo ten pop-up zajmuje najczęściej cały ekran, jaki jest tylko dostępny na mobile’u. Czasami więc trzeba się trochę nagimnastykować, żeby w ogóle znaleźć tego X-a do zamknięcia pop-upu. Jest on też często dość mały i nie da się zamknąć pop-upa przez kliknięcie poza obszar. 

To prowadzi do kolejnego problemu – ogólnie klikalności. Elementy na sklepach bardzo często są zbyt małe, są też zbyt blisko siebie, a to, umówmy się, trochę utrudnia, bo ekran do największych nie należy. Nawet jeśli mamy do czynienia z dużym ekranem, kciuk czy nawet palec wskazujący (w zależności od tego, jak użytkownik klika) swój rozmiar mają, więc często jest tak, że trzeba naprawdę bardzo się namęczyć, żeby w coś trafić, co szczególnie w momencie, kiedy jesteśmy w ruchu, po prostu nam utrudnia tę nawigację. 

Do pozostałych rzeczy, między innymi procesu zakupowego, który jest w ogóle problemem samym w sobie, wrócę jeszcze przy dobrych praktykach (żeby też nie skupiać się tylko na katowaniu tych sklepów internetowych, a bardziej szukaniu rozwiązań i możliwości), ale to są najważniejsze rzeczy. Myślę, że możesz nawet wejść na swój sklep internetowy z telefonu komórkowego i zobaczyć, czy przypadkiem nawet takich podstawowych błędów w nim nie ma. Jeżeli są, to prawdopodobnie właśnie tracisz całkiem sporo pieniędzy. 

e-Commerce mobilny w B2B

Zanim pójdziemy dalej, ostatnią rzeczą, którą chciałbym jeszcze w tej sekcji powiedzieć, to kwestia B2B. W tego typu rozważaniach najczęściej B2B się odzywa i to w taki sposób, że przecież B2B z mobile nie ma aż tak dużo wspólnego, dlatego że tam kupuje się troszeczkę inaczej. Użytkownik robi to w pracy, koszyki są dużo większe i na mobile’u nikomu nie chce się w to klikać. Właściwie mobile to jest tak naprawdę tylko jakiś dodatek, którym nie ma co się specjalnie przejmować. 

W dużej mierze oczywiście tak jest. Jeżeli sklep ma charakterystykę, że koszyk zakupowy jest najczęściej duży i ma po sto pozycji, a może być jeszcze na przykład tak, że jest ładowany z jakiegoś pliku .csv, to rzeczywiście szansa, że użytkownik skompletuje zamówienie na urządzeniu mobilnym, nie jest ogromna, ale trzeba pamiętać, że to jest tak naprawdę tylko dół lejka. 

Może się okazać, że w górze lejka już niekoniecznie ta wersja desktopowa będzie taka istotna, bo trzeba też pamiętać, że użytkownicy Twojego sklepu, nawet jeżeli to jest B2B, to dalej są ci sami użytkownicy, którzy wrócą do domu, odpalą sobie Zalando czy inny sklep internetowy i będą z powodzeniem przeglądali sobie ofertę produktową na telefonie komórkowym. Ja bym więc raczej nie odbierał im tej możliwości, bo o ile rzeczywiście w dole lejka może i potrzebują tego desktopu, to w górze lejka, kiedy szukają na przykład nowych produktów do swojej firmy czy szukają jakichś nowych możliwości, czy po prostu przeglądają sobie materiały branżowe i szukają inspiracji, to to może być już wykonywane z mobile’a. Wtedy Twój sklep albo się tam pojawi i będzie wszystko OK, albo nie będzie dostosowany po prostu do urządzeń użytkownika i ten go odrzuci. 

Zaryzykowałbym stwierdzeniem, że nie mając wersji mobilnej w B2B być może nie stracisz tych klientów, których masz, bo tam jest kwestia lojalności związanej, na przykład, z Twoimi rabatami czy opiekunem handlowym, natomiast zdecydowanie trudniej Ci będzie pozyskiwać nowych, bo bardzo często jest tak, że nowy klient wpada nam w ten proces dopiero na górze lejka i wtedy brak wersji mobilnej może go skutecznie odstraszyć. 

Podsumowując, drodzy Państwo, z handlu B2B, raczej ogłosiłbym tutaj koniec wymówek, a wszyscy teraz zajmiemy się tym, jak w ogóle można wdrożyć wersję mobilną.

4 sposoby na wdrożenie wersji mobilnej Twojego e-Commerce

W ogólnym ujęciu mamy cztery sposoby na to, żeby wdrożyć sobie wersję mobilną w sklepie. Pierwszy, można powiedzieć bardziej historyczny, to była po prostu osobna wersja mobilna. Polegało to na tym, że miało się jakiś osobny adres typu mobile.nazwasklepu.pl czy m.nazwasklepu.pl. Tam ładował się zupełnie inny interfejs, okrojony do wersji mobilnej. 

Jest to, rzeczywiście, raczej sprawa historyczna, chociaż jeszcze czasami się spotyka. Odeszło się od tego głównie dlatego, że trzeba było utrzymywać dwa layouty. Najczęściej było też tak, że wersja mobilna była bardzo mocno oderwana od architektury aplikacji, więc wersja, nazwijmy to, desktopowa, była integralną częścią rozwiązania, a wersja mobilna była, nazwijmy to, przyczepem, który po prostu trudno się utrzymywało i rozwijało. Nie było to zbyt przyjemne. Raczej szło się później w kierunku tego, żeby to wszystko unifikować. 

W ten sposób powstał tak naprawdę drugi sposób, który obecnie jest chyba najbardziej popularny. Jest to po prostu RWD, czyli Responsive Web Design, czyli taki sposób projektowania strony, który powoduje, że skaluje się ona do szerokości ekranu, który ma do dyspozycji użytkownik. Jeżeli ma duży monitor, widzi stronę szeroką, w pełnym interfejsie i rynsztunku, natomiast użytkownik, który ma smartfona, po prostu widzi tę stronę zeskalowaną. Dzięki temu pewne elementy się kompresują, niektóre układają się jeden pod drugim, belka menu najczęściej znika i pojawia się jako osobny hamburger, który się otwiera po naciśnięciu i wysuwa się gdzieś tam z boku, i tak dalej. 

Warto się na pewno zatrzymać przy RWD i powiedzieć o kilku ważnych rzeczach. Po pierwsze, biorąc obecnie pod uwagę trend, że nam ilość użytkowników smartfonów po prostu rośnie, to najczęściej mówi się już o podejściu mobile first, a nie tak jak wcześniej, o podejściu mobile ready, czyli tak na dobrą sprawę strona nie powinna być dostosowana do urządzeń mobilnych, tylko podejście mobile first mówi, że ta strona jest w pierwszej kolejności zaprojektowana dla urządzeń mobilnych. 

Jest to o tyle istotne, że szczególnie przy bardziej rozbudowanych elementach może się okazać, że jeżeli zaczniemy od wersji desktopowej i powiedzmy, mamy do czynienia z jakimś konfiguratorem, to może się okazać, że w wersji desktopowej jest go zaprojektować relatywnie łatwo, bo mamy dość dużo przestrzeni, natomiast później pojawia się problem ze złożeniem, to znaczy trudno wymyślić, jak z tego konfiguratora na szerokim ekranie zrobić go na bardzo małym ekranie. 

Często więc stosuje się podejście odwrotne, to znaczy najpierw się projektuje ten konfigurator w taki sposób, by zmieścił się użytkownikowi na małym ekranie, był tam użyteczny i dawał takie możliwości, których użytkownik oczekuje, a później wraz ze wzrostem ekranu po prostu się ten konfigurator rozchodzi na boki, te elementy troszeczkę inaczej się układają, ale na pewno łatwiej jest go rozłożyć, bo ten najtrudniejszy przypadek mamy już za sobą. Bardzo często projektuje się więc to właśnie w taki sposób, że zaczynamy od małego ekranu i idziemy do dużego. 

Druga rzecz, też związana z projektowaniem (już nieważne, czy to jest mobile first, czy nie), to przy projektowaniu RWD, szczególnie jeżeli zależy Ci na budżecie, warto, żeby to projektowanie odbywało się przy udziale jednocześnie kogoś odpowiedzialnego za grafiki i później za kogoś odpowiedzialnego za wdrożenie. RWD najczęściej ma pewne takie, nazwijmy to, naturalne standardy składania się strony, to znaczy, można sobie wyobrazić, że jeżeli masz, na przykład, w wersji desktopowej obrazek po lewej stronie a tekst po prawej, to w wersji mobilnej naturalne będzie, że ten obrazek wskoczy nam na górę, a tekst wskoczy pod spód. 

Wiele elementów ma w miarę standardowe sposoby składania się, o których warto po prostu wiedzieć w momencie, kiedy się ten sklep projektuje. Jeżeli się zacznie go projektować „pod prąd” – ta wersja mobilna nie będzie powstawała z wersji desktopowej w sposób naturalny, czy odwrotnie – wersja desktopowa nie będzie powstawała z wersji mobilnej w sposób naturalny, to może być potem problem z budżetem. Tak naprawdę znowu, zamiast mieć taki jeden styl, będziemy musieli doprojektowywać do każdej rozdzielczości zupełnie nienaturalny sposób zachowania interfejsu, co będzie się też przekładało później na utrzymanie tego widoku, i też przede wszystkim koszty. To tak trochę na marginesie, ale warto o tym pamiętać. 

Tak czy inaczej, aktualnie RWD jest chyba najbardziej popularnym sposobem. Jeżeli wchodzisz na stronę internetową i możesz sobie zmniejszyć okno przeglądarki, ten sklep dalej będzie wyglądał dobrze, będzie się po prostu składał tak, jak trzeba, to znaczy, że ten sklep został po prostu zrobiony w standardzie RWD. 

Naturalną ewolucją dla RWD jest obecnie jeden z trendów na rynku, który jest coraz bardziej popularny. Oczywiście, mowa tutaj o PWA. Był o tym osobny odcinek w Sztuce e-Commerce, tak że chętnych odsyłam. Natomiast PWA jest o tyle ewolucją w stosunku do RWD, że każdy sklep, który jest zrobiony zgodnie z PWA, skaluje się, oczywiście, do urządzeń mobilnych i desktopowych, więc on wszędzie wyświetla się dobrze. Natomiast cechą PWA jest przede wszystkim szybkość, trochę lepsza dostępność, responsywność (o której mówiłem), ale też na przykład działanie w trybie offline i ogólnie dawanie takiego feelingu aplikacji offline’owej. Da się też aplikację PWA zainstalować na telefonie, więc tak naprawdę jest to ewolucja o tyle, że w sensie samego interfejsu to jest praktycznie to samo, co RWD, natomiast od strony technologicznej mówimy tu już o zupełnie innym podejściu. Jest to, rzeczywiście, mocno techniczne zagadnienie, żeby zrobić aplikację w PWA. 

Tam się oddziela front-end od back-endu, mówiąc tak bardzo ogólnikowo. Bardzo dużo elementów interfejsu buduje się po stronie użytkownika, w związku z czym rzeczywiście mamy takie wrażenie, że na przykład kliknięcie w link listy produktów nie powoduje nam przeładowania interfejsu, tylko przeskoczenie na widok listy produktów, co w przypadku RWD bez PWA nie występuje po prostu. Najczęściej jest tak, że się przeładowuje jedna strona, ładuje się druga, i dopiero tam się pojawiają produkty, więc nie bez powodu PWA jest aktualnie trendem, który jest coraz bardziej popularny. Te sklepy po prostu trochę wygodniej się używa albo po prostu sprawiają wrażenie bardziej dynamicznych. Niemniej jednak z punktu widzenia samego wyglądu interfejsu to tutaj jest duża zbieżność. 

Ostatnia rzecz, którą możemy wykorzystać do budowania wersji mobilnej sklepu, to oczywiście aplikacje mobilne. Trzeba pamiętać o tym, że jest coś takiego jak retencja aplikacji na telefonie użytkownika, to znaczy bardzo dużo aplikacji jest po prostu albo nieużywanych przez użytkowników, albo po kilku użyciach jest po prostu odinstalowanych ze smartfona. 

Z drugiej strony są to na pewno dodatkowe koszty, bo mamy przynajmniej jeden dodatkowy interfejs do utrzymania. Nawet jeżeli mamy wspólny interfejs dla Androida i iPhone’a, to zawsze jest to inny interfejs niż sam interfejs sklepu internetowego. Oczywiście, są też korzyści. Mamy na przykład możliwość wykorzystania natywnych funkcji telefonu komórkowego, z którego akurat użytkownik korzysta, natomiast ja bym myślał, że w relacji do kosztów, biorąc pod uwagę, że PWA też już można zainstalować na ekranie telefonu, to raczej bym dzisiaj myślał o aplikacjach mobilnych jako takiej wersji premium i nie powiedziałbym, że jest to raczej wersja dla wszystkich. 

Jeżeli dopiero startujesz z e-Commerce czy przechodzisz redesign, to zacząłbym na pewno od PWA, a dopiero, jeżeli starczy budżetu lub jest naprawdę głębokie uzasadnienie biznesowe do tego, żeby inwestować w aplikacje mobilne ze względu wizerunkowych, wtedy jest to taki naturalny krok. Natomiast na pewno RWD czy PWA nie unikniemy, bo to jest coś, czego użytkownicy używają, więc RWD bądź PWA robimy tak czy inaczej. Sklep musi nam się ładnie skalować na telefonach komórkowych, natomiast aplikacja mobilna to może być taki ewentualny dodatek, który trochę podniesie prestiż naszego sklepu. 

Wiesz już, że warto mieć sklep w wersji mobilnej, bo użytkownicy będą go używali i nawet jeżeli nie będą tam kupować, to przynajmniej będą szukać produktów czy porównywać ceny i będą to robili ze smartfona, więc Twój sklep nie powinien ich tam odrzucać. Wiesz też, jakie masz tam możliwości. Podstawowe jest na pewno RWD. Ja coraz częściej rekomenduję wejście w PWA, szczególnie właśnie przy takich dużych zmianach, gdzie wchodzi, na przykład, nowy sklep albo zmienia się interfejs starego. To jest dobry moment, żeby naprawdę podnieść ten filling sklepu przynajmniej o klasę, no i dla bardziej ambitnych są oczywiście aplikacje mobilne, z których też dużo użytkowników na koniec dnia korzysta. Natomiast jest to już na pewno jakaś inwestycja, którą trzeba przemyśleć przynajmniej więcej niż raz, bo koszty będą po prostu duże. 

Dobre praktyki wdrożenia wersji mobilnej sklepu internetowego

Przejdźmy teraz do dobrych praktyk, które będą powodowały, że Twój sklep internetowy w wersji mobilnej będzie atrakcyjny dla użytkownika. Było już trochę o tym, kiedy sobie ocenialiśmy wspólnie, z jakimi problemami spotykają się użytkownicy, korzystając ze sklepów internetowych. Natomiast żeby to nie było tak, że sobie siedzę i narzekam, to teraz trochę tego, w jaki sposób przygotować sklep internetowy, żeby był po prostu fajny dla użytkownika. Przede wszystkim zachęcam do tego, żeby myśleć o wersji mobilnej jako takim rozszerzeniu wersji desktopowej. Jest cała masa dobrych praktyk, które tak naprawdę nie są zależne od tego, czy użytkownik korzysta z telefonu komórkowego, czy dużego ekranu. 

Wszystkie więc te takie prawidła związane po prostu ze sklepem internetowym typu: wygodna wyszukiwarka, zastosowanie filtrowania, odpowiednia ekspozycja korzyści biznesowych dla użytkownika z zakupu, kolorystyka, umiejscowienie elementów klikalnych, dbanie o to, żeby najważniejsze rzeczy były nad foldem albo w miarę wysoko, jeśli nad foldem się nie da, to będzie niezależne od tego, czy mamy sklep internetowy w wersji desktopowej czy mobilnej. To są po prostu dobre praktyki projektowania sklepów internetowych. O tym też zresztą był osobny odcinek, więc go pewnie podlinkuję w notatkach. Nazwijmy, że jest to taka podstawa, której nie wolno zaniedbać, bo jeśli to zrobisz, cała reszta tego, o czym zaraz będę mówił, może nie mieć po prostu sensu. Skoro Już masz zadbane, to możemy iść dalej. 

Przede wszystkim to, co mówiłem: warto zacząć od mobile, czyli jeżeli projektujesz a wiesz, że masz dość skomplikowany interfejs, to fajnie by było, żeby rzeczywiście zacząć od tych małych rozdzielczości. Z mojego punktu widzenia chyba największą trudnością może być rozpoczęcie projektowania od ekranu full HD, czyli od 1900 pikseli. Jeżeli grafik faktycznie pojedzie i zrobi interfejs na szerokość 1800 pikseli, to naprawdę może sobie później utrudnić życie, bo właściwie już nawet nie tylko będzie trzeba upychać na ekranie telefonu, ale nawet też na ekranie laptopa będzie problem, żeby wszystko gdzieś pomieścić. Szczególnie jest to ważne, kiedy przychodzi do akceptacji, bo może się okazać, że akceptujemy te projekty graficzne, a później się okazuje, że pierwotny projekt, który został zaprojektowany, jest wykorzystywany przez parę procent użytkowników, a pozostałe muszą korzystać z takiego, nazwijmy to, półśrodka. 

Zaczynamy więc od mobile’a, a jeżeli nie, bo z jakiegoś powodu nie ma sensu, to przynajmniej od szerokości desktopowej, czyli takie 1200-1300 pikseli, żeby rzeczywiście trafić w taki złoty środek pomiędzy szerokościami. 

W tym wariancie, gdzie zaczynamy od mobile’a, jest na pewno o tyle duża korzyść, że od razu trzeba myśleć o tym, jak ten interfejs odchudzić, to znaczy, które dane są nam potrzebne na górze, które niekoniecznie, które warto pogrupować. Może nam wyjść, że, na przykład, karuzela produktowa czy jakieś logotypy, czy korzyści, to powinien być poziomy slider, a nie lista z góry na dół, bo ta strona później zajmuje trzy kilometry. Ta wersja mobilna na pewno stanowi trochę większy poziom trudności, jeśli chodzi o zaprojektowanie, natomiast skalowanie jest na pewno dużo łatwiejsze niż odwrotnie. Zaczynamy więc od wersji mobile, chyba że to jest rzeczywiście prosty sklep, to wtedy można się pokusić o to, żeby zacząć od drugiej strony. 

Kolejna rzecz to na pewno wydajność sklepu. Zwróć tutaj szczególną uwagę na zdjęcia. Można równie dobrze dać osobne zdjęcia dla wersji mobilnej, natomiast ważne jest to, żeby ta strona podczas pierwszego ładowania nie zajmowała 5-10 MB, bo o ile dla użytkownika w centrum miasta to może nie być bariera, o tyle rzeczywiście są miejsca w Polsce, gdzie szybkie łącze internetowe czy szybki Internet mobilny to nie jest jeszcze wcale codzienność, więc takie 5 MB może się przełożyć, na przykład, na dobrych nawet paręnaście sekund ładowania interfejsu. 

Ważne też w kontekście wydajności jest na pewno to, w jaki sposób potraktujemy ten sklep internetowy JS-ami. Tu też wspominałem, szczególnie kupowane szablony mają z tym problem, bo tam mało kiedy się zwraca uwagę na użyteczność, a bardzo mocno zwraca się uwagę na ilość feature’ów i żeby wszystko się animowało, kręciło. Oczywiście, to jest na pewno fajne i cieszy w jakimś tam stopniu oko. Chociaż ja osobiście nie lubię, ale są ludzie, którzy lubią, że tam cyferki się naliczają, że coś najeżdża z boku, coś się animuje, wszystko jest na karuzelach, wszystko ma jakieś takie płynne przejścia. 

Trzeba pamiętać, że, to też zresztą widać w Analyticsie, nie wszystkie telefony to są te takie flagowce z ubiegłego roku. Może się okazać, że bardzo dużo z nich po prostu nie wyrabia z renderowaniem tego sklepu internetowego. Może być więc tak, że sklep ładuje się nawet szybko, ale używanie go jest dość mocno problematyczne i że w ogóle trudno nawigować w takim sensie, że kliknięcie elementu będzie wymagało nagimnastykowania się, bo scrollowanie odrzuca w ogóle od przeglądania tego sklepu. 

Sporo czasu poświęciłem na przygotowanie interfejsu, więc to też warto jeszcze rozwinąć. Pamiętaj o tym, że ekran telefonu komórkowego – oczywiście trend jest rosnący, te ekrany są coraz większe, ale oczywiście mogą też być małe, natomiast palce mają to do siebie, że raczej są duże, więc na pewno trzeba zadbać o odstępy pomiędzy elementami i ich rozmiar. Jeżeli masz, na przykład, cztery ikonki obok siebie, które można kliknąć, to na pewno trzeba zadbać o to, żeby każda ikona czy klikalny element miał jakąś swoją przestrzeń dookoła, aby było łatwo w niego trafić i by się nie okazało, że zamiast menu uparcie klikamy w logo sklepu i zamiast otwierać menu, to nas przenosi na stronę główną. 

Z drugiej strony może być też oczywiście odwrotnie. Ekrany mogą być bardzo duże, a kciuk też ma swoje ograniczenia. Nawet jeżeli ktoś używa wskazującego palca, to też oczywiście nie są wszyscy użytkownicy. Często używa się telefonu jedną ręką właśnie za pomocą kciuka, więc też trzeba wziąć pod uwagę, żeby te ważne elementy były gdzieś w jego zasięgu. Coraz częściej jest taki trend, że tę belkę nawigacyjną z menu, koszykiem, wyszukiwaniem przenosi się już nawet na dół ekranu po to, żeby była po prostu pod ręką i nie trzeba było sięgać zbyt daleko do tego, żeby sobie włączyć wyszukiwarkę produktową. 

Ważne jest też na pewno to przybliżanie zdjęć, które pozwala użytkownikowi zobaczyć detal, a jest to o tyle ważne, że w ogóle w telefonie takie wgryzienie się w produkt jest po prostu utrudnione, bo mamy bardzo mały obszar i żeby wycisnąć z niego maksa, to to przybliżanie jest po prostu ważne. 

Pamiętaj też o tym, że poza tymi wszystkimi elementami, trzeba też zadbać o fonty, żeby się później nie okazało, że użytkownik ma duży problem z rozczytaniem. To jest dość częsty problem, że mało czasu poświęca się na optymalizację czytelności strony mobilnej i później okazuje się, że na małym ekranie te fonty są na tyle nieczytelne, że opis produktu staje się rzeczą, która jest zupełnie zbędna, bo i tak nie da się go rozczytać. 

Ostatnia rzecz, która, mam wrażenie, w wersji mobilnej stanowi największy problem, jest chyba najczęstszym powodem porzucenia sklepu internetowego lub też przeniesienia się na desktop, bo użytkownik nie wyrabia, jest oczywiście checkout. 

Trzeba pamiętać, że nie każdy w ogóle lubi składać zamówienia przez telefon komórkowy, więc raczej nigdy nie będzie tak, że 100% użytkowników jesteśmy w stanie przekonać do tej czynności. Ja jestem na przykład taką osobą, że raczej pracuję na telefonie komórkowym, można powiedzieć, w górze lejka. Oczywiście, research jak najbardziej, wybór odpowiedniej oferty raczej też, natomiast zakup wolę już na spokojnie przy komputerze. Dla takich użytkowników na pewno wartością będzie możliwość dokończenia zakupów na desktopie, czyli na przykład udostępnienie sobie koszyka na e-maila czy skrócenie go do postaci linka po to, żeby go sobie później kliknąć już na laptopie i tak naprawdę wrócić do tego miejsca zakupów, w którym skończyliśmy. 

Natomiast jeżeli celujemy w to, żeby użytkownicy, którzy lubią składać zamówienia przez telefon, robili to na naszym sklepie, to checkout jest takim miejscem, które trzeba naprawdę bardzo dobrze przygotować, żeby nie powodował porzuceń. 

Chyba najważniejsza rzecz, to w ogóle powód, dla którego użytkownicy nie kupują. Jest to związane najczęściej z długością checkoutu. Użytkownicy nie lubią zbyt dużo wypełniać, rejestrować się, przełączać między oknami, a rejestracja najczęściej tego wymaga, bo trzeba zaakceptować konto. Staramy się więc robić tak, żeby jak najmniej tego użytkownika wybijać z procesu. 

Pierwszą rzeczą, która oczywiście może pomóc, są zakupy jako gość. Jeżeli więc Twój sklep ma możliwość sprzedaży gościom, to na pewno jest to taka rzecz, która użytkownikom pomoże. Z drugiej strony trzeba oczywiście zadbać o wygodne metody płatności. Tutaj Apple Pay, Google Pay, BLIK czy błyskawiczne płatności to raczej jest już must have, pomijając, że na desktopie raczej też. Warto w tym miejscu też sprawdzić, czy w ogóle vendor, którego używasz, też wspiera w sposób należyty wersję mobilną. Zdarzyło mi się spotkać z tym, że sklep był bardzo fajnie przystosowany do wersji mobilnej, przechodziło się do szybkiej płatności i tam otwierała się strona, która do telefonu nie była w ogóle przystosowana, i nie było to najprzyjemniejszym z możliwych doświadczeń. Jak już wykorzystujemy te płatności, to ważne, żeby był dość duży przestrzał, a z drugiej strony, żeby były wszystkie dostosowane do urządzenia mobilnego. Z trzeciej strony, jeżeli możemy ten proces skrócić, czyli na przykład zakup BLIK-iem, bo wszystko jest zapamiętywane, to można by się pokusić nawet o kupowanie z poziomu karty produktu. 

Idąc dalej, warto odchudzić formularze do minimum. Przede wszystkim, jeżeli nie potrzebujemy jakichś danych, to raczej ich po prostu nie pobieramy. Jeżeli potrzebujemy jakieś dane, a są specyficzne, typu data urodzenia, to warto napisać, po co. 

Chyba klasycznym przykładem, który ja zawsze poruszam, jest InPost, który właściwie wymaga tylko wyboru paczkomatu i później męczenie użytkownika danymi odbiorcy nie do końca ma sens. Najczęściej wynika to z tego, że najczęściej te checkouty, niezależnie od technologii, trudno się zmienia. Natomiast mówiąc o odchudzaniu formularzy, InPost jest świetnym przykładem, że właściwie wybranie go i BLIK-a jako metodę płatności skraca nam ilość potrzebnych pól praktycznie do zera, chyba że ktoś potrzebuje fakturę. Jednak w przypadku konsumenta skraca nam ilość pól do zera. Każdy więc checkout, który jest znacząco dłuższy od zera, już robi się problematyczny. Jeżeli więc już uparcie twierdzisz, że te dane są potrzebne, to warto użytkownika do tego przekonać, wytłumaczyć mu, po co to jest, i tak dalej. 

Warto też w przypadku InPostu czy w ogóle danych, które podajemy, maksymalnie to użytkownikowi upraszczać. To znaczy możemy wykorzystać naszą geolokalizację, jeżeli użytkownik się zgodzi. Możesz też wykorzystać mechanizmy autopodpowiadania, więc jeżeli Twój klient już ma pozapisywane jakieś adresy, to może po prostu z nich skorzystać i je sobie autouzupełnić. 

Warto też ten proces zakupowy, poza skracaniem, rozdzielić też na parę kroków, żeby użytkownika w jakimś stopniu poprowadzić za rękę. Jeżeli chodzi o same pola w formularzu, to przede wszystkim walidujemy bezpośrednio w momencie interakcji. Jeżeli na przykład użytkownik uparcie podaje zły numer telefonu czy w niewłaściwym formacie, to po pierwsze, warto mu w tym pomóc, to znaczy dać takie pola, które są preformatowane, a z drugiej strony, jeżeli dalej będzie podawał coś źle, to raczej mu to komunikować w momencie, kiedy to robi, a nie na przykład po przeładowaniu strony. 

Warto na końcu też wykorzystywać odpowiednią klawiaturę, czyli jeżeli ktoś podaje numer telefonu, to wykorzystujemy klawiaturę numeryczną, a nie całą. Unikamy także zmuszania użytkownika do podawania znaków specjalnych, typu myślnik, w kodzie pocztowym. To można załatwić preformatowanym polem, a jego nie zmuszamy wtedy do tego, żeby gdzieś grzebał po dodatkowych znakach i szukał, gdzie on właściwie ma myślnik. 

Podsumowując, wydaje mi się, że najtrudniejszym elementem zakupów mobilnych jest po prostu czynność zakupu. Formularze sprawiają na pewno najwięcej problemów, natomiast złotą zasadą jest to, żeby po prostu użytkownikowi dawać do uzupełnienia tylko te absolutnie konieczne dane, uprościć to do minimum, i nie ma na przykład już potrzeby podawania dwa razy tego samego hasła. Można użyć guzika podglądu. 

Takie kompresowanie wszystkich elementów powoduje, że użytkownik rzeczywiście może to traktować jako zło konieczne, ale rzeczywiście jako konieczne, a nie zło, z którego połowa rzeczy jest jeszcze przy okazji opcjonalna. 

Poza tym formularze zakupu – po prostu pamiętaj o tym, żeby sklep był w ogóle dostosowany do dobrych praktyk. Takich list jest bardzo dużo, było o tym też w innych odcinkach. Ogólnie rzecz ujmując, warto pamiętać o tym, że ekran telefonu jest po prostu troszeczkę mniejszy, a telefony są trochę wolniejsze i ten sklep dostosowany do urządzenia mobilnego po prostu tę naturę telefonów musimy w jakiś sposób adresować.

Dlaczego warto zacząć od wersji mobilnej Twojego e-Commerce’u?

Na koniec kilka słów podsumowania. Mam nadzieję, że zgodzisz się ze mną, że wersja mobilna jest ważna. Ja, nie będę tym gościem, który z pełną powagą mówi, że mamy rok mobile, raczej chciałbym unikać truizmów. Jednak pragnę Cię zostawić z tą myślą, że warto często zacząć od wersji mobilnej przy projektowaniu strony. Znam przykłady, gdzie rzeczywiście później było trudno, to znaczy ten interfejs (nawet nie superskomplikowany interfejs sklepu internetowego) przy składaniu do mniejszego ekranu, okazał się dość trudną robotą. Szczególnie, jeżeli mamy na przykład tak, że coś koniecznie musi być w jednej linii, bo tak to ktoś zaprojektował, a w kilku liniach wygląda słabo, to dochodzimy do wersji mobilnej, gdzie to złożenie powoduje, że to po prostu brzydko wygląda. Trzeba więc zacząć wtedy od małego ekranu, a na dużym, mając więcej miejsca, ta praca jest tylko bardziej przyjemna. 

Na koniec ważna rada: pamiętaj, żeby analizować i testować. Myślę, że w Analyticsa możesz wejść nawet po odsłuchaniu tego odcinka – wejść sobie w zakładkę „ruch mobilny” i zobaczyć, jak to wygląda u Ciebie na sklepie. 

Powinno być tak, że ten ruch mobilny jest raczej większy, konwersja powinna być porównywalna. Oczywiście, to wszystko zależy od branży, produktów, grupy klientów i tak dalej. Natomiast jeżeli będziesz miał taką sytuację, że z mobile’a nie kupuje absolutnie nikt, a ruch mobilny jest spory, to znaczy, że „na bank” przez palce przecieka Ci bardzo dużo pieniędzy i jest to powód do zastanowienia się, wykonania jakichś konkretnych kroków. 

Na pewno może w tej analizie pomóc sam Analytics. Możemy sobie sprawdzić, w którym miejscu następuje odejście od sklepu, w którym momencie użytkownik porzuca koszyk, która strona czy typ podstrony sprawia mu największy problem. Jeżeli z Analyticsa nie jest Ci tak łatwo, to są też inne narzędzia typu Hotjar, które pozwalają zweryfikować nagrania użytkowników i zobaczyć, gdzie im ten proces zakupowy się zatyka, czy na przykład nie jest tak, że z powodu zbyt skomplikowanych formularzy po prostu porzucają proces zakupowy, czy że mamy za małe zdjęcia produktowe na sklepie, więc nie są w stanie podjąć obiektywnej decyzji zakupowej. 

Warto więc to wszystko analizować, testować. Jestem fanem podejmowania decyzji w oparciu o dane, a nie tylko: „wydaje mi się”. Tak czy inaczej, są na pewno podstawowe rzeczy, które powodują, że sklep w wersji mobilnej jest bardziej efektywny. Jeżeli jest zaniedbany, to ryzykujemy, że klienci po prostu pójdą do konkurencji. 

Mnie nie pozostaje nic innego niż życzyć Ci powodzenia w przygotowaniu Twojej wersji mobilnej.