{"id":14284,"url":"\/distributions\/14284\/click?bit=1&hash=82a231c769d1e10ea56c30ae286f090fbb4a445600cfa9e05037db7a74b1dda9","title":"\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0444\u0438\u043d\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u043d\u0446\u044b \u0441 \u0441\u043e\u0431\u0430\u043a\u0430\u043c\u0438","buttonText":"","imageUuid":""}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
2 комментария
Ilya

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

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

Ответить
Развернуть ветку
Сергей
Автор

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

Ответить
Развернуть ветку
-1 комментариев
Раскрывать всегда