Mobile UX Design: Na co należy zwrócić uwagę optymalizując stronę pod kątem urządzeń mobilnych

12 Min.
Najlepsze praktyki projektowania mobilnego UX

Jak sprawić, by Twoja strona była przyjemna w użytkowaniu mobilnym? Co oznacza user experience dla urządzeń mobilnych? Jakie zasady projektowania możesz zastosować? Odpowiedzi na wszystkie te pytania znajdziesz w tym wpisie. Przyjrzyjmy się bliżej najlepszym praktykom projektowania mobilnego UX!

Po co w ogóle Mobile UX Design?

Ruchy projektowe takie jak Mobile First od pewnego czasu staramy się skierować naszą uwagę w stronę urządzeń mobilnych. Większość profesjonalnych stron internetowych działa już dobrze na urządzeniach mobilnych. Oczywiście przyczyniają się do tego sumienni projektanci. Ale również ci, którzy prowadzą strony internetowe często korzystają z frameworków takich jak Bootstrap lub prefabrykowanych WordPress Themes . Tutaj responsywny wyświetlacz jest zazwyczaj już zintegrowany. Pozwala to zaoszczędzić deweloperom niesamowitą ilość czasu. 

Jednak wykorzystanie Bootstrapa, WordPress Themes & Co. niesie za sobą ryzyko, że projekt jest przeznaczony na desktop - a potem dopiero dostosowany do urządzeń mobilnych.

Dlaczego jest to problem? Odwiedzający Twoją stronę za pośrednictwem urządzeń mobilnych mają inne potrzeby, które niekoniecznie są zaspokajane przez samo estetyczne i techniczne dostosowanie strony.

Projektowanie doświadczeń użytkownika opiera się na rozwiązywaniu problemów. Pytanie wyjściowe zawsze brzmi: Jakie problemy mogą mieć użytkownicy i jak je rozwiązać? Dlatego w kontekście urządzeń mobilnych należy zastanowić się nad jednym kluczowym pytaniem: Jakie dodatkowe problemy pojawiają się, gdy użytkownicy odwiedzają Twoją stronę z urządzeń mobilnych?

Używanie smartfonów w Niemczech

Według Statista.com, 97,5 procent gospodarstw domowych w Niemczech miało jeden lub więcej telefonów komórkowych w 2020 roku. Daje to udział na poziomie 80 proc. użytkowników mobilnego Internetu. Spośród nich 24,1 proc. korzystało z umowy prepaid. Na rok 2023 prognozowany jest wzrost z 66,5 mln do 68,6 mln użytkowników smartfonów.

Wielu z nas używa swoich smartfonów szczególnie w podróży. Na wrażenia użytkownika duży wpływ mają czynniki zewnętrzne: wokół nas może być głośno. Możemy też być w ruchu - interakcja z telefonem jest mniej dokładna. Natężenie światła może się szybko zmieniać od bardzo jasnego do bardzo ciemnego. Odbiór może zmieniać się między dobrym a złym, a nawet całkowicie ustać. Odwiedzający Twoją witrynę mogą być na planach przedpłaconych, więc staraj się unikać stron, które wykorzystują dużo danych w krótkim czasie.

Pozycja może być mniej wygodna, a w rezultacie użytkownicy mniej zrelaksowani. Zwykle mamy mniej cierpliwości, ponieważ mamy mniej czasu na poszczególne zadania. Jeśli coś nie działa w najkrótszym czasie - lub musimy czekać zbyt długo na załadowanie się treści - mamy tendencję do anulowania procesu na smartfonie i poświęcenia naszej krótkiej uwagi innej stronie.

Mniejsza jest też chęć do czytania lub przewijania dużej ilości tekstu. Szukamy informacji o przejrzystej strukturze, podanych w małych kawałkach. Możemy też mieć wolną tylko jedną rękę.

Powody, dla których surfujemy po Internecie za pomocą smartfona, są zupełnie inne niż w przypadku użytkowników komputerów stacjonarnych: Na urządzeniach mobilnych albo szukamy konkretnych informacji, albo staramy się zabić czas. 

Kiedy wchodzę na komercyjną stronę internetową z mojego smartfona, prawdopodobnie najbardziej interesują mnie podstawowe informacje:

  • Jaki jest adres?
  • Jak się tam dostać?
  • Jakie są godziny otwarcia?
  • Jak mogę się z Tobą skontaktować?
  • Jakie produkty są oferowane?
  • Jakie są ceny?

Pozostaje tylko pytanie: czy Twoja strona jest zoptymalizowana pod kątem urządzeń mobilnych? Aby lepiej podsumować, co to oznacza w szczegółach, zebrałem najważniejsze zasady UX dla projektowania mobilnego.

Mobile UX Design: 13 zasad, które powinieneś natychmiast wdrożyć

1. zawartość

Osoby odwiedzające Twoją witrynę mają różne cele w zależności od tego, z jakich urządzeń korzystają, aby wejść na Twoją stronę. Długie teksty na urządzeniach mobilnych często oznaczają konieczność przewijania strony, aby znaleźć to, po co się przyszło. Jako użytkownicy mobilni szukamy szybkich, zwięzłych informacji. Osoby odwiedzające Twój sklep na urządzeniach mobilnych częściej chcą dowiedzieć się, jakie produkty oferujesz, niż poznać Twoje zaplecze.

Należy zatem dostosować treść. Na smartfonie i tablecie hierarchia jest inna niż na komputerze stacjonarnym. Istnieje tu kilka możliwości:

  • Całkowite pominięcie treści: W przypadku niektórych treści, dobrym pomysłem może być ich całkowite ukrycie. Tak może być w przypadku, gdy jest to coś, co nie działa na telefonie i tak. Lub jeśli ilość zużytych danych przekraczałaby korzyści dla użytkownika.
  • Skracanie treści: Możesz przejąć strukturę swojej strony, ale odpowiednio skrócić długie treści i np. linkować do podstron. W ten sposób odwiedzający mogą sami zdecydować, czy dana informacja jest dla nich istotna, czy nie.
  • Zmień układ swoich treści: Możesz zmienić strukturę swoich treści i ułożyć je inaczej na urządzeniach mobilnych. Produkty mogą być wtedy na pierwszym miejscu, a tła do sklepu pojawiają się później. W ten sposób oszczędzasz niepotrzebne przewijanie, ale nadal pokazujesz całą zawartość.

W poniższym przykładzie, dostosowałem zawartość strony internetowej restauracji (po lewej), aby była bardziej przyjazna. Skróciłem tekst i podlinkowałem do podstrony z CTA (po prawej). Dostosowałem również typografię, ale o tym później.

Najlepsze praktyki projektowania mobilnego UX
Oryginalna wersja mobilna przykładowej strony internetowej
Najlepsze praktyki projektowania mobilnego UX
Zoptymalizowana wersja mobilna przykładowej strony

2. układ

W swoim artykule Design for Fingers, Touch, and People, Steven Hoober przedstawia wyniki swoich szeroko zakrojonych badań nad użytkowaniem smartfonów. Technika kciuka jest często używana jako wskazówka. Tutaj liczy się promień, jaki kciuk może pokonać na ekranie. Często sugeruje się, że górne rogi to absolutne strefy tabu, do których użytkownicy nie mogą się dostać. Zgodnie z wynikami jego badań nie jest to jednak do końca prawda.

6 najczęstszych sposobów trzymania smartfonów:

Najlepsze praktyki projektowania mobilnego UX
Jak ludzie wolą trzymać swoje smartfony

Wynika z tego następujący optymalny podział elementów dla smartfonów:

Najlepsze praktyki projektowania mobilnego UX
Najlepszy układ dla treści głównych, drugorzędnych i trzeciorzędnych

Efekt: najważniejsze informacje powinny być umieszczone na środku ekranu w urządzeniach mobilnych.

3. minimalizm

Minimalistyczne podejście do projektowania nigdy nie jest złe. Jednak szczególnie na mniejszych urządzeniach czujemy się stłoczeni i zagubieni z powodu zbyt dużej ilości treści i zbyt małej ilości białych przestrzeni. Staje się niejasne, gdzie są ukryte informacje i jak do nich dotrzeć.

Mobilna wersja Streetartnews sprawia wrażenie uporządkowanej i przejrzystej. Na stronach merytorycznych znajdują się tylko najpotrzebniejsze elementy i dobrze czytelna czcionka szeryfowa z odpowiednimi odstępami między wierszami:

Najlepsze praktyki projektowania mobilnego UX
Hierarchia wizualna jest tym bardziej istotna w przypadku stron mobilnych.
Najlepsze praktyki projektowania mobilnego UX
Większe odstępy między wierszami są łatwiejsze do odczytania na urządzeniach mobilnych.

4. spójność

Ważne jest, aby Twoja strona była spójna na wszystkich platformach. Google rozwiązało to bardzo elegancko. Niezależnie od tego, z jakiego urządzenia uzyskuję dostęp do Google: od razu rozpoznaję markę Google.

Najlepsze praktyki projektowania mobilnego UX
Wersja Google na komputery stacjonarne
Najlepsze praktyki projektowania mobilnego UX
A tak wygląda Google na tablecie.
Najlepsze praktyki projektowania mobilnego UX
Mobilna wersja Google

Twoja marka powinna więc być odzwierciedlona na urządzeniach mobilnych pomimo minimalistycznego designu. Jeśli Twoja strona posiada obszar użytkownika, wprowadzone zmiany muszą być odpowiednio zaadoptowane na wszystkich urządzeniach.

5. media

Obrazki powinny mieć odpowiedni rozmiar i w takim też rozmiarze być wyświetlane, aby nic nie było zniekształcone lub przeskalowane. W ten sposób można również uniknąć niepotrzebnie długiego ładowania. Przejście między formatem poziomym a pionowym może być najtrudniejsze: W zależności od zawartości obrazu, powinieneś albo pokazać tylko jego część, albo zrobić dodatkowe obrazy dla urządzeń mobilnych. Dla stron z dużą ilością obrazów, powinieneś zintegrować lazy load lub użyć odpowiedniego WordPress Plugins . 

WordPress Optymalizacja obrazów: 6 Plugins do kompresji obrazów

Optymalizacja grafiki i obrazów na stronie WordPress jest łatwym i ważnym krokiem do poprawy czasu ładowania. Pokażemy Ci sześć popularnych WordPress Plugins , które całkowicie zwolnią Cię z zadania kompresji zdjęć.

To samo dotyczy filmów wideo. Również tutaj przełącza się z trybu krajobrazowego na portretowy. Filmy powinny być również ustawione tak, aby działały w trybie wyciszonym i nie uruchamiały się same. Filmy powinny być generalnie zoptymalizowane pod kątem stron internetowych, ale jest to szczególnie ważne w przypadku urządzeń mobilnych.

6. typografia

Ważniejsza od wyglądu Twojej strony internetowej jest zawsze jej funkcjonalność. Dotyczy to również czytelnego tekstu. Domyślną wielkością tekstu w HTML jest 16px. Ten rozmiar jest używany, chyba że użytkownik określi inaczej. W zależności od czcionki tekst może być jednak większy lub mniejszy. 

Wszystko o typografii internetowej i czcionkach

Zasadą jest, że rozmiar czcionki 16px jest idealny dla tekstu głównego i tekstu wprowadzanego na smartfonach. Aby uzyskać więcej informacji na temat typografii w sieci, sprawdź nasz artykuł"Jak znaleźć idealną czcionkę dla swojej strony internetowej" oraz wpis na blogu"Rozmiary czcionekdla każdego urządzenia" autorstwa UX Matters.

Aby uczynić typografię bardziej czytelną, należy jednak wziąć pod uwagę kilka innych rzeczy:

  • Kontrast pomiędzy kolorem czcionki a tłem: Jest to szczególnie ważne, ponieważ urządzenia mobilne są używane również na zewnątrz. Dotyczy to również pozostałej części Twojej strony internetowej. Dobry kontrast pomiędzy elementami ułatwia przeglądanie strony. ContrastChecker.com analizuje twój wybór koloru i pozwala ci wiedzieć, czy połączone kolory mają wystarczający kontrast do siebie.
  • Odstępy: Jeśli tekst znajduje się zbyt blisko siebie, staje się coraz trudniejszy do odczytania. Odstępy między wierszami dla urządzeń stacjonarnych i mobilnych mogą być różne.
  • Centrowanie: Moją podstawową zasadą jest, aby nigdy nie używać justowania na stronach internetowych. Uzasadnienie może wyglądać ładnie na pierwszy rzut oka, ale sprawia, że płynność czytania zostaje zakłócona. Podobny efekt daje typ wyśrodkowany. Dlatego sekcje tekstowe na urządzeniach mobilnych powinny być wyśrodkowane tylko w szczególnych przypadkach.
Najlepsze praktyki projektowania mobilnego UX
Uzasadnienie na przykładowej stronie
Najlepsze praktyki projektowania mobilnego UX
Tekst wyśrodkowany w lewo na przykładowej stronie

Oto ponownie przykład z EggShop: Aby tekst (po lewej) był bardziej czytelny, zwiększyłem rozmiar czcionki do 16px i ustawiłem wysokość linii na 1,7 (po prawej). Wyśrodkowałem też tekst po lewej stronie i zmniejszyłem trochę odstępy w górę, odpowiednio usunąłem podwójny nagłówek. W wersji desktopowej podwójny nagłówek ma sens. Na urządzeniach mobilnych tworzy tylko niechciane białe przestrzenie i duplikaty. 

Możesz pójść trochę dalej i pogrubić słowa kluczowe. Dzięki temu użytkownicy mogą jeszcze szybciej przeglądać tekst i nadal czerpać z niego istotne dla siebie informacje. Niektóre czcionki są generalnie bardzo nieodpowiednie dla małych ekranów, ponieważ tracą swoją czytelność przy skalowaniu. Nawet jasne czcionki, które wyglądają elegancko na komputerze stacjonarnym, mogą być mniej czytelne na smartfonie.

Nawigacja na Twojej stronie powinna być jak najbardziej intuicyjna. Oznacza to, że tworząc architekturę nawigacji, najlepiej jest korzystać z istniejących struktur jako przewodnika. Ułatwia to użytkownikom poruszanie się po Twojej stronie. Intuicyjne jest na przykład przewijanie w dół i w górę w celu poruszania się po stronie internetowej, ale niekoniecznie w lewo lub w prawo.

Pionowe menu stało się podstawowym menu na urządzeniach mobilnych. Ale również na pulpicie coraz częściej widzimy pionowe menu zamiast poziomego. Powyżej lub poniżej tego menu znajduje się zwykle menu pomocnicze, w razie potrzeby nieco mniej widoczne. Alternatywnie może to być również umieszczone na dole. 

Drugim menu mogą być np. ustawienia językowe lub linki do mediów społecznościowych. Jeśli konieczne jest menu trzeciorzędowe, zostanie ono umieszczone w formie menu rozkładanego. Może to być na przykład logowanie lub wylogowanie.

Jeśli Twoja strona jest czymś więcej niż tylko jedną stroną, szczególnie ważne jest, aby odwiedzający mogli zawsze łatwo znaleźć miejsce, w którym się znajdują.

CTA i linki

Najlepsze praktyki projektowania mobilnego UX
Zasada kciuka (Źródło: UX Matters)

Elementy interaktywne powinny być wyświetlane w większym rozmiarze. W ten sposób odwiedzający Twoją stronę wiedzą, co mogą na niej zrobić. I są w stanie kliknąć na to, co chcą. Istotną rolę odgrywa również wzajemne usytuowanie. Należy pozostawić wystarczająco dużo miejsca, aby zmniejszyć ryzyko przypadkowego dotknięcia niewłaściwego linku lub przycisku. Przyciski takie jak "Wyloguj", "Usuń", "Prześlij" powinny być również umieszczone w pewnej odległości od innych call-to-action, aby nie zostały przypadkowo wywołane.

Najlepsze praktyki projektowania mobilnego UX
Air Inuit wyświetla interakcje w bardzo przejrzysty i przyjazny dla użytkownika sposób.

Ukryta interakcja

Zezwolenie na interakcje poprzez wiele ścieżek jest dość powszechne. Tak długo, jak istnieje sposób, aby nowi odwiedzający nadal korzystać z Twojej strony. Pozwala to na zaoferowanie skrótów dla powracających użytkowników bez utrudniania im rozpoczęcia pracy.

Linki

Jeśli chcesz dodać więcej funkcjonalności do swojej witryny, warto wykorzystać istniejące systemy - zamiast programować nowe. Dzieje się tak na przykład wtedy, gdy zamiast formularza kontaktowego używany jest klient poczty elektronicznej użytkownika. Lub podczas integrowania wskazówek dojazdu poprzez ulubioną aplikację użytkownika. Ułatwia im to korzystanie z Twojej strony, ponieważ mogą używać aplikacji, które już poznali do wykonywania określonych zadań.

8. wzorce projektowe UI

Podobnie jak w przypadku komputerów stacjonarnych, budując stronę internetową lub sklep internetowy, warto korzystać ze sprawdzonych rozwiązań, zwanych również wzorcami projektowymi UI. Niektóre z tych wzorców dotyczą różnych urządzeń, inne są bardziej szczegółowe. Dodatkowo, ten e-book od UXPin okazał się dobrym punktem odniesienia.

Zwłaszcza małe ekrany oferują mało miejsca na nawigację. Szczególnie zauważalne są strony nieuporządkowane i zagmatwane.

Podobnie jak w przypadku wzorców projektowych UI, warto zorientować się na już istniejących stronach internetowych i udanych aplikacjach internetowych i przeanalizować je:

  • Gdzie zazwyczaj znajduje się menu?
  • Jak to wygląda?
  • Co się stanie, gdy go nacisnę? 

Należy jednak podchodzić do tego krytycznie, aby nie powielać żadnych błędów czy "złych" elementów UX. 

Najlepsze praktyki projektowania mobilnego UX
Crustac.fr wybrał UI Pattern Burger Menu, aby nawigacja była intuicyjna dla wszystkich.

9. formularze

Długie formularze mogą być męczące i szybko wydają się zagmatwane. Ogólnie rzecz biorąc, powinieneś używać formularzy na urządzeniach mobilnych tylko wtedy, gdy jest to konieczne. Integrując formularze, należy upewnić się, że prosimy tylko o tyle danych, ile jest rzeczywiście konieczne i udostępniamy użytkownikowi odpowiednią klawiaturę. Robisz to za pomocą odpowiednich typów formularzy HTML. To mówi przeglądarce, czym jest wejście. Do dyspozycji jest również odpowiednia klawiatura.

Alternatywnie, można zintegrować automatyczne wypełnianie lub sugerowanie treści. Lub użyj logowania do mediów społecznościowych zamiast długiego procesu rejestracji.

Najlepsze praktyki projektowania mobilnego UX
Logowanie społecznościowe (zwane również pojedynczym logowaniem) na Pinterest.

10. informacja zwrotna

Ponieważ korzystamy z urządzeń mobilnych za pomocą rąk, oczekujemy prawdziwej informacji zwrotnej: opartej na rzeczywistych obiektach. Może to być, na przykład, przycisk, który wydaje się być wciśnięty, gdy go naciskamy.

Jeśli ten rodzaj informacji zwrotnej nie pasuje do Twojej koncepcji, to i tak ważne jest, aby przekazać jakąś informację zwrotną. Kto nie nacisnął link lub przycisk wiele razy z rzędu i nie był pewien, czy to po prostu nie działa lub połączenie internetowe nie ma. To jest coś, czego należy unikać. Istnieją na to popularne sztuczki, takie jak animacje ładowania. Ważne jest to, że użytkownik: wewnątrz wiedzieć, że ich interakcja pracował i coś się stanie.

11. obsługa błędów

Błędy są popełniane. Przypadkowo trafiasz na zły link i lądujesz na złej stronie. Albo wysyłasz coś, co nie było jeszcze gotowe. Ważne jest, aby błędy nie miały żadnych (lub jak najmniejszych) negatywnych konsekwencji. Dobrze nadają się do tego funkcje cofania i przyciski wstecz. Przycisk home jest tutaj również niezwykle ważny: to kotwica, jeśli Twoi użytkownicy się zgubią. Dzięki temu zawsze wiedzą, jak wrócić na stronę główną.

12. prędkość

Czas ładowania strony może być również problemem na urządzeniach mobilnych. Zwłaszcza jeśli chcesz uzyskać dostęp z niestabilnych sieci, czas oczekiwania nie powinien być tak długi, aby zniechęcić odwiedzających.

13 Dostępność

WordPress Dostępność: Jak stworzyć dostępną stronę internetową

Dostępność w serwisie WordPress jest ważnym elementem przy tworzeniu stron internetowych. Ale jak bardzo dostępna jest strona WordPress ? Dlaczego dostępność jest tak ważna? A jak sprawić, by Twoja strona była dostępna dla wszystkich? Jeśli zadajesz sobie te pytania, nasz przewodnik po dostępności jest dla Ciebie.

Dostępność jest tematem międzyplatformowym, który w końcu zyskuje coraz większe znaczenie. Podstawowa idea i misja: Sieć musi być dostępna dla wszystkich ludzi. Jest to szczególnie istotne dla osób z takimi niepełnosprawnościami, które mogą wpływać na sposób dostępu i korzystania z sieci.

Jeśli zignorujesz kwestię dostępności, już dziś wykluczasz 20 procent światowej populacji z możliwości korzystania z Twojej witryny. Krótko mówiąc, zaniedbywanie dostępności nie jest dobre dla Twojej firmy. Ale co ważniejsze, jest to straszne dla tworzenia bardziej sprawiedliwego i uczciwego świata.

Narzędzia do testowania UX

W zależności od tego, jak zbudowana jest Twoja strona, możesz mieć sposób na bezpośrednią edycję widoku mobilnego. Z reguły koniecznych jest kilka ręcznych korekt CSS. Do testowania nadaje się kilka możliwości:

  • Narzędzia inspekcyjne w przeglądarce: Popularne przeglądarki oferują możliwość sprawdzenia swojej strony za pomocą tzw. narzędzi deweloperskich. Możesz tam również sprawdzić swoją stronę w różnych rozmiarach urządzeń. Inne dobre narzędzia do testowania stron to Responsinator i BrowserStack Responsive.
Najlepsze praktyki projektowania mobilnego UX
Narzędzia dla programistów w Google Chrome
  • W urządzeniu: Najbardziej efektywnym sposobem wyświetlania Twojej strony internetowej jest samo urządzenie. Dlatego nie powinno zabraknąć testów na własnym telefonie komórkowym lub tablecie. Ponieważ posiadanie każdego urządzenia w domu byłoby bardzo kosztowne, istnieją tak zwane emulatory.
  • Emulatory: To oprogramowanie jest dostarczane przez samego producenta systemu operacyjnego. Tam możesz tworzyć i oglądać swoje wyniki bezpośrednio w przeglądarce - dostosowane do wielkości urządzenia i danego systemu operacyjnego, takiego jak Android lub iOS.

Podsumowanie: Najlepsze praktyki projektowania mobilnego

Wdrażając te wskazówki, możesz sprawić, że Twoje doświadczenia mobilne będą lepsze i przyciągną więcej klientów. A może przykłady i najlepsze praktyki pomogą Ci rozwinąć nowe pomysły na Twoją stronę. Niestety, projektowanie mobilne jest nadal często zaniedbywane na stronach internetowych - co negatywnie wpływa na współczynnik konwersji użytkowników mobilnych.

Aby uzyskać więcej informacji na temat projektowania mobilnego UX, gorąco polecam Google's Web Fundamentals i ten artykuł dla lepszego projektowania mobilnego UX.

Twoje pytania dotyczące Mobile UX Design

Jakie masz pytania do Sonji na temat mobilnego UX designu? Czekamy na Twój komentarz. Interesujesz się projektowaniem i tworzeniem stron internetowych? Następnie śledź RAIDBOXES na Twitterze, Facebooku, LinkedIn lub poprzez nasz newsletter.

Po ukończeniu studiów z zakresu projektowania gier i twórczego pisania w malowniczym Auckland (w Nowej Zelandii) Sonja Hoffman zadecydowała o tym, by dalej rozwijać się jako webdesigner oraz specjalista ds. tworzenia aplikacji i ich rozwoju. Zajmuje się grywalizacją (to wykorzystanie elementów gier i technik projektowania gier w kontekście niezwiązanym z grami) i badaniami nad motywacją i doświadczeniami użytkownika. Łączy swoją profesję z własnym zainteresowaniem nowościami technologicznymi.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.