Лого vc.ru

Как облегчить ввод данных в мобильном приложении: 11 универсальных решений

Как облегчить ввод данных в мобильном приложении: 11 универсальных решений

Крис Бэнк, дизайнер по продукту сервиса для создания прототипов UXPin, написал материал о том, как создать эффективное поле ввода для мобильного приложения.

Поделиться

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

Интерактивные клавиатуры

По мнению Бэнка, пользователям нужно предоставить возможность для быстрого ввода информации — поэтому интерактивная клавиатура должна быть релевантной задачам, которые стоят перед человеком. При вводе телефонных номеров полноценная клавиатура с буквами будет не очень удобна — при нажатии на соответствующее поле должна появляться лишь клавиатура для ввода цифр. Аналогично и при «тапе» на строке браузера должна появляться видоизмененная клавиатура, в которой символ слэша (“/”) и окончания вроде “.com” должны располагаться в прямой досягаемости.

Значения по умолчанию и автодополнение

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

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

Приложения Skype и Flightboard

Немедленное погружение («Регистрация для ленивых»)

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

В то же время, данный метод не подходит проектам вроде Carousel или Duolingo, которым для полноценного функционирования нужны данные пользователей. В то же время, приложения наподобие Wunderlist или Houzz вполне могут показать пользователям свои возможности без необходимости обязательной регистрации.

Панель действий

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

Возможность логина с помощью аккаунтов в соцсетях

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

Большие кнопки

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

«Свайпы» для совершения действий

Контент должен сдвигаться с помощью свайпа, считает Бэнк. Такая возможность позволяет пользователям легко управлять информацией на экране. Например, «карточки» в Google Now можно сдвинуть в сторону, когда они не нужны. Аналогичным образом смещаются профили в приложении Tinder — сдвиг влево или вправо означает положительный или отрицательный ответ. В данном случае жест свайпа используется для совершения действий, а не просто облегчает навигацию. 

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

Результат свайпа в приложении Carousel

Оповещения 

Для того, чтобы подчеркнуть недавнюю активность в приложении, новый контент можно визуально выделять. Существует несколько реализаций этого метода — оповещение с помощью вывода числа непрочитанных сообщений или новых записей на иконке приложения (реализовано в LinkedIn, Facebook, Quora), или выпадающий баннер, отображающий недавнюю активность (реализован в приложениях Twitter и того же Facebook).

Динамические отображаемые элементы управления

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

Раскрывающиеся элементы ввода

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

Отмена действия

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

Аналитика превыше всего

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

Статьи по теме
Подсказки в интерфейсе: сложность адаптации под различные типы устройств20 августа 2014, 16:42
Когнитивная нагрузка: как облегчить восприятие интерфейса продукта27 августа 2014, 14:58
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

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

Сейчас обсуждают
Valentin Dombrovsky
Travelabs

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

«Вжух»: реакция российских компаний на мем с котом и волшебной палочкой
0
Valentin Dombrovsky
Travelabs

Северсталь -> ТУИ -> Утконос - казалось бы, странная передача "эстафеты"... Если не вспомнить, что это всё компании Мордашова.

«Вжух»: реакция российских компаний на мем с котом и волшебной палочкой
0
Дмитрий Красильников

разработчик mYgento это, конечно сильно.

Наиболее высокооплачиваемые ИТ-вакансии в городах России и Казахстана на сайте HeadHunter за ноябрь
0
Юлия Панецкая

Вы сделали мой день)

«Товарооборот на 44% превысил ожидания маркетологов»: история акции с «Прилипалами» в «Дикси»
0
Юлия Панецкая

Мне интересно только как измерили эффективность акции (и делали ли это вообще). Т.е. я, конечно, корреляцию и сама допускаю, но конкретного подтверждения ведь нет.
А вообще, у нас любая подобная РК может привести с срачам на кассе в формате "забирайте всё назад, я пришла ради раздатки".

«Товарооборот на 44% превысил ожидания маркетологов»: история акции с «Прилипалами» в «Дикси»
0
Показать еще