», разрабатывающей интернет-сервисы playfield.am и chameleon.today, написал для рубрики Growth Hacks заметку о том, как уместить пользовательский опыт (UX) в математическую модель.

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

Когда речь идет о скорости загрузки веб-сервисов, мы часто забываем, что на попытку понять интерфейс тоже требуется время - время когнитивной загрузки дизайна. Чем больше мы вникали в эту проблему, тем больше понимали, что время загрузки может быть просто небольшой частью более крупного и важного вопроса: «Возможно ли замерить пользовательский опыт?»

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

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

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

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

Первое, что стоит сделать, это разделить UX на небольшие замеряемые части.

Скорость цифровой загрузки (Vd) = скорость интернета + скорость работы сервера + скорость работы устройства + скорость работы кода (скрипты или запросы, например).

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

Когнитивная скорость загрузки (Vg) продукта - это то, с чего мы начали. Мы находим это особенно интересной темой, потому что это область, в которой дизайн встречается с психологией, где сумма плоских пикселей трансформируется посредством человеческого мозга в наполненный смыслом интерфейс.

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

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

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

Таким образом, можно определить первую часть магической формулы:

Vg = ic / (n * dx),

где Vg - когнитивная скорость загрузки, ic - сложность интерфейса, n - количество посещений, dx - опыт использования аналогичных сервисов.

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

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

V = Vd + Vg

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

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

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

Взаимодействие (i) = Эстетика (e) + Коммуникация (c)

Область, на которой большинство дизайнеров фокусируются, когда пытаются улучшить UX, это взаимодействие. Это самый простой способ улучшения с точки зрения дизайнера. Проблема в том, что из-за «дриббблизации» (от названия сервиса Dribbble - прим. ред.) дизайна молодые дизайнеры думают, что эстетика является единственным фактором в создании хорошего UX.

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

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

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

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

UX = (p * i) / v

Цель (p) = Польза (b) + Статус (s)

Взаимодействие (i) = Эстетика (e) + Коммуникация (с)

Общее время внедрения в сервис (V) = Скорость цифровой загрузки (Vd) + Когнитивная скорость загрузки (Vg)

Неужели Воутер де Бре взломал код UX? Можем ли мы теперь перестать общаться со своими пользователями и просто вычислять это магическое число, чтобы понять является ли наш UX блестящим? Нет.

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

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

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

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

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

Что такое UX исследования?

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

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

Исследования состоят из двух частей: сбор данных и их обработка с целью улучшить юзабилити. В начале проекта дизайнерские исследования посвящены определению требований к проекту от руководителей, а также целей и нужд конечных пользователей. Сюда входит проведение интервью, опросов, изучение потенциальных или существующих пользователей, анализ имеющейся литературы и данных. Затем исследования начинают ориентироваться на юзабилити и мнения о продукте. На данном этапе проводятся A/B тестирования, интервью с пользователями о процессе взаимодействия и тестирование предположений, которые способны улучшить дизайн.

Разделить существующие методы исследования можно на два лагеря:

• Количественные исследования – все, что можно измерить в числах. Они отвечают на подобные вопросы: «Как много людей нажало на эту кнопку?» или «Какой процент пользователей смогли найти призыв к действию?». Эти данные полезны при определении статистических вероятностей и изучении на сайте или в приложении.
• Качественные исследования помогают понять, почему пользователи совершают те или иные действия. Обычно проводятся они в форме интервью или беседы. Используются подобные вопросы: «Почему люди замечают призыв к действию?» или «Что еще люди замечают на странице?».

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

Общие методики

Все разнообразные типы UX исследований от личных интервью до A/B тестирования основываются на трех методиках: наблюдении, понимании и анализе.

Наблюдение

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

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

Понимание

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

Ментальная модель – это представление о мыслях людей об определенной фразе или ситуации. Например, ментальная модель автомобиля владельцев внедорожников будет отличаться от ментальной модели водителей электромобилей. Ментальная модель влияет на решения. Если спросить у автомобилистов: «Сколько времени занимает дорога из Москвы до Санкт-Петербурга», помимо всех прочих данных, они будут ориентироваться и на характеристики своего автомобиля.

Исследователи должны понимать ментальные модели людей, с которыми они проводят интервью, по двум причинам:

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

Анализ

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

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

Виды исследований

Все UX проекты разные, поэтому и список задач может существенно различаться. Самые популярные формы исследования: интервью, опросы и анкетирования, сортировка карточек, тестирование юзабилити, тестирование иерархии и A/B тестирование.

Интервью

Личное интервью – проверенный и доказавший свою эффективность метод коммуникации между исследователем и пользователем или руководителем. Существует три основных типа интервью, каждый из которых преследует разные цели:

• Стандартизированное интервью – самый распространенный тип. Это типичные интервью вопрос-ответ, когда исследователь задает конкретные вопросы. Оно может быть полезно при общении с большим количеством пользователей, когда необходимо сравнить и сопоставить ответы.
• Свободное интервью – отличный способ лучше узнать пользователей или руководителей. Исследователь устанавливает определенные рамки и начинает разговор. В течение интервью говорить должен в основном пользователь (или руководитель), ведущий же может только попросить объяснить что-либо или рассказать подробнее.
• Этнографическое интервью позволяет узнать привычки людей и понять их типичное поведение. Пользователь рассказывает, как он совершает то или иное действие. Такое интервью позволяет оценить разрыв между тем, что люди говорят, и тем, что они делают.

Опросы и анкетирование

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

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

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

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

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

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

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

Что такое UX-дизайн?

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

1. Интерактивный дизайн

Интерактивный дизайн, или IxD – подраздел UX-дизайна, определяющий взаимодействие между пользователем и продуктом; цель этих взаимодействий – хороший пользовательский опыт.

2. Визуальный дизайн

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

3. Пользовательское исследование

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

4. Информационная архитектура

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

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

Составные процессы UX-дизайна

Выделяют три этапа UX-дизайна:

1. поиск целевой аудитории
2. понимание целей компании – как такие цели влияют на пользователя
3. нешаблонное мышление

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

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

Принципы UX-дизайна

Отрасль UX-дизайна стремительно меняется, но основополагающие принципы все те же. Дизайнеры должны понимать, что им нужно с точки зрения визуального баланса. Краткость и понятность – важные нюансы; здесь применим принцип – чем меньше, тем лучше. Стремитесь к тому, чтобы дизайн был интуитивно понятен, и, что еще важнее, учитывайте интересы и потребности пользователей.

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

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

Будьте человечны : Никому не нравится чувство, будто взаимодействуешь с машиной. Вы с большей вероятностью сможете выстроить доверительные отношения, если покажете свою компанию с человеческой стороны.

Доступность : Никто не хочет понапрасну тратить свое время. Успешный UX-дизайн улучшает навигацию.

Легкость : Последовательность и незамысловатость дизайна – это всегда хорошо. Вы строите отношения с пользователями за счет удобного UX.

Простота : Никаких просчетов или лишних описаний. Сразу переходите к главному.

Результат UX

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

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

1. Пользовательское исследование

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

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

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

2. Оценка конкурентов

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

3. Интерактивный дизайн

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

4. Информационная архитектура

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

Что такое дизайн пользовательского интерфейса?

Когда Apple представила навигационный компонент Click Wheel для iPod, эта штука была интуитивно понятной и высокофункциональной – не говоря уже о визуальной составляющей. Это хороший пример успешного пользовательского интерфейса, или UI. UI – это способ взаимодействия с компьютерами, машинами, сайтами, приложениями, носимыми устройствами и пр. UI-дизайн – это то, что делает все эти вещи максимально упрощенными и эффективными.

UI vs. UX

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

Общие UI-элементы

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

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

Навигация «хлебные крошки»

Это дизайнерский инструмент, который визуально улучшает юзабилити сайта.

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

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

Исследование опыта взаимодействия

Без исследования не удастся узнать о потребностях и предпочтениях людей. UX-исследование – это поиск того, что нужно пользователям; полученные данные ложатся в основу UX-дизайна. Компании и дизайнеры применяют исследования, чтобы сделать определенные выводы, о том, что работает и что лучше изменить. Есть несколько вариантов UX-исследований.

Юзабилити-тестирование

Задача такого исследования – узнать, насколько успешен продукт; в тестировании участвуют пользователи. Так компании получают реальную информацию о том, как люди пользуются продуктом или системой, или как этот продукт или система работают. Есть два основных способа тестирования.

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

Удаленное юзабилити-тестирование позволяет компаниям провести исследование в условиях, когда пользователи находятся в своей естественной среде (например, у себя дома или в офисе).

Инструменты юзабилити-тестирования

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

Adobe Fireworks СS6 позволяет веб-дизайнерам создавать графику для веб-страниц без необходимости вникать в тонкости программного кода или дизайна. У Adobe Fireworks есть ряд преимуществ. У этого инструмента впечатляющая точность пикселя, есть опции сжатия изображений (JPEG, GIF и т.д.), что позволяет пользователям создавать функциональные сайты и строить векторы.

С помощью Adobe XD можно создавать дизайн сайтов и мобильных приложений, а также прототипы, каркасное моделирование и векторную графику. Можно делиться интерактивными прототипами на нескольких платформах, включая Windows, Mac, iOS и Android – инструмент идеально подходит для командной работы.

Axure RP Pro – еще один хороший инструмент для UX-дизайна и, к тому же, бесплатный. В Axure реализованы несколько опций, в т.ч. прототипирование и документирование. Можно даже создавать схему перемещения пользователя и карты сайтов. Axure идеально подходит для создания веб- и десктопных приложений, пользователям предоставляется возможность быстрого экспорта в PDF или HTML.

Это комплексный софт со множеством специфических функций, в т.ч. недиструктивное редактирование (под этим подразумевается то, что Sketch не будет менять плотность пикселей изображения, с которым вы работаете). Экспорт кода, пиксельная точность, прототипирование, векторное редактирование – вот основные преимущества Sketch.

6. Софт для сторибординга

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

Storyboarder – бесплатная разработка с базовым функционалом, которая подойдет для всех дизайнеров, независимо от уровня их мастерства. Это ПО быстро создает наброски или фигурки, чтобы описать план или идею. Еще один инструмент – Toon Boom Storyboard Pro . Он совмещает в себе функцию рисования, анимации, контроля камеры и другие многочисленные опции – за ежегодную или ежемесячную плату. Широкий функционал, для усложненного сторителлинга и детальной подготовительной работы. Все это подойдет для дизайнеров, которые ищут возможность, чтобы визуально рассказать свою историю с помощью интерфейса.

Как стать UX-дизайнером?

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

Есть несколько важных шагов на пути к карьере UX-дизайнера. Многие университеты мира предлагают свои курсы, но чтобы на них записаться, 4 года образования в сфере дизайна – это, как правило, обязательное условие. Есть более гибкие программы, такие как Quinnipiac University Graduate Program in User Experience Design . Существуют и программы сертификации профессионалов. Многое зависит от продолжительности обучения и уровня подготовки.

Если вы готовы воплотить свою мечту и стать UX-дизайнером, понадобится резюме и яркое портфолио. Пригодятся такие ресурсы, как Dribbble или Behance . Свои работы можно продемонстрировать на собственном сайте, созданном с помощью таких конструкторов, как SquareSpace.

Не упускайте из поля зрения следующие нюансы:

Визуальная привлекательность

Презентация – это все. Работа должна говорить сама за себя… показывайте, а не говорите! Выбор цвета, типографика – все это важно.

Добавьте страницу «о себе»

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

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

Объясните, как вы создаете свой UX

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

Создайте дополнительное портфолио

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

Итог

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

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

День за днем мы переполнены массовым потоком информации, как в автономном режиме, так и в режиме онлайн. Благодаря новым технологиям и быстрому подключению к Интернету люди создают больше контента, чем физически способны потреблять. Работая с многочисленными веб-сайтами и приложениями, пользователи не читают все, что они видят слово за словом — они сначала просматривают страницу, чтобы узнать, что может быть полезного для них. Задача сделать интерфейс читаемым является одним из основных факторов достижения удобства использования.

Что такое читаемость интерфейса?

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

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

Почему это важно? Около десяти лет назад Яков Нильсен ответил на вопрос о том, как люди читают в Интернете: «Они этого не делают. Люди редко читают веб-страницы слово за словом; вместо этого они просматривают страницу, выбирая отдельные слова и предложения ». С тех пор взаимодействие не сильно изменилось: мы не готовы вкладывать наше время и усилия в изучение веб-сайта, если мы не уверены, что это соответствует нашим потребностям. Итак, если глаз не можем поймать взгляд с первых моментов взаимодействия, риск высок, что пользователь уйдет. Каким бы ни был тип веб-сайта, читаемость является одним из значимых факторов удобного взаимодействия.

Как вы можете проверить, читаема ли веб-страница? Попробуйте взглянуть на нее, с точки зрения нового пользователя и ответить на два вопроса:

• То, что вы видите в первые мгновения взаимодействия, соответствует ожидаемой аудитории на этой странице?
• Можете ли вы понять, какая информация находится на странице в течение первых секунд?

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

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

Популярные шаблоны чтения

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

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

Z-Pattern довольно типичен для веб-страниц с равномерным представлением информации и слабой визуальной иерархией.

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

Еще одна модель — это F-шаблон, представленный в исследованиях Nielsen Norman Group и показывающий, что пользователи часто используют следующий поток взаимодействия:

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

Способы сделать интерфейс читаемым

1. Визуальная иерархия

Написал:

Эксперт в области дизайна, разработки, веб-аналитики

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

Действительно, этот формат наглядно демонстрирует существующие тенденции и наблюдающиеся отклонения.

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

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

Немного о визуализации

«Цель визуализации — понимание, а не картинка».
— Бен Шнейдерман (Ben Shneiderman), известный американский научный деятель в области информатики.

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

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

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

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

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

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

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

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

Диаграмма сходства

В тот момент, когда вы использовали заметки на стикерах, чтобы применить к ним методику тематического анализа для определения четырех основных страхов, с которыми сталкивается ваша целевая группа, вы тем самым уже применили один из методов визуализации: диаграмму сходства (Affinity Diagram).

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

Теперь вам необходимо «очистить» эту диаграмму, чтобы она лучше отображала информацию, которую вы хотите донести в своем отчете.

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

• Какое влияние эти страхи оказывают на жизнь ваших пользователей?
• Когда это конкретное опасение проявляется в наибольшей степени?
• Что его вызывает?
• Есть ли у вас какое-либо представление о том, как можно его уменьшить?

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

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

Карта эмпатии

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

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

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

Карта путешествия пользователя

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

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

• Какие задачи выполняют опекуны?
• Когда они выполняют эти задачи?
• Какие еще действия они совершают до и после выполнения этих задач?
• Как они себя чувствуют, обеспечивая уход своим близким?

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

В высшей степени эффективным способом отображения этого потока относительно некоего периода времени является создание карты путешествия пользователя (User Journey Map).

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