Юзабилити определяет удобство использования интерфейса сайта. Не комфортный, перегруженный и запутанный интерфейс тормозит развитие бизнеса. На что же стоит обратить внимание при проектировании веб-страниц?

13 законов юзабилити веб-форм

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

1. В полях формы должен быть прописан вспомогательный текст

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

Заранее заполненное поле – это наглядный пример, облегчающий процесс ввода данных.

2. Интерфейс формы и исходный документ должны быть совместимы

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

3. Данные, вводимые в форму, должны автоматически принимать нужный формат

Избавьте клиентов от необходимости ввода каких-то специальных символов («£», «%»). Пусть не возникает несколько вариантов в представлении дат, сомнений по поводу ввода пробелов. Пусть форма сама приводит данные в желательный формат.

4. Длина текстовых полей должна соответствовать объему вводимого текста

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

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

5. Четко покажите, какие поля обязательны для заполнения, а какие нет

По традиции обязательные поля отмечаются красной звездочкой. Можно еще добавить строчку, поясняющую данный знак: «Поля, отмеченные звездочкой, являются обязательными для заполнения».

6. Формы нужно снабдить подсказками о типе вводимых данных

Хотите сэкономить клиентам время и нервы? Заранее предупреждайте, что при заполнении формы потребуется ввести дополнительную информацию — данные паспорта, например.

7. Верификация данных должна проводиться в момент заполнения формы, а не после

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

8. Поля формы должны быть выстроены в определенном порядке

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

9. В момент обнаружения ошибки курсор мыши должен переместиться в поле, содержащее ошибку

Так вы сделаете пребывание на сайте еще более комфортным.

10. Поля должны иметь четкие и понятные названия

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

11. Названия полей нужно максимально приблизить к самим полям

Снизив количество движений глаз, вы ускорите заполнение лид-формы.

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

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

13. Автофокус улучшает юзабилити

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

12 примеров эффективного micro UX

Micro UX — это использование в дизайне продукта небольших простых элементов, направленных на решение одной задачи.

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

1. Обновление ленты одним действием

Чтобы обновить ленту новостей Facebook достаточно просто провести пальцем по экрану вниз.

2. Автозаполнение

В поиске Google в процессе ввода запроса всплывает подсказка из множества возможных запросов.

3. «Экранная лупа»

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

4. Быстрая смена аккаунта

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

5. Автоматическая смена изображений

На страницах с описаниями товаров Apple при выборе цвета продукта автоматически изменяется изображение товара.

6. Исправление регистра букв

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

7. Быстрое удаление неактуальных писем

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

8. Поиск нескольких запросов за раз

На главной странице сервиса доставки еды Waitrose есть интересный блокнот. Стоит занесите в него список всех необходимых продуктов и нажать поиск, как сервис найдет разом все необходмые товары.

9. Информирование об активности собеседника

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

10. Скрытая навигация

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

11. Корзина товаров с анимацией

Интересное решение придумали дизайнеры онлайн-магазина одежды Threadless. Стоит покупателю добавить товар в корзину, как всплывает окошко с веселой прыгающей тележкой. Тележка облизывающей губы и сообщает: «Один предмет добавлен в мой переносной животик! Я все еще хочу есть».

12. Анимированные указатели

При прокрутке страницы интернет-магазина ASOS появляется изображение симпатичного самолетика с рекламой бесплатной доставки.

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