Jak skanowanie wzrokowe wpływa na hierarchię wizualną w projekcie UX
Podczas gdy tysiąclecia sztuki, od greckich waz do włoskich kaplic, ukształtowały naszą wiedzę na temat tego, czym jest piękno, stosunkowo nowa technologia stojąca za śledzeniem oka dodaje nowej dynamiki do tego, jak wizualnie postrzegamy świat. Co więcej, ta ekscytująca nowa nauka pomaga nam lepiej zrozumieć - i lepiej zaprojektować - strony internetowe, które są zarówno skuteczne, jak i estetyczne.
Projektowanie stron internetowych (jako sztuki wizualnej) opiera się na tych samych zasadach, co bardziej tradycyjne formy sztuki. W tym artykule pokrótce przedstawimy znaczenie organizacji wizualnej, a następnie wyjaśnimy, w jaki sposób wyniki śledzenia oka mogą poprawić układ interfejsów internetowych.
Tworzenie organizacji wizualnej
Nic dziwnego, że wygląd witryny wpływa na jej sukces, ale ważne jest, aby dokładnie określić powody. W swojej gazecie Komunikacja z Hierarchią Wizualną Luke Wroblewski, autor i starszy dyrektor ds. Projektowania produktów w Yahoo !, wyjaśnia, że wizualna prezentacja interfejsu WWW ma kluczowe znaczenie dla:
Poradnictwo
Dobrze zaprojektowany interfejs może poprowadzić użytkowników od jednej akcji do następnej bez poczucia przygnębienia. Bez względu na to, co myślisz o ich praktykach biznesowych, nie ma co do tego wątpliwości Uber to przykład niewiarygodnie gładkiej, ale uporządkowanej strony internetowej. Propozycje wartości znajdują się na górze zwoju, a następnie zabawny suwak, aby poznać różne opcje samochodu, a kończysz logicznym kolejnym krokiem znajdowania przejażdżek w swoim mieście.
Komunikacja
Dzięki dopasowaniu w przeciwieństwie do części informacji, interfejs użytkownika może tworzyć łącza w umyśle użytkownika, komunikując komunikaty bez słowa. Spójrz na popularną stronę projektu Abduzeedo : szerokie kategorie są u góry, polecane treści w środku i szczegółowe kategorie w stopce.
Tworzenie wpływu emocjonalnego
Nie popełniaj błędu myślenia, że twoja strona internetowa jest po prostu zmechanizowanym narzędziem. Strony internetowe mogą budować więzy emocjonalne, a jeśli tak nie jest, konkurencja będzie. W rzeczywistości ludzie mogą być bardziej podatni na wybaczenie braków w interfejsie, jeśli stworzysz pozytyw reakcja emocjonalna . MailChimp jest doskonałym przykładem witryny z interfejsem, który jest użyteczny, lekki i zabawny w użyciu.
Przewidywalne ludzkie oko
Czasami wydaje się, że twoje oczy mają własne umysły. Lata ewolucji dały nam instynkty, by wykryć obiekty i ruchy, które uważamy za ważne, czy to seksowny spacer po drugiej stronie ulicy, czy przytulanka z miśkiem reklamowym. Podczas gdy względna waga, jaką kładziemy na to, co ważne, może być różna dla poszczególnych osób, jedyną stałą są mechanizmy, na których się zachowują. Na dużą skalę większość ludzi obserwuje te same trendy podczas przeglądania strony internetowej.
Tych dwóch trendów omówimy szczegółowo. W an artykuł o zasadach wizualnych Alex Bigman, autor scenariusza dla 99Designs, pokazuje, jak te kultury, które czytają od lewej do prawej, są najczęściej używane i najbardziej przydatne przy projektowaniu układu strony.
Pierwszy, wzór F, jest używany głównie do tekstu (ale może być dostosowany do innych celów). Drugi, Z-Pattern, może być użyty do dowolnego układu wizualnego. Wyjaśnimy różne za i przeciw dla każdego poniżej.
Wzór F.
Wzorzec F to wzorzec, który pojawia się na stronach, które są mocno obciążone tekstem, zazwyczaj blogi, źródła wiadomości, artykuły itp.
W obliczu bloku słów większość czytelników najpierw skanuje pionową linię po lewej stronie tekstu, zazwyczaj szukając słów kluczowych lub punktów zainteresowania w początkowych zdaniach akapitu. W końcu czytelnik znajdzie coś, co im się spodoba i zacznie normalnie czytać, tworząc poziome linie. Końcowym rezultatem jest coś, co wygląda jak litery F lub E.
Jakob Nielson z Nielson Norman Group przeprowadził badanie czytelności na podstawie 232 użytkowników skanujących tysiące stron internetowych. Z swoich badań nagrał to, w co wierzy praktyczne implikacje wzoru F:
- Użytkownicy rzadko będą czytać każde słowo w tekście.
- Pierwsze dwa akapity są najważniejsze i powinny zawierać twój hak.
- Rozpocznij akapity, podtypy i punktory za pomocą przyciągających słów kluczowych.
Jak zawsze, najważniejszy jest lewy górny róg, od którego zaczynają się kultury odczytywane od lewej do prawej. Użytkownik zwykle czyta poziomo w nagłówku, więc tutaj jest dobre miejsce na pasek nawigacyjny i / lub wezwanie do działania. Następnie użytkownik skanuje pionowo po lewej stronie, dopóki nie natknie się na zawartość, która ich interesuje. Wreszcie użytkownik kończy się po prawej stronie strony, doskonałym miejscem z wezwaniem do działania lub reklamą. Po prostu nie pozwól, aby pasek boczny przytłoczył zawartość.
Ale wzorzec F nie jest szablonem - naprawdę nie jest to dokładna praktyka, ale raczej luźny przewodnik opracowany na podstawie trendów większości użytkowników. Miej to na uwadze, ponieważ wzorzec F. traci swoją skuteczność po górnych rzędach F.
Kickstarter wykorzystuje układ kart do wyświetlania projektów fabularnych i nie staje się wizualnie nudny po pierwszych 500 pikselach.
Z drugiej strony, iZettle stosuje bardziej konwencjonalne podejście do Wzorca F na ich stronie głównej. Udaje im się jednak uniknąć szablonowego wyglądu, nakładając główną kopię ("Rozwiń swoją firmę dzięki iZettle") i wezwanie do działania na dużym obrazie tła. Uznalibyśmy to za absolutne minimum dla dostosowania tego wzorca czytania do układu interfejsu.
Wzór Z.
Ponadto wzór Z jest najprostszym i najbardziej uniwersalnym wzorem, popularnie używanym na dowolnej stronie internetowej, która opiera się na tekście. Czytnik najpierw skanuje poziomo w poprzek, rzutki w dół iz powrotem na lewą stronę, a następnie skanuje poziomo ponownie w poprzek dna.
Ważne jest, aby zrozumieć wszechstronny wzór Z. , ponieważ dotyczy głównych wymagań witryny, takich jak hierarchia, branding i wezwania do działania. Jego piękno jest w swojej prostocie i idealnym układzie witryn skupionych wokół wezwania do działania. Jednak w przypadku bardziej złożonej lub nadmiernej zawartości wzór Z może być zbyt prosty.
Myślisz, że wzór Z jest odpowiedni dla twojej strony? Oto kilka sprawdzonych metod optymalizacji korzyści:
- Tło - Zachowaj tło, do którego należy: w tle. Nie chcesz odwracać uwagi od czytnika.
- Punkt # 1 - Punktem wyjściowym jest na ogół miejsce, w którym chcesz umieścić swoje logo.
- Punkt # 2 - chociaż główne wezwanie do działania powinno nadejść później, tutaj jest dobre miejsce na wtórne wezwanie do działania, interpunkcję poziomego paska nawigacyjnego. (Ładny suwak graficzny lub obrazkowy pomoże oddzielić górną i dolną część strony, zachęcając czytelnika do pozostania na przewidywalnej ścieżce wzoru Z.)
- Punkt # 3 - To miłe miejsce, aby zwrócić uwagę na inne linki lub, alternatywnie, doprowadzić wzrok użytkownika do celu końcowego: Punkt # 4.
- Punkt # 4 - Jako "linia mety" jest to idealne miejsce na Twoje główne wezwanie do działania.
Pierwszą rzeczą, którą chcesz zrobić, jest ustalenie priorytetów dla elementów na twojej stronie, abyś znał najbardziej i najmniej ważne. Odtąd jest to po prostu kwestia przydzielenia ich do odpowiednich "gorących punktów".
Co więcej, wzór Z można powtarzać i rozszerzać na całej stronie. Wystarczy spojrzeć na to, jak Evernote zygzaki w dół poprzez wezwania do działania i punkty sprzedaży.
Dropbox Wizualnie prostsze podejście do tego zygzakowatego wzoru poprzez usunięcie wszelkich obrazów tła. Zamiast tego, więcej funkcji jest wbudowanych w układ, ponieważ wezwanie do działania "Dowiedz się więcej" pomaga połączyć każdą sekcję uzwojenia, gdy twoje oko przesuwa się w dół strony. Pomaga to również poinformowanym czytelnikom, aby kliknęli na następną odpowiednią stronę, bez konieczności uprzedniego przeczytania całej kopii.
Wzrok w foresight
Świetny interfejs powinien być jak niewidzialna ręka, która prowadzi czytelników z prędkością myśli. Najważniejszym wyjściem z trendów F i Deformacji Z jest to, że możesz umieścić swoją najważniejszą treść, w której czytelnik "natknie się" na nią naturalnie, a nie na próbę zmuszenia ich do patrzenia na nie.
Subtelność jest wielką zaletą dla każdego układu strony, a te wzorce mogą sprawić, że różnica między sugerowaniem czegoś czytelnikowi a wrzuceniem go do gardła.
Wyróżniony obraz, używa obraz ludzkiego oka przez Shutterstock.