Как направить взгляд пользователей на сайт

25

В фотографии распространен принцип, согласно которому фотография должна привлекать внимание зрителя. Это часто достигается с помощью линии, проходящей через фотографию. Признание того, как наблюдатель будет сканировать фотографию, часто помогает составить снимок, и то, как глаза зрителя сканируют фотографию, иногда может даже изменить смысл фотографии.

Что можно сделать в веб-дизайне, чтобы направить взгляд пользователя на сайт в нужном вам направлении без необходимости искать нужные части страницы?

Например, вы можете захотеть, чтобы пользователь увидел логотип, а затем краткое описание сайта, а затем статью. Помимо размещения этих элементов в вертикальном столбце с одним под другим и удаления всех других элементов со страницы, как бы вы перевели взгляд пользователя с одного на другое?

website-design design-principles

— Computerish
источник

7

Возможно, вас заинтересует «Использование веб-сайтов Eyetracking» (2009) от Nielsen & Pernice

— Jari Keinänen

2

@koiyu Я пошел и нашел статью "F" и собирался опубликовать ее, когда понял, что ты уже сделал. Я не могу подчеркнуть, насколько важна эта привычка чтения. Великие замыслы выстраиваются в соответствие с этим потоком, а плохие замыслы идут против

— zzzzBov

1

Я немного против слежки за глазами. Не потому, что это бесполезно, а потому, что уже в любом проекте, в котором я хотел провести простое юзабилити-тестирование, философия босса и компании заключалась в том, чтобы сделать все возможное дешевле и быстрее. Я действительно не верю в то, что в большинстве случаев вы сможете убедить купить систему отслеживания глаз и суметь правильно выровнять данные без надлежащего обучения поведению / психологии человека.

— Littlemad

8

Все дело в балансе между размером, цветом и выравниванием. С опытом вы будете знать, что и когда использовать эти уловки, чтобы привлечь внимание. К счастью, на сайте мы можем отследить это внимание, и по этому вопросу проводится множество научных исследований, например, на сайте Якоба Нильсена есть хорошие данные .

Об отслеживании Eye я хочу сказать, что за бюджет и реальность никто не будет платить за устройство отслеживания Eye, или даже использовать его. (Уже трудно убедить вашего начальника в офисе провести несколько часов юзабилити-тестирования на любой стадии проекта ...) Я лично предпочитаю проводить юзабилити-тестирование с реальными людьми, чтобы оценить мою композицию веб-дизайна. Даже если это означает, что нужно взять друга из моей семьи и поставить его перед экраном, задавая вопрос или просматривая его поведение.

Отслеживание глаз не показывает, понимают ли пользователи, что это или нет. Если они расстроены, колеблются или просто восхищаются графической композицией.

Отличная книга, которая может помочь вам в этом, - « Ракетная хирургия Made Easy of Steve Krug».

— Littlemad
источник

5

Как упоминалось в комментарии койю, отслеживание глаз - это то, что вам нужно. Вы можете создавать проекты с намерением вести пользователей по пути, но единственный способ по-настоящему узнать, достигли ли вы своих целей, - это изучить глаза.

Тем не менее, вы могли бы найти мой ответ полезным для вопроса, как привлечь внимание к определенной области дизайна? Это не совсем тот же вопрос, но это близко.

Больше ресурсов для отслеживания глаз:

Услуги слежения за глазами:

— Виртуозы Медиа
источник

3

Вот краткий совет: включите изображение человека, смотрящего или указывающего на ваш целевой объект (например, продукт, кнопка подписки). Вот пример из рекламы, но я видел ту же тактику на веб-страницах: Пример солнечного шелка

(Источник: http://www.grokdotcom.com/2007/10/04/how-a-pretty-face-can-push-visitors-away/ )

— Mattvic
источник

0

Я могу придумать два простых способа направить взгляд пользователя на сайт:

Используйте очевидную нумерацию на элементах вашей страницы. Вы можете увидеть это на многих страницах сайта, или вы можете обратиться к этому файлу PDF с финансового сайта (хотя я думаю, что это не очень хороший пример).
Используйте стрелки, чтобы направить внимание вашего пользователя. Это может быть что-то вроде блок-схемы. Хотя сейчас я не могу вспомнить ни одного онлайн-примера.

— Gan
источник

Сеть не является статичной средой. Стрелки не ведут людей. Вы должны вести их с различными размерами и цветами в взвешенной системе.

— dkuntz2

Я не понимаю Не могли бы вы подробнее рассказать о том, «стрелки не направляют людей» и «направляют их с разными размерами и цветами в взвешенной системе»?

— Ган