Кейс: уведомления и подтверждения в интерфейсе

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

После нажатия на кнопку «Сохранить настройки» откроется окно с подтверждением и сообщением, что если данные будут введены некорректно, все может сломаться

Бизнес аналитик

Примерно так выглядела часть задачи БА. Понятно, что СА в тот момент дал необходимую информацию для начала проработки флоу, но понимать, что нужно бизнесу это важно😇

Начну по порядку. Первое, что сделал, отрисовал необходимые элементы

Страница с данными
Страница с данными

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

Окно с подтверждением
Окно с подтверждением

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

После нескольких встреч с БА решил сделать таким образом, тк нет возможности отказаться от окна с подтверждением, сообщение о критичности изменений показал рядом с полем.

Подсказка на странице
Подсказка на странице

После нажатия на «Сохранить настройки» у появляется окно в котором просим пользователя подтвердить изменения либо выйти без сохранения и третий вариант свернуть окно и продолжить редактирование.

Сохранить изменения
Сохранить изменения

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

Это мой первый пост, буду рад критике, хейту и лайкам) Уверен, что начинающему дизайнеру это будет полезно и надеюсь не только начинающему.

33
2 комментария

А вот тут "Отмена" - это отмена сохранения, отмена выхода или отмена выхода без сохранения? :)

Для юзера крайне стрессовый экран, где он хочет просто отменить всё, но однозначной кнопки нет

1
Ответить

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

Ответить