Zachwyć użytkowników tymi 31 dobrymi praktykami UX w projektowaniu mobilnym

Rynek aplikacji mobilnych przeżywa rozkwit. Jak podaje Statista, dostępnych jest obecnie ponad 2,5 miliarda aplikacji na Androida i blisko 1,9 miliarda aplikacji na iOS . Skoro te liczby biją kolejne rekordy, projektanci mobilni mierzą się z niełatwym zadaniem stworzenia wyjątkowej aplikacji, która zostanie zauważona. Nie znaczy to jednak, że sprawa jest przegrana.

Twoja aplikacja mobilna wymaga odświeżenia? Planujesz zbudować zupełnie nową, która zachwyci użytkowników? A może po prostu kochasz UX i UI i zawsze wypatrujesz przydatnych wskazówek i rekomendacji?

Niezależnie od tego, koniecznie sprawdź poniższe 31 zasad projektowania UX i UI dla nieodpartych aplikacji mobilnych, które sprzedają się znakomicie.

Płynny przepływ w aplikacji mobilnej

1. Zadbaj o spójność projektu.

Przyjemne doświadczenie użytkownika w aplikacji mobilnej musi być spójne. Trzymaj jednolity krój pisma, kolory, obrazy i kontrolki w całej aplikacji (i na wszystkich urządzeniach), żeby poprawić użyteczność i uniknąć zamieszania. 

Revolut zapewnia spójne doświadczenie użytkownika na wszystkich ekranach

2. Rozwiej wątpliwości użytkownika.

Za każdym razem, gdy użytkownik wchodzi w interakcję z Twoją aplikacją, rozwiewaj niepewność, dając informację zwrotną. Komunikuj statusy i spodziewany efekt każdej operacji. Możesz na przykład pokazać komunikat po wypełnieniu formularza albo dodać pasek postępu lub komunikat, żeby użytkownik wiedział, że musi poczekać.

3. Ogranicz liczbę kroków.

Uprość użytkownikowi drogę przez aplikację, ograniczając liczbę kroków potrzebnych do osiągnięcia celu. Jak? Unikaj długich formularzy, przygotuj aplikację pod autouzupełnianie i postaw na funkcje działające za jednym kliknięciem. 

Ally, aplikacja bankowości mobilnej, upraszcza wszystkie kluczowe usługi bankowe do jednego dotknięcia

4. Rozbij działania użytkownika.

Postaraj się, żeby na jednym ekranie było tylko jedno główne działanie (np. logowanie, podanie parametrów, wybór produktu, potwierdzenie operacji), i wyróżnij je odrębnym kolorem lub kształtem. Jeśli dodajesz działania drugorzędne, nie pozwól im konkurować z głównym. 

Aplikacja MoneyTap trzyma się zasady UX: jeden ekran = jeden cel.

5. Odchudź interfejs.

Wszystko, co stoi użytkownikom na drodze do szybkiego osiągnięcia celu, jest niepotrzebnym rozpraszaczem. Usuń przeszkody - pozbądź się bałaganu, zbędnej treści i niepotrzebnych elementów interfejsu. Zostaw to, co konieczne.

6. Ustal hierarchię elementów interfejsu.

Umieszczaj kluczowe elementy blisko górnej krawędzi ekranu i układaj sekcje w kolejności malejącej ważności. Eksperymentuj z pustą przestrzenią, żeby poprawić czytelność i zwrócić uwagę użytkownika na najważniejsze treści.

Żeby wyróżnić najważniejsze informacje, Target trzyma je u góry ekranu

7. Spraw, żeby przewijanie było intuicyjne.

Używaj przewijania poziomego do przeglądania katalogu pozycji (np. wyboru produktów) albo do pokazania informacji na dużej powierzchni, która inaczej nie zmieściłaby się na ekranie (np. mapy). Zawsze dawaj wizualną wskazówkę, że jest więcej treści, i pokazuj kierunek przewijania. 

8. Rozważ paski zakładek.

Paski zakładek pojawiają się na dole ekranu i pozwalają użytkownikom szybko i wygodnie przechodzić między różnymi obszarami aplikacji. Poprawiają nawigację, oszczędzają miejsce i ułatwiają znalezienie potrzebnych funkcji. Żeby używać ich skutecznie, ogranicz się do 3-4 zakładek i nie chowaj paska, gdy użytkownik przechodzi między ekranami.

Pasek zakładek w Calm daje natychmiastowy dostęp do różnych materiałów do medytacji

9. Zadbaj o płynne przejście między orientacją pionową a poziomą.

Kiedy tworzysz swoją aplikację mobilną, pamiętaj o dopasowaniu jej do zmieniającej się orientacji urządzenia. Z perspektywy użytkownika przejście między trybem pionowym a poziomym przy obracaniu urządzenia powinno być płynne. Zadbaj o to, żeby przy zmianie widoku nic z treści nie ginęło. 

Skupienie na użytkowniku

10. Twórz różne ścieżki użytkownika.

Żeby wesprzeć użytkowników o różnych preferencjach, daj kilka sposobów na osiągnięcie tego samego celu i zgrabnie połącz je projektem. Jeśli to możliwe, zaoferuj różne metody wprowadzania danych i kilka opcji logowania. Pozwól użytkownikom zdecydować, jak chcą korzystać z Twojej aplikacji.

Freelancerzy mogą dołączyć do Fiverr na kilka różnych sposobów

11. Zachowaj prostotę!

Jeśli zasypiesz użytkowników informacjami, prawdopodobnie się pogubią i odejdą. Nie każ im wykonywać obliczeń, wypełniać niekończących się formularzy ani odszyfrowywać abstrakcyjnych obrazków. Niech Twoja aplikacja zrobi to za nich, podpowiadając i uzupełniając dane automatycznie. 

12. Dopasuj aplikację do poziomu użytkownika.

Dostosuj onboarding do swojej grupy docelowej, żeby aplikacja odpowiadała jej umiejętnościom, doświadczeniu i obyciu z oprogramowaniem oraz urządzeniami mobilnymi. Odbiorcy biznesowi czy millenialsi raczej nie będą potrzebowali prowadzenia za rękę, a początkujący na pewno docenią przewodnik po aplikacji, dzięki któremu dobrze poznają wszystkie funkcje. Niezależnie od poziomu użytkownika zawsze uwzględniaj w onboardingu interakcje gestami dla osób, które właśnie pobrały Twoją aplikację.   

Trip.com znakomicie radzi sobie z szybkim i skutecznym onboardingiem użytkowników

13. Postaw na to, co znane.

Skróć użytkownikowi naukę, stosując znane, ustandaryzowane układy i ikony. Zadbaj o to, żeby wszystkie elementy interfejsu jasno pokazywały swoją funkcję. Użyj na przykład symbolu koperty do wysłania wiadomości, a symbolu telefonu do połączenia jednym kliknięciem. W razie wątpliwości przedkładaj użyteczność nad kreatywność.

14. Zostaw miejsce na personalizację. 

Wykorzystaj moc danych, żeby poprawić UX personalizacją. Użyj informacji o lokalizacji użytkownika, jego wcześniejszych wyszukiwaniach i zakupach, żeby przygotować specjalne oferty. Sięgnij po dopasowane powiadomienia w aplikacji i push, żeby zachwycić użytkowników hiperspersonalizowanym doświadczeniem. 

Allrecipes Dinner Spinner pozwala użytkownikom spersonalizować swój kanał dopasowanymi propozycjami przepisów

15. Ogranicz wprowadzanie danych.

Im więcej danych wymagasz od użytkowników, tym większe ryzyko, że porzucą aplikację. Żeby okazać szacunek dla prywatności użytkownika, ogranicz formularze do niezbędnych pól, zawsze wyjaśniaj, po co potrzebujesz danej informacji, i daj możliwość pominięcia opcjonalnych kroków.

16. Zaoferuj pomoc.

Kiedy użytkownik utknie, bądź na miejscu, żeby mu pomóc. Daj mu różne sposoby uzyskania wsparcia w aplikacji: od czatów na żywo i chatbotów, przez wbudowane FAQ, po przyciski połączenia z obsługą klienta.

W kłopotach użytkownicy Booking.com łatwo uzyskają pomoc w sprawie swoich ostatnich rezerwacji

Łatwość obsługi i dostępność

17. Projektuj z myślą o obsłudze jedną ręką.

Badania pokazują, że blisko połowa użytkowników trzyma i obsługuje smartfona jedną ręką. Dlatego tak ważne jest zgrupowanie wszystkich kluczowych interakcji w zasięgu kciuka. Da się to osiągnąć na wiele sposobów: przesunięciem w lewo i prawo, oknem popover albo paskiem zakładek. 

Evernote daje jeden przycisk, który grupuje najważniejsze opcje w zasięgu kciuka

18. Zadbaj o wysoki kontrast obrazów.

Z aplikacji mobilnych korzysta się w biegu, w budynku i na zewnątrz. Wybierając obrazy o wysokim kontraście i unikając gradientów, zapewnisz swojej aplikacji świetną widoczność w różnych warunkach oświetleniowych, zwłaszcza na błyszczących ekranach.

19. Unikaj przypadkowych kolorów.

Właściwy dobór palety barw pomoże wyróżnić Twoją aplikację i markę oraz zostawić trwałe wrażenie. Paleta kolorów aplikacji mobilnej spina wiele złożonych aspektów, ale kilka zasad pozostaje uniwersalnych: 

• Najpierw projektuj w odcieniach szarości.
• Unikaj nadmiernie jaskrawych i świecących kolorów.
• Odzwierciedlaj paletę swojej marki.
• Zadbaj o odpowiedni kontrast kolorów.
• Pamiętaj o osobach z zaburzeniami rozpoznawania barw.

Czysta i oszczędna paleta barw w Babbel, z jednym dominującym kolorem, utrzymuje uczących się w aktywności i skupieniu

Aplikacja Freelancer gra bogatą, ale dobrze wyważoną paletą barw, żeby rozróżnić kategorie swoich usług

20. Projektuj z myślą o palcach.

Rozmiary ekranów zmieniają się co roku, ale malutkie cele dotykowe wciąż są udręką dla niezbyt precyzyjnych ludzkich palców. Żeby oszczędzić użytkownikom walki o trafienie we właściwy element, projektując, zadbaj o odpowiedni rozmiar wszystkich interaktywnych elementów i o wystarczający odstęp wokół nich. Trzymaj wysokość przycisku między 42 a 72 pikselami. Najczęściej preferowany rozmiar przycisku to około 60 pikseli.

21. Niech przyciski będą przyciskami.

Jeśli chcesz puścić wodze wyobraźni, projekt przycisku nie jest na to miejscem. Elementy, które wyglądają na klikalne, a nie są interaktywne, dezorientują użytkowników. Żeby tego uniknąć, jasno opisuj przyciski ich działaniem i używaj znanych kształtów oraz kolorów. Niech każdy przycisk wygląda jak przycisk. 

22. Spraw, żeby elementy klikalne były rozpoznawalne.

Dobieraj rozmiar elementów interfejsu do ich wagi (duży rozmiar = ważna funkcja). Wyróżnij główne przyciski, ikony i punkty akcji kolorem, który przyciąga wzrok użytkownika. Graj pustą przestrzenią i odstępami, żeby elementy klikalne odcinały się od tła. 

WebMD zachęca do działania łatwo rozpoznawalnymi przyciskami i czytelnymi ikonami

23. Dopasuj ustawienia wyświetlania, żeby zwiększyć dostępność aplikacji.

Ułatw czytanie tekstu, pozwalając użytkownikom zmienić rozmiar, kolor i jasność w Twojej aplikacji niezależnie od ustawień urządzenia. Włącz powiększanie gestem dla osób słabowidzących.

Aplikacja Pinterest oferuje tryb jasny i ciemny dla wygody użytkowników

24. Sprawdź rozmiary czcionek.

Standardowa rekomendacja dla rozmiaru czcionki w projektowaniu mobilnym to co najmniej 16 pikseli. Najlepiej używaj nie więcej niż dwóch-trzech rozmiarów dla różnych rodzajów treści. Uważaj z nagłówkami, bo duże czcionki sprawiają, że w linii mieści się jedno lub dwa słowa. Zawsze obejrzyj aplikację na urządzeniu, zanim wypchniesz kod na produkcję. 

25. Dbaj o czytelne i spójne style pisma.

Typografia odgrywa kluczową rolę w projektowaniu mobilnego UX i UI i wymaga głębokiego namysłu. Ogólnie staraj się ograniczyć liczbę stylów pisma do minimum. Pamiętaj, że kroje bezszeryfowe są łatwiejsze do czytania w niższych rozdzielczościach ekranu. Miej też na uwadze, że kursywa jest trudna do czytania, zwłaszcza dla osób z dysleksją. To samo dotyczy WERSALIKÓW, czyli tekstu pisanego samymi wielkimi literami. Wersaliki sprawdzają się w logotypach i skrótach, ale nadużywane w tytułach i nagłówkach spowalniają czytanie. 

Agregatory wiadomości, takie jak Google News czy BBC News, sięgają zwykle po proste kroje bezszeryfowe, a mobilne wydania gazet, jak WSJ czy The NYT, często łączą je z bardziej tradycyjnymi stylami

26. Naucz użytkowników gestów.

Gesty pozwalają użytkownikom osiągać cele szybko i w angażujący sposób. Niestety są ukrytymi kontrolkami, więc użytkownicy zwykle nie wypróbują ich sami. Nie zostały też ustandaryzowane, co jeszcze utrudnia ich odkrycie. Żeby kontakt z gestami był bardziej naturalny i dostępny, pomóż użytkownikom wizualnymi wskazówkami i animacjami pokazującymi, jak korzystać z treści w Twojej aplikacji. 

Slack podnosi produktywność dzięki gestom. Przesunięciem w prawo otworzysz na przykład menu nawigacji

27. Ułatw wyszukiwanie.

Użytkownicy doceniają wyszukiwarkę w każdej aplikacji mobilnej, bo mocno oszczędza im pracy. Żeby wdrożyć ją przyjaźnie, umieść pasek lub funkcję wyszukiwania u góry ekranu, tak by łatwo było ją znaleźć. Do tego wzbogać wyszukiwanie o podpowiedzi, autouzupełnianie i zapisywanie historii.

W Healthtap użytkownicy łatwo znajdą przez pasek wyszukiwania odpowiedź na każde pytanie dotyczące zdrowia

Wydajność

28. Projektuj pod optymalną wydajność.

Ospałe działanie to jeden z głównych powodów odinstalowywania aplikacji mobilnych. Dlatego tak ważne jest wbudowanie optymalizacji wydajności w projekt aplikacji od pierwszego dnia przez:

• Maksymalne zmniejszenie rozmiaru aplikacji.
• Ładowanie danych tekstowych przed obrazami. 
• Cache'owanie i kompresowanie treści opartych na obrazach.
• Ponowne wykorzystanie szablonów na kolejnych ekranach aplikacji.

29. Używaj ekranów szkieletowych.

Żeby stworzyć wrażenie szybkości, użyj tymczasowych kontenerów (szkieletów) jako zapełniaczy do czasu załadowania treści. Pokazując ekran od razu i stopniowo doładowując treść pod spodem, sprawisz, że aplikacja będzie wydawać się stabilniejsza i szybsza, i zatrzymasz niecierpliwych użytkowników.

LinkedIn ekran szkieletowy w aplikacji

30. Wykorzystaj rozproszenie uwagi.

Jeśli Twoja aplikacja potrzebuje czasu na wykonanie działania, zabaw użytkowników. Skieruj ich uwagę na interaktywną animację albo pokaż ciekawostkę. Zadbaj o to, żeby w czasie oczekiwania aplikacja utrzymała stan w tle i wróciła z użytkownikiem do miejsca, w którym skończył, bez utraty informacji.

Odwróć uwagę użytkownika płynnie zmieniającym się ekranem ładowania (autor: Valentin Salmon)

Zabaw użytkowników, czekając na usunięcie plików w Twojej aplikacji (autor: Hanna Jung)

31. Utwierdź użytkownika dzięki haptyce.

Wzmocnij wrażenie dotyku w swojej aplikacji przy prostych operacjach - nie tylko po to, żeby poprawić doświadczenie użytkownika, ale też żeby zyskać czas na wykonanie działania. Haptyka daje natychmiastowe poczucie, że akcja została już uruchomiona, jeszcze zanim oprogramowanie zacznie ją przetwarzać. 

Twój zwycięski projekt UX aplikacji mobilnej

Na projektowanie aplikacji mobilnej składa się wiele elementów, a stworzenie naprawdę wyjątkowej aplikacji, która spełnia wszystkie kryteria, bywa trudne. Stosowanie powyższych dobrych praktyk UX zwiększa jednak Twoje szanse na stworzenie aplikacji mobilnej przyciągającej, angażującej i konwertującej docelowych użytkowników.