Dobra strona w wersji mobilnej – poznaj najważniejsze zasady mobile UX designu

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 (tutaj podpowiadamy jak najlepiej i najszybciej zoptymalizować grafiki pod kątem stron internetowych link [niu ma jeszce ale bd taki artykuł])

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ć

Must see

Być może zaciekawią Cię również...

Projekty

Rzuć okiem na projekty jakie zrealizowaliśmy dla naszych klientów!

Kontakt

Skontaktuj się i uzyskaj bezpłatną wycenę!
;