Лого vc.ru

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

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

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

Поделиться

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

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

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

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

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

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

Закрепление

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

Директор насосал у ЦП, ЦП написало. Чо удивляться?
По факту, если продукт заебись— люди готовы заполнить 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/

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Константин Чегемов

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

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

«Через 50 лет стран не будет — останутся только города»: основные тезисы лекции Кьелла Нордстрема о будущем
0
Τамара Ρодионова

Все правильно, афишник на бумаге сегодня никому не нужен. Книжный рынок тоже упал, люди перешли с бумаги на ридеры.

Креативный директор «Афиши» сообщил о закрытии журнала
0
Artem Prokopenko

Хорошая история, только почему bankir, с доменом com должно быть banker) однако не понятно, в чем ценность для работников. Проф сообществ полно, но они микроскопические

Основатель «Банки.ру» Филипп Ильин-Адаев объявил о запуске социальной сети для банкиров — Bankir.com
0
Михаил Коренев

И что? А в офис к работодателю можно ходить, когда настроение хорошее?) и уходить, когда вдруг захотелось?

Штаб-квартира: Гамбургский офис сервиса для отзывов Yelp
0
Georgy Bukov

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

«Через 50 лет стран не будет — останутся только города»: основные тезисы лекции Кьелла Нордстрема о будущем
0
Показать еще