В июне 2017 года корреспонденты Теплицы будут подробно рассказывать о двух формах дизайна цифровых продуктов: опыта пользователя (UX – User eXperience) и пользовательских интерфейсов (UI – user interface). Также мы поговорим о дизайн-мышлении, юзабилити сайта, человек-ориентированном дизайне (human-centered design), сервис-дизайне (service design) и посоветуем, как улучшить сайт некоммерческой организации. В этой статье мы разберем основные понятия, которые стоит знать при изучении UX и UI дизайна.
В эпоху цифровых технологий понятие «дизайн» сильно изменилось. Теперь в это понятие входит не только графический дизайн, но и новые формы дизайна цифровых продуктов. Их задача в том, чтобы создать дружественные по отношению к пользователю интерфейсы. Главные требования – практичность, интуитивная понятность и удобство. Именно UX и UI дизайн призваны выполнять эти требования.
UX (User eXperience) дизайн – комплексный подход к взаимодействию интернет-пользователя с интерфейсом сайта, мобильного приложения или программы. Он призван разработать максимально удобный и легкий для восприятия продукт для целевой аудитории. UX дизайн отвечает за то, как продукт функционирует и какие эмоции вызывает у пользователей.
Для пользователя крайне важно на интуитивном уровне изучать ваш сайт. Но если он непонятен для него, вы можете потерять читателя.
UX включает в себя разные компоненты. Например, информационную архитектуру, проектирование взаимодействия, графический дизайн и контент. При UX дизайне нужно изучать поведение пользователей, разрабатывать прототипы поведения и проводить тестирования. Всей этой работой занимается UX-дизайнер.
UI (User interface) дизайн – узкое понятие, которое включает набор графически оформленных инструментов. Например, кнопки, меню, слайдеры. UI дизайн призван помочь пользователю наладить взаимодействие с сайтом или программой.
UI дизайнер отвечает за то, как выглядит сайт или мобильное приложение. Он в ответе за то, чтобы элементы интерфейса были грамотно организованы, структурированы и взаимосвязаны, были сгруппированы, выполнены ровно и в едином стиле.
Термины в UX дизайне
1. Доступность (Accessibility) – деятельность по улучшению доступности продуктов и интерфейсов. Это набор практик, который делает интерфейс доступным для широкого круга лиц, в том числе и для людей с ограниченными возможностями здоровья. Для этого используется сбалансированная цветовая гамма, альтернативное управление клавиатурой, специальная разметка на страницах, адаптированные версии и другие инструменты.
2. Контекст анализа использования (Context of Use Analysis) – сбор и анализ подробной информации о потенциальных пользователях. Для этого проводятся интервью, семинары, опросы, работа с фокус-группами.
3. Легко обучаемый (Easy to Learn) – аспект удобства использования. Он призван облегчить пользователям взаимодействие с интерфейсом, при этом потратив минимальное время на его изучение.
4. Эффективность, производительность (Efficiency) – своего рода коэффициент полезного действия, важный атрибут юзабилити сайта. Принцип таков: чем меньше пользователь занял времени и чем меньше приложил усилий, чтобы найти какой-либо элемент на сайте, тем эффективнее продукт.
Еще по теме: 60+ полезных инструментов и ресурсов для дизайнеров
5. Фасилитатор (Facilitator) – человек, который обеспечивает коммуникацию в группе разработчиков. Он улаживает конфликтные ситуации, следит за проведением встреч и помогает участникам сконцентрироваться на целях. По сути это проводник, который помогает всей команде достичь наилучшего результата, найти общий язык, сформулировать конечную цель. В процессе работы он создает комфортную атмосферу.
6. Фокус-группа (Focus Group) – группы потенциальных пользователей вашего продукта, которые формируются, чтобы получить от них обратную связь. Мнение фокус-групп важно на этапе планирования продукта, сбора всех требований к нему. Участники высказывают свое мнение о прототипах, задачах, стратегиях, выбранных для создания продукта.
7. Информационная архитектура (Information Architecture) – процесс организации информации, который включает структуру, дизайн, макет и навигацию. Он позволяет сотрудникам и пользователям находить нужную информацию и управлять ею. Например, информационная архитектура определяет размещение элементов на странице, их навигацию, связь самих страниц.
8. Интерфейс (Interface) – неотъемлемая часть любого продукта. Это объект, среда, набор инструментов, с помощью которых пользователь взаимодействует с готовым продуктом. Например, кнопки, галочки, текстовые поля, подсказки, переключатели на сайте. По сути, интерфейс ведет за собой пользователя.
9. Совместная разработка (Participatory Design) – процесс, в который включены разработчики, представители бизнеса и пользователи. Все они работают вместе для создания решения. Например, разработчики активно привлекают пользователей к процессу проектирования, чтобы быть уверенными в востребованности функций продукта.
10. Плюралистический подход к юзабилити (Pluralistic Usability Walkthrough) – метод тестирования юзабилити, который используется для оценки дизайна на ранней стадии. В этом тестировании участвуют пользователи и разработчики интерфейса.
11. Прототип (Prototype) – первоначальный дизайн интерфейса или продукта, который нужен для получения отзывов от пользователей, участников проекта и заинтересованных специалистов.
12. Раскадровка (Storyboard) – способ иллюстрирования взаимодействия человека и продукта в описательном формате. Раскадровка может состоять из серии рисунков, эскизов и описания к ним. Она рассказывает историю о том, как пользователь тестирует и оценивает продукт.
Термины в UI дизайне
1. Аффорданс (Affordance) – элемент, который описывает, куда кликают пользователи. Не всю информацию на сайте можно передать словами, именно аффордансы стрелок помогают пользователю понять, что будет, если он нажмет на какую-либо кнопку. Правильное использование этих элементов поможет улучшить интуитивность интерфейса.
2. Каскадные таблицы стилей (Cascading style sheets, CSS) – так называется формальный язык. Он используется для описания внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML. CSS используется, например, для того, чтобы задать шрифт, цвет и расположения отдельных блоков на веб-страницах.
Еще по теме: Александр Христолюбов: дизайн-мышление – методология поиска новых решений
3. Система управления контентом (Content management system, CMS) – программа, которая позволяет совместно создавать, редактировать и управлять контентом на сайте.
4. Анимация (Animation) – моделирование движения путем быстрого появления изображений в последовательности.
5. Навигация, меню (Navigation) – это форма, система ссылок, которая позволяет пользователю перемещаться по сайту либо приложению.
6. Пустое пространство (Negative Space) – часть страницы, которая не содержит текста или изображения.
7. Метки (Labels) – названия для кнопок и других элементов для навигации по сайту.
8. Путь (Path) – маршрут, который проходит пользователь на веб-сайте.
9. «Что видишь, то и получишь» (What you see is what you get) – это свойство веб-интерфейсов или программ, в которых макет выглядит похожим на конечную продукцию и может быть представлен в виде печатной версии или презентации. Такую функцию выполняют «визуальные редакторы».
Основные термины UX дизайна перечислены в справочнике Usability Body Knowledge, а UI – на образовательном сайте Usability.gov
