Jak zaprojektować dla doskonałego mobilnego UX

Jak zaprojektować doskonały UX na urządzeniach mobilnych , musi być na czele wszystkiego, co Twoja firma robi w internecie. Jeśli nie projektujesz przede wszystkim z myślą o urządzeniach mobilnych, Twoja firma nie odniesie takiego sukcesu, jak mogłaby i powinna być. Powód jest prosty: telefon komórkowy już dawno wyprzedził komputery stacjonarne jako metoda numer jeden dla osób korzystających z Internetu. Innymi słowy, nie zaprojektuj pod kątem urządzeń mobilnych… nie zdobądź jak największej liczby odwiedzających witrynę, potencjalnych klientów i klientów.

Spójrzmy na statystyki.

Według Smart Insights minął już punkt, w którym liczba użytkowników mobilnych przekroczyła liczbę użytkowników komputerów stacjonarnych. Ten punkt zwrotny miał miejsce w 2014 roku. Od tego czasu liczba globalnych użytkowników mobilnych tylko agresywnie rosła, podczas gdy liczba użytkowników komputerów stacjonarnych rosła wolniej.

Podsumowując: więcej potencjalnych klientów, odwiedzających i klientów trafi do Twojej witryny na swoich telefonach komórkowych, a nie na komputerach stacjonarnych.

Jeśli chcesz zmaksymalizować liczbę konwersji, najpierw musisz zoptymalizować swoją witrynę pod kątem urządzeń mobilnych. Dziś świetny mobilny UX to także skuteczny marketing mobilny.

Spójrzmy.

Jak zaprojektować dla doskonałego mobilnego UX: co mówią statystyki

Za każdym razem, gdy chcesz stworzyć solidny przypadek użycia uzasadniający wydatki w swojej firmie, na przykład na projekt zorientowany na urządzenia mobilne, spójrz na statystyki dotyczące tego, jak i gdzie ludzie kupują w dzisiejszych czasach. Idź tam, gdzie prowadzą cię dowody.

Globalna firma technologiczna Criteo, która specjalizuje się w marketingu commerce, opublikowała komunikat prasowy, który ujawnił, że sprzedaż mobilna w samych Stanach Zjednoczonych stanowi obecnie 52% wszystkich transakcji e-commerce. Oczywiście, jeśli chcesz skutecznie i skutecznie sprzedawać… potrzebujesz bardzo wydajnej obecności mobilnej ze świetnym UX.

Oto kolejna bardzo interesująca statystyka, która w rzeczywistości ujawnia więcej niż się wydaje na pierwszy rzut oka.

Według raportu Adobe Mobile Retail Report konwersje są 2,8 raza wyższe na komputerach stacjonarnych niż na urządzeniach mobilnych. Jeśli uważasz, że oznacza to, że optymalizacja pod kątem urządzeń mobilnych nie jest ważna, pomyśl jeszcze raz. Jest to właściwie jeszcze jeden powód, aby zaangażować się w strategię zorientowania na urządzenia mobilne, zwłaszcza że urządzenia mobilne nadal generują większy ruch niż komputery stacjonarne.

Powodem, dla którego konwersje na komputerach są wyższe, jest prawdopodobnie fakt, że doświadczenia mobilne nie są tak zoptymalizowane, jak powinny, a nie dlatego, że ludzie nie wolą robić zakupów i dokonywać konwersji na urządzeniach mobilnych, gdzie jest to dla nich przede wszystkim wygodniejsze !

Wyobraź sobie scenariusz, w którym Twoja witryna mobilna jest doskonale zoptymalizowana, otrzymuje większy ruch niż witryna na komputery i uzyskuje więcej konwersji niż witryna na komputery, a wszystko to dzięki wdrożeniu doskonałego mobilnego UX.

Jest w Twoim zasięgu. Oto co robić.

Projektuj dla kciuków… ale nie przede wszystkim dla kciuków

Użyteczność mobilna powinna opierać się na wszystkich różnych sposobach interakcji ze smartfonami. Jak zaprojektować świetny UX na urządzeniach mobilnych jest tyleż zdrowym rozsądkiem, co opartym na dowodach.

Kuszące jest założenie, że jeśli używam smartfona do nawigacji i zakupów w witrynie mobilnej, wygodniej jest mi to zrobić, po prostu trzymając telefon w jednej ręce i używając kciuka tej samej ręki, aby wykonać mój użytkownik cele. Równie kuszące jest założenie, że mniej wygodne byłoby dla mnie używanie obu rąk (telefon w jednej ręce i używanie palca wskazującego drugiej ręki do realizacji celów użytkownika).

Jednak ta konwencjonalna mądrość jest w rzeczywistości błędna, ponieważ zakłada, że ​​ludzie używają tylko lub głównie jednej ręki do obsługi telefonów.

Badania pokazują, że istnieje sześć różnych sposobów, w jakie ludzie trzymają telefony i wchodzą z nimi w interakcję. Każda witryna mobilna, która nie zaprojektuje dla wszystkich sześciu sposobów, zawiedzie i doświadczy niższych współczynników konwersji, ponieważ ucierpi UX.

Sześć sposobów to:

• W kołysce (jedna ręka trzyma telefon, podczas gdy druga ręka stuka kciukiem)
• Przytrzymaj i dotknij (jedna ręka podtrzymuje telefon, podczas gdy palec wskazujący drugiej dłoni stuka)
• Dwie ręce do orientacji poziomej (pomyśl, jak trzymałbyś przenośne urządzenie do gier, takie jak Nintendo 2DS XL)
• Jedna ręka – pierwsze zamówienie (jedna ręka trzyma telefon, podczas gdy kciuk tej samej ręki stuka)
• Jedna ręka – druga kolejność (jedna ręka trzyma telefon, podczas gdy kciuk tej samej ręki stuka, ale z wyższej pozycji wyjściowej)
• Dwie ręce do orientacji pionowej (pomyśl, jak byś tym razem trzymał przenośne urządzenie do gier, takie jak stary Gameboy Nintendo)

Teraz i tutaj rzeczy stają się naprawdę istotne, oto różne przypadki użycia różnych sposobów trzymania telefonu:

• Stukanie w linki – większość trzyma i stuka lub kołysze
• Pola do zaznaczania – większość chowaj lub trzymaj i dotknij
• Pisanie – większość używa dwóch palców lub kciuków jednocześnie lub trzyma i stuka
• Krótkie przewijanie – większość trzyma i stuka lub kołysze
• Dłuższe przewijanie — większość należy odłożyć na kołyskę lub przytrzymać i dotknąć

Konkluzja: zaprojektuj swoją witrynę mobilną tak, aby uwzględniała różne sposoby, w jakie ludzie trzymają telefony.

Większe przyciski są lepsze

Jeśli zastanawiasz się, jak zaprojektować doskonały UX na urządzeniach mobilnych, jednym z najważniejszych aspektów, na którym warto się zająć, jest rozmiar przycisku. Podobnie jak w przypadku wszystkich urządzeń mobilnych, rozmiar ekranu jest znacznie mniejszy niż tabletu lub komputera stacjonarnego, co negatywnie wpływa na użyteczność witryny mobilnej, jeśli przyciski są zbyt małe. Przyciski o nieodpowiednim rozmiarze prowadzą do błędów UX, takich jak:

• Trudność w prawidłowym naciśnięciu przycisków
• Problemy z widzeniem przycisków w pierwszej kolejności
• Trudno jest zrozumieć, że przycisk można stuknąć lub w inny sposób wejść w interakcję

Err po stronie większego jest lepsze.

Większe przyciski zapewniają płynniejszy UX dla kupujących, klientów, odwiedzających itp.

Nasuwa się pytanie, jak duży dokładnie?

Zgodnie z wytycznymi Google Material Design Touch Target Size, przyciski mobilne powinny osiągać rozmiar ekranu dotykowego od 7 do 10 milimetrów. Innymi słowy, przyciski powinny mieć fizyczny rozmiar około 1 centymetra, niezależnie od tego, na jakim ekranie się pojawiają. Zapewnia to doskonałą równowagę między:

• Gęstość informacji
• „Targetowalność” elementów interfejsu użytkownika

Gdy Twoi użytkownicy mogą łatwiej zobaczyć przyciski, zrozumieć ich przestrzenne relacje z innymi elementami na ekranie i dotknąć ich, aby pomyślnie realizować cele strony, zapewniasz im niesamowity UX.

Nadaj priorytet najważniejszym treściom

Odpowiedź na pytanie: Jak zaprojektować świetny mobilny UX? czasami leży w tym, co odejmujesz zamiast dodawać. W przypadku treści wyświetlanych na ekranie zasada ta obowiązuje w 100%.

Błogosławieństwem smartfonów jest ich mały i przenośny rozmiar, pomimo niedawnej tendencji do zwiększania rozmiaru ekranu mobilnego. Ta wygoda ma wadę, która polega na tym, że użytkownicy są narażeni na większe koszty interakcji. Jest to wysiłek fizyczny i umysłowy, jaki muszą włożyć, aby osiągnąć cele związane z witryną mobilną.

Na przykład, jeśli poruszasz się po witrynie z wiadomościami na komputerze, prawdopodobnie będziesz mógł zobaczyć na stronie głównej wyniki sportowe i prognozę pogody na paskach bocznych w części strony widocznej na ekranie, dzięki czemu nie musisz zawracać sobie głowy przewijaniem w dół. Jednak na urządzeniach mobilnych ta sama treść prawdopodobnie wymagałaby poważnego przewijania, ponieważ przestrzeń jest na wagę złota.

Dlatego jedynym rozwiązaniem jest nadanie priorytetu najważniejszym treściom w części widocznej na ekranie na urządzeniach mobilnych. Innymi słowy, zastanów się, jakie treści wyświetlać użytkownikom i odwiedzającym w części widocznej na ekranie na swoich stronach mobilnych. W końcu za każdy element treści, który umieszczasz nad zakładką, inny element musi zostać zepchnięty w dół, a nawet poświęcony pod zakładką.

Jednym ze sposobów, które pomogą Ci zmaksymalizować zawartość mobilną w części strony widocznej na ekranie, jest zminimalizowanie tak zwanego chrome. W tym przypadku nie mówimy o przeglądarce Google. Chrome to zbiór elementów projektu wizualnego, które pomagają użytkownikom wchodzić w interakcję z zawartością interfejsu lub dostarczają dodatkowych informacji na temat zawartości interfejsu, ale nie są częścią zawartości. Chrome pochodzi z systemu operacyjnego telefonu komórkowego.

Przykładem chrome mogą być wszystkie zdjęcia powiązane z kontami osób podczas przeglądania wiadomości e-mail w skrzynce odbiorczej aplikacji Gmail. W tym przykładzie te zdjęcia pomagają dodatkowo zidentyfikować nadawców, ale nie są absolutnie niezbędne do ich identyfikacji (wystarczy wiersz Od w wiadomości e-mail).

Ograniczając te chromowane elementy, znacznie oszczędzasz miejsce na ekranie telefonu komórkowego, a tym samym masz większą szansę na umieszczenie najważniejszych informacji nad małym obszarem składania.

Skoncentruj się na użytkowniku końcowym

Sekret projektowania pod kątem doskonałego mobilnego UX zawsze sprowadza się do użytkownika końcowego. Pamiętaj o tym podczas projektowania witryn mobilnych, a stworzysz witrynę przyjazną dla użytkownika. To takie proste.

Aby się tam dostać, upewnij się, że projektujesz w oparciu o rzeczywiste dane, a nie o założenia. Świetnym miejscem na rozpoczęcie jest przede wszystkim sposób, w jaki użytkownicy trzymają telefony. Jeśli projektujesz w sposób, w jaki wiele osób nie trzyma nawet telefonów, to wszystkie zakłady są wykluczone.

Należy również pamiętać, że ze względu na małe ekrany mobilne treści muszą być łatwo i szybko widoczne, więc powiększ elementy i upewnij się, że najważniejsza treść znajduje się w części strony widocznej na ekranie.