10 UX-результатов, которые используют лучшие дизайнеры

Послушайте аудиоверсию этой статьи.

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

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

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

1. Бизнес-цели и технические характеристики

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

Он не должен быть длиннее одной страницы, но должен описывать суть того, что, почему и как. Вот пример: «Компания Fantastic App Co. обнаружила пробел в приложениях для подарков на мобильных платформах для рынка миллениалов (iOS и Android). Многие миллениалы с трудом запоминают особые даты, определяют лучший подарок, а затем находят и покупают эти подарки. Наше решение предназначено для облегчения этого стресса. Используя упреждающий дизайн и новейшие технологии искусственного интеллекта, приложение обеспечивает полезный и почти волшебный пользовательский опыт».

2. Отчет о конкурентном анализе

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

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

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

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

3. Персонажи и отчеты об исследованиях UX

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

Исследование пользователей также является неотъемлемым компонентом процесса проектирования UX. Он включает в себя ряд методов, используемых для извлечения поведенческих моделей, добавления контекста и понимания процесса проектирования. Существует много типов доступных инструментов и методов исследования пользователей — все дело в выборе правильной «линзы» для правильной ситуации.

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

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

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

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

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

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

5. Карты опыта, пользовательские пути и пользовательские потоки

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

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

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

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

6. Каркасы UX

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

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

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

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

Каркасы являются основополагающими и, как таковые, помогают определить структуру дизайна и то, как пользовательский поток работает через приложение или сайт в различных сценариях использования. В вайрфреймах есть несколько интересных поворотов, таких как «каркасные карты», которые обсуждались в предыдущей статье здесь, в блоге Toptal Design, и «вайрфлоу»: результат UX для рабочих процессов и приложений от NNGroup.

7. Интерактивные прототипы

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

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

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

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

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

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

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

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

9. Руководство по стилю и спецификации для разработчиков

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

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

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

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

Если вы работаете в Sketch, есть такие маны, как Zeplin. Zeplin — это инструмент для совместной работы дизайнеров пользовательского интерфейса и разработчиков интерфейса. Это выходит за рамки рабочего процесса проектирования и помогает командам с передачей дизайна.

Кроме того, руководство по стилю дизайна можно сгенерировать за несколько секунд из Sketch с помощью подключаемого модуля Craft, или можно получить измерения и CSS из проекта, создав файл HTML с помощью подключаемого модуля Marketch, как описано в этой статье.

Вот 50 отличных примеров руководства по стилю. Также один от BBC и один от IBM, обе из которых размещают свои руководства в Интернете, что позволяет каждому легко их просматривать.

10. Юзабилити-тестирование и отчеты об аналитике использования

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

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

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

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

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

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

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

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

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