Автор: Мария Кокухина, эксперт по юзабилити

Знаете ли вы, что уровень расположение кнопок по принципам юзабилити влияет на скорость выполнения пользователями задач? Размещение кнопок призыва к действию там, где пользователи ожидают найти их, приводит к более быстрому завершению задачи. Когда пользователи делают больше за меньшее время, они более удовлетворены. И тем самым уровень вашей конверсии растет.

Узнайте, какое расположение кнопок в юзабилити является правильным для вашего мобильного сайта, чтобы пользователи могли быстрее выполнять задачи.

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

Принцип юзабилити

Прежде чем пользователи примут решение, они должны просканировать экран. Содержание экрана информирует их о том, какое действие предпринять. Как только они закончат сканирование, призыв к действию должен появиться. Где их глаза находятся, когда они заканчивают сканирование?

Их сканирование начинается в верхнем левом углу и заканчиваются в правом нижнем углу, двигая глазами зигзагообразно. Эта естественная схема сканирования в юзабилити называется принципом Гутенберга.

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

Уровень расположения кнопок должен соответствовать принципу юзабилити. А именно, вы должны поместить свои кнопки в конец пути сканирования пользователя, когда он будет готов к действию.

Юзабилити №1: Верхняя или нижняя кнопка

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

Большинство пользователей начинают со сканирования содержимого. Их глаза движутся от верхней половины экрана к нижней. Когда содержание заканчивается, они начинают искать призыв к действию.

Размещение кнопки призыва к действию вверху сбивает с толку пользователей. Поскольку они ожидают увидеть ее после завершения сканирования контента. Размещение кнопки вверху идет вразрез с их естественным потоком сканирования и отклоняет их от пути завершения.

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

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

Юзабилити №2: Выбор товара

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

Использование верхних кнопок в этом случае позволяет пользователям действовать быстрее после того, как они заметят изменение состояния в шапке сайта.

Юзабилити №3: Горизонтальные кнопки

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

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

Поскольку покупка обуви и редактирование дизайна одинаково важны для удовлетворения потребностей клиентов, то они соединены вместе, как братья и сестры. Таким образом, пользователи не пропустят кнопку «Редактировать дизайн», если они спешат купить.

Уровень расположения: Правое против Левого

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

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

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

Юзабилити №4: Вертикальные кнопки

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

Вертикальные кнопки более заметны, чем горизонтальные. Так как у них больше места для ширины экрана. Большой размер не только облегчает нажатие на кнопки, но и делает основное действие наиболее заметным.

Рассмотрим пример. Даны 2 вертикальные кнопки — «Добавить в корзину» и «Добавить в избранное». Основным действием является кнопка «Добавить в корзину». Она более важна, чем кнопка «Добавить в избранное». Вертикальное расположение кнопок подчеркивает это. Таким образом, вторичное действие не конкурирует с основным.

Вверх или низ для основного действия?

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

Юзабилити №5. Гибридные кнопки

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

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

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

Основное действие внизу или вверху?

Чтение по гравитации диктует, что первичное действие идет внизу, а вторичное — выше. Кнопка с более высоким приоритетом требует наибольшего внимания и должна идти в конце процесса сканирования пользователя.

У вторичных действий не должно быть определенного цвета или это будет конкурировать с основным действием. Вместо этого обе должны иметь нейтральный цвет с контурным или светлым стилем кнопок.

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

Юзабилити №6: Липкие кнопки

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

Используйте липкие кнопки в свою пользу на мобильном сайте, но избегайте их в компьютерной версии сайта.

Заключение

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

Понравилась статья? Поделись с друзьями!

Вам будет это интересно

Еженедельный журнал

Оставьте заявку и получайте каждую неделю новые статьи.