ios menu dark ui popover 1160x620 - Выбор правильного UI компонента для передачи информации пользователям
Автор изображения Roman Kamushken

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Шкала неудобства компонентов интерфейса для пользователя от 1 до 10, где 10 – максимальный уровень

Зачем нам это нужно?

Общение с пользователями имеет решающее значение.

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

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

Итак, как сделать правильный выбор?

Push-уведомления

(10) Максимальный уровень неудобства для пользователя

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Push-уведомление

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

Используйте push-уведомления для:

  1. Доставки высокоприоритетных призывов к действию
  2. Предоставления пользователям ценной информации

Как использовать push-уведомления?

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

Примеры:

  • Сообщение о новом контенте в приложении
  • Новая возможность в соответствии с текущим местоположением

Полноэкранное представление

(9) Высокий уровень неудобства для пользователя

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Полноэкранное представление

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

Эта форма показа контента внутри приложения имеет высокий уровень неудобства для пользователя, поэтому ее использование должно быть оправдано.

Используйте полноэкранное представление, чтобы:

  1. Фокусировать внимание пользователей на конкретном контенте и связанными с ним действиями.
  2. Показать сложные данные, требующие много экранного пространства.

Как использовать полноэкранное представление?

Цель полноэкранного представления – сфокусировать внимание пользователя на поверхности, которая появляется поверх других элементов на экране и исчезает только тогда, когда они выполняют определенное действие.

Примеры:

  • Экран с ошибкой 404
  • Экран входа

Диалоговое / модальное окно

(8) Высокий уровень неудобства для пользователя

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Диалоговое / Модальное окно

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

Используйте диалоговые окна, чтобы:

  1. Удерживать пользователей в определенном сценарии – разрешите пользователям выполнять определенное действие, не выходя из экрана, на котором они в данный момент находятся.
  2. Сфокусировать внимание пользователя и удалить вторичные отвлекающие факторы.
  3. Обратить внимание на выбор, который пользователи должны сделать или на конкретную информацию, которую они должны знать, прежде чем двигаться дальше.

Как использовать диалоговые окна?

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

Примеры:

  • Подтверждение удаления
  • ВАЖНЫЙ анонс
  • Сообщение о критической ошибке

Баннер

(7) Высокий уровень неудобства для пользователя

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Баннер

Баннеры отображают важные, краткие сообщения и предоставляют пользователям дополнительные действия.

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

Используйте баннеры для:

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

Как использовать баннеры?

Баннер сохраняется в течение сеанса и появляется без каких-либо действий со стороны пользователя.

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

Примеры:

  • Опрос для определения NPS
  • Сообщение об окончании пробного периода
  • Уведомление об истечении срока действия лицензии

Growl

(6) Средний уровень неудобства для пользователя

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Growl

Growl отображает продвигаемое сообщение, при этом не мешая использовать приложение.

В дополнение к тексту, он обычно показывает изображение или значок, а также призыв к действию, содержащий глубокую или внешнюю ссылку.

Он плавает поверх всех других элементов в нижнем левом или правом углу экрана.

Используйте growl, чтобы:

  1. Продвигать определенные сообщения, не мешая пользователям.
  2. Показывать предупреждения или оповещения, запущенные в фоновом режиме, и не оказывающие немедленного влияния на пользователей.

Как использовать growl?

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

Примеры:

  • Анонс новой функции
  • Фоновое предупреждение об обновлении

Snackbar / Toast

(5) Средний уровень неудобства для пользователя

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Snackbar / Toast

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

Используйте snackbar, чтобы:

Обеспечить легкий фидбек об операции.

Как использовать snackbar?

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

Примеры:

  • Сообщение успешно отправлено
  • Документ готов к загрузке

Всплывающее окно (Popover)

(4) Средний уровень неудобства для пользователя

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Всплывающее окно

Всплывающие окна содержат полезную информацию, например, пояснение контекста. Они появляются рядом с соответствующим элементом и могут содержать действия, связанные с ним.

Всплывающие окна могут быть вызваны определенным действием или независимо от действий пользователя.

Используйте всплывающие окна для:

  1. Предоставления дополнительной информации, которая может быть полезна, в сочетании с иконкой вопросительного знака.
  2. Указания направления заполнения формы.
  3. Предложения большего количества действий, связанных с определенным элементом интерфейса.

Как использовать всплывающие окна?

Всплывающее окно отображается при тапе или клике по определенному элементу на экране. Обычно оно появляется со стрелкой, указывающей на нажатую кнопку, поэтому остается постоянно видимым для пользователя.

Примеры:

  • Объяснение нового элемента
  • Информационная подсказка, содержащая действие

Выноска (Callout)

(3) Низкий уровень неудобства для пользователя

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Выноска

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

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

Используйте выноски, чтобы:

  1. Предупредить пользователей, прежде чем просить их принять меры. Обычно это делается в ожидании значительных изменений.
  2. Сообщить пользователям, что что-то пошло не так, после того, как они попытались что-то сделать – в качестве сообщения об ошибке.
  3. Сообщить пользователям, что они успешно выполнили действие – в качестве сообщения об успехе.
  4. Оповестить пользователей о дополнительной информации, не требуя действий – в качестве информационного сообщения.

Как их можно использовать?

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

Примеры:

  • Объявление о добавлении новых элементов
  • Предупреждение об изменении настроек, которые могут нанести вред вашему компьютеру.

Всплывающая подсказка

(2) Низкий уровень неудобства для пользователя

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Всплывающая подсказка

Подсказка – это краткое информативное сообщение, которое появляется, когда пользователь взаимодействует с элементом в графическом интерфейсе (GUI). Всплывающие подсказки обычно вызываются одним из двух способов: жестом при наведении курсора мыши или жестом при наведении курсора клавиатуры. Всплывающие подсказки контекстуальны и специфичны и не объясняют общую картину или весь сценарий задачи.

Используйте подсказки, чтобы:

  1. Предоставить информацию об иконках без меток.
  2. Дать описания или пояснения связанного элемента.
  3. Не используйте всплывающие подсказки для информации, имеющей жизненно важное значение для выполнения задачи.

Как их можно использовать?

  1. Предоставьте во всплывающей подсказке краткий и полезный контент.
  2. Поддержка наведения курсора мыши и клавиатуры.
  3. Используйте стрелки всплывающей подсказки, когда несколько элементов находятся рядом.
  4. Убедитесь, что она имеет умеренный контраст по отношению к фону.
  5. Расположите подсказку так, чтобы она не блокировала связанный контент.
  6. Используйте подсказки последовательно по всему сайту.

Примеры:

  • Дополнительная информация
  • Руководство по обучению новых пользователей
  • Анонс новой небольшой функции

Email

(1) Наинизший уровень неудобства для пользователя

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям
Email

Сообщения электронной почты передаются через email-серверы, предоставляемые интернет-провайдерами (ISP).

Электронные письма передаются между двумя папками выделенного сервера: отправителем и получателем. Отправитель сохраняет, отправляет или пересылает email-сообщение, тогда как получатель читает или загружает письмо, обращаясь к email-серверу.

Используйте email-письма для:

  1. Активации учетных записей пользователей
  2. Приветственных сообщений или инструкций для новых пользователей
  3. Приглашения или обмена контентом с другими пользователями
  4. Уведомлений об активности
  5. Отправки отчетов и дашбордов
  6. Сброса пароля или выполнения двухфакторной аутентификации
  7. Уведомления пользователей о проблемах безопасности или изменениях в их аккаунте.

Как их можно использовать?

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

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

Электронные письма могут содержать как маркетинговую информацию, так и контент, но сообщение всегда должно быть четким и целенаправленным.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Выбор правильного UI компонента для передачи информации пользователям

Вывод

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

Свежие вакансии
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
                        e-Legion e-Legion UX/UI Дизайнер Офис Санкт-Петербург
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
Все вакансии

Оригинал: medium.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

2
Добавить комментарий
Похожие записи

Как создавать темные темы. Руководство от Superhuman

В этой статье мы расскажем, как создавать темные темы, которые будут читабельными, сбалансированными и восхитительными

10 золотых правил UI дизайна

Когда вы сомневаетесь, обратитесь к этому списку стандартных приемов UI дизайна, которым нужно следовать

Дизайн и проектирование лучших кнопок

Все, что вам нужно знать, чтобы качество проектирования этого важного элемента интерфейса перешло на следующий уровень