Zasady projektowania mobilnego UX

Dobry projekt to dobry projekt, prawda? To prawda, ale w zależności od medium dla tego projektu wchodzą w grę specjalne kwestie. Zasady projektowania czegoś takiego jak aplikacja stworzona do działania na komputerze stacjonarnym zwykle nieco różnią się od najbardziej efektywnych konwencji projektowania UX na urządzeniach mobilnych.

Nawet w ramach kategorii parasolowej, takiej jak „projektowanie mobilnego UX”, istnieją różnice między projektowaniem aplikacji a projektowaniem witryny mobilnej. Gdy użytkownicy pobierają aplikację, chcą nie tylko mobilnej wersji witryny. Chcą wyjątkowego doświadczenia, które uzasadnia czas spędzony na pobraniu aplikacji (a także miejsce, które zajmuje na ich telefonie). Użytkownicy nie mają skrupułów, aby usunąć aplikację, która nie jest dla nich warta zachodu — 75% aplikacji do pobrania jest otwieranych tylko raz.

Ogólnie rzecz biorąc, nie można pominąć projektowania mobilnego. Na całym świecie więcej osób uzyskuje dostęp do Internetu z urządzeń mobilnych i tabletów niż z komputerów stacjonarnych. Ignorowanie tych użytkowników nie jest już czymś, co projektanci UX mogą uzasadniać. Projektanci urządzeń mobilnych powinni uwzględniać najlepsze praktyki dotyczące mobilnego UX na każdym etapie procesu projektowania.

Umieść użytkownika na pierwszym miejscu

Powinno to być oczywiste, ale w każdym projekcie projektowym użytkownik powinien zawsze być na pierwszym miejscu, a potrzeby użytkownika są jeszcze ważniejsze (i bardziej szczegółowe) na urządzeniach mobilnych. Jeśli projektanci nie zaspokoją potrzeb użytkowników mobilnych, ci użytkownicy bardzo szybko przejdą do innych stron internetowych, aplikacji lub elementów rozpraszających.

Poniżej znajduje się kilka rzeczy, które projektanci mogą zrobić, aby spełnić specyficzne potrzeby użytkowników mobilnych.

Spraw, aby nawigacja była intuicyjna

Nawigacja w witrynach i aplikacjach mobilnych musi być bardziej intuicyjna niż w witrynach na komputery. Użytkownicy muszą być w stanie natychmiast określić, jak poruszać się po aplikacji mobilnej lub witrynie. Można to osiągnąć poprzez rozpoznawalne wzorce projektowe (takie jak menu hamburgerów), a także rozpoznawalne ikony (ikona „domu” na ekranie głównym, dymek czatu do wiadomości itp.).

Jeśli użytkownicy muszą zastanowić się, jak się poruszać, są bardziej skłonni do opuszczenia strony internetowej lub zamknięcia aplikacji i szukania prostszego rozwiązania.

Stwórz bezproblemową obsługę na różnych urządzeniach

Niezależnie od tego, czy użytkownik uzyskuje dostęp do treści w aplikacji, witrynie mobilnej czy witrynie na komputery, przejście między korzystaniem z nich musi być płynne. Elementy projektu powinny się nawzajem odzwierciedlać (na przykład projektanci nie powinni używać koloru niebieskiego dla aplikacji i czerwonego dla strony internetowej).

Bezproblemowe działanie nie tylko ułatwia pracę osobom korzystającym ze strony internetowej lub aplikacji, ale także buduje zaufanie do marki.

Skoncentruj się na celach użytkownika

Cele, jakie dana osoba ma w aplikacji mobilnej lub witrynie, prawdopodobnie różnią się od tych, jakie ma w przypadku pełnej witryny na komputery. Na przykład w aplikacji restauracyjnej odwiedzający prawdopodobnie będzie chciał zrobić tylko kilka rzeczy: wyświetlić menu, dokonać rezerwacji lub uzyskać wskazówki. W większości przypadków nie przeglądają pełnej historii firmy na telefonie komórkowym — tego rodzaju treści mogą być ukryte w menu lub podmenu.

Zastanów się, co użytkownik faktycznie chce robić w aplikacji mobilnej. Jedną z ważnych rzeczy, które projektanci często pomijają, jest wymaganie logowania do podstawowych zadań. Na przykład aplikacje bankowe często proszą o login, aby cokolwiek zrobić w aplikacji. Jednak zadania takie jak znalezienie lokalizacji najbliższego bankomatu tak naprawdę nie wymagają logowania. Ułatwienie dostępu do tych funkcji to świetny sposób na poprawę UX.

Zezwalaj na personalizację

W przypadku aplikacji mobilnych personalizacja jest kluczem do poprawy komfortu użytkowania. Personalizacja może również pomóc w osiągnięciu celów marketingowych. Jest to korzystne dla wszystkich zainteresowanych stron.

Personalizacja powinna skłaniać użytkowników do treści, których szukają, i z dala od treści, które są dla nich nieistotne. Może również wyeliminować elementy rozpraszające uwagę w witrynie, usprawnić komponenty, takie jak proces zakupu, i upewnić się, że komunikaty marketingowe są zsynchronizowane z tym, czego faktycznie chce odwiedzający.

Jednak zbyt duża personalizacja może być łatwą pułapką, w którą można wpaść. Poziom personalizacji musi odpowiadać poziomowi zaufania użytkownika do aplikacji i firmy. Jak często ludzie czują się zakłopotani lub dziwni, gdy witryna wyświetla reklamy czegoś, o czym myśleli (lub o czym rozmawiali), ale nawet nie szukali? Jasne, to tylko predykcyjna natura zaawansowanych algorytmów reklamowych, ale ten poziom personalizacji może nadal budzić niepokój odwiedzających.

Zawsze ułatwiaj rzeczy

Kiedy dana osoba odwiedza stronę internetową lub aplikację na urządzeniu mobilnym, chce jak najszybciej wykonać zadanie. To od projektanta zależy, aby wykonanie niezbędnych zadań było jak najłatwiejsze. Wyeliminowanie wszystkiego, co nie jest absolutnie niezbędne do każdego zadania, to świetne miejsce na rozpoczęcie. Kluczowe jest również uproszczenie niezbędnych zadań na interfejsie mobilnym.

Na przykład wiele aplikacji i witryn eCommerce oferuje teraz opcję aparatu do wprowadzania informacji o karcie kredytowej. Zamiast wpisywać numer karty, kupujący mogą skierować aparat na kartę kredytową, a aplikacja automatycznie odczyta numer.

Inne rzeczy, takie jak określanie typu danych wejściowych w polach formularza (na przykład, gdy oczekiwany jest adres e-mail, na głównym ekranie klawiatury pojawia się symbol @ i „.com”).

Dobre praktyki onboardingowe

Dobry onboarding jest niezbędny w przypadku aplikacji mobilnych. Ale definicja „dobrego” różni się znacznie w zależności od rodzaju aplikacji. Aplikacje, które są proste w użyciu — takie jak listy rzeczy do zrobienia czy przeglądarki internetowe — wymagają minimalnego wdrożenia. Kilka ekranów powitalnych, które wskazują unikalne funkcje, to wszystko, czego większość użytkowników będzie potrzebować, aby zacząć.

Jednak bardziej złożone aplikacje, takie jak te do usług finansowych lub zarządzania projektami, wymagają bardziej kompleksowego wdrożenia.

Używaj ustalonych gestów

To powinno być oczywiste, ale projektanci urządzeń mobilnych muszą wziąć pod uwagę ustalone gesty, do których ludzie są już przyzwyczajeni na swoich urządzeniach. Rzeczy takie jak szczypanie w celu powiększania lub przesuwania stały się intuicyjne dla większości użytkowników i powinny być stosowane, gdy tylko jest to możliwe.

W przypadkach, w których projektant decyduje się odejść od ustalonego gestu, ważne jest, aby wskazać użytkownikom to odchylenie podczas procesu wdrażania lub gdy przypadek użycia pojawia się po raz pierwszy.

Projekt układu mobilnego

Projektowanie układów mobilnych nie różni się całkowicie od projektowania jakiegokolwiek innego układu, ale istnieją pewne kwestie, które projektanci muszą wziąć pod uwagę.

Jednym z najważniejszych rozważań jest rozmiar docelowych ekranów dotykowych. Podczas gdy mysz lub gładzik może klikać z niezwykłą dokładnością, opuszki palców są znacznie mniej dokładne. Idealnie, cele powinny mieć 7-10 mm na ekranie urządzenia mobilnego. Umożliwia to dotknięcie celu koniuszkiem palca bez konieczności celowania zbyt ostrożnie.

Powiązanym obszarem do rozważenia są elementy sterujące położeniem dłoni i „strefa kciuka” na urządzeniach mobilnych — obszar ekranu telefonu, do którego można łatwo uzyskać dostęp kciukiem, gdy osoba trzyma telefon jedną ręką. Umieszczenie większości interaktywnych treści (a zwłaszcza wezwań do działania) w tej strefie ma kluczowe znaczenie dla stworzenia pozytywnego doświadczenia użytkownika.

Ważne jest, aby projekty mobilne ograniczały jak najwięcej bałaganu. Minimalizm to przyjaciel projektanta, jeśli chodzi o aplikacje mobilne. Próba upchania wszystkiego w interfejsie użytkownika na komputerze na ekranie, który jest ułamek rozmiaru, sprawia, że ​​projekt wygląda na ciasny i może być przytłaczający.

Skupienie się na celach, zminimalizowanie opcji nawigacji (może w tym pomóc menu i podmenu) i ogólnie wyeliminowanie wszelkich elementów, które nie są niezbędne dla użytkowników do zrobienia tego, co muszą zrobić, stworzy bardziej uproszczony i przyjazny dla użytkownika interfejs użytkownika.

Wycinając bałagan na ekranie, projektanci muszą mieć pewność, że nie przeoczą niektórych kluczowych kwestii projektowych. Jednym z takich rozważań jest upewnienie się, że różne elementy projektu mają wystarczający kontrast. Ludzie często patrzą na swoje urządzenia mobilne w mniej niż idealnych warunkach. Rzeczy takie jak jasne światło słoneczne mogą utrudniać dostrzeganie elementów na ekranie, ale wysoki kontrast sprawia, że ​​elementy są bardziej widoczne.

Inną kluczową kwestią jest typografia. Ważne jest, aby w projekcie mobilnym mieć przejrzystą hierarchię typograficzną. Tytuły i nagłówki powinny być łatwe do zauważenia, a czcionki powinny być ogólnie większe. Nikt nie lubi wpatrywać się w ekran, próbując czytać duże bloki tekstu na telefonie. Czytelne nagłówki, listy punktowane lub numerowane oraz krótkie akapity sprawiają, że tekst na telefon komórkowy jest bardziej czytelny.

Ostatnią kwestią dotyczącą interfejsu użytkownika jest użycie przejść i animacji. Animacja może być ważnym sygnałem dla użytkownika, że ​​każda czynność, którą właśnie wykonał, coś zrobiła. Animacje i wyraźne przejścia między ekranami lub funkcjami w aplikacji mobilnej to kluczowe informacje zwrotne, które zapewniają bardziej satysfakcjonujące wrażenia użytkownika.

Najlepsze praktyki dotyczące mobilnego UX

Wszystkie powyższe kwestie są ważne podczas projektowania aplikacji mobilnych i stron internetowych. Istnieją jednak dodatkowe najlepsze praktyki dotyczące mobilnego UX, których należy przestrzegać, aby zapewnić jak najlepsze wrażenia użytkownika.

Skoncentruj się na szybkości

Pomimo powszechnej dostępności danych 4G, sieci komórkowe są nadal generalnie wolniejsze niż Wi-Fi lub usługi szerokopasmowe. W wielu częściach świata 4G nie istnieje, a użytkownicy mobilni utknęli w 3G lub wolniejszych prędkościach transmisji danych.

Oznacza to, że witryny mobilne, a zwłaszcza aplikacje mobilne, muszą być szybkie. Dołączenie treści do aplikacji, której nie trzeba pobierać za każdym razem, gdy aplikacja się ładuje, przyspieszy aplikację. Podobnie jak ładowanie zawartości tylko wtedy, gdy jest to konieczne (chociaż przewidywanie zawartości, która będzie potrzebna i wstępne jej ładowanie, może sprawić, że aplikacja pojawi się szybciej dla użytkownika).

Jest to zachowanie równowagi między nieładowaniem treści, które nie będą używane (i zużywaniem danych) a tworzeniem wrażenia szybkości poprzez wstępne ładowanie treści, które użytkownicy prawdopodobnie będą potrzebować w następnej kolejności.

Jednym ze sposobów na stworzenie iluzji szybkości i uspokojenie niecierpliwych użytkowników jest użycie symboli zastępczych do momentu załadowania treści. Robi to aplikacja mobilna Facebooka, która skutecznie wydaje się być dopracowanym szkieletem ładowania, gdy tylko aplikacja się otworzy, zachowując miejsce na posty, które ładują się podczas pobierania. Ten ekran przejściowy sygnalizuje użytkownikom, że coś się dzieje z treścią, zanim faktycznie się załaduje.

Przekaż opinię użytkownikom

Przekazywanie opinii użytkownikom podczas wykonywania czynności w aplikacji mobilnej jest ważnym aspektem pozytywnego doświadczenia użytkownika. Jak wspomniano wcześniej, animacje i przejścia są jednym ze sposobów przekazywania opinii.

Sygnały dotykowe i dźwiękowe są również możliwe w przypadku urządzeń mobilnych. Dostarczanie informacji zwrotnej dotykowej podczas wykonywania określonych czynności jest szczególnie popularne w grach mobilnych, a także w przypadku komunikatów o błędach. Informacje zwrotne dźwiękowe są popularne w przypadku funkcji we wszystkich rodzajach aplikacji. Niemniej jednak projektanci nie powinni polegać na sprzężeniu dźwiękowym, ponieważ tak wiele osób przez cały czas wycisza telefon.

Minimalizuj wprowadzanie danych

Inną kluczową najlepszą praktyką w zakresie mobilnego UX jest minimalizacja wymaganej ilości danych wejściowych. Mówiliśmy o tym wcześniej, ale im więcej danych osoba musi wprowadzić do aplikacji mobilnej, tym bardziej prawdopodobne jest, że zrezygnuje z zadania.

Wypełnienie formularza z czterema lub pięcioma polami może nie być wielkim problemem na komputerze stacjonarnym lub laptopie, ale na urządzeniu mobilnym te cztery lub pięć pól może wystarczyć, aby odrzucić użytkownika, zwłaszcza jeśli nie widzi swojego cel, powód. Upewnij się, że każde pole w formularzu wypełnianym na urządzeniu mobilnym jest niezbędne. Wyeliminuj tych, którzy nie są.

Jest to jeden z obszarów, w którym umożliwienie użytkownikom korzystania z jednego z istniejących kont (takich jak konto na Facebooku, Google lub Twitterze) zamiast rejestrowania się od zera może znacznie poprawić konwersje. Gdy użytkownik musi tylko kliknąć, aby autoryzować dostęp, a nie wypełnić formularz nowej rejestracji, jest bardziej prawdopodobne, że to zrobi. Po prostu nie polegaj wyłącznie na tych pomocniczych aplikacjach — niektórzy użytkownicy nadal nieufnie podchodzą do łączenia swoich kont i poświęcą trochę czasu na wypełnienie formularza.

Wniosek

Przestrzeganie tych ustalonych zasad projektowania mobilnego UX zapewni lepsze ogólne wrażenia użytkownika dla osób odwiedzających witrynę mobilną lub korzystających z aplikacji mobilnej. Projektanci mają tylko kilka sekund, aby przyciągnąć uwagę ludzi, zanim porzucą aplikację lub witrynę na rzecz bardziej przyjaznej dla użytkownika, intuicyjnej lub usprawnionej.

Świetne projekty mobilne stają się coraz bardziej powszechne, a poprzeczka została jeszcze bardziej podniesiona, jeśli chodzi o to, czego użytkownicy oczekują od swoich aplikacji mobilnych. Projektanci nie mogą już patrzeć na projektowanie mobilne jako po namyśle i zamiast tego muszą poświęcić im tyle czasu, uwagi i zasobów, co w przypadku projektów w innych formatach.

Dalsza lektura na blogu Toptal Design:

• Mobilny projekt UX — najlepsze praktyki, ograniczenia i współpraca z programistami
• Zachowaj użytkowników dzięki tym inspiracjom wprowadzającym do aplikacji mobilnych
• Podstawowy przewodnik po użyteczności mobilnej
• Zasady heurystyczne dla interfejsów mobilnych
• UX eCommerce dla doświadczeń mobilnych