Что такое UX и UI дизайн – особенности и отличия. Опросы и анкетирование
Когда речь заходит о визуализации результатов исследований, большинство маркетологов автоматически представляет себе график или диаграмму. Вы тоже вообразили нечто подобное, не так ли?
Действительно, этот формат наглядно демонстрирует существующие тенденции и наблюдающиеся отклонения.
Однако это в основном касается количественных исследований. Зачастую графики являются не лучшим способом представления результатов применения , таких как опросы или наблюдения. Часто количество участников этих типов исследований слишком незначительно для создания значимых графиков. Кроме того, иногда идеи, которые вы хотите донести до вашей команды, не могут быть выражены в виде чисто количественных показателей.
В этой статье мы расскажем вам, как можно визуализировать более субъективные и нечетко выраженные данные, полученные от применения качественных маркетинговых методов исследования.
Немного о визуализации
«Цель визуализации — понимание, а не картинка».
— Бен Шнейдерман (Ben Shneiderman), известный американский научный деятель в области информатики.
Когда вы создаете отчет о результатах качественных исследований, ваша цель, скорее всего, — формирование понимания целевой аудитории, а также задач, которые им необходимо выполнить для получения желаемого. Особенно актуален данный тип опросов на начальных этапах проектирования (чтобы узнать, что разрабатывать) и в конце (чтобы понять, насколько хорошо ваш проект соответствует целям).
В зависимости от того, кому именно вы предоставляете ваш отчет (например, разработчикам или клиентам), и его глубины (другими словами, нужна ли вам глубокое понимание пользователей, или же требуется скорее ощущение контекста, в котором продукт будет использоваться), вам предстоит определить, какой вид визуализации лучше всего подходит для отображения результатов исследования.
Представьте, что вы провели несколько опросов людей из вашей целевой группы: неофициальных опекунов, которые заботятся о своих родственниках — пожилых людях с ранними признаками деменции.
Респонденты поделились с вами некоторой важной информацией о страхах, испытываемых ими относительно своей ситуации, чтобы помочь вам в разработке продукта, который должен помочь им быть более независимыми в уходе за своими близкими (предположим, что это мобильное приложение, выполняющее функции онлайн-консультанта).
Вы использовали методику тематического анализа с помощью стикеров и обнаружили четыре категории страхов, которые было бы уместно рассмотреть при разработке нового продукта:
- изменение взаимоотношений,
- постоянное чувство беспокойства,
- недостаточная компетентность,
- нехватка личного времени.
Какими методами вы предпочли бы распространить результаты, полученные вами? Просто предоставили бы клиентам короткий список из четырех страхов? Или круговую диаграмму, показывающую, как часто упоминалась определенная категория страхов в опросе? Однако мы можем утверждать, что вышеупомянутые способы передачи информации не приводят к глубокому пониманию, которого вы стремитесь достичь. Список сам по себе не является достаточно захватывающим способом презентации, способным вызвать какую-либо эмпатию.
Ниже мы покажем вам три способа визуализации качественных результатов, которые работают намного эффективнее, чем обычные списки или диаграммы.
Диаграмма сходства
В тот момент, когда вы использовали заметки на стикерах, чтобы применить к ним методику тематического анализа для определения четырех основных страхов, с которыми сталкивается ваша целевая группа, вы тем самым уже применили один из методов визуализации: диаграмму сходства (Affinity Diagram).
Вы записывали каждое из полученных в ходе опросов замечание пользователей на отдельный стикер, затем группировали их по степени похожести, по мере продвижения процессы создавая категории . В итоге, на диаграмме, которую вы создали в качестве инструмента анализа, оказалось представлено огромное количество информации.
Теперь вам необходимо «очистить» эту диаграмму, чтобы она лучше отображала информацию, которую вы хотите донести в своем отчете.
Вы можете принять решение, что сформированные категории должны отражать четыре основных страха, обнаруженных вами в ходе опросов. Затем вам нужно спросить себя, какие фрагменты информации помогут вашим коллегам-разработчикам и вашим клиентам понять, что эти опасения влекут за собой.
- Какое влияние эти страхи оказывают на жизнь ваших пользователей?
- Когда это конкретное опасение проявляется в наибольшей степени?
- Что его вызывает?
- Есть ли у вас какое-либо представление о том, как можно его уменьшить?
Вся эта информация уже будет находиться в данных опроса, которые вы рассортировали по отдельным категориям. Теперь вам просто нужно отфильтровать самые важные из них и представить их ясным и визуально привлекательным способом, учитывая предпочтения людей, до которых вы хотите донести свое сообщение. Вы можете использовать цитаты или ключевые слова, а также — при желании — проиллюстрировать их рисунками. На приведенном ниже изображении показано, как может выглядеть диаграмма сходства из описываемого примера:
Диаграмма сходства, на которой цитаты из пользовательских исследований сгруппированы вокруг четырех наиболее распространенных страхов, обнаруженных вами. Изображение, расположенное на заднем плане этой диаграммы сходства и показывающее пользователя в контексте исследования, помогло бы оживить обзор и пробудить эмпатию.
Карта эмпатии
Карта эмпатии (Empathy Map) — это превосходный способ создать ясное представление о четырех основных областях, на которых разработчики должны будут сосредоточиться, чтобы выразить сопереживание целевой группе: что люди говорили, делали, думали и чувствовали (см. картинку ниже). Это также очень важно для вашего клиента — организации здравоохранения, — в отношении неформальных опекунов, поскольку у них могут существовать некоторые предубеждения, основанные на обычном взаимодействии с целевой группой. может спровоцировать дискуссию в команде заказчика и заставить их признать, что им придется скорректировать свою точку зрения. В здравоохранении (но это справедливо и для многих других контекстов), медицинские работники считают, что они могут говорить вместо пациента или его семьи, при этом склонны забывать, что они имеют ограниченное представление о жизни опекаемых и поэтому могут не понимать все потребности последних.
Чтобы создать карту эмпатии, основанную на результатах ваших опросов, вы просматриваете примечания и другие материалы, которые вы получили в ходе своих качественных исследований пользователей. Для каждого квадранта — или каждой области фокусировки — вы либо выбираете соответствующие цитаты и изображения, либо обобщаете соответствующие выводы на основе полученных данных. Как вы можете видеть на изображении ниже, полученная в результате карта эмпатии опирается на те же данные, что и диаграмма сходства, созданная ранее, но передает другую, отличающуюся информацию. В рассматриваемом примере обе визуализации могут иметь значение для успешного проектирования:
Пример карты эмпатии, которая может появиться в результате исследования конкретной категории пользователей: неформальных опекунов пациентов, страдающих деменцией. Изображение в середине карты должно отображать вашего пользователя, чтобы увеличить возможность проявить эмпатию к ней или к нему. Вы можете применить изображение из персоны пользователя, созданной вами.
Карта путешествия пользователя
Итак, вы создаете новый продукт, чтобы помочь непрофессиональным опекунам пожилых людей с незначительными симптомами деменции быть более независимыми в оказании помощи пациентам. Ваш клиент — управленческая команда организации здравоохранения, занимающейся вопросами опеки этих пожилых людей.
Одним из вопросов, на котором вы, скорее всего, должны были сфокусироваться во время ваших исследований пользователей, был контекст, в котором неформальные опекуны оказывают помощь своим подопечным. Возможно, вы задали себе такие вопросы как:
- Какие задачи выполняют опекуны?
- Когда они выполняют эти задачи?
- Какие еще действия они совершают до и после выполнения этих задач?
- Как они себя чувствуют, обеспечивая уход своим близким?
То, что имеет значение в вашем исследовании, — это не только прямые ответы на вышеперечисленные вопросы, но и поток задач, создаваемый ими на протяжении всей жизни (т. е. периода выполнения данной деятельности) неформальных опекунов. Например, важно знать, можно ли заранее планировать уход, который они обеспечивают, или же намеченные мероприятия будут прерываться другими видами деятельности.
В высшей степени эффективным способом отображения этого потока относительно некоего периода времени является создание карты путешествия пользователя (User Journey Map).
Которую вы видите на изображении ниже, отображает период длительностью в один день. Вы можете выбрать этот период в соответствии с единицей измерения времени, которая имеет смысл для вашего проекта — иногда неделя или месяц могут быть более уместными. Вы можете отметить шаги, связанные с уходом об опекаемых на протяжении обычного дня, создавая отдельные пути для действий, мышления и чувств, использованных вами при составлении карты эмпатии. Кроме того, вы должны указать любые точки контактов с действующими медицинскими услугами, предоставляемыми организацией здравоохранения или любым другим вовлеченным лицом. Сосредоточьтесь на показе движения пользователя через разные точки контакта в течение дня и на том, как пользователь ощущает каждое взаимодействие в этом путешествии. Впоследствии вы должны быть в состоянии поддерживать связь с вашей командой и клиентом, чтобы совместно решать, какие взаимодействия на карте должны изменяться, удаляться или добавляться.
При определении стоимости имущества используют три подхода:
Затратный подход.
Затратный подход - совокупность методов оценки стоимости объекта оценки, основанных на определении затрат, необходимых для воспроизводства либо замещения объекта оценки с учётом износа и устареваний. Затратами на воспроизводство объекта оценки являются затраты, необходимые для создания точной копии объекта оценки с использованием применявшихся при создании объекта оценки материалов и технологий. Затратами на замещение объекта оценки являются затраты, необходимые для создания аналогичного объекта с использованием материалов и технологий, применяющихся на дату оценки.
Затратный подход применяется, когда существует возможность заменить объект оценки другим объектом, который либо является точной копией объекта оценки, либо имеет аналогичные полезные свойства. Если объекту оценки свойственно уменьшение стоимости в связи с физическим состоянием, функциональным или экономическим устареванием, при применении затратного подхода необходимо учитывать износ и все виды устареваний.
Сравнительный подход.
Сравнительный подход - совокупность методов оценки стоимости объекта оценки, основанных на сравнении объекта оценки с объектами-аналогами объекта оценки, в отношении которых имеется информация о ценах. Объектом-аналогом объекта оценки для целей оценки признается объект, сходный объекту оценки по основным экономическим, материальным, техническим и другим характеристикам, определяющим его стоимость.
Сравнительный подход применяется, когда существует достоверная и доступная для анализа информация о ценах и характеристиках объектов-аналогов. Применяя сравнительный подход к оценке, оценщик должен:
а) выбрать единицы сравнения и провести сравнительный анализ объекта оценки и каждого объекта-аналога по всем элементам сравнения. По каждому объекту-аналогу может быть выбрано несколько единиц сравнения. Выбор единиц сравнения должен быть обоснован оценщиком. Оценщик должен обосновать отказ от использования других единиц сравнения, принятых при проведении оценки и связанных с факторами спроса и предложения;
б) скорректировать значения единицы сравнения для объектов-аналогов по каждому элементу сравнения в зависимости от соотношения характеристик объекта оценки и объекта-аналога по данному элементу сравнения. При внесении корректировок оценщик должен ввести и обосновать шкалу корректировок и привести объяснение того, при каких условиях значения введенных корректировок будут иными. Шкала и процедура корректирования единицы сравнения не должны меняться от одного объекта-аналога к другому;
в) согласовать результаты корректирования значений единиц сравнения по выбранным объектам-аналогам. Оценщик должен обосновать схему согласования скорректированных значений единиц сравнения и скорректированных цен объектов-аналогов.
Доходный подход.
Доходный подход - совокупность методов оценки стоимости объекта оценки, основанных на определении ожидаемых доходов от использования объекта оценки.
Доходный подход применяется, когда существует достоверная информация, позволяющая прогнозировать будущие доходы, которые объект оценки способен приносить, а также связанные с объектом оценки расходы. При применении доходного подхода оценщик определяет величину будущих доходов и расходов и моменты их получения.
Применяя доходный подход к оценке, оценщик должен:
а) установить период прогнозирования. Под периодом прогнозирования понимается период в будущем, на который от даты оценки производится прогнозирование количественных характеристик факторов, влияющих на величину будущих доходов;
б) исследовать способность объекта оценки приносить поток доходов в течение периода прогнозирования, а также сделать заключение о способности объекта приносить поток доходов в период после периода прогнозирования;
в) определить ставку дисконтирования, отражающую доходность вложений в сопоставимые с объектом оценки по уровню риска объекты инвестирования, используемую для приведения будущих потоков доходов к дате оценки;
г) осуществить процедуру приведения потока ожидаемых доходов в период прогнозирования, а также доходов после периода прогнозирования в стоимость на дату оценки.
Оценщик для получения итоговой стоимости объекта оценки осуществляет согласование (обобщение) результатов расчёта стоимости объекта оценки при использовании различных подходов к оценке и методов оценки. Если в рамках применения какого-либо подхода оценщиком использовано более одного метода оценки, результаты применения методов оценки должны быть согласованы с целью определения стоимости объекта оценки, установленной в результате применения подхода.
При согласовании результатов расчёта стоимости объекта оценки должны учитываться вид стоимости, установленный в задании на оценку, а также суждения оценщика о качестве результатов, полученных в рамках примененных подходов. Выбранный оценщиком способ согласования, а также все сделанные оценщиком при осуществлении согласования результатов суждения, допущения и использованная информация должны быть обоснованы. В случае применения для согласования процедуры взвешивания оценщик должен обосновать выбор использованных весов.
В чем польза вашего сайта или приложения? В том, что с его помощью просто собирать информацию? Или же покупать в один клик, а доставку товара получать уже завтра? Или главное – быстро находить ответы на нужные вопросы?
Подумайте о людях, которые разработали этот сайт или приложение. Какую они преследовали цель?
Они пытались сделать веб-ресурс, на котором было бы все то, за что его полюбят. Простой в использовании сайт, который бы быстро выдавал искомую информацию и помогал принимать взвешенные решения.
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-дизайн сейчас как никогда важен – присоединяйтесь к этому движению и извлекайте пользу для своего бизнеса.
», разрабатывающей интернет-сервисы 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-дизайнеры должны принимать во внимание, как работают сенсорная и кратковременная память. Конечно, любой дизайнер нацелен прежде всего на длительное запоминание, которое позволит человеку постоянно держать в голове основные данные о приложении, так как в этом случае пользователю будет легко взаимодействовать с интерфейсом снова и снова. Зная, каким образом данные перемещаются в естественное хранилище, разработчики могут создать эффективную стратегию восприятия информации, которая будет включать в себя закрепляющие повторы. Понимание того, как устроена память, также поможет правильно организовать данные на дисплее и усилить информационную архитектуру проекта.
Основные законы памяти
Есть три аспекта запоминания, о которых часто говорят специалисты в области психологии:
Концентрация . Чтобы запомнить что либо или сохранить фрагмент знаний, человек должен сосредоточиться. В противном случае очень велика вероятность того, что информация будет признана неважной и отправится на уровень кратковременной памяти.
Ассоциация . Наша память представляет собой огромную нейронную сеть, которая соединяет различные массивы данных. Если человек пытается выстроить ассоциацию, которая может по-новому связать существующие блоки или уже объекты, хранящиеся в памяти, то шансы на запоминание значительно повышаются.
Повторение . Это один из самых эффективных способов активации данных, которые хранятся в оперативной памяти. Повторы позволяют перенести информацию в долговременную память.
Интерфейс, спроектированный на основе этих трех аспектов, имеет ярко выраженную визуальную иерархию, которая влияет на восприятие дизайна в целом. Такой интерфейс лучше запоминается и с ним проще взаимодействовать.
Существует несколько правил и законов, которые появились благодаря результатам, полученных в ходе исследований, экспериментов и практических текстов. Говоря об этом, нельзя не упомянуть закон Хика и закон Миллера.
Закон Миллера
Число объектов, которые средний человек может запомнить и повторить, равняется примерно семи.
В 1956 году американский психолог Джордж Миллер опубликовал обзор, в основе которого лежало исследование человеческой памяти. Обзор назывался «Магическое число семь плюс-минус два». Миллер обратил внимание научного сообщества на некоторые ограничения в человеческой способности обработки информации. Он утверждал, что наша кратковременная память способна хранить и обрабатывать около семи объектов или блоков данных плюс или минус два за один раз. Очевидно, что формулировка носит общий характер, так как на запоминание влияет множество факторов, в том числе и тип информации.
Более поздние исследования, такие, как обзор Ричарда Ниффрина и Роберта Нософски дают более глубокое понимание того, как работает оперативная память. В частности, авторы отмечают, что количество объектов, которые человек может запомнить после того, как он их увидит, равняется семи для цифр, шесть для заголовков и пять для отдельных слов.
С точки зрения дизайна, эту информацию можно использовать для формирования четкого и полезного плана. Интерфейсы, которые предлагают слишком много вариантов за один раз, могут создать напряженность и пользователь почувствует раздражение, даже в том случае, если он не сможет описать причину появления негативных эмоций.
Закон Хика
Чем больше элементов доступно человеку, тем труднее ему сделать выбор
На первый взгляд кажется, что этот закон не имеет отношение к памяти, но это не совсем так. Память является одним из естественных механизмов, который защищает людей от получения негативного опыта. Чем больше вариантов выбора возникает перед человеком, тем сильнее он отвлекается на многочисленные ассоциации, и невозможно предсказать к каким последствиям, хорошим или плохим это приведет в каждом конкретном случае. Кроме того, многовариантность выбора может перегрузить память пользователя, если число элементов, между которых нужно сделать выбор, будет превышать возможности оперативной памяти человека.
Законом Хика можно руководствоваться, к примеру, при проектировани платформ для электронной коммерции, где нужно держать жесткий баланс между предоставлением максимально полной информации и множеством объектов выбора. Поиск этого баланса является главной задачей для любого UX-дизайнера.
Не заставляйте пользователей запоминать несколько объектов одновременно.
Конечно, данный совет не означает, что дизайн интерфейса или веб-страницы не может быть ограничен использованием 5-9 элементов. Тем не менее, количество элементов, являющихся узловыми точками, лучше ограничить в этих пределах. Создавая в макете несколько привлекательных элементов, дизайнеры могут следовать правилу концентрации и память будет лучше фиксировать ключевые зоны, такие как меню, призывы к действию, изображение продукта и так далее. Визуальная иерархия при этом является одной из жизненно важных стратегий, позволяющей создать интерфейс, состоящий из множества сгруппированных и визуально разделенных элементов, распределенных таким образом, что они лучше запоминаются человеком.
Законы Миллера и Хика также можно использовать применительно к контенту в интерфейсах. Так, идеальная длина заголовка составляет 6 слов и это подтверждает исследование гуру UX-дизайна Якоба Нильсена – эффективно работают заголовки из 5-6 слов. Одной из причин этого феномена является особенность нашей оперативной памяти – такие массивы данных обрабатываются быстрее.
Не предоставляйте слишком много элементов на выбор
В любом интерфейсе есть элементы, на которых пользователь должен сконцентрироваться. Поэтому очень важно позаботиться об их соотношении. Если предоставить пользователю несколько различных вариантов выбора, обработка данных потребует больше времени и усилий. Кратковременная память будет перегружена и это может отвлечь человека от принятия окончательного решения. Многовариантность может быть причиной появления неэффективных веб-страниц или воронок продаж – даже если они потрясающе разработаны, постоянно отвлекающийся пользователь может уйти прежде, чем произойдет преобразование.
Выходом из этого положения может быть скроллинг или переходы, основанные та тщательной приоритезации. Разделив объекты на дисплее или странице на группы начального, среднего и высшего значения, дизайнер сможет сделать навигацию и интерфейс более естественными.
Помогайте памяти, используя узнаваемые образы
Хорошо известно, что люди существа визуальные, именно поэтому дизайнеры тратят столько времени, чтобы овладеть искусством создания эффектных изображений, которые не только привлекают внимание, но и информируют пользователей, а также вносят систему в организацию контента. Различные графические элементы, такие, как иконки и иллюстрации, воспринимаются и запоминаются быстрее, а правильно оформленные заголовки становятся информативнее.
При создании визуальной составляющей макета очень полезно использовать различные узнаваемые модели и маркеры, которые знакомы множеству людей. Это лупа для иконки пользователя, корзина для сбора заказов, кнопка для создания нового элемента, различные флажки и многое другое. Все эти маркеры относятся к элементам, хранящимся в долговременной памяти, поэтому они вызывают правильные ассоциации и не вынуждают пользователя обрабатывать и сохранять информацию.
Большинство пользователей, попадая на сайт, интуитивно ищут узнаваемые образы – логотип, ссылки на основные разделы, кнопки действия. Однако есть еще и такие разделы, как контакты или политика конфиденциальности. Эти разделы тоже важны, но их приоритет ниже при первоначальном зрительном контакте. Зная эту модель поведения пользователей, разработчики могут помочь пользователям сократить усилия и сделать основные операции простыми и интуитивно понятными. Кроме того, восприятие таких интерфейсов будет положительным и они будут лучше запоминаться.
Используйте последовательные навигационные маркеры
Навигация является ключевым фактором юзабилити. Перемещаясь по сайту или приложению посредством интерфейса, человек получает данные, которые сохраняются в его памяти. Поэтому дизайнеры используют различные методы создания переходов для более последовательного взаимодействия. Таким маркером может быть цветовая палитра навигационных элементов, иконки, которые указывают на сгруппированные данные, шрифты, а также иллюстрации. Использование маркеров повышает уровень запоминаемости интерфейса и часто помогает оказать пользователю поддержку в обработке новых данных.
Не прячьте основные элементы навигации
Наверное, дискуссии о том, какой должна быть идеальная навигация, не прекратятся никогда. Однако очень важно помнить, что ключевая задача интерфейса заключается в том, чтобы предоставить пользователю все для того, чтобы он понял, что происходит. Таким образом, решение о том будет это гамбургер или скрытое меню, должно основываться на тщательном анализе пользовательской аудитории.
Для слишком сложных и перегруженных интерфейсов скрытые основные навигационные элементы это скорее минус, чем плюс, так как пользователям приходится находить и запоминать некоторые закономерности взаимодействия. Конечно, некоторым людям может понравится скрытая навигация, но нужно помнить и о тех, кто будет испытывать раздражение, вспоминая, как найти нужный раздел. Здесь поможет расстановка приоритетов – оставляя основные элементы на виду и скрывая второстепенные, дизайнер может привлечь внимание к ключевым блокам.
Стимулируйте различные типы памяти
Самый первый и самый быстрый этап получения новых данных обеспечивает сенсорная память. Такая память делится на несколько типов: визуальная, слуховая, кинестетическая, механическая, словесная. Активируя различные типы памяти, дизайнеры могут создавать более запоминающиеся потоки взаимодействия и поддерживать большее количество пользователей. Разные люди обладают разными типами памяти и об этом нужно помнить при проектировании интерфейса.
Помните об эмоциях
Эмоциональная обратная связь от взаимодействия является важнейшим фактором, влияющим на рост или сокращение числа пользователей. Неудачный опыт заставляет человека быстрее забыть мелкие детали, но, как правило, оставляет негативный осадок в памяти. Так мозг пытается защитить человека от стресса. Положительные эмоции, такие как радость, решение проблемы или эстетическое удовлетворение, запоминаются надолго и могут существенно повысить лояльность пользовательской аудитории.