W artykule:
Argument o responsywnym designie został wygrany. Świadczy o tym sama liczba responsywnych motywów dostępnych w katalogu motywów WordPress, a także mnóstwo wtyczek dostępnych do ulepszania responsywnych witryn.
Ale zainstalowanie responsywnego motywu, a może kilku wtyczek, to nie wszystko. Ważne jest, aby poświęcić trochę czasu na rozważenie doświadczenia użytkownika na wszystkich urządzeniach, z których użytkownicy mogą uzyskiwać dostęp do witryny.
Tradycyjnie rozwijaliśmy się w przeglądarce komputerowej (w końcu łatwiej jest pracować na dużym ekranie) i zbyt łatwo jest przeprowadzić testy w tym samym środowisku, sprawdzając, czy Twoja witryna jest łatwa do interakcji na dużych ekranach za pomocą myszy i klawiatury.
Ale liczba użytkowników mobilnych rośnie.
Witryny, którymi zarządzam, otrzymują obecnie ponad 50% odwiedzin z urządzeń mobilnych. Dlatego podczas tworzenia nowej witryny, niezależnie od tego, czy kodujesz samodzielnie, czy używasz motywów i wtyczek, musisz wziąć pod uwagę wrażenia użytkownika na urządzeniach mobilnych (w tym tabletach).
W tym poście omówię cztery główne obszary mobilnego responsywnego projektowania:
- Dotykowe obszary
- Nawigacja
- Formularze
- Interakcje
W każdym przypadku przyjrzę się czynnikom, które należy wziąć pod uwagę, podam kilka wskazówek, a w stosownych przypadkach wymienię wtyczki lub motywy, które mogą ci w tym pomóc.
Zacznijmy więc od kluczowej funkcji, która oddziela urządzenia mobilne od (większości) komputerów stacjonarnych: dotyku.
UX dla urządzeń dotykowych
Prawie wszystkie urządzenia mobilne, a także coraz większa liczba urządzeń stacjonarnych, mają ekrany dotykowe. To, jak reagują (w sensie płynnej reakcji) i są przyjazne dla użytkownika, zależy od używanych urządzeń, ich sprzętu i systemu operacyjnego. Niektóre mają ekrany pojemnościowe (jak mój Kindle, który reaguje na dotyk czegokolwiek – w tym, irytująco, moja kołdra, gdy upuszczam ją, gdy zasypiam w nocy!). Ale większość będzie miała ekrany rezystancyjne, które reagują tylko na dotyk palca (lub innych części ciała, takich jak Kocia Łapka – sprawdź YouTube) lub niektórych metali.
Różne mobilne systemy operacyjne będą zawierać różne gesty, z których użytkownicy mogą korzystać, aby poruszać się między treściami, zmieniać rozmiar ekranu, przełączać aplikacje i wiele innych. Android i iOS mają dziesiątki gestów, czasami obejmujących skomplikowane kombinacje palców i ruchów; niektóre z nich będą wystarczająco intuicyjne, aby użytkownicy mogli z nich regularnie korzystać, podczas gdy inne są nieco bardziej niszowe.
Ważne jest to, że projekt witryny zapewnia dwie rzeczy:
- Łatwo jest dotknąć odpowiedniego miejsca na ekranie, bez przesuwania palca lub kciuka na inny obszar dotykowy.
- Obszary dotykowe są oczywiste, a użytkownicy będą wiedzieć, co z nimi zrobić.
Spójrzmy na każdą z nich po kolei.
Rozmiar obszarów dotykowych
Obszary dotyku powinny być wystarczająco duże,aby ludzki kciuk mógł je wygodnie dotykać, z marginesami, które zapobiegają przypadkowemu dotknięciu następnego przycisku. Celowo wspominam tutaj kciuki; chociaż kiedy siedzisz przy biurku testując swoją stronę, prawdopodobnie użyjesz palców, użytkownicy trzymający telefon w dłoni prawdopodobnie skorzystają z kciuka, szczególnie w dolnej części ekranu.
Apple zaleca, aby przyciski były co najmniej kwadratowe 44px, ale to, co faktycznie oznacza, będzie się różnić w zależności od rozdzielczości ekranu: więc przetestuj na urządzeniach retina i non-retina, a także tabletach i różnych systemach operacyjnych, gdzie możesz.
Ważne jest również, aby pomyśleć o linkach w tekście, które mogą znajdować się na listach (na przykład nawigacja w stopce) lub w treści treści. Jeśli tekst jest mały, a odstępy między wierszami nie są wystarczające, ludzie mogą przypadkowo dotknąć niewłaściwego łącza lub całkowicie przegapić. Co nie sprawi, że przeglądanie witryny będzie przyjemnym doświadczeniem.
Jednak obszary dotykowe nie zawsze cierpią z powodu zbyt małych rozmiarów. Często pomijane jest to, że mogą być zbyt duże. Jeśli masz obraz w linku, który zajmuje Pełny rozmiar ekranu na urządzeniu mobilnym, może to uniemożliwić użytkownikom przesunięcie palcem w dół obok tego obrazu, ponieważ za każdym razem, gdy go dotkną, link otworzy się. Często widziałem, że dzieje się to z wbudowanymi mapami. Upewnij się, że Twoje obrazy i mapy nie będą wyższe niż wysokość ekranu na najmniejszych urządzeniach mobilnych (realistycznie, 480px wysoki). Lub po prostu usuń link!
Intuicyjność obszarów dotykowych
Zanim ludzie będą mogli wejść w interakcję z obszarami dotykowymi w Twojej witrynie, muszą je rozpoznać jako obszary dotykowe. Dlatego ważne jest, aby projekt Twojej witryny sprawiał, że przyciski, linki i inne elementy, które można kliknąć lub dotknąć, były ładne i oczywiste. To nie tylko pomaga UX, ale także ułatwia dostępność.
Przyciski muszą wyglądać jak przyciski; nie muszą już mieć efektów gradientu ani zaokrąglonych rogów, dzięki rosnącej płaskiej konstrukcji, ale powinny wyróżniać się z tła. Należy również upewnić się, że sam przycisk jest klikalny, a nie tylko tekst w nim. Więc zamiast poniższego kodu dla przycisku:
Zamiast tego użyłbyś tego:
W ten sposób, gdy użytkownik naciśnie sam przycisk, link aktywuje się.
Inne wskazówki mogą pomóc ludziom dostrzec takie obszary. Korzystaj z grafiki i ikon używanych przez natywne aplikacje, ponieważ użytkownicy będą je znać i będą oczekiwać, że zobaczą je w Twojej witrynie.
iOS i Android używają wielu standardowych ikon i sensowne jest użycie czegoś tak podobnego w Twojej witrynie.
Kolejną wskazówką jest umieszczenie obszarów dotykowych i interakcji w Twojej witrynie. Ludzie będą oczekiwać, aby zobaczyć nawigację w pobliżu górnej części Witryny, na przykład. Jeśli Główna nawigacja jest ograniczona na małych ekranach, ikona lub słowo „menu” w łatwo dotykalnym obszarze sprawi, że oczywiste będzie, co ludzie muszą zrobić, aby Menu się pojawiło.
Nie daj się pokusić, aby poświęcić UX na projektowanie: jeśli Twoje menu wygląda ładnie, ale jest niemożliwe do użycia, to nie wykonuje swojej pracy.
Nawigacja
Już poruszyłem (bez kalambura) nawigację w poprzedniej sekcji, ale nawigacja na urządzeniach mobilnych może być szczególnym wyzwaniem. Wynika to głównie z dwóch czynników:
- Pełnowymiarowe menu nawigacyjne zajmuje dużo miejsca i może wyglądać niechlujnie.
- Osoby czytające Twoje treści będą przewijać daleko od menu nawigacji w nagłówku, gdy dotrą do końca.
Wymiana nawigacji w pełnym rozmiarze
Dobrą praktyką jest używanie innego interfejsu dla menu nawigacyjnego na mniejszych ekranach.
Możesz użyć wbudowanych elementów sterujących urządzenia, zmieniając menu w pole wyboru, lub aktywować motyw lub wtyczkę, która zapewnia bardziej atrakcyjne menu, które pojawia się po dotknięciu linku i może być stylizowane do pracy z projektem witryny.
Wtyczka taka jak Responsive Menu konwertuje twoje menu na takie, które jest ukryte na początku, ale wylatuje z boku, gdy użytkownik dotknie go. Możesz określić, co jest wyświetlane w obszarze tappable, a także dostosować stylizację.
Alternatywnie możesz użyć motywu, który zawiera responsywne menu w pakiecie.
Nasz własny motyw Fixer, na przykład, który używa Framework topfront theme, ma ikonę menu, która wyświetla menu po naciśnięciu lub kliknięciu.
Nawigacja gdzie indziej na stronie
Po przeczytaniu długiego posta na blogu na małym ekranie, być może przewijając w dół jardów treści, bólem jest przewijanie z powrotem do góry, aby przejść do innej zawartości. Upewnij się więc, że udostępniasz użytkownikom inne sposoby nawigacji do większej ilości treści po zakończeniu czytania, takie jak:
- Lista powiązanych postów na dole każdego postu, najlepiej z atrakcyjnym obrazem, aby zachęcić do klikania.
- Menu nawigacyjne w stopce, duplikat menu głównego lub mniejsze menu z najczęściej odwiedzaną zawartością. Jest to łatwe do skonfigurowania za pomocą niestandardowego widżetu Menu dostarczanego w pakiecie z WordPress.
- Powtórz menu nawigacyjne u dołu ekranu-dlaczego nie?
World wide web został wynaleziony, aby ludzie mogli poruszać się między stronami internetowymi: upewnij się, że odwiedzający mogą łatwo poruszać się w witrynie, aby nie poruszać się z dala od niej!
Formularze
Wciąż widzę wiele przykładów źle zakodowanych formularzy i pól formularzy. Formularze nie są popularne wśród użytkowników w najlepszych momentach, ale na małych ekranach z klawiaturami, które utrudniają pisanie dużej ilości tekstu, dobrze zaprojektowana forma jest tym bardziej ważna, aby Twoi goście nie poddali się, zanim jeszcze nacisną przycisk Kontakt.
Oto kilka wskazówek dotyczących tworzenia formularzy, które działają dobrze na urządzeniach mobilnych, a także na większych ekranach:
- Dołącz tylko pola, które są absolutnie niezbędne. To musi być pierwsza zasada form. Pola nie są obowiązkowe, chyba że proces obsługiwany przez formularz nie będzie działał bez danych z nich.
- Upewnij się, że pola formularzy są wystarczająco duże, aby ludzie mogli je łatwo wykorzystać i mieć dużo miejsca między nimi.
- Upewnij się, że przycisk Prześlij jest wystarczająco duży,aby ułatwić stukanie.
- Użyj odpowiedniej klawiatury w zależności od typu danych: na przykład dla adresu e-mail Użyj
<input type = "email">, a nie tylko< input>. Otworzy to odpowiednią klawiaturę na tablecie lub smartfonie i znacznie ułatwi pracę użytkownika. Będziesz zadowolony, wiedząc, że najlepsze wtyczki formularzy robią to za Ciebie. Istnieje kilka różnych typów wprowadzania: ten samouczek obejmuje najczęstsze, a także stylizację ułatwiającą dotykanie.
Na szczęście to wszystko nie musi być skomplikowane. Najpopularniejsze wtyczki formularzy (free Contact Form 7 i premium Gravity Forms) wykorzystują prawidłowe kodowanie pól formularzy i mają różny stopień responsywności w swojej konstrukcji. Moje osobiste preferencje dotyczą Gravity Forms, która ma bardziej profesjonalnie wyglądający układ responsywny, jak można się spodziewać po płatnej wtyczce.
Interakcje
Na wszystkich urządzeniach ważne jest, aby doświadczenie użytkownika wokół interakcji ułatwiało użytkownikom poznanie, co się dzieje. Staje się to coraz ważniejsze, ponieważ coraz więcej witryn używa Javascript, aby umożliwić interakcje i aktywność bez odświeżania ekranu lub otwierania nowego.
Na mniejszym ekranie może być trudniej wiedzieć, co się dzieje i kiedy dostępne są interakcje lub ma miejsce aktywność. Apple ma kilka przydatnych wskazówek w wytycznych dla programistów iOS, z których niektóre będą lub nie będą miały zastosowania do stron internetowych, ale oto moje wskazówki:
- Upewnij się, że linki zmieniają kolor po dotknięciu lub kliknięciu, a także po najechaniu kursorem. Użycie
Odp: aktywnyjak równieżOdp: hoverpodczas stylizacji linków. - Jeśli Proces jest uruchomiony, podaj informacje, aby użytkownik wiedział o tym. Podaj wiadomość „działającą” lub „oczekującą” lub coś podobnego.
- Gdy użytkownik przesłał formularz, wyświetli wiadomość zwrotną informującą go o otrzymanym formularzu i upewnij się, że jest on widoczny na małych ekranach. Wtyczki big form zawierają to.
- Jeśli łącza nawigacyjne nie otwierają nowego ekranu, ale przenoszą się do zakotwiczenia na bieżącym ekranie lub otwierają inny element za pomocą Javascript, upewnij się, że coś się dzieje. Ekran powinien się w jakiś sposób zmienić.
- Jeśli użytkownicy dodają dane do Witryny, na przykład dodając coś do koszyka, wyświetli aktualizację statusu gdzieś na ekranie (np. numer obok ikony koszyka). To nie musi pojawić się na stałe, ale może upłynąć po kilku sekundach. Na pulpicie łatwo jest włączyć tego rodzaju rzeczy do paska bocznego lub nagłówka, gdzie są one stale widoczne: na małym ekranie te obszary są na ogół niewidoczne,więc potrzebujesz innej formy opinii.
- Nie otwieraj łączy w nowych oknach. Na pulpicie może to być drobne podrażnienie, ale na telefonie komórkowym oznacza to trzy lub więcej dotknięć, gdy użytkownik przechodzi do ekranu z listą wszystkich otwartych kart, a następnie wybiera tę, na której byli przed otwarciem łącza. Mówi się, że za każdym razem, gdy link otwiera się w nowym oknie, kotek umiera! Najczęściej używanym elementem każdej przeglądarki jest przycisk Wstecz: upewnij się, że odwiedzający mogą z niego korzystać.
- Przetestuj wszelkie lightboxy lub interakcje sproszkowane przez Javascript w swojej witrynie, aby upewnić się, że nie naruszają układu ani nie zawierają treści wypychanych z ekranu na urządzeniach mobilnych. Jeśli tak się stanie, użyj innej wtyczki dla lightbox lub interakcji.
Nauka interakcji z użytkownikami i uczynienie ich tak bezbolesnymi, jak to możliwe, to cały temat sam w sobie. Aby uzyskać więcej porad na temat ulepszania interakcji użytkowników w swojej witrynie, możesz zajrzeć do niektórych specjalistycznych stron internetowych, takich jak UX Magazine lub Interaction Design Foundation.
Wrapping Up
Doświadczenie użytkownika stało się prawdopodobnie najważniejszym elementem projektowania stron internetowych w ciągu ostatniego roku lub dwóch. Ponieważ coraz więcej z nas uzyskuje dostęp do Internetu za pomocą różnych urządzeń i wymagamy, aby witryny były szybkie i łatwe w użyciu, skupiliśmy się na estetyce projektowania stron internetowych w kierunku praktycznych aspektów zapewnienia wysokiej jakości doświadczenia użytkownika.
Na urządzeniach mobilnych istnieją pewne dodatkowe względy UX, które poprawią wrażenia odwiedzających, gdy odwiedzają Twoją witrynę. Jeśli zastosujesz się do tych wskazówek, sprawisz, że odwiedzający będą zadowoleni i uzyskają więcej rozmów i powtarzają wizyty.
Jak projektować / rozwijać dla mobile UX? Masz kciuki na uwadze? Jakich wtyczek używasz? Podziel się swoimi wskazówkami w komentarzach poniżej.
Tagi:
