Главное Авторские колонки Вакансии Образование
Выбор редакции:
3 272 5 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Якорные объекты

UX/UI дизайнер компании «Веб-Эталон» рассказывает о правильном использовании и расположении якорных объектов в веб-дизайне.
Мнение автора может не совпадать с мнением редакции

b_5abe455058db6.jpg

Анна Липатова - UX/UI дизайнер « Веб-Эталон»

Якорные объекты — заметные функциональные детали страницы, которые цепляют первоначальный взгляд пользователя на себе.

b_5abe42fe26a4a.jpgНа сайте the-artery.com якорные объекты размещены по точкам: в центре и по углам блока.

Располагают якорные объекты в углах, в центре или по бокам, а оставшуюся часть блока занимают менее заметные элементы или негативное пространство.

b_5abe4342839cc.jpgГлавная составляющая композиции на сайте ingenie.com/one-four-nine/ — яркая надпись в центре. По углам распределены навигационные элементы

Якорными объектами могут быть: крупный заголовок или даже целый текстовый блок, цифры, иконки, графические элементы, иллюстрации и фотографии.

b_5abe437039d2a.jpgЯкорный объект в блоке на сайте pixar.com находится в левом верхнем углу и сразу захватывает внимание пользователя

Если в блоке присутствуют другие элементы, их от якорного объекта должно отделять достаточное количество «воздуха». Из-за второстепенных объектов «якорь» может находиться не строго в углу блока, но должен тяготеть к нему, сохранив при этом модульность.

b_5abe43860331f.jpgНесмотря на то, что якорный объект сместился вправо, он все равно тяготеет к левому верхнему углу. Сайт beargrylls.com

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

b_5abe4398e7e96.jpgНа сайте animalplanet.com продуманное расположение якорных объектов: сначала взгляд пользователя попадает на центральную точку, затем замечает остальные «якоря» по углам.

Способы размещения якорных объектов:

  • По точкам (в центре и по углам). Такой способ подходит для размещения отдельных объектов, таких как иконки, фотографии, цифры и заголовки и по сторонам блока. b_5abe43b9f0039.jpgРасположение якорных объектов по углам и в центре композиции b_5abe43c9471c1.jpgНа сайте goggles.wedze.com во всех точках располагаются «якоря»
  • По сторонам. «Якоря» размещаются по краям блока, оставляя место в середине. Отличный способ для размещения навигации, пунктов меню и другой важной информации. b_5abe43d822818.jpgРасположение якорных объектов по сторонам блока b_5abe43e355f5e.jpgЯкорные объекты, размещенные по верхнему и нижнему краю, дают пользователю возможность сфокусироваться на главном экране сайта shopskin.co.uk

«Якоря» помогают выделить приоритетную информацию, составить гармоничную композицию, определить иерархию объектов, упорядочить информацию, упростить восприятие контента и направлять взгляд пользователя.

+5
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Классные решения
Юридическое сопровождение ВЭД
Gonzalo Riveros
Расположение якорных объектов по сторонам блока - я не понял иллюстрацию. Располагать надо по линиям? Или по углам?
Ответить
Веб-Эталон
Создание, продвижение сайтов и мобильных приложений
Bob Bobik
Согласен. Все четко сказано!
Ответить
Александр Наливайко
Ну так себе, а есть результаты исследований?
Ну там А/В тесты страниц с различным графическим напряжением, конверсия по целям, тепловые карты, карты ассоциаций и т.д.

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

Не нужно писать "UX/UI дизайнер компании «Веб-Эталон» рассказывает о правильном использовании и расположении якорных объектов в веб-дизайне.", если правильность расположения определяется "чувством прекрасного" замечательной девушки дизайнера, а не исследованиями.
Ответить
Веб-Эталон
Создание, продвижение сайтов и мобильных приложений
Максим Михайличенко
Алексей, это не аналитическая статья. В ней не было задачи нагрузить пользователя исследованиями с репрезентативными данными. Ее специально сделали максимально простой. Я сам люблю контент с цифрами, но я не_репрезентативен. И для наших целей такой формат статей лучше. Увы... Если хотите поискать исследования, можете погуглить - тех же айтрекинговых тестов уже достаточно много.
И вы правы - расположение объектов в коммерческих сайтах призвано подтолкнуть к конверсии - это никто не оспаривает.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.