Лого vc.ru

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

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

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

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

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

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

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

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

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

Закрепление

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Теги
0

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

0

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

0

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

0

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

0

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

0

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

Прямой эфир
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления