Форма регистрации в мобильном интерфейсе: Как расположение кнопок влияет на её эффективность Статьи редакции

Директор студии Samplar Антон Григорьев перевел для ЦП заметку UX Movement с рекомендациями по созданию формы для мобильных интерфейсов — где и как расположить кнопки, с какими проблемами может столкнуться пользователь в процессе заполнения и как их избежать.

Расположение кнопок в мобильных формах влияет на эффективность выполнения задач. Если пользователь не находит кнопку там, где ожидает, он может покинуть форму и провалить задачу. Трата даже нескольких секунд на поиск кнопки напрягает пользователя и ведёт к тому, что он нажимает «Назад». Кнопка отправки должна быть прямо перед ним в тот момент, когда он заполнил последнее поле.

Исследование показало, что пользователи часто не видят кнопок отправки формы и сохранения изменений, если они — на панели действий (action bar, navigation bar). Пользователи уходят, оставив изменения несохранёнными.

Неожиданное расположение

Они не замечают кнопок на панели действий, потому что смотрят в другое место. Заполняя форму, они двигаются сверху вниз.

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

Взгляд двигается по форме сверху вниз. Движение вверх — как возвращение назад. Это не то, чего пользователь ждёт. Это неправильное место для кнопки.

Закрепление

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

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

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

Непонятные кнопки сохранения

Из-за таких кнопок пользователи не сохраняют изменения. На панели действий есть «Назад», название страницы и кнопка «Сохранить». Последнюю опознать труднее всего.

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

Недостаточная ясность панели действий приводит к ошибкам.

Чиним кнопку сохранения

Вместо панели действий используйте закреплённую модальную форму. Пользователь получит понятные кнопки сохранения и отмены вместо непонятной кнопки «Назад».

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

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

Заключение

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

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

0
7 комментариев
Написать комментарий...
Doco4ka

Это все? Ради двух примеров высосали статью? Показали очевидные банальные вещи?

Ответить
Развернуть ветку
Tom Andreevich Zarubin

Директор насосал у ЦП, ЦП написало. Чо удивляться?
По факту, если продукт заебись— люди готовы заполнить 23 поля. На этом всё.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Edvins Antonovs

Выхлопа не хватило

Ответить
Развернуть ветку
Yulia Podkovko

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

Ответить
Развернуть ветку
Юрий Гой

На самом деле, для тех кто только начал проектировать интерфейсы и только начал изучать ui ux статья будет полезной.

Ответить
Развернуть ветку
Doco4ka

Тема не раскрыта полностью

Ответить
Развернуть ветку
Darya Sushkova

В продолжение темы - перевод статьи «A Checklist for Designing Mobile Input Fields»: https://uxtranslate.wordpress.com/2015/06/20/checklist-design-poley-vvoda-mobilnye/

Ответить
Развернуть ветку
Читать все 7 комментариев
null