UX na urządzeniach mobilnych - know how


Jak wspomniałem w swoim poprzednim wpisie, statystyki użytkowania sieci wskazują jasne trendy. Zwiększa się z roku na rok udział urządzeń mobilnych. Niedawno również Google zmienił swoje algorytmy wyszukiwania, na takie które faworyzują serwisy posiadające wersje mobilne. Również w mojej ocenie jest to absolutnie kluczowe. Tylko dobrze zoptymalizowana strona gwarantuje poprawność UX, oraz to, że korzystający z niej nie będą sfrustrowani.
W związku z tym przygotowałem kilka punktów, które w mojej ocenie są absolutnym fundamentem. Ich przestrzeganie gwarantuje, iż serwis pod względem usablity i UX będzie poprawny. Przyznam, że chyba jest to lista dość restrykcyjna. To znaczy, że doskonale działa tylko jako całość. Pominięcie chociaż jednego punktu może sprawić, że serwis wiele straci.

1. Wszystko jest łatwe w dotyku (touch friendly).
Tu warto zwrócić uwagę m.in. na łatwe scrollowanie na ekranie mobilnym, powrót do menu etc.

2. Wszystkie przyciski i pozycje klikalne powinny być odpowiednio duże.
Rekomendowane wielkości buttonów dla poszczególnych OS:
Apple - 44 x 44 px
Android 48 x 48 px
Windows Phone 34 x 34 px

3. Strona powinna być czytelna.
Rekomendowany rozmiar czcionki to 14 px, lub więcej. Niedopuszczalna jest sytuacja. aby użytkownik musiał klikać dwa razy/powiększać kluczowy tekst na stronie

4. Menu i kluczowe przyciski akcji muszą być łatwo dostępne.
Powinny być umieszczone w łatwo widocznym i dostępnym miejscu. Nie, nie w prawym dolnym rogu zmuszając usera do scrollowania całego serwisu.

5. Obrazki nie powinny zawierać tekstu.
Obrazki z tekstem (np. komixy) są często nieczytelne na ekranach mobilnych, zwłaszcza po kompresji.

6. Obrazki zawierające zdjęcia produktów powinny być wystarczająco duże.
Niedopuszczalnym jest zmuszanie użytkownika do ręcznego powiększania zdjęcia za każdym razem gdy chce zobaczyć produkt.

7. Zoptymalizowana galeria.
Jeśli masz galerię to najlepiej w formule "swipeable carousel". Gwarantuje to łatwą obsługę na urządzeniach mobilnych.

8. Wszystkie nie-niezbędne informacje znajdują się w stopce.
Lokalizacja firmy, wartości, slogan, adres, telefon etc. powinny znajdować się w stopce. To tam najczęściej użytkownicy spodziewają się tych informacji. Stopka przeważnie jest też łatwo-scrollowalna na urządzeniach mobilnych.

9. Wszystkie formy tekstowe są tak krótkie jak to tylko możliwe.
Nie zarzucaj użytkownika zbędnym tekstem. Jeśli ktoś odpala wersję mobilną strony to nie po to, żeby czytać eseje jak świetna jest twoja firma. Robi to dlatego, że szuka konkretnych informacji.

10. Jeśli na stronie są formularze, muszą używać różnych typów wejściowych dla wprowadzanych znaków.
Np. jeśli w formularzu pytasz o telefon do kontaktu to jego wartość nie może być ustalona na: text, lecz number-specific. Nic nie frustruje tak użytkownika mobilnego tak bardzo jak konieczność wprowadzania liczb z klawiatury tekstowej (i na odwrót).
Oczywiście nie muszę powtarzać, że same formularze powinny być najkrótsze jak to tylko możliwe?
Opcja autokorekty przy wypełnianiu? Tryb off! Chyba nie muszę tłumaczyć?

11. Strona musi być kompatybilna z widokiem wertykalnym i horyzontalnym

Cel tych wszystkich operacji jest prosty. Każdy użytkownik po kontakcie z aplikacją/stroną na urządzeniach mobilnych powinien mieć minę jak Pani poniżej :)




Proste prawda?
A teraz sprawdźcie ile ostatnio odwiedzanych mobilnie stron spełnia te warunki?


0 komentarze: