Чужие мысли

Размещение кнопок «Вперед» и «Назад» в формах

Previous and Next Actions in Web Forms
Автор: Luke Wroblewski
Источник: Functioning Form

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

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

Так кто же прав? Обе стороны.

Одной из причин, почему возникают подобные дискуссии, состоит в том, что часто дизайнеры и разработчики создают «мастера» и людям нужно двигаться вперед и назад через несколько этапов. В большинстве web-форм люди просто хотят увидеть вопросы, ответить на них и двинуться дальше. Поэтому выделение основного действия («Вперед») и вторичного действия («Назад») имеет смысл. Размещение заметной кнопки с основным действием прямо под последним вопросом, позволяет показать людям, что они могут двигаться вперед. При движении по линейной цепочке, например, при заказе в интернет магазине, причин вернуться к предыдущему шагу немного и они могут быть решены при помощи эффективного последнего экрана с подтверждением заказа. На самом деле, многие из анализов, которые я видел, подтверждают, что люди редко возвращаются назад в таких ситуациях.

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

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

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

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

• 22.09.2008
• Категории: Переводы
• Комментарии: 3

---