5 porad dotyczących mobilnego UX, które powinien przestrzegać każdy projektant

Obecnie dużo uwagi poświęcamy rozwiązywaniu problemów z urządzeniami mobilnymi, w tym problemów z wydajnością urządzeń przenośnych, ponieważ użytkownicy nadal przyklejają się do swoich mniejszych urządzeń.

Zazwyczaj problemy te są rozwiązywane po uruchomieniu witryny, gdy w raportach Google Search Console dotyczących użyteczności na urządzeniach mobilnych zaczynają pojawiać się błędy. Chociaż zespoły programistyczne często potrafią rozwiązać takie błędy, projektantom znacznie wydajniej jest zrozumieć i wdrożyć najlepsze praktyki dotyczące mobilnego UX od samego początku.

Szybkość mobilna jest również ważnym czynnikiem optymalizacji pod kątem wyszukiwarek, więc projektanci i programiści muszą rozważyć, jak wszystko, od animacji po obrazy, wpłynie na te dane.

Skoncentruj się na rozstawieniu elementów projektu

Rozmieszczanie elementów projektu to nie tylko tworzenie ładnego przepływu wizualnego; chodzi o to, by Twoja witryna była łatwa w użyciu dla wszystkich użytkowników, także tych korzystających z urządzeń mobilnych.

Częstym błędem w obsłudze urządzeń mobilnych w Google Search Console jest to, że „klikalne elementy są zbyt blisko siebie”.

Stwarza to frustrujące wrażenia dla odwiedzających na mniejszych urządzeniach, na których nieumyślnie klikają elementy podczas próby poruszania się po witrynie.

Z punktu widzenia mobilnego projektowania UX przyciski i elementy interaktywne lub klikalne muszą być wystarczająco duże i umieszczone wystarczająco daleko od siebie w projekcie.

Na komputerach użytkownicy nawigują za pomocą myszy, która jest bardzo precyzyjnym narzędziem, podczas gdy na urządzeniach mobilnych większość użytkowników używa kciuków. Kciuki są zwykle większe niż mały kursor myszy i mogą być nieco bardziej niezgrabne, zwłaszcza jeśli próbujesz poruszać się po witrynie podczas chodzenia lub wykonywania wielu zadań.

Dlatego musisz zaprojektować wystarczająco dużo miejsca między przyciskami i elementami, aby odwiedzający nie miał frustrujących doświadczeń mobilnych.

Musisz także wziąć pod uwagę dostępność i sposób, w jaki odwiedzający mogą trzymać mniejsze urządzenie. Niektórzy mogą trzymać telefon lub tablet lewą ręką, inni prawą, a niektórzy obiema rękami. Niezależnie od tego projekt witryny musi być łatwy w nawigacji.

Wreszcie, odwiedzający używają kciuka do przewijania urządzenia i przeglądania strony internetowej, więc musisz upewnić się, że nie ma dużych klikalnych elementów, które mogą przypadkowo dotknąć podczas przewijania.

Zapewnij czytelność tekstu i czcionki

Oprócz odstępów innym częstym błędem dotyczącym obsługi na urządzeniach mobilnych w raportach Google Search Console jest „tekst jest za mały, aby go przeczytać”. Podczas gdy programista może dostosować niektóre aspekty rozmiaru czcionki, istnieje kilka najlepszych praktyk UX, które zespoły projektowe mogą wdrożyć od samego początku pod względem czytelności.

Najpierw należy wybrać czytelny krój pisma. Pamiętaj, że użytkownicy często spacerują, wykonują wiele zadań jednocześnie lub przebywają na zewnątrz na swoich mniejszych urządzeniach i mogą znajdować się w nieidealnych sytuacjach, próbując poruszać się po Twojej witrynie.

Tworzenie wizualnej hierarchii pod względem rozmiaru czcionki to kolejny sposób, aby pomóc użytkownikom mobilnym w szybkim skanowaniu i zrozumieniu zawartości strony. Pomaga również na urządzeniach mobilnych lub tabletach, gdzie tekst nagłówka może przechodzić do następnego wiersza. Używanie tej samej czcionki i rozmiarów na całej stronie może spowodować zamieszanie wokół znaczenia strony.

W swoich projektach możesz również zwiększyć wysokość linii między wierszami tekstu, aby zwiększyć czytelność strony.

Gdy już zdecydujesz się na czcionkę i jej rozmiar, musisz również wziąć pod uwagę współczynniki kontrastu kolorów.

Ponieważ odwiedzający mogą przebywać w pomieszczeniach lub na zewnątrz, albo przy słabym oświetleniu, ważne jest przestrzeganie standardów kontrastu między kolorami tła i pierwszego planu.

Odgrywa to również rolę w dostępności i tworzeniu strony internetowej zgodnej z ADA. Zgodnie ze standardami WCAG 2.1 zalecany jest współczynnik kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu.

Upewnij się, że najechanie kursorem i animacja są zgodne z najlepszymi praktykami

Większość dzisiejszych projektów internetowych zawiera mikroanimacje i elementy interaktywne; to częsta prośba klientów w procesie przeprojektowania.

Dodawanie ruchu do witryny to często współpraca między projektantami i programistami, ponieważ animacja może wpływać na czas ładowania strony i powodować niekończącą się kontrolę jakości, jeśli nie jest dobrze zakodowana. Wybierając animacje w procesie projektowania, należy również zaplanować, czy te interakcje będą miały miejsce na urządzeniach mobilnych.

Ze względu na problemy z wydajnością często wyłącza się złożone animacje i tła wideo na urządzeniach mobilnych, ponieważ mogą one spowolnić czas wczytywania witryny, zwłaszcza dla użytkowników sieci komórkowej. Ten rodzaj zmian jest coraz bardziej powszechny od 2018 roku, kiedy szybkość strony mobilnej stała się jednym z czynników rankingowych Google.

Ogólnie rzecz biorąc, animacja i interakcja powinny być używane w subtelny sposób, aby wspierać wrażenia użytkownika i nie powinny rozpraszać odwiedzającego. Nie powinien też być niezbędnym składnikiem pomagającym odwiedzającemu wykonać akcję.

Najechanie kursorem to kolejny powszechny element projektu, który może wyglądać inaczej na urządzeniach mobilnych. Na pulpicie najechanie kursorem na obiekt lub obraz, który zmienia się lub odsłania tekst, gdy użytkownik najedzie na niego myszą. Chociaż działa to dobrze na dużych urządzeniach, pamiętaj, że na urządzeniach mobilnych odwiedzający nie używają myszy, co oznacza, że ​​będą musieli dotknąć, aby zobaczyć kursor myszy.

Dlatego jeśli masz ramkę lub obraz, który pokazuje tekst po najechaniu kursorem, upewnij się, że wiadomości nie są krytyczne dla kroków odwiedzających.

Omawiając animację, Ty i Twój zespół programistów możecie również zapoznać się z najlepszymi praktykami Google dotyczącymi wskazówek dotyczących animacji internetowych, aby uniknąć błędów związanych z flashem lub przestarzałą technologią.

Zaplanuj rozmieszczenie wyskakujących okienek i elementów stron trzecich

Od zawsze było wiele dyskusji na temat tego, czy używać wyskakujących formularzy na stronach internetowych i czy wdrażać je na urządzeniach mobilnych.

Jednym z argumentów przemawiających za unikaniem wyskakujących formularzy na urządzeniach mobilnych jest to, że odwiedzającemu może być trudniej zamknąć formularz lub wiadomość. Od stycznia 2017 r. Google ostrzega przed natrętnymi reklamami pełnoekranowymi, które blokują widoczność całej zawartości strony dla odwiedzających, ponieważ są one szczególnie problematyczne na urządzeniach mobilnych.

Możesz rozważyć wszystkie te elementy w rozmowach z klientami na temat formularzy wyskakujących i zdecydować o najlepszym doświadczeniu użytkownika dla projektu formularza.

Przyjmując podejście projektowe z myślą o urządzeniach mobilnych, warto zastanowić się, w jaki sposób elementy będą umieszczane na mniejszych urządzeniach. Na przykład przyklejony przycisk po prawej stronie ekranu, który pozostaje podczas przewijania przez odwiedzającego, może działać dobrze na komputerze, ale tego rodzaju przyklejone elementy mogą sprawić, że przestrzeń widoku będzie jeszcze mniejsza na urządzeniu mobilnym.

Chociaż niektóre elementy, takie jak czat na żywo i widżety ułatwień dostępu, mogą zostać dodane w ostatniej chwili, planowanie ich na wcześniejszym etapie procesu projektowania stron internetowych może pomóc w uniknięciu chaotycznego interfejsu dla odwiedzających.

Czat na żywo stał się niezwykle popularnym narzędziem, a widżety czatu często znajdują się w prawym lub lewym dolnym rogu projektu. Oferowanie zaleceń dotyczących rozmieszczenia tych elementów poprzez uwzględnienie ich w makietach projektowych pomoże Ci przewidzieć wszelkie problemy z nakładającymi się elementami.

Ponownie rozważ projekt i rozmieszczenie formularzy

Wypełnianie i przesyłanie formularza na urządzeniu mobilnym lub mniejszym tablecie może być irytującym zadaniem dla odwiedzających. Dlatego tak ważne jest rozważenie alternatywnych opcji dla formularzy w projekcie witryny.

Tworząc nawigację w menu mobilnym, rozważ umieszczenie w nagłówku numeru telefonu „kliknij, aby połączyć”, aby odwiedzający mogli łatwo dotrzeć do firmy.

Podczas projektowania wszystkich formularzy w witrynie najlepszym rozwiązaniem zarówno w przypadku komputerów stacjonarnych, jak i urządzeń przenośnych jest maksymalne zmniejszenie liczby pól formularza – i wyraźne wskazanie pola wymaganego.

Jedną ze wskazówek dotyczących mobilnego korzystania z formularza jest projektowanie etykiet formularzy, a nie tylko używanie tekstu zastępczego w polach formularza. Użytkownik korzystający z urządzenia mobilnego może zostać łatwo przerwany przez inne powiadomienia i interakcje, więc może zostać przerwany w procesie wypełniania formularza i zapomnieć o tym, co zawiera tekst zastępczy. Zapewnienie jasnych etykiet formularzy i komunikatów o błędach jest również ważne dla zgodności z ADA.

Wreszcie, umieszczenie formularza na stronie i sposób, w jaki można to dostosować za pomocą układu responsywnego, ma kluczowe znaczenie, ponieważ umieszczenie formularza może wpłynąć na konwersje.

Wniosek

Biorąc pod uwagę większy nacisk na wydajność urządzeń mobilnych, wdrożenie niektórych z powyższych pomysłów w praktyce podczas projektowania projektów pozwoli zaoszczędzić czas i frustrację podczas uruchamiania tych projektów. Czy istnieją dodatkowe wskazówki dotyczące mobilnego UX, które pomogły w przepływie projektu? Zostaw komentarz poniżej!

Dalej: Rozbuduj swój zestaw umiejętności projektowania stron internetowych dzięki pomocnym kursom online!

Projektowanie mobilnego UX to tylko jedna z wielu rzeczy, nad którymi musisz być na bieżąco jako profesjonalny projektant stron internetowych. Chociaż nie zawsze jest dużo czasu na doskonalenie swoich umiejętności, udział w kursie online to świetny sposób, aby upewnić się, że kontynuujesz naukę.

Ten artykuł zawiera obszerną listę najlepszych kursów online dla projektantów stron internetowych (+ile kosztują), dzięki czemu nie musisz spędzać jeszcze więcej czasu na przeszukiwaniu wszystkich dostępnych opcji!