Дизайн взаимодействия с пользователем
Дизайн взаимодействия с пользователем (UX-дизайн← англ. User Experience, или UXD, или UED, или XD← англ. User Experience Design)[1] включает в себя традиционное взаимодействие человека с компьютером (HCI), в том числе все аспекты продукта, как они воспринимаются пользователями[2].
UX-дизайн — многомерное определение, которое охватывает широкую область знаний и характеризует ощущения пользователя, взаимодействующего с онлайн-ресурсом[3] и включает множество составляющих: интерактивный дизайн, информационную архитектуру, визуальный дизайн, юзабилити и взаимодействие между человеком и компьютером. Цель UX-дизайна — улучшить степень удовлетворенности пользователя и его лояльность благодаря пользе, простоте использования и удовольствию, которое он получает в процессе взаимодействия с интернет-ресурсом[4]. Процесс создания дизайна взаимодействия с пользователем включает конкурентный анализ, разработку шаблонов, которые будут ценными для определенной целевой аудитории. UX-дизайн отвечает за функциональное восприятие и взаимодействие пользователя с ресурсом[5].
Описание
Дизайн взаимодействия с пользователем затрагивает такие научные области как концептуальный дизайн, эскизное проектирование, эргономику[6]. В основе концептуального дизайна лежит идея[7], также как и в основе UX-дизайна. Эскизное проектирование — это также рутинная работа, где разрабатываются сами коды, отрисовывается и компонуется внешний вид интерфейса и т.п.[8] Эргономика же изучает взаимодействие человека и других элементов системы; её принципы и методы относятся ко всем этапам создания систем: анализу, проектированию, разработке, испытаниям, оценке и т.д.[9] Все эти составляющие смежных наук применяются в реализации UX-дизайна. Важным является привлечение к проектированию будущего пользователя, в зарубежной практике используют термин participatory design.
Дизайн взаимодействия с пользователем не может быть шаблонным, он всегда связан с человеческим фактором и поэтому зачастую воспринимается однозначно.
Создание UX-дизайна направлено на то, чтобы улучшить продукт в одном или во всех следующих направлениях[10]:
- Длительность взаимодействия (начало, погружение, заключение и продолжение);
- Интенсивность (рефлекс, привычка, вовлеченность);
- Широта предложения (товары, услуги, бренды, номенклатура, каналы продвижения и цены);
- Взаимодействие (пассивное ↔ активное ↔ интерактивное);
- Триггеры (все человеческие чувства, знаки и символы);
- Значение (статус, эмоции).
Этимология
Начало 90-х по праву считается «золотой эпохой» для пользователей. В это время компьютерная графика получила мощный толчок к развитию благодаря тотальному снижению цен на персональный компьютеры[11]. С этого момента разработка дизайна взаимодействия с пользователем стала неотъемлемой частью работы специалистов. Дональд Норман ввёл термин «UX дизайн» в контексте его интереса к окружающим вещам[12] и сделал так, чтобы этот термин широко прижился[13]. Он полагал, что интерфейс для пользователя, а также юзабилити — это слишком узкие понятия, а термин «пользовательский опыт» шире за счёт того, что он касается также физического взаимодействия пользователя с системой[14].
Термин «пользовательский опыт»/UX непосредственно отождествляется с «дизайном взаимодействия с пользователем», он тесно связан с ориентированным на пользователя проектированием и человеко-компьютерным взаимодействием, и включает в себя некоторые их компоненты.
Принципиальные различия между UX-дизайном и дизайном в том, что первый решает проблемы, связанные с отдельным продуктом или отдельными элементами внутри системы, когда web-дизайнеры проектируют весь проект в целом[12] .
Элементы
Дизайн взаимодействия с пользователем состоит из множества элементов, включающих проектирование, юзабилити, информационную структуру, исследование и др. Исследования, ориентированные на получение опыта пользователей, имеют решающее значение для UX-дизайна[15] . Далее приведен короткий анализ его составных частей.
Дизайн визуальных коммуникаций
Визуальные коммуникации в дизайне позволяют передавать информацию с помощью художественных образов, создавая определённое визуальное восприятие у пользователя[16].
Дизайн визуальный коммуникаций также широко известен как дизайн пользовательского интерфейса, коммуникационный дизайн. Графическая обработка элементов интерфейса часто воспринимается как дизайн визуальных коммуникаций. Но проведенная без исследований пользовательского опыта работа, останется именно графической доработкой. Цель дизайна визуальных коммуникаций — корректно использовать визуальные элементы: цвета, изображения, символы, и др., чтобы передавать с их помощью определённые сообщения для аудитории. Также в работе UX-дизайнера, помимо навыков дизайна-разработки, могут пригодиться знания основных принципов гештальтпсихологии, которые помогут реализовать эффективную визуальную коммуникацию[17].
Информационная архитектура
Информационная архитектура — это наука о структурировании и организации информации на сайтах и сервисах, тесно связанная с юзабилити[18]. Задача информационной архитектуры — находить взаиморасположения и взаимосвязи фрагментов онлайн-ресурса[19]. Объекты информационной архитектуры могут варьироваться от веб-сайтов до программных приложений, изображений и т.д. Информационная структура связана с проектированием электронного ресурса в части построения интерфейса, навигации и поиска, благодаря ей информация упорядочивается в рамках электронной страницы. В ходе создания информационной структуры работа проходит в несколько этапов: структуризация данных, организация, маркирование, организация навигации.
Структуризация данных, организация, маркирование
Структуризация предполагает анализ и группировку данных[20]. UX-дизайнер обрабатывает информацию, формирует основные блоки и затем связывает их друг с другом. Организация включает в себя группировку этих блоков уникальным и осмысленным способом. Маркирование помогает удобно перемещаться по странице ресурса или между страницами, использование соответствующих формулировок в качестве маркеров упрощает навигацию и поиск.
Навигация
Цель навигации — выявить связи между информационными объектами для решения конкретных задач пользователя[21]. Выбранная модель навигации во многом определяет, будет ли онлайн-ресурс удобным для пользователей[22]. Существуют модули дополнительной навигации, к которой относятся: поиск по сайту, карта портала, регистрация/авторизация и др.[23] Если посетители сайта не смогут найти нужную информацию без запросов к строке поиска, тогда навигация информационной архитектуры работает неудовлетворительно.
Проектирование
Проектирование — термин, который приобрел особую популярность в последнее десятилетие и стал одной из составляющих разработки UX-дизайна. Основная проблема проектирования: как именно реализовать поведение сложных интерактивных систем. Если рассматривать проектирование интернет-магазинов или мобильного приложения с корзиной, будет полезно учесть сходство между организацией пространства для действий клиентов в физическом магазине и перенести их на интерактивный продукт[24].
Процессы проектирования описывают, как понимать и определять требования пользователей, как преобразовать эти требования в структуру дизайна и, наконец, как наилучшим образом применять принципы и шаблоны дизайна в конкретных условиях[25].
Проектирование непосредственно связано в интерфейсом, основным аспектом оценки которой должно стать периодическое юзабилити-тестирование[26].
При проектировании придерживаются 3-х составляющих: целеполагания, создания концепции, моделирования[27].
Проектирование человеко-компьютерного взаимодействия
Существует много ключевых факторов к пониманию проектирования взаимодействия. Однако именно опыт стал одним из базовых концептов в проектировании ЧКВ, с одной стороны, он включает повседневные ситуации, в которые погружен пользователь, с другой — совокупность специфических навыков, приобретенных в результате работы с высокотехнологичными продуктами[28]. Дизайн онлайн-ресурса осмысляется с критичной точки зрения, чтобы в результате он соответствует ожиданиям пользователя и был выполнен по стандартам актуальных шаблонов пользовательских интерфейсов. Во время работы по проектированию ЧКВ UX-дизайнеры учитывают различные факторы. Некоторые из них:
- выбор шаблонов взаимодействия, которые будут наиболее подходящими в контексте;
- ориентир на пользовательские потребности, собранные в ходе исследования;
- включение функций и размещение информации, которая будет важна для пользователя;
- размещение интерфейсных элементов, как перетаскивание, выделение и действия мышью;
- акцент на сильных сторонах проекта;
- создание интуитивно-понятного интерфейса;
- поддержание согласованности во всей системе[29].
В последние несколько лет роль UX-дизайнеров сместилась в сторону того, чтобы сфокусироваться на точной проработке деталей пользовательского интерфейса, в тандеме с разработчиками у UX-дизайнеров появилось больше свободы в проектировании интерфейсов.[30] По этой причине, дизайн взаимодействия с пользователем эволюционировал в междисциплинарную ветвь дизайна, которая включает междисциплинные технические аспекты от проектирования анимационного дизайна и мультипликации к программированию
Юзабилити
Юзабилити — степень, в которой продукт может быть использован определёнными пользователями для достижения определённых целей с эффективностью, производительностью и удовлетворенностью в заданном контексте использования[31]. Юзабилити сайта — это простое и удобное использование веб-ресурса посетителями[32].
Юзабилити уместно ко всем инструментам, используемым людьми, и распространяется как на цифровые, так и на аналоговые устройства. Таким образом, это подмножество опыта взаимодействия, но не полностью. Юзабилити пересекается с дизайном взаимодействия с пользователем и относится к способности людей использовать систему или приложение. Хорошее юзабилити имеет важное значение для позитивного опыта взаимодействия, но это само по себе не гарантирует его[33].
Доступность
Доступность — это общий термин, который описывает свойство продукта быть использованным как можно большим количеством разных пользователей[34]. Доступность системы описывает легкость её досягаемости, использования и понимания. С точки зрения дизайна взаимодействия с пользователем, она может также быть связана с общей удобопонятностью информации и функций. Она способствует сокращению кривой обучаемости, ассоциированной с системой. Доступность во многих контекстах может быть связана с лёгкостью использования для людей с ограниченными возможностями и происходит согласно юзабилити[35].
Человеко-компьютерное взаимодействие
Человеко-компьютерное взаимодействие (HCI) исследует дизайн и использование компьютерных технологий, ориентированных на взаимодействие между людьми (пользователями) и компьютерами.
Вопрос организации взаимодействия человека с компьютером сегодня становится интегральной задачей многих разработок в самых разных областях. На первый уровень здесь выходит организация удобного пользования и дружественного интерфейса, так как технические устройства усложняются, их функционал становится шире, необходимо обеспечить сохранение и даже повышение эффективности применения технологий[36][37].
UX результаты
Основная цель UX-дизайнеров — решить проблемы конечных пользователей и обеспечить возможность удобной работы с ресурсом. Таким образом, важно доносить концепцию дизайна до заинтересованных сторон и разработчиков — это имеет решающее значение для успеха проекта в целом[38]. Что касается документов спецификации UX, эти требования зависят от клиента или организации, участвующей в разработке продукта. Четыре основных документа: титульный лист, введение, прототипы и история версий[39]. В зависимости от типа проекта, документы спецификации могут также включать модели потока, культурные модели, персонажей, истории пользователей, метки, навигацию, меню, пустое пространство, сценарии и любые предшествующие исследования пользователей.[40]
Для финального одобрения проекта UX-дизайна требуется:
- Пользовательское тестирование / юзабилити-тестирование;
- A / B тестирование;
- Информационная архитектура;
- Файлы Site-map и пользовательские потоки;
- Дополнительный прототип в результате результатов испытаний и точной настройки.[41]
Подход графических дизайнеров
Графические дизайнеры фокусируются на эстетической привлекательности дизайна. Информация передается пользователям через текст и изображения. Большое значение уделяется тому, как текст и изображения выглядят и привлекают пользователей. Графические дизайнеры определяют стилистический набор цветов, шрифтов, типа шрифта и расположение изображений. Графические дизайнеры сосредоточены на том, чтобы привлечь внимание пользователя тем, как выглядит дизайн. Они создают визуальные концепции, используя компьютерное программное обеспечение или вручную, для передачи идей, которые вдохновляют, информируют и очаровывают потребителей. Они разрабатывают общий макет и производственный дизайн для различных приложений, таких как реклама, брошюры, журналы и корпоративные отчеты.[42]
Подход визуальных дизайнеров
Визуальный дизайнер (VisD) гарантирует, что визуальное представление дизайна эффективно передает данные и намекает на ожидаемое поведение продукта. В то же время визуальный дизайнер отвечает за передачу идеалов бренда в продукте и за создание положительного первого впечатления; эта ответственность разделяется с промышленным проектировщиком, если продукт связан с оборудованием. По сути, визуальный дизайнер должен стремиться к максимальному удобству использования сайта в сочетании с максимальной привлекательностью.[43]
Подход дизайнеров взаимодействия
Дизайнеры взаимодействия (IxD) в некотором роде координаторы. Они несут ответственность за понимание и определение того, как продукт должен вести себя. Эта работа частично совпадает с работой визуальных и промышленных дизайнеров в нескольких важных аспектах. При разработке физических продуктов дизайнеры взаимодействия должны на раннем этапе работать с промышленными дизайнерами, чтобы определить требования к физическим ресурсам и понять поведенческие воздействия механизмов, стоящих за ними. Работа дизайнеров взаимодействия пересекается с визуальными дизайнерами на протяжении всего проекта. Визуальные дизайнеры ведут дискуссии о бренде и эмоциональных аспектах опыта, дизайнеры взаимодействия сообщают приоритет информации, потока и функциональности в интерфейсе.[44]
В разработке дизайна важно документировать все договоренности и вести спецификации. Они сообщают о дизайне разработчикам, заинтересованным сторонам и часто самим дизайнерам всю информацию о принятых решениях с момента обсуждения задач по проекту.[45] [46]
Основные принципы UX/IxD-дизайнеров:
- Следовать модели мышления пользователя, интуитивность (большинство действий, которые выполняет пользователь на сайте основано на интуиции и если пользователь не сталкивался ранее с элементом интерфейса, то необходимо, чтобы данный элемент имел ожидаемую функциональность);
- Знакомиться с потребностями пользователя и удовлетворять их;
- Соблюдать согласованность (в рамках уже известных функций и сцен применяются согласованные производительность и работа);
- «Меньше значит больше»[47] (упрощение, противостояние украшению);
- Использовать простой язык вместо технического;
- Разрешить пользователю делать ошибки;
- Учесть функционал обратной связи[48].
Тестирование дизайна
Юзабилити-тестирование — самый распространенный метод, используемый дизайнерами для тестирования своих проектов. Основная идея проведения юзабилити-теста — проверить, как реальные пользователи взаимодействуют с программным продуктом в максимально приближенных к реальным условиях[49]. При проведении юзабилити-тестирования проверяются две вещи: удачен ли дизайн продукта и если нет, как его можно улучшить. Пока дизайнеры тестируют, они тестируют дизайн, а не пользователя. Кроме того, каждый дизайн развивается. Проектировщики проводят тестирование юзабилити на каждом этапе процесса проектирования.
Чтобы улучшить удобство пользователей онлайн, нужно работать в направлении, чтобы UX-дизайн стал основой культуры разработчиков[50].
Примечания
- Kujala, Sari; Roto, Virpi; Väänänen-Vainio-Mattila, Kaisa; Karapanos, Evangelos; Sinneläa, Arto. UX Curve: A method for evaluating long-term user experience (англ.) // Interacting With Computers : journal. — 2011. — Vol. 23, no. 5. — P. 473—483. — doi:10.1016/j.intcom.2011.06.005.
- design in motion . IBM Design. Дата обращения: 18 июня 2015.
- Ходин А.В., Шуклин Д.А., Шалобаев Е.В. Особенности UX-дизайна интернет-проектов // Альманах научных работ молодых ученых университета ИТМО : Статья в сборнике трудов конференции. — 2016.
- [www.usertesting.com/blog/2015/09/16/what-is-ux-design-15-user-experience-experts-weigh-in What is UX design? 15 user experience design experts weigh in] (03/27/2019).
- Дворянин Д.М., Скубников К.С. К вопросу о понятиях UX UI дизайна // Аллея науки. — 2017.
- environmental context «THE INTERACTION DESIGN FOUNDATION», by Karen Holtzblatt and Hugh R., Retrieved 2016-08-26
- Толмачева Г.В. Концептуальный дизайн: от идеи к продукту // INTERNATIONAL JOURNAL OF APPLIED AND FUNDAMENTAL RESEARCH. — 2015. — № 10.
- Анохин А. Н. Проектирование интерфейсов // Биотехносфера. — 2010.
- Эргономика. Проектировочная дисциплина . ftemk.mpei.ac.ru. Дата обращения: 17 марта 2020.
- Diller, Stephen. Making meaning : how successful businesses deliver meaningful customer experiences. — Berkeley, Calif.: New Riders, 2006. — vi, 146 pages с. — ISBN 0-321-37409-6, 978-0-321-37409-7.
- Кострова В.н, Зеленина А.н, Юрьева Ю.в. Анализ этапов исторического развития компьютерной графики // Вестник Воронежского государственного технического университета. — 2010. — Т. 6, вып. 1. — ISSN 1729-6501.
- Маргарита Акулич. Дизайн пользовательского интерфейса (UX) и дизайнерское мышление. — Litres, 2020-02-01. — 123 с. — ISBN 978-5-04-141785-7.
- uxdesign. "UX Design Defined" (16 августа 2010).
- Merholz, Peter (2007). "Peter in Conversation with Don Norman About UX & Innovation . Adaptive Path..
- Джейми Леви. UX-стратегия. Чего хотят пользователи и как им это дать. — "Издательский дом ""Питер""", 2017-03-14. — 304 с. — ISBN 978-5-496-02577-5.
- В.И. Куманина, М.С. Кухта. Дизайн. Материалы. Технологии. — Энциклопедический словарь. — Томск, 2011. — С. 320.
- Web Style Guide. "Visual Design Web Style Guide 3 (2015-06-18.).
- Пугачёва О.Н. Информационная архитектура сайта как важнейший параметр юзабилити // Вестник магистратуры. — 2013. — № 5 (20).
- Искусство информационной архитектуры - Всего статей - СБОРНИК СТАТЕЙ - Дни Науки . dninauki.ucoz.ru. Дата обращения: 22 марта 2020.
- Захарова А. А. Инструменты маркетинга для продвижения в сети Интернет // Кубанский государственный университет : Статья в журнале - научная статья. — 2014. — ISSN 2500-1515.
- Грегер Сергей Эдуардович. Проектирование и реализация онтологии навигационной системы сайта // Объектные системы. — 2012. — Вып. 1 (6). — ISSN 2309-8856.
- Doss, G. Designing Effective Web Navigation // gdoss.com. — 2002.
- Белова Д. М., Капустина В. А. UX-проектирование WEB-продуктов для решения задач бизнеса на примере грамотного использования паттернов // Информационные технологии в бизнесе.
- Cooper, Alan; Reimann, Robert; Cronin, David; Noessel, Christopher. About Face: The Essentials of Interaction Design (англ.). — 4th. — Wiley, 2014. — P. 131. — ISBN 978-1-118-76657-6.
- Cooper, Alan; Reimann, Robert; Cronin, David; Noessel, Christopher. About Face: The Essentials of Interaction Design (англ.). — Wiley, 2014. — P. 140. — ISBN 978-1-118-76657-6.
- Магазанник В. Человеко-компьютерное взаимодействие. — 2016.
- Ротина К.м. Анализ этапов проектирования сайтов // Вестник Московского государственного университета печати. — 2013. — Вып. 9.
- Долинина М.в. Понятия «Опыт» и «Возможность» в контексте проектирования человеко-машинного взаимодействия // Философские проблемы информационных технологий и киберпространства. — 2013. — Вып. 1.
- Psomas, Steve. The Five Competencies of User Experience Design, UX Matters.
- Lowgren, Jonas Interaction Design - brief intro . The Interaction Design Foundation. Дата обращения: 18 июня 2015.
- International Standards (недоступная ссылка). UsabilityNet (1998). Дата обращения: 18 июня 2015. Архивировано 11 мая 2015 года.
- Тепляков Владислав Алексеевич. Юзабилити сайта как фактор повышения конкурентоспособности компании // Проблемы науки. — 2018. — Вып. 2 (26). — ISSN 2413-2101.
- Marcus, Aaron. Design, User Experience, and Usability: Design Discourse (англ.). — 2015. — P. 340. — ISBN 3319208861.
- Исследование обеспечения доступности интернет-ресурсов Рунета для людей с ограниченными возможностями здоровья (ОВЗ) // Культурный центр «Без Границ». — 2013. — С. 111.
- The Fundamentals of Great UX (16 октября 2014). Архивировано 6 июля 2015 года. Дата обращения 26 июля 2015.
- К. Ахметов. [https://foresight-journal.hse.ru/data/2013/06/27/1285998168/6-Microsoft-58-68.pdf Взаимодействие человека и компьютера: тенденции, исследования, будущее] // Форсайт. — 2013. — Т. 7, № 2.
- Curricula for Human-Computer Interaction, Chapter 2. Definition and Overview of Human-Computer Interaction (недоступная ссылка). ACM SIGCHI. Дата обращения: 18 июня 2015. Архивировано 17 августа 2014 года.
- ДМ Дворянин, КС Скубников. К ВОПРОСУ О ПОНЯТИЯХ UX UI ДИЗАЙНА // Научно-практический электронный журнал Аллея Науки. — 2017. — № 15.
- Chris Kiess. A Practical Guide to UX Specifications . chriskiess.net (7 мая 2014).
- Наталья Баранова. UX и UI: основные понятия дизайна цифрового продукта (5 июля 2017).
- Мария Чесниша. Пользовательское тестирование дизайна и UX как инструмент в проектировании . https://medium.com.
- What Graphic Designers Do . https://www.bls.gov (4 сентября 2019).
- Visual Design Web Style Guide 3 . Web Style Guide (18 июня 2015).
- Cooper, Alan; Reimann, Robert; Cronin, David; Noessel, Christopher. About Face: The Essentials of Interaction Design (4th ed.). — С. 153. — ISBN 978-1-118-76657-6.
- Kiess, Chris A Practical Guide to UX Specifications . C L Kiess (7 мая 2014). Дата обращения: 18 июня 2015.
- What’s the Difference Between a User Experience (UX) Designer and a User Interface (UI) Designer? - Zanthro (недоступная ссылка). Дата обращения: 24 сентября 2015. Архивировано 25 сентября 2015 года.
- Архитектура за 30 секунд. — Рипол Классик. — 162 с. — ISBN 978-5-386-06581-2.
- Чумаков А. А. UX DESIGN // Modern Information Technology – Сучасні Інформаційні Технології. — 2018.
- Сергеев С.Ф. Юзабилити информационных систем в образовании: основные методы юзабилити-тестирования // Образовательные технологии. — 2013.
- Treder, Marcin Beyond Wireframing: The Real-Life UX Design Process . Smashing Magazine (29 августа 2012). Дата обращения: 18 июня 2015.