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!

Dlaczego Mobile UX Design?

Ruchy projektowe, takie jak mobile first , od jakiegoś czasu próbują przesunąć 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. Jednak nawet ci, którzy prowadzą strony w WordPressie, często korzystają z frameworków takich jak Bootstrap lub gotowych motywów WordPressa. W tym przypadku wyświetlacz responsywny jest już zazwyczaj zintegrowany. Pozwala to zaoszczędzić programistom ogromną ilość czasu. 

Jednak korzystanie z Bootstrapa, motywów WordPressa i innych wiąże się z ryzykiem, że projekt jest przeznaczony dla komputerów stacjonarnych, a potem dopiero dostosowywany do urządzeń mobilnych.

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

Projektowanie doświadczeń użytkownika (UX) opiera się na rozwiązywaniu problemów. Pytanie wyjściowe zawsze brzmi: Jakie problemy mogą mieć użytkownicy i jak je rozwiązać? W kontekście urządzeń mobilnych należy rozważyć jedno zasadnicze pytanie: Jakie dodatkowe problemy pojawiają się, gdy użytkownicy odwiedzają Twoją witrynę WordPress z urządzenia mobilnego?

Wielu z nas używa swoich smartfonów, zwłaszcza gdy jesteśmy w ruchu. Na doświadczenia użytkowników 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 wtedy mniej dokładna. Poziomy światła mogą się szybko zmieniać między jasnym a ciemnym. Odbiór może zmieniać się między dobrym i złym, a nawet całkowicie ustać. Osoby odwiedzające Twoją witrynę WordPress mogą korzystać z planów przedpłaconych, więc staraj się unikać stron, które w krótkim czasie zużywają dużo danych.

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

Mniejsza jest też chęć do czytania lub przewijania dużej ilości tekstu. Szukamy informacji o jasnej 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: W telefonie komórkowym albo szukamy konkretnych informacji, albo staramy się zabić nasz 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?
• Jakie są możliwości kontaktu?
• Jakie produkty są oferowane?
• Jakie są ceny?

Pozostaje tylko pytanie: czy Twoja strona WordPress 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.

13 Zasad projektowania UX dla urządzeń mobilnych

1. Treść

Osoby odwiedzające Twoją stronę internetową mają różne cele w zależności od tego, z jakich urządzeń korzystają, by wejść na Twoją stronę. Długie teksty na urządzeniach mobilnych często oznaczają konieczność przewijania ich, by znaleźć to, po co przyszli. Jako użytkownicy urządzeń mobilnych szukamy przede wszystkim szybkich, zwięzłych informacji. Ci, którzy odwiedzają twój sklep na urządzeniach mobilnych, częściej chcą wiedzieć, jakie produkty oferujesz, niż dowiedzieć się więcej o twoim pochodzeniu.

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. Może się tak zdarzyć, jeśli jest to coś, co i tak nie działa w telefonie. Lub jeśli ilość zużytych danych przewyższałaby korzyści dla użytkownika.
• Skróć treść: Możesz użyć tej samej struktury na swojej stronie WordPress, skracając jednak odpowiednio długie treści i linkując je na przykład do podstron. W ten sposób odwiedzający mogą sami zdecydować, czy te informacje są dla nich istotne, 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łam zawartość strony internetowej restauracji (po lewej), aby była bardziej przyjazna. Skróciłam tekst i podlinkowałem do podstrony z CTA (po prawej). Dostosowałem również typografię, ale o tym później.

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:

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

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. Ale zwłaszcza 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:

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.

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

Obrazy powinny mieć odpowiedni rozmiar i być wyświetlane w tym rozmiarze, tak by nie trzeba było niczego zniekształcać ani skalować. Pomaga to także uniknąć niepotrzebnie długiego czasu ładowania. Przejście między formatem poziomym i pionowym może być najtrudniejsze: W zależności od zawartości obrazka powinieneś pokazywać tylko jego część lub specjalnie zapisywać obrazki na urządzenia mobilne. W przypadku stron z wieloma obrazami powinieneś zintegrować funkcję Lazy Load lub użyć odpowiednich wtyczek WordPressa. 

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. 

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

• Kontrast mię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 witryny. Dobry kontrast między elementami ułatwia przeglądanie witryny. ContrastChecker.com analizuje dobór kolorów i informuje, czy zestawione ze sobą kolory mają wystarczający kontrast.
• 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.

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 będą mogli jeszcze szybciej przejrzeć tekst, a mimo to wynieść z niego istotne informacje. Niektóre czcionki generalnie nie nadają się na małe ekrany, ponieważ tracą swoją czytelność po przeskalowaniu. Jasne czcionki, które wyglądają elegancko na komputerze stacjonarnym, mogą być również mniej czytelne na smartfonie.

7. Nawigacja

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 dominuje jako podstawowe menu w telefonach komórkowych. Ale także na pulpicie coraz częściej widzimy pionowe menu zamiast poziomego. Drugorzędne menu jest zwykle umieszczone nad lub pod nim, ewentualnie w nieco mniej widocznym miejscu. Może też być 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, by odwiedzający mogli zawsze łatwo zorientować się, gdzie się znajdują.

CTA & Linki

Elementy interaktywne powinny być wyświetlane w większym rozmiarze. Dzięki temu odwiedzający twoją stronę wiedzą, co mogą na niej zrobić. I mogą kliknąć na to, co chcą. Układ elementów też odgrywa rolę. Należy zostawić wystarczająco dużo miejsca, by zmniejszyć ryzyko przypadkowego dotknięcia niewłaściwego linku lub przycisku. Przyciski takie jak "Wyloguj się", "Usuń", "Prześlij" powinny być umieszczone w pewnej odległości od innych call-to-action, aby nie zostały przypadkowo uruchomione.

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, przy tworzeniu strony internetowej lub sklepu internetowego 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. Ten e-book autorstwa UXPin również okazał się dobrym przewodnikiem.

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 postępować krytycznie, aby nie powielać żadnych błędów lub "złych" elementów UX. 

9. Formularze

Długie formularze mogą być męczące i szybko mogą stać się zagmatwane. Ogólnie rzecz biorąc, powinieneś używać formularzy na urządzeniach mobilnych tylko wtedy, gdy jest to konieczne. Integrując formularze, powinieneś upewnić się, że prosisz tylko o tyle danych, ile jest rzeczywiście konieczne, i że udostępniasz użytkownikowi odpowiednią klawiaturę. Możesz to zrobić, używając odpowiednich typów formularzy HTML. Informuje to przeglądarkę, czym jest dane wejściowe. Jest też 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.

10. Feedback

Ponieważ używamy 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, kiedy go naciskamy.

Jeśli tego typu informacja zwrotna nie pasuje do twojej koncepcji, to i tak ważne jest, by ją przekazać. Któż z nas nie naciskał wiele razy z rzędu jakiegoś linku lub przycisku i nie był pewien, czy po prostu nie działa, czy też połączenie internetowe nie działa. To jest coś, czego należy unikać. Istnieją na to popularne sztuczki, takie jak animacje ładowania. Ważne jest, by użytkownicy wiedzieli, że ich interakcja zadziałała i że coś się wydarzy.

11. Postępowanie z błędami

Błędy są popełniane. Przypadkowo wciskasz zły link i trafiasz na niewłaściwą stronę. Albo wysyłasz coś, co nie było jeszcze gotowe. Ważne jest, by błędy nie miały żadnych (lub jak najmniejszych) negatywnych konsekwencji. Nadają się do tego funkcje cofania i przyciski wstecz. Przycisk home jest tu również niezwykle ważny: to podstawa, jeśli Twoi użytkownicy się zgubią. Dzięki temu zawsze wiedzą, jak wrócić na stronę startową.

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, żeby odstraszał odwiedzających.

13. Dostępność

Dostępność jest kwestią międzyplatformową, która 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ą mieć wpływ na sposób, w jaki ludzie uzyskują dostęp do sieci i z niej korzystają.

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: Najpopularniejsze przeglądarki umożliwiają sprawdzenie witryny za pomocą tzw. narzędzi dla programistów. Można tam również sprawdzić witrynę na urządzeniach o różnych rozmiarach. Inne dobre narzędzia do testowania stron internetowych to Responsinator i BrowserStack Responsive.

• 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.
• Emulatoren: 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.

Wnioski dotyczące projektowania UX dla urządzeń mobilnych

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ł na temat lepszego projektowania mobilnego UX.