Ввод номера кредитной карты

Немного сокращённый перевод статьи Кристиана Холста из Baymard Institute.

Всем пользователям во время чекаута приходится вводить номер карты, если, конечно, на сайте нет оплаты через Apple Pay или пользователь не сохранил параметры карты в «связке ключей».

Безошибочно ввести 15−16 цифр — непростая задача для большинства из них. Большое исследование удобства чекаута, проведённое Baymard Institute, показало, что трудно не только вводить номер карты, но и проверять корректность ввода. При этом обычные опечатки приводят к ошибкам валидации формы и вынуждают пользователей отказываться от покупки.

Читать далее Ввод номера кредитной карты

7 нерушимых законов дизайна пользовательского интерфейса

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

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

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

1. Закон ясности

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

Абстрактная иконка меню в Gmail

Читать далее 7 нерушимых законов дизайна пользовательского интерфейса

Состояние чекбокса по умолчанию

Кейс из доклада Дэна Ариели Are we in control of our own decisions? на TED.

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

Процент водителей, согласившихся стать донорами

В первой группе стран наблюдается высокая готовность к пожертвованию. Во второй — значительно меньшая. Даже страны, которые мы воспринимаем весьма схожими, отличаются с точки зрения пожертвования органов: Швеция и Дания, Германия и Австрия, Нидерланды и Бельгия.

Читать далее Состояние чекбокса по умолчанию

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

Примечание: в разных компаниях и даже среди разных специалистов одной компании встречаются различные варианты перевода select menu, dropdown menu и т.п. Я использую привычные мне русскоязычные термины. Оригинальные на всякий случай указаны в скобочках.

Формы состоят из самых разных элементов интерфейса. Если вы не знаете, как правильно с ними обращаться, вы можете сильно усложнить заполнение форм. Чаще всего ошибаются, применяя выпадающие списки (select menu).

Когда использовать

Иногда можно встретить выпадающие списки с 2 вариантами, иногда — с более чем 20. В обоих случаях это неправильно. Если у пользователя есть менее 5 вариантов выбора, следует использовать радиокнопки. Так выбор будет проще и быстрее, потому что пользователю нужно лишь взглянуть на варианты и один раз кликнуть. С выпадающим списком ему нужно нажать на него, найти подходящий вариант и кликнуть снова. Также другие варианты не видны, пока вы не нажмёте на выпадающий список. Если их меньше 5, лучше наглядно показать их в форме в виде радиокнопок — пользователи смогут быстро их просмотреть.

select-menus-1

Читать далее Хватит неправильно использовать выпадающие списки

Линч формы заказа билетов на мероприятия с kudago.com

После своей публикации на хабре (про выпадающие списки) я получил сообщение с вопросом о юзабилити. Ответ на вопрос вылился в линч формы с сайта kudago.com.

Форма заказа билетов на мероприятия с kudago.com

Читать далее Линч формы заказа билетов на мероприятия с kudago.com