Material Design на русском. Часть 42 — Коммуникация: Помощь и обратная связь
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.
Справочный контент содержит ответы на вопросы и проблемы пользователей.
Использование и размещение
Про вспомогательный контент
Справочный контент содержит ответы на общие вопросы о приложении. Пользователи могут оставлять комментарии, сообщать об ошибках и задавать вопросы, на которые контент справки еще не ответило.
Основные места
Справочный контент должен быть в быстром доступе. Он может быть размещен в различных точках навигации. Обычно это находится в панели навигации или еще где-нибудь меню с надписью «Справка» или «Отправить отзыв».
Размещение
Проще всего найти справочный контент, размещая его, как в боковой панели навигации, так и в панели приложения или только в панели приложения. Сложнее найти справочный контент, когда он находится только в одном месте.
- Если приложение сложное и имеет боковую панель навигации, то размести ссылку на «Помощь» как в навигации, так и на панели приложения.
- Если приложение сложное и не имеет боковую панель навигации, помести ссылку на «Помощь» в панели приложения.
- Если приложение простое, то можно поместить «Помощь» или в боковую панель навигации или в выпадающее меню, которое доступно по тапу на иконку «Показать еще», которая обычно выглядит как три точки.
Боковая навигация
«Помощь» должна быть последним пунктом в навигации, а «Отправить отзыв« — выше.
Функциональность «Выйти» должна быть последним пунктом в меню.
«Отправить отзыв» и «Помощь» последние в списке меню
Меню из выпадающего списка
«Справка» и «Обратная связь» (или «Отправить отзыв») должны быть помещены в выпадающий список, когда нет боковой панели навигации.
Правильно: ывыв
Панель приложения
Чтобы дать помощь по срочным вопросам, таким как платежи и возврат средств, помести иконку справки в панель приложения. У десктопных приложений также может быть иконка справки на панели приложения, так как в интерфейсе настольных систем больше места.
Иконка «Справки» на десктопе.
Экран помощи
Экран справки может иметь кнопку «Отправить отзыв», чтобы пользователи могли сообщать о проблемах или отправлять полезные комментарии.
Контент, просматриваемый реже (например, «О компании», «Конфиденциальность» и «Условия предоставления услуг»), может быть помещен и доступен из меню выпадающего списка.
Экран справки с часто задаваемыми вопросами и ответами, а также кнопка действия для отправки обратной связи
Иконки
Помощь
Правильно: Чтобы показать содержимое справки, используй эту иконку.
Неправильно: Не используй варианты этой иконки, например, с диалоговыми пузырями или контурами.
Отправить отзыв
Правильно: Чтобы указать на то, что пользователи могут отправлять отзывы, используй эту иконку из Material Design для обратной связи.
Неправильно: Не используй варианты этой иконки, такие как иконки чата или ошибки.
Всплывающие подсказки
Если коротки текст можно раскрыть подробнее чтобы дать больше контекста, ты можешь показать иконку-подсказку. Иконки справки отображают вспомогательный текст при наведении курсора мыши, тапе или по клику мыши.
Правильно: Чтобы указать, что подсказка доступна, используй контурную иконку справки из Material Design.
Неправильно: Не используй разновидности этой иконки.
Текст
Пиши текст, который просто читать и понять
Сделай контент понятным и простым для сканирования, отредактировав текст, выделив как-то заголовки, списки, таблицы и задав отбивку между абзацами.
Если ты ссылаешься в тексте к элементам интерфейса, которые пользователи должны нажать и т.д., то ты можешь выделить их имена жирным начертанием.
Заголовки помогают упорядочить контент статьи. Они помогают читателям сканировать страницу, чтобы быстро найти нужную им информацию.
Давай ключевую информацию
Делай объяснения как можно короче, не давая подробностей, которые не имеют отношения к использованию приложения.
Используй простой язык
По возможности избегайте использования технических терминов в справочном контенте.
Показывай изображение
При предоставлении пошаговых инструкций покажите соответствующие изображения или иконки, чтобы объяснить, что нужно сделать пользователю.
Как следить за обновлениями гайдлайна и переводом?
- Структуированный документ в Notion
- Официальные обновления Google на странице what’s new
