Mobile rządzi się swoimi prawami!

Jeśli obserwujesz jak zmieniają się strony w wersji mobilnej pewnie już wiesz, że samo przełożenie treści 1:1 z desktopu na mobile nie zapewni dobrego sukcesu wśród odwiedzających. Mobile rządzi się swoimi prawami, a my poniżej zebraliśmy najważniejsze z nich, by ułatwić Ci projektowanie!

Nie wszystko jest ważne

Użytkownicy odwiedzający stronę www za pomocą urządzenia mobilnego prawdopodobnie nie są tak bardzo zainteresowani estetyką, jak zawartością i konkretnymi informacjami. Chcą w kilka chwil uzyskać odpowiedzi na pytania: jakie produkty lub usługi sprzedajesz/oferujesz, gdzie, jakie są ceny, jak się skontaktować i dotrzeć. Nie interesują ich długie i żmudne opisy wymagające parosekundowego scrollowania, dlatego należy pamiętać, by odpowiednio dostosować treść witryny, czyli:

• skrócić lub pominąć część mniej istotnych treści – użytkownicy zdecydują czy taka ilość informacji jest dla nich istotna, czy może wolą przenieść się na podstrony i poszukać większej ilości informacji,
• zrezygnować z dużych zdjęć czy sliderów – pozwoli to na szybsze dotarcie do informacji i nie marnowanie przestrzeni, która mogłaby być wykorzystana w lepszy sposób,
• “okroić” formularze – projektując mobilną wersję strony upewnij się, że w formularzu prosisz tylko o te najważniejsze informacje.

Prostota to klucz

O ile na desktopie animacje, przejścia i inne urozmaicenia podnoszą poziom pozytywnego odbioru, o tyle na urządzeniach mobilnych trzeba pamiętać, by zachować umiar i zrezygnować z niektórych elementów.

Czasem wystarczy usunąć niepotrzebne zdjęcia, ograniczyć ilość animacji i zwiększyć interlinię, by całość prezentowała się znacznie lepiej. Jednocześnie musimy pamiętać, żeby zarówno wersja mobile jak i desktop posiadały podobny wygląd ogólny – użytkownik musi wiedzieć na jakiej stronie się znajduje bez względu z jakiego urządzenia korzysta.

Intuicyjność

Użytkownicy są przyzwyczajeni do pewnych funkcjonalności i zachowań na stronach. Przykładowo, scrollowanie góra-dół wydaje się być naturalnym ruchem w przeciwieństwie do przewijania w poziomie, które ostatnio zyskało na popularności.

To samo tyczy się menu – pionowe z rozwijaniem na całą szerokość strony jest obecnie standardem, do którego większość z nas jest przyzwyczajona. Staraj się nie urozmaicać na siłę tego elementu – w tym przypadku im prościej tym lepiej.

Zadbaj też, by po kliknięciu w logo, niezależnie na jakiej podstronie znajduje się użytkownik, mógł wrócić do strony głównej.

Nie zapominaj również o wyszukiwarce – umieść ją na górze strony w widocznym miejscu, zamiast w rozwijanym menu.

Używanie smartfonów sprawiło, że niektóre funkcje stają się zbędne, na przykład coraz częściej rezygnuje się ze strzałek sugerujących przewijanie – użytkownicy intuicyjnie użyją przesuwania palcem.

Szybkość

Z pewnością zdarzyło się Wam wyłączyć stronę jeśli ładowała się o parę sekund za długo. Użytkownicy mobilni są bardziej niecierpliwi i oczekują uzyskania informacji najszybciej jak to możliwe. Dlatego musisz zadbać o odpowiednią kompresję obrazów.

Pod pojęciem szybkości rozumiemy też jak szybko można dotrzeć do jakiejś informacji, czyli wspomniana wcześniej wyszukiwarka, ale i dodanie możliwości filtrowania produktów. 

Checklista

Na koniec przygotowaliśmy dla Was checklistę dotyczącą wersji mobilnej strony, koniecznie upewnijcie się przed kodowaniem czy Wasz projekt spełnia wszystkie wymagania: 

• Czy w mniej niż 3 kliknięcia użytkownik może dotrzeć do informacji kontaktowych?
• Czy wielkość fontu jest dopasowana tak, by wszystkie informacje były czytelne? 
• Czy z każdej podstrony można wrócić jednym kliknięciem do strony głównej? (np. klikając w logo)? 
• Czy buttony CTA są większe niż na wersji desktopowej?
• Czy formularz kontaktu na stronie jest krótki?
• Czy zdjęcia na stronie nie wyświetlają się na cały ekran?
• Czy strona nie posiada pop-upów z newsletterami/promocjami, które zajmują cały ekran? 
• Czy strona z produktami posiada filtry do zawężenia poszukiwań? 
• Czy scrollowanie strony odbywa się w pionie?
• Czy kolor fontu i tła wystarczająco ze sobą kontrastują? https://contrastchecker.com/ – tutaj możesz to sprawdzić