Содержание
- 1. Не отмечайте обязательные поля
- 2. Не используйте спиннеры.
- 3. Используйте только один тип кнопок или, что еще лучше, только одну кнопку на форму.
- 4. Поля фрагментов
- 5. Подумайте, почему вы что-то спрашиваете и что это чувствует пользователю.
- 6. Свидания - извивающиеся маленькие ребята.
- 7. Формы как ремесло разработчика
- 8. Не используйте столбцы в формах.
- 9. Не используйте два поля, если нужно одно.
- 10. Будьте вежливы
Формы - многие дизайнеры ненавидят только формы. Они не обязательно проявляют творческий потенциал, или да? Может быть, пора снова взглянуть на формы и понять, что форма, по сути, представляет собой диалог между пользователем и программой.
Забудьте о наведении и щелчке, формы представляют собой самое насыщенное взаимодействие, с которым мы, как цифровые дизайнеры, столкнемся. В следующий раз, когда на вашем пути появится форма, не думайте, что это просто вопрос применения хороших эффектов CSS или добавления красивого jQuery. В разработке форм гораздо больше глубины.
Я протестировал сотни форм и разработал несколько сложных форм для страховых компаний, взаимодействия при бронировании праздников и многого другого. Скорее всего, вы использовали одну из моих форм в последние несколько месяцев.
Вот уроки, которые я хотел бы усвоить, прежде чем начал разрабатывать формы.
1. Не отмечайте обязательные поля
Вы знаете звездочку, обозначающую обязательное поле? Я много раз видел, как это терпит неудачу при пользовательском тестировании. По идее, обязательные поля не имеют особого смысла, у них нет эквивалента в автономном режиме. Они отлично подходят для разработчиков, потому что предлагают приятный черно-белый подход к завершению. Звездочка и обязательное поле не работают, потому что это выученное поведение. Типичное поведение, которое я наблюдал при пользовательском тестировании, - это когда пользователь заполняет форму вверху и заканчивает, когда ему что-то мешает, или когда он нажимает кнопку.
Решение простое: отметьте необязательные поля, отметьте место, где наш приятный пользователь должен остановиться, и подумайте, нужно ли им заполнить это поле.
2. Не используйте спиннеры.
HTML5 великолепен, не так ли? Он предлагает множество новых интересных инструментов для игры. Нам нужно подумать о целесообразности наших новых игрушек. В числовом поле теперь есть маленькие стрелки вверх и вниз, чтобы пользователь мог перемещаться по числам.
Здесь есть две проблемы. Во-первых, отображение стрелок в браузере по умолчанию делает их очень маленькими. Очень неудобно щелкать, и толстые пальцы среди нас будут бороться на iPhone. Это называется законом Фитта: чем меньше размер, тем сложнее на него щелкнуть.
Но я слышу, как вы кричите, вы можете просто ввести номер прямо в числовое поле. Да, вы можете, но давайте посмотрим на дисплей браузера, стрелки вверх / вниз напоминают наш верный друг, поле выбора. Пользователь, которому впервые представлен счетчик, будет думать, что, поскольку он похож на поле выбора, он не может вводить в него текст.
Мой совет - держаться подальше, пока они не станут более обычным явлением или пока разработчики браузеров не разберутся с дизайном по умолчанию.
3. Используйте только один тип кнопок или, что еще лучше, только одну кнопку на форму.
Есть малоизвестный принцип психологии, называемый законом Хика. Закон Хика гласит, что чем больше вариантов нам предлагают, тем труднее сделать выбор. Не ракетостроение, я знаю, но правило, о котором стоит помнить.
Вы можете помочь своему хорошему пользователю, помогая ему сделать выбор. Сделав все основные кнопки одного цвета и имея только одну из них на странице, сделать выбор проще. Какую кнопку я должен нажать? О, это просто, это большая цветная.
4. Поля фрагментов
В прошлой жизни я изучал нейробиологию и, таким образом, изучал психологию памяти - в частности, краткосрочную или рабочую память. Теперь, прежде чем вы это скажете; Нет, объем краткосрочной памяти не равен 7 +/- 2, 4 +/- 1 или в человеческом разговоре от трех до пяти частей. Мы, люди, отлично умеем оценивать визуальные стимулы, ограничение в том, что мы лучше, когда их количество меньше. Разделение формы на более мелкие группы упрощает оценку, поскольку часто то, что пользователь должен ввести в форму, исходит из его памяти.
Убедитесь, что ваши группы полей имеют длину около четырех.
5. Подумайте, почему вы что-то спрашиваете и что это чувствует пользователю.
Это, наверное, самый простой совет, который я даю, но часто он используется меньше всего.
Возьмем следующее:
Ставьте под сомнение каждый вопрос, который вы задаете. Это необходимо? Каково это, когда меня спрашивают об этом?
Чаще всего возникает необходимость задать вопрос бизнесу, и мы, дизайнеры, можем спорить о необходимости до тех пор, пока не посинеем. Вопрос должен быть задан. Понимая потребность бизнеса в этих данных, мы часто можем пойти на компромисс.
Мы можем помочь, объяснив нашему хорошему пользователю, почему нам нужно задать этот вопрос. Убедите нас в использовании и совместном использовании этих данных и просто будьте вежливы.
Снова возьмем наш пример:
Это все еще непростой вопрос, но, надеюсь, мы подсластили таблетку.
6. Свидания - извивающиеся маленькие ребята.
Ввод даты может быть настоящей проблемой, и есть несколько подводных камней, которых можно избежать. Самая большая проблема - это ошибки.
Самый простой подход - запустить календарь. Стоит отметить, что недели начинаются с понедельника в Великобритании и воскресенья в США. Если ваш пользователь не концентрируется, он вполне может выбрать воскресенье, имея в виду понедельник.
Также стоит упомянуть международные форматы дат. США занимают первое место за месяц, а Япония - за год. Таким образом, такую дату, как 4 мая 2012 года, можно интерпретировать тремя способами.
Вот почему лучше использовать поля выбора.
7. Формы как ремесло разработчика
Формы - это ремесло как для разработчиков, так и для дизайнеров. Понимание того, какие возможные ошибки могут быть сделаны при вводе данных и разработке внутреннего кода, с которым можно справиться, является сложной задачей.
Вот простой. Ввод значения валюты. Возможные ошибки, которые мог сделать пользователь, огромны. Принуждение пользователей к форматам данных разочаровывает вашего пользователя и, давайте признаем, немного лениво со стороны разработчиков.
Что может быть лучше для разработчика, чем создание пуленепробиваемой формы.
8. Не используйте столбцы в формах.
Большая проблема при использовании столбцов в формах - это поток. Форму начинаем вверху и заканчиваем внизу. При вводе столбцов поток формы может быть нарушен.
Не предполагайте, что пользователи переходят через формы, и поэтому фокус - это способ навигации по формам в столбцах. Я редко видел это при пользовательском тестировании. В большинстве случаев мы видим вводимые данные, щелкаем мышью / трекпадом / пальцем по следующему полю, затем вводим данные и так далее.
9. Не используйте два поля, если нужно одно.
Большинство людей не умеют печатать вслепую. При пользовательском тестировании мы видим, как люди смотрят на клавиатуру во время набора текста.
При вводе телефонного номера разделение поля формы, например, добавление кода города и номера, вызывает реальные проблемы. Пользователи не видят или даже не помнят, что есть два поля, поэтому введите полное число в первое поле, что еще хуже, если поле ограничено определенным количеством символов.
Используйте только одно поле для номера телефона, то же самое верно и для номера дома / улицы - используйте только одно поле для ввода текста.
10. Будьте вежливы
Вы будете удивлены, узнав, сколько довольно грубых сообщений об ошибках существует.
Вот пример одного, с которым я столкнулся недавно.
Сам факт, что они предлагают вам с готовностью ввести дату в будущем, а затем довольно шутливый ответ, ну, это не очень приятно.
Снова поставьте себя на место пользователя, как бы вы себя почувствовали, увидев эту ошибку? Раздраженный? Может даже хуже. Быть милым - это просто.
Я подготовил загружаемую шпаргалку / шпаргалку, чтобы помочь вам разрабатывать лучшие формы. Он включает в себя множество других передовых способов разработки лучших форм.
