Najlepsze praktyki projektowania interfejsu użytkownika dla lepszej skanowalności

Projektanci produktów często przekazują wiele informacji w krótkim czasie. Ci, którzy rozumieją termin „możliwość skanowania”, typowe wzorce śledzenia wzroku i nowoczesne zasady projektowania, są lepiej przygotowani do tworzenia łatwo zużywalnych treści i „lepkich interfejsów użytkownika”.

Każdego dnia internet powiększa się o nowe aplikacje, strony internetowe, artykuły i nie tylko. Coraz trudniej jest przyciągnąć uwagę przeładowanych informacjami użytkowników, którym trudno jest odfiltrować istotne informacje z nieistotnych treści. Ekspert ds. marketingu David Zheng stwierdził, że w ponad 60% przypadków użytkownicy rezygnują i opuszczają witrynę w czasie krótszym niż 15 sekund .

Badania wskazują, że użytkownicy tak naprawdę nie czytają wszystkiego, co widzą, słowo po słowie — skanują, a następnie ustalają, czy materiał jest wart ich czasu. Umożliwiając natychmiastowe skanowanie odpowiednich treści, projektant produktu może przekształcić krótkoterminowego gościa w trwałego użytkownika. Poniżej znajduje się wybór sprawdzonych metod projektowania interfejsu użytkownika, które pomogą wzmocnić ważny czynnik projektowania użyteczności, który często jest pomijany: skanowalność .

Co to jest skanowanie?

Eksperci UX z Nielsen Norman Group przeprowadzili badania, aby odpowiedzieć na pytanie: Jak ludzie czytają w sieci? Jego odkrycia były proste. Nie.

Grupa stwierdziła, że ​​tylko 16% odwiedzających witrynę po raz pierwszy prawdopodobnie przeczyta ją słowo po słowie. Pozostałe 84% szybko skanuje w poszukiwaniu elementów przechwytujących, takich jak nagłówki, zdania, obrazy lub animacje, zanim zdecyduje się zagłębić w materiał. To zachowanie nie ogranicza się do interfejsów cyfrowych. Na przykład ludzie rzadko czytają każde słowo w gazecie. Zamiast tego skanują te same elementy — nagłówki, obrazy itp. — aby określić, co jest godne ich czasu.

Skanowalność to zatem podejście polegające na układaniu treści, dzięki czemu można je łatwo zeskanować. Często wystarczy krótki czas, aby zaimponować odwiedzającym wartościową treścią na ekranie, co sprawia, że ​​pełna optymalizacja interfejsu pod kątem tego, jak użytkownicy czytają w sieci, ma kluczowe znaczenie. Niezależnie od tego, czy produkt cyfrowy jest stroną internetową, aplikacją, czy innym rodzajem interfejsu użytkownika, skanowanie jest jednym z najważniejszych czynników projektowania przyjaznego dla użytkownika.

Korzyści z interfejsu do skanowania

Idealnym sposobem określenia skanowalności produktu cyfrowego jest obserwacja go z perspektywy użytkownika i udzielenie odpowiedzi na te kluczowe pytania:

1. Czy zawartość strony odpowiada oczekiwaniom odbiorców?
2. Czy główne przesłanie strony jest łatwe do zrozumienia w krótkim czasie?

Chociaż tworzenie interfejsów do skanowania wymaga wysiłku, na dłuższą metę opłaca się to, tworząc lepki projekt interfejsu użytkownika. Badanie Nielsen Norman Group pokazuje, że strony zoptymalizowane pod kątem skanowania stają się znacznie bardziej efektywne w następujący sposób:

• Użytkownicy mają krótszy czas realizacji zadań
• Użytkownicy mogą łatwo określić, czy treść jest dla nich odpowiednia
• Użytkownicy popełniają mniej błędów we wspomnieniach
• Użytkownicy lepiej rozumieją strukturę strony
• Witryna otrzymuje korzystniejsze subiektywne oceny pod względem wiarygodności i jakości treści
• Współczynniki odrzuceń są zmniejszone
• Zwiększa się prawdopodobieństwo ponownych odwiedzin
• Poprawiono optymalizację wyszukiwarek (SEO)

Siła nawyków użytkownika we wzorcach skanowania

Każdy inaczej konsumuje treści. Jednak dzięki badaniom pojawiły się dobrze zdefiniowane wzorce śledzenia wzroku. Wiedza o tym, jak użytkownicy wchodzą w interakcję z interfejsami w ciągu pierwszych kilku sekund, może pomóc projektantom ustalić priorytety treści, umieścić ważne informacje w głównych widocznych strefach i ustanowić silną hierarchię wizualną.

Według Nielsen Norman Group istnieje siedem powszechnych wzorców, w których użytkownicy skanują interfejs:

• Słynny wzorzec F: Dwanaście lat po odkryciu ten wzorzec jest nadal najpopularniejszym wzorcem skanowania — nawet podczas skanowania interfejsów mobilnych. Oko porusza się poziomo, jak to jest typowe podczas czytania, a następnie przechodzi do treści poniżej. Można to zrobić powoli i systematycznie lub szybko za pomocą bardziej punktowej mapy termicznej.
• Wzór Z: Model zygzakowaty jest typowy dla stron internetowych z jednolitą prezentacją informacji i słabą hierarchią wizualną.
• Wzór ciasta warstwowego: użytkownicy postępują zgodnie z tym wzorcem podczas skanowania nagłówków i podtytułów, aby szybko określić, gdzie (i czy) można znaleźć na stronie informacje, których szukają.
• Spotted Pattern: Twórcy zazwyczaj stosują ten model skanowania, w którym pomijają duże fragmenty tekstu i skanują elementy wizualne, takie jak kolory, kształty i anomalie proporcji, aby znaleźć określoną informację.
• Wzór znakowania: niczym tancerz skupiający się na przedmiocie, aby zachować równowagę podczas kręcenia się, użytkownicy podczas przewijania skupiają wzrok na jednym miejscu — to bardzo powszechny wzór w przypadku mobilnego UX.
• Pomijanie wzorca: użytkownicy celowo pomijają pierwsze słowa wiersza, gdy wiele wierszy tekstu na liście zaczyna się od tych samych słów.
• Wzorzec zaangażowania: jest to rzadki wzorzec i występuje tylko wtedy, gdy użytkownik jest bardzo zainteresowany treścią i zmotywowany do jej wykorzystania.

Wzorce przyjęte przez użytkownika będą dotyczyć przede wszystkim motywacji odwiedzania strony internetowej: Jakiego typu informacji poszukuje? Ile czasu są w stanie poświęcić na jej odnalezienie? Czy istnieją inne strony internetowe, które mogłyby szybciej dostarczyć te informacje?

Dostarczanie wartości poprzez badania użytkowników i wzorce skanowania

Dr Donald Norman, badacz kognitywistyki, który ukuł termin „ projektowanie zorientowane na użytkownika ”, napisał: „Nie wystarczy, że tworzymy produkty, które działają, są zrozumiałe i użyteczne, musimy także tworzyć produkty, które przynoszą radość i ekscytację , przyjemność i zabawa, i tak, piękno w życiu ludzi”.

Badania użytkowników są podstawą projektowania zorientowanego na użytkownika i najlepszych praktyk projektowania interfejsu użytkownika. Następnie, aby poprawić skanowalność interfejsu cyfrowego, projektant musi zrozumieć użytkownika końcowego. Kiedy wzorce interfejsu użytkownika są projektowane z perspektywy użytkownika końcowego, pojawia się naturalne i intuicyjne doświadczenie.

Skuteczne rozwiązania nie są tworzone z abstrakcji. Poniżej znajduje się zestaw produktów cyfrowych, które są piękne, wykonalne i trwałe. Każdy zespół projektowy zdefiniował kluczowych odbiorców, użył wzorców śledzenia ruchu gałek ocznych i zaprojektował układy treści, aby stworzyć lepki interfejs użytkownika.

Instacart wykorzystuje projektowanie zorientowane na użytkownika poprzez wzorce projektowe interfejsu użytkownika. Znaczna część ich odbiorców składa się z seniorów i użytkowników z wadami wzroku, więc pozycje są wymienione w siatce o wysokim kontraście z wyraźnym naciskiem na główne CTA. Konstrukcja pozwala na tryb skanowania Spotted Pattern, aby pomieścić stałych gości.

Yelp obsługuje użytkowników poszukujących absolutnie najlepszych restauracji, sklepów, klubów nocnych, jedzenia itp. Ludzie często oceniają recenzje na podstawie własnych kryteriów i dokładnych badań, dzięki czemu wzorzec F jest najbardziej odpowiednim modelem skanowania. Dlatego Yelp prezentuje treści w sposób łatwy do skanowania, z naciskiem na określone elementy, takie jak oceny, obrazy i adresy.

Airbnb jest prawdopodobnie jedną z najbardziej lubianych aplikacji, w dużej mierze dzięki badaniom użytkowników. Ponieważ wiedzą, że ich użytkownicy często korzystają z urządzeń mobilnych, projektują je tak, aby uwzględnić Wzorzec oznaczania. Przejrzysty i intuicyjny interfejs został zaprojektowany tak, aby podkreślić duże obrazy mieszkań na całej szerokości. Celowo ograniczyli liczbę obrazów okładek na ekran do dwóch, aby użytkownik mógł odpowiednio poświęcić swój czas i zobaczyć, czy oferta wpadnie mu w oko, czy nie.

Jednym z czynników, o których należy pamiętać podczas poprawiania możliwości skanowania produktu cyfrowego, jest określenie typu urządzenia, na którym będzie on oglądany. Platforma mobilna Airbnb otrzymuje znaczny ruch. Jak widać na mapie termicznej użycia kciuka, Airbnb strategicznie umieściło najczęściej używane elementy interfejsu użytkownika, takie jak „Eksploruj” i „Zapisane wyszukiwania”, w łatwy sposób podczas przewijania i skanowania.

Najlepsze praktyki projektowania interfejsu użytkownika dla lepszej skanowalności

Utwórz właściwą hierarchię wizualną

Wizualna hierarchia interfejsu cyfrowego odnosi się do rozmieszczenia i prezentacji elementów projektu interfejsu użytkownika w celu komunikowania poziomów ważności, dzięki czemu użytkownicy mogą szybko wyszukiwać żądane informacje. Istnieje kilka czynników przy projektowaniu układu z odpowiednią hierarchią wizualną:

• Rozmiar
• Kolor
• Kontrast
• Bliskość
• Wyrównanie
• Negatywna przestrzeń
• Powtórzenie

Biorąc pod uwagę te wzorce projektowe interfejsu użytkownika podczas tworzenia projektu układu interfejsu użytkownika, projektant zapewni, że produkt końcowy będzie miał świetnie wyglądający, harmonijny i intuicyjnie skanowalny układ.

Strona wyników wyszukiwania Google wykorzystuje wszystkie czynniki hierarchii wizualnej w celu zwiększenia możliwości skanowania. Nagłówki podkreślone są kolorem, rozmiarem, a następnie kontrastem. Negatywna przestrzeń otaczająca każdy nagłówek sprawia, że ​​jest on pierwszą rzeczą, którą użytkownik zeskanuje.

Gdy użytkownik znajdzie odpowiedni nagłówek, może sprawdzić jego wiarygodność — element, który jest łatwo rozpoznawalny ze względu na kolor i bliskość. Następnie, aby lepiej ocenić wynik, zagłębią się w kopię treści, która jest spójna pod względem koloru, rozmiaru i bliskości. Oprócz tych czynników powtarzanie i wyrównanie sprawiają, że wyniki wyszukiwania Google są ogólnie łatwe do skanowania.

Wykorzystaj ujemną przestrzeń

Genialny Claude Debussy powiedział kiedyś: „Muzyka to przestrzeń między nutami”. To samo odnosi się do skanowalności — ujemna przestrzeń między elementami jest tym, co sprawia, że ​​układ jest udany. Właściwa ilość ujemnej (białej) przestrzeni wokół elementów interfejsu użytkownika skupia uwagę na samych elementach. Podkreśla treść i zapewnia niezbędną przestrzeń do oddychania, aby układ nie był zagracony. Bez przestrzeni oddechowej ludzki mózg jest mniej skłonny do skanowania interesujących miejsc i bardziej podatny na dezorientację.

Użyj podtytułów do podsumowania treści

Ludzie często reagują negatywnie na duże fragmenty tekstu. Może to wywołać założenie, że stracą czas, jeśli akapit nie będzie odpowiadał ich zainteresowaniom. Najlepsze praktyki projektowania interfejsu użytkownika oferują rozwiązanie tego problemu. Dodając krótkie podtytuły na początku długich artykułów, użytkownik ma ostateczny wgląd w temat.

Pisząc podtytuł, ważne jest, aby był on rzeczowy. Po prostu przekaż kluczowe przesłanie, jakie oferuje poniższa treść.

Twórz listy punktowane i numerowane

Mózg ludzki jest bardzo systematyczny — obserwuje treść, a następnie grupuje ją w znaczące jednostki. Dlatego też użytkownik z większym prawdopodobieństwem zrozumie listę punktowaną lub numerowaną niż kilka punktów połączonych w tekstowy akapit.

Negatywna przestrzeń tworzona przez listy ułatwia użytkownikowi skanowanie, dlatego warto uważnie szukać okazji. Jeśli więcej niż dwa punkty w tekście są równoległe do siebie i każdy z nich wymaga nie więcej niż dwóch zdań do opisania, jest to silna kandydatka na listę. Nielsen Norman Group zapewnia jeszcze głębszy wgląd w tworzenie punktowanych treści cyfrowych.

Wizualizuj zawartość

Współcześni użytkownicy cyfrowi są naturalnie wizualni i prawdopodobnie nie zawsze dobrze reagują na treść tekstową (nawet jeśli jest ona doskonale ustrukturyzowana i przestrzega wszystkich wskazówek dotyczących projektowania interfejsu użytkownika, aby zapewnić idealną skanowalność). Środowisko zewnętrzne zawsze będzie czynnikiem. Dlatego, aby zrównoważyć układy z dużą ilością tekstu, użycie obrazów i grafik oferuje zarówno informacyjne, jak i atrakcyjne emocjonalnie przerwy wizualne. Jak to się mówi, obraz jest wart tysiąca słów!

Oryginalne wizualizacje (ilustracje, wciągające zdjęcia itp.) mogą z łatwością przykuć uwagę użytkownika i wspierać ogólną koncepcję stylistyczną. Co więcej, mogą poprawić hierarchię wizualną i sprawić, że tekst będzie łatwiejszy do strawienia. Istnieje jednak niebezpieczeństwo, że grafika może wywołać efekt kontrujący, jeśli nie zostanie użyta prawidłowo. Przed przekształceniem kluczowych pomysłów w grafikę bardzo ważne jest, aby projektanci w pełni rozumieli treści, które projektują.

Ustaw odpowiedni nacisk na CTA

Większość cyfrowych doświadczeń ma na celu wywołanie określonego działania od użytkownika. Chociaż przyciski wezwania do działania (CTA) często wyglądają na bardzo proste, są strategicznie zaprojektowane, aby pomóc użytkownikowi w wykonaniu czynności — takiej jak kupowanie, dodawanie do koszyka lub po prostu przejście do innej strony.

Najlepsze praktyki projektowania interfejsu użytkownika sugerują umieszczanie CTA blisko treści opisującej akcję, co czyni ją intuicyjną dla użytkownika. Skutecznym sposobem sprawdzenia, czy CTA jest odpowiednio proporcjonalne, kolorowe i umiejscowione, jest tymczasowe przekształcenie końcowego projektu w skalę szarości. Jeśli CTA pozostaje wyraźnie widoczne i podkreślone, lepki interfejs użytkownika jest dobrze wykonany.

Znaczenie skanowalności

Istnieje wiele elementów, które określają, czy projekt układu interfejsu użytkownika będzie dobrze odbierany przez ludzi, takich jak trafność treści, rozwiązania konkurencji i logika biznesowa. Według Forbesa skanowalność może być najbardziej pomijanym czynnikiem content marketingu. Tworząc treści, które można zeskanować, krótkoterminowy gość może stać się długotrwałym użytkownikiem.

Treści, które można zeskanować, pokazują użytkownikowi końcowemu, że jego czas jest ceniony i daje możliwość zrozumienia podstawowego przesłania, po prostu rzucając okiem na projekt układu. Wirusowy bloger i profesor dziennikarstwa Kim Keller zwraca uwagę projektantom, że „rozpoczynasz rozmowę z kimś, kogo chcesz jako klient. To związek, a żaden związek nie przetrwa, jeśli nie spędzicie razem czasu. Szanuj ich czas i spraw, aby był opłacalny”.

• • •

Dalsza lektura na blogu Toptal Design:

• Najlepsze praktyki projektowania interfejsu użytkownika i typowe błędy
• Puste stany – najbardziej pomijany aspekt UX
• Prostota jest kluczem – odkrywanie minimalistycznego projektowania stron internetowych
• Zasady heurystyczne dla interfejsów mobilnych
• Projektowanie pod kątem czytelności — przewodnik po typografii internetowej