Чек-лист по дизайну полей ввода на мобильных

Ещё один пост про мобильные — перевод недавно вышедшей статьи «A Checklist for Designing Mobile Input Fields» автора Raluca Budiu (Nielsen Norman Group).

img

Когда вы проектируете поле ввода для мобильных устройств, проверьте, соответствует ли оно этим 14 требованиям юзабилити.

Проектируете ли вы веб-страницу, веб-приложение (например SaaS) или нативное мобильное приложение, одним из основных строительных блоков является простое поле ввода — прямоугольник,  куда пользовать может ввести какой-то текст. Существует множество вариантов использования этого элемента, но они останутся за пределами данной статьи. Стоит также отметить, что при проектировании приложений возникает масса проблем, связанных с рабочим процессом, а также встает множество других глобальных вопросов, которые важны для положительного пользовательского опыта при использовании приложений.

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

Вот как должно выглядеть поле ввода:

inputfield

Ниже представлен чек-лист из 14 правил, которых стоит придерживаться при проектировании полей ввода для мобильных:

Должно ли оно вообще здесь быть
  1. Является ли это поле абсолютно необходимым?
Описание
  1. Расположена ли метка над полем? (не внутри, не ниже)
  2. Помечено ли поле как обязательное (*) или необязательное?
  3. Удалили ли вы плейсхолдер внутри поля?
Видимость
  1. Является ли поле достаточно большим, чтобы входило максимально длинное значение?
  2. Видно ли поле на экране при горизонтальной и вертикальной ориентации, когда отображается клавиатура?
Заполнение поля для пользователей
  1. У вас есть хорошее значение по-умолчанию для этого поля?
    • Доступна ли история?
    • Часто используемые значения?
  2. Вы можете использовать возможности телефона (камеру, GPS, голос, контакты) для его заполнения?
  3. Вы можете вычислить его значение для пользователя на основании другой информации (например, штат на основании почтового индекса, поле купона)?
Ввод
  1. Вы поддерживаете функции «копировать/вставить» в поле?
  2. Какая клавиатура подойдет для этого поля?
  3. Вы можете предлагать подсказки/автозаполнение по первым введенным символам?
    • Не используйте автокоррекцию для имен, адресов и email-адресов.
  4. Можно ли вводить с аббревиатуры или текст с опечатками?
  5. Может ли пользователь вводить значение в таком формате, как ему хочется? (например, номера телефонов и кредитных карт)
    • Вы можете автоматически настраивать формат для них.

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

В идеальном варианте 100% полей ввода на вашем сайте или приложении должны соответствовать 100% правил чек-листа. Если меньше, то пострадает пользовательский опыт.

На практике у вас возможно не будет достаточно ресурсов, чтобы на 100% удовлетворить этим требованиям UX. В таком случае вам нужно расставить приоритеты между полями, чтобы те поля, которые используются чаще или являются более критичными для выполнения задачи, имели более высокий приоритет.

Оригинал: A Checklist for Designing Mobile Input Fields

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s