Как изучается опыт пользователя и что такое UX/UI

В Санкт-Петербурге состоялся митап Теплицы социальных технологий «UI/UX дизайн для НКО». Участники узнали, что такое опыт пользователя и увидели, как он применяется на конкретных примерах. На встрече выступили Андрей Мисюрев и Настя Алифирова из команды проекта «Бременские консультанты».

20 июля 2017 года в Санкт-Петербурге состоялся митап Теплицы социальных технологий «UI/UX дизайн для НКО». Участники узнали, что такое опыт пользователя и увидели, как он применяется на конкретных примерах.

На встрече выступили Андрей Мисюрев и Настя Алифирова из команды проекта «Бременские консультанты».

Что такое UX/UI?

На этот вопрос Андрей Мисюрев ответил одним слайдом:

Слайд из презентации Андрея Мисюрева
Слайд из презентации Андрея Мисюрева.

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

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

UI (User interface) дизайн – узкое понятие, которое включает набор графически оформленных инструментов. Например, кнопки, меню, слайдеры. UI дизайн призван помочь пользователю наладить взаимодействие с сайтом или программой.

Когда дизайнер работает над задачей, он должен ответить на вопросы с трех сторон:

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

«Опыт пользователя лежит как раз там, где люди, а интерфейс пользователя там, где технологии. Раньше дизайнер не думал о том, что есть опыт пользователя. Он просто отвечал на эти вопросы и находил пересечения, то есть здесь мы ничего особо нового не придумываем». Андрей Мисюрев.

Как изучается опыт пользователя?

Для изучения опыта взаимодействия пользователя с уже готовым продуктом подходят аналитические сервисы такие, как Яндекс.Метрика, Google Analytics, Яндекс Вебвизор. По ним можно понять, какие блоки не удобны или не интересны пользователю. Для того чтобы найти решение выявленных проблем, нужно изучать людей, понять, кто они и зачем им нужен этот продукт.

Другой способ – это «прогулка» по сайту или сервису, то есть слежение за последовательностью действий или кликов пользователя. Прогулку можно смоделировать или пройти непосредственно с пользователем.

Еще по теме: Тестируем юзабилити сайта: методы и инструменты

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

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

«К примеру, если мы берем дверной проем, то экстремальным пользователем будет не тот, кто через него легко проходит, а например тот, кто проходит через него с четырьмя колясками или с большим количеством пакетов, слишком высокие или низкие люди». Андрей Мисюрев

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

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

  • Узнайте детальную информацию о проекте. В случае сенсорной комнаты команда начала с понимания ценностей, которые дает сенсорная комната, изучила специальную литературу по сенсорной интеграции. Они выяснили, что интеграция полезна вообще всем, а не только особым детям. Сенсорная интеграция развивается через очень простые вещи: катание в гамаке, лазанье по туннелю, трогание различных фактур различных предметов. Именно вызываемые ощущения оказывают положительное воздействие. Так команда поняла, что нужно говорить про ощущения. Сотрудники Центра также рассказали, что хотят вежливого и дружелюбного отношения к детям. Так сформировался язык и интонация, с которой нужно говорить про продукт.
  • Обратитесь к экспертам. Через экспертов команде стало ясно, что люди извне мало знают про особых детей, про их жизнь и потребности. Это значит, что о проблеме необходимо рассказывать через понятный опыт.
  • Определитесь с аудиторией. 

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

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

Работа с интерфейсом

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

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

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

Примеры использования UI/UX дизайна, которые упоминались на встрече:

Митап состоялся при поддержке Открытого пространства.