Совершенствуйте процесс проектирования UX — руководство по дизайну прототипов

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

Как и зачем на самом деле создавать прототип, часто остается загадкой. Спросите многих дизайнеров, и они склонят головы, как растерянные щенки. "Что ты имеешь в виду? Просто сделай это», — скажут они. И правда: все мы умеем создавать прототипы. Мы просто не знаем, откуда мы знаем.

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

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

Дизайн прототипа — для чего нужны прототипы

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

Так что же такое прототип? Прототип — это инструмент для визуализации «шведского стола» интерактивной дизайнерской работы; по сути, прототипы (практически на любой стадии) представляют собой объединение всей предшествующей работы в единую, видимую, функциональную часть. Это визуальное представление демонстрирует, что продукт делает в любой момент, что представляют собой интерактивные элементы и как продукт будет функционировать в реальном мире.

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

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

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

Тим Браун, генеральный директор и президент IDEO

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

Это практическое объяснение того, как что-то работает, имеет ряд ценных преимуществ, в том числе:

• Воплощение в реальность — прежде чем будут построены какие-либо прототипы, продукт будет полностью концептуальным! Некоторое время это нормально, но в конечном итоге это должно стать чем-то, что заинтересованные стороны и пользователи в конечном итоге поймут и оценят. Прототип — это первый шаг на пути от концепции к реальности.
• Решите проблему . Иногда у нас возникает дизайнерская задача, но решения нет. Как навык прототипирование — отличный способ визуализировать проблему и быстро представить решения. Если это не сработает, выбросьте прототип и попробуйте снова.
• Итерация . Создание прототипа происходит поэтапно, но результат один и тот же: развитие ваших идей. Каждая новая итерация, от эскизов до Hi-Fi, предлагает множество вариантов поведения и функций для тестирования. А с большим количеством данных мы можем выполнять итерации быстрее и эффективнее.
• Обнаружение непреднамеренных сценариев . Как только что- то становится видимым, у нас есть доступ к ограничениям нашего продукта для изучения, что также обеспечивает лучший контекст того, что должно быть там… и что не должно быть!
• Обнаружение проблем с юзабилити . Именно этим живут многие дизайнеры: как только у продукта появляется какой-либо прототип, проблемы с юзабилити внезапно становятся легко обнаруживаемыми и устраняемыми.
• Презентация — прототипы на любом этапе являются стандартом для презентации. Независимо от того, тестируете ли вы версию страницы или представляете продукт клиенту, прототип в той или иной форме должен присутствовать. И если это не так, вы можете поспорить, что кто-нибудь спросит, где это и почему это не было включено.

Как начать процесс прототипирования

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

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

1. Каковы цели проекта?

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

2. Какие конкурентоспособные продукты люди используют в настоящее время?

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

3. Кто является аудиторией? Каковы их цели?

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

4. Что это за продукт и для чего (устройства) он предназначен?

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

5. Есть ли визуальные прецеденты для подражания?

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

6. Каковы результаты?

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

Нарисуйте свои прототипы

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

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

01 | Потоки пользователей — следите за идентификацией потоков пользователей. Посмотрите, как пользователи достигают своих целей и как они взаимодействуют в системе.

02 | Информационные объекты — каждый пользовательский поток будет отображать некоторые пользовательские входы и выходы. Определите, что они из себя представляют, как они связаны с поведением и ожиданиями пользователей, в какие взаимодействия они вовлечены и как они работают.

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

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

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

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

Переход к цифровым технологиям (прототипы от низкого до высокого качества)

Как только будет достаточно полных эскизов, чтобы двигаться дальше, пришло время их оцифровать. Будь то Adobe XD, Sketch, Framer, Flinto или что-то еще, создание цифровых версий эскизов — это первый шаг к их формализации. Таким образом, акцент смещается с творческого добавления необходимых элементов на организацию активов и структуры в дизайне.

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

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

С каждым новым проводом и итерацией задавайте два основных вопроса: Учитывает ли эта страница свою цель в более широком пользовательском потоке? И имеет ли взаимодействие смысл (имеется в виду, понял ли пользователь, как выполнить действие)? Мы очень часто задаем эти вопросы. Чем больше мы делаем, тем больше вероятность того, что каждая новая итерация будет приближать прототипы к окончательному варианту.

Цифровые прототипы также гораздо проще тестировать, поскольку они не только более разборчивы, но и быстрее воспроизводятся и итерируются в массовом порядке. Именно здесь инструменты прототипирования UX, такие как InVision и Proto.io, очень удобны для создания интерактивных прототипов. Когда это кликабельно, становится легко проверить удобство использования различных аспектов, от отдельных кнопок до целых потоков.

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

С некоторыми инженерными ноу-хау или более мощными инструментами, такими как Justinmind или Axure, также можно создавать функциональные прототипы, которые интерактивны, а не просто щелкают мышью. Пользователи могут тестировать такие вещи, как заполнение форм, выполнение простых или сложных задач и фактическое использование приложения так, как оно предназначено для использования, без его фактической сборки. Дизайнеры, прошедшие подготовку в области взаимодействия человека с компьютером (HCI), в том числе многие дизайнеры Toptal, регулярно создают и тестируют функциональные прототипы.

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

Прототип с целью

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

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

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

• • •

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

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