1 совет. Встроенная проверка ошибок
Отображение совершенной пользователем ошибки при заполнении формы, идеально вкладывается на самом первом этапе, а не после, тк это заставляет людей выполнять дополнительную работу и создает для них когнитивную нагрузку. В результате чего, заполнение формы может занять куда больше времени, тк пользователь попадает в луп действий, которые постоянно его откатывают назад.
Думаю у всех было такое, когда ты заполнил огроменную форму, нажал кнопку отправить, и получил потрясающий заряд бешенности на весь день.
а. Показывай встроенную проверку для input'a. Ошибку, показанную в контексте (например справа) можно легко и мгновенно исправить:
b. Обрати внимание на чеклист для создания (если необходимо) сложного пароля. Например, хорошо его сделать интерактивным. В момент, когда ты заполняешь поле – галочки автоматически проставляются. Они как бы сигнализируют о том, что ты все сделал правильно, проводя тебя по этому увлекательному маршруту:
2 совет. Поля ввода или input
a. Не забывай про лейблы. Проектируя поля ввода не оставляй пользователя без подсказки, в момент когда он уже ввел данные в input. Обязательно оставь возможность пользователю вернуться и не забыть с каким полем он работал:
b. Добавь возможность быстро стереть данные. Например, если пользователь ошибся, а введено уж больно большое количество символов:
с. Автоматический переход к следующему полю ввода когда пользователь ввел необходимое количество символов:
3 совет. Состояние системы
Для правильной коммуникации с пользователем, система всегда должна сообщать свое текущее состояние. Обрати внимание на свои электронные часы, они ведь показывают уведомления, и какое количество заряда осталось, а указатели в метро сообщают на какой станции ты находишься, мессенджеры сигнализируют сколько непрочитанных сообщений и так далее.
Что ж, всякий раз при взаимодействии с твоим продуктом, пользователь ожидает узнать было-ли действие успешным, ну или просто узнать, было ли оно вообще. Информирование пользователей о текущем статусе позволяет им идти в правильном направлении не затрачивая своих усилий, где интерфейс как бы несет это бремя на себе, освобождая пару килобайт памяти в голове пользователя на более приятные вещи.
а. Изменение цвета кнопки при нажатии, или индикатор загрузки определенного процесса:
b. Голосовые интерфейсы отображают анимационное кольцо, показывая, что они слушают пользователя:
с. Если товар закончился, электронная коммерция уведомляет пользователя об его отсутствии, тем самым избавляя клиента от потери времени, а также останавливая рост недоверия к сервису:
d. Товары, которые были ранее добавлены в избранное не исчезают без согласия пользователя, а остаются с особой пометкой (например: Нет в наличии). Поэтому хорошо бы добавить уведомление о том, что произошли некоторые изменения в разделе избранное:
е. В сервисах оплаты могут возникнуть определенные ограничения.
Поэтому нужно заранее демонстрировать пользователю то, что сервис не поддерживает какой-либо вид оплаты. Не скрывай от пользователя информацию! Эта небрежность очень сильно ощущается при малейшем взаимодействии с таким сервисом, что даже не нужно проводить исследований. Для того, чтобы пользователю не пришлось делать лишних действий или испытывать гнев по поводу потраченного времени впустую – будь с ним открытым:
4 совет. Раскрывающие списки в цифровых значениях и датах
Давай определим какой тип дат показывать при различном контексте.
а. Представим, что нам необходимо заполнить дату своего дня рождения и для нас открывается нарядный календарь. Это очень неудачное решение, т.к. такой тип даты уже заранее известен, и мы не планируем ее, ведь наш день рождения это совсем другой тип данных, это определенно строка, как серия и номер паспорта, или номер телефона. Наша задача дать пользователю поделиться воспоминанием, а не дать ему поиграть в еще один интерфейс:
b. Выбирая дату встречи или планируя свою поездку, лучше использовать раскрывающийся календарь. Это вот как раз тип даты, которая заранее неизвестна ни нам, ни (часто бывает) пользователю. Демонстрируя пользователю календарные дни, он понимает в какой день недели, месяц, год он сможет подобрать билет, оформить заселение и т.д.:
с. Выбирая значение от 1 до 15, возможно ты соблазнишься использовать раскрывающийся список, но лучше бы сделать заполнение данных быстрым и простым используя stepper:
d. Если твой список из чисел довольно внушительный, например это ценовой диапазон от 1 000 до 90 000 - используй button range:
На этом все! Я надеюсь тебе было полезно освежить это в своей памяти (или же изучить), а я вернусь к теме более продвинутых советов немного позже. Пока 👀
