4 совета по дизайну формы, которые вы должны знать (с примерами)

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

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

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

Предвидеть потребности пользователей

Сайты и приложения имеют различные пользовательские базы и цели, и даже в одном и том же месте может размещаться множество форм, которые собирают различные виды данных, просто чтобы назвать самые частые:

• Формы входа
• Регистрационные формы
• Формы профиля пользователя
• Формы подписки на рассылку
• Оформить заказ
• Опросы пользователей
• Контактные формы
• Формы комментариев
• Формы поиска

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

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

Пример: социальные логины, ориентированные на потребности пользователей

Форма входа Codepen содержит три социальных входа с Github наверху. Этот выбор будет неоправданным для большинства сайтов.

Но это идеально подходит для Codepen, поскольку их пользовательская база состоит из разработчиков, многие из которых захотят войти в систему со своими учетными записями Github или сразу связать свои учетные записи разработчиков друг с другом..

Думай мобильно-сначала

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

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

Пример: Tappable Controls

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

Форма подписки на новостную рассылку на конференции по веб-дизайну An Event Apart адаптируется к тому, как мобильные пользователи получают доступ к экрану - она ​​содержит два удобных поля ввода и кнопка размером с кончик пальца.

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

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

Пример: расходный ввод

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

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

Когда пользователь нажимает на поле, оно сжимается, а дополнительная информация исчезает.

Пример: кнопка морфинга

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

Снимок экрана ниже взят из блестящей статьи The Startup об инновационном дизайне форм, в которой также представлено много других креативных решений..

Облегчение ввода ввода

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

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

Многие сайты электронной коммерции (например, Amazon) используют это решение, чтобы снизить количество оставленных корзин..

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

Пример: персонализированный ввод

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

Приложение для просмотра списков Todoist дает персонализированные советы внутри своего выбора даты, когда пользователь зависает в течение нескольких дней.

Например, на снимке экрана ниже пользователь может видеть, что на 31 августа у него уже есть 2 задачи, и может принять эту информацию во внимание при выборе правильной даты для задач. Это отличная идея для приложения, где производительность является основной заботой пользователя.

Пример: перетаскивание ввода

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

Они, вероятно, не уменьшают действия пользователя по сравнению с обычной кнопкой «Загрузить файл», но они значительно упрощают выберите файл, который пользователь хочет загрузить, следовательно, уменьшается вероятность отправки неверного файла.

WordPress.com предоставляет элегантный и интуитивно понятный пользовательский интерфейс для перетаскивания в форме пост-редактора. маленькие эскизы и визуальное представление уже загруженных файлов далее помогите пользователям быстро выполнить загрузку.

Пример: наложение для удаления отвлекающих факторов

Если пользователи отвлекаются при заполнении нашей формы, они более подвержены ошибкам, а также легче раздражаются

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

На скриншоте ниже вы можете увидеть версию Booking.com для ПК. Когда пользователи наводят курсор на форму поиска, остальное содержимое получает покрыты сероватым наложением помочь им сосредоточиться на процессе заполнения формы.

Оставить отзыв для пользователей

Давая правильная обратная связь в нужное время может значительно улучшить пользовательский опыт.

В дизайне форм есть два вида отзывов пользователей:

1. Отзыв предоставлен до отправка формы - чтобы уменьшить ошибки а также сформировать нормы оставления, такие как средства отслеживания прогресса, мгновенная проверка ввода, которая немедленно вознаграждает пользователей за правильный ввод, или всплывающие подсказки
2. Отзыв предоставлен после отправка формы - для того, чтобы пользователи знали они совершили ошибку, такие как сообщения об ошибках

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

Пример: отслеживание прогресса

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

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

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

Пример: проверка в реальном времени

Магазин косметики Body Shop использует проверка в реальном времени в форме профиля пользователя, чтобы устранить ошибки и улучшить UX процесса заполнения формы.

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

Пример: выразительные всплывающие подсказки

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

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

Подсказки спрятаны за маленьким? иконки не отвлекать пользователей кто знает как заполнить форму логина, но быть всегда присутствующим для пользователей, которые не уверены.

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