Прототипирование и UX для менеджеров

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

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

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

В чем разница UI и UX 

User Interface designer (UI) занимается формой, цветом, подбирает шрифты, работает с интерфейсами, то есть, создает визуальный дизайн, продумывая расположение всех элементов на сайте. Задача  UI-дизайнера — сделать такое приложение или сайт, на который пользователям будет приятно смотреть.  

User Experience designer (UX) проектирует взаимодействие: на первом месте удобство пользования, а не красота. UX-дизайнер не создает красивых картинок или цветных кнопок, — он строит опыт взаимодействия пользователя с продуктом:

• помогает человеку пройти из точки А в точку Б, достичь его целей;
• создает пользовательские сценарии;
• занимается вайрфреймами и прототипами.

В целом, можно сказать, что UX-ер описывает дизайн взаимодействия (interaction design), направленный на создание привлекательных для пользователей интерфейсов с понятной схемой поведения и действий.

Сам термин UX-дизайн появился больше 15 лет назад в компании Nielsen Norman Group. В 90-х годах в компании задумались как отличить плохой UX от хорошего, и выработали общие правила для оценки любого дизайна: сайта, приложения или сервиса. Получилось 10 базовых принципов проектирования интерфейса.

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

Правила проектирования интерфейса Якоба Нильсена

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

1. Отображение системного статуса: знает ли пользователь, где он сейчас находится и что происходит. Нужно четко сообщать о состоянии системы, никакие действия, или последствия не должны происходить без уведомления человека. Например, если файл загружается, пользователь должен видеть актуальное состояние и сколько осталось до конца процесса. 
2. Взаимосвязь системы с реальным миром: говорит ли интерфейс на языке пользователя. Если интернет-магазин рассчитан на всех, используйте максимально понятные слова. Жаргон тоже возможен, но не сленг разработчиков, а профессиональная терминология пользователей продукта: например, бухгалтеров, дизайнеров, переводчиков. Использование фраз и понятий, знакомых пользователю в реальном мире действует лучше, чем специализированные технические термины. 
3. Контроль и свобода пользователя: есть ли у пользователя возможность отменить или остановить нежелательный сценарий, снова вернуться к отмененным операциям. При работе с продуктом человек свободен совершать разные действия, нажимать кнопки, закрывать страницы, заходить в пункты меню. При этом, должна быть возможность отменить негативное действие — удаление аккаунта, или загруженного документа. Пользователи часто ошибаются, выбирая системные функции, поэтому нужен четко видимый «аварийный выход» — кнопки «сохранить», «отмена» и др.    
4. Последовательность и стандарты: не путаете ли вы человека, описывая одно и то же по разному. Нельзя раскрашивать в разные цвета кнопку с одним и тем же действием в разных частях приложения. Будьте последовательными и используйте стандартные технологии коммуникации.   
5. Избегание ошибок: сведены ли к минимуму условия, при которых пользователь может ошибиться. Например, предусмотрите возможность сообщить пользователю о проблемах с новым паролем: слишком короткий, нужны заглавные буквы или цифры, — и не заставляете человека угадывать, что не так. 
6. Узнаваемость лучше/вместо вспоминания: очевидны ли для человека принципы использования продукта, легко ли происходит взаимодействие. Не заставляйте запоминать большое количество информации при переходе из одной части системы в другую. 
7. Гибкость и эффективность использования: эффективна ли ваша система для пользователей с любым уровнем опыта. Упростите функции, которыми посетители пользуются чаще всего, не перегружайте опытных юзеров лишней информацией, дайте им возможность совершать частые действия (например, вход в приложение) как можно быстрее и проще. 
8. Эстетика и минимализм в дизайне: нет ли в текстах вашего продукта ненужной информации. Каждое лишнее слово ухудшает восприятия и уменьшает вероятность найти то, за чем посетитель пришел в продукт. 
9. Диагностика и исправление ошибок: насколько пользователю понятны сообщения системы об ошибках. Выражены ли они на доступном языке, описывают ли проблему, предлагают ли варианты решения. 
10. Помощь и документация: легко ли найти необходимую информацию в справке приложения. Конечно, хорошо, когда продуктом можно пользоваться без документации. Но если пользователю понадобится помощь, вся информация должна быть в удобном месте и конкретно описывать шаги по решению проблемы. 

Как создать прототип без помощи дизайнера

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

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

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

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

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

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

Кому нужны прототипы:

• Product менеджеру с помощью прототипов легче провести презентацию для стейкхолдеров и заказчиков.
• Бизнес-аналитики могут выявить и создать наглядные требования к функциональности, интерфейсу, веб-сайту. 
• РМ с помощью прототипа управляет ожиданиями: заказчик видит в реальности то, что смутно предполагал мысленно и может сравнить собственное представление с реальными возможностями.
• Менеджеры и ВА иллюстрируют прототипами user story и use cases, делая их более понятными. 
• Дизайнеру прототип помогает зафиксировать в голове идеальный сценарий, и правильно принять требования к продукту. 

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

Wireframe

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

Менеджерам, ВА, маркетологам вайрфрейм помогает:

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

Low-fidelity  

Более проработанный вариант: известны размеры блоков и шрифта, прорисовано расположение элементов, определена иерархия блоков. 

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

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

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

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

High-fidelity 

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

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

Популярные сервисы для прототипирования

• InVision — этот инструмент позволяет преобразовывать статические изображения в интерактивные прототипы. InVision также поддерживает онлайн-сотрудничество, позволяя обсуждать работу в режиме реального времени и создавать персональные чаты.
• Axure — профессиональный инструмент, позволяющий создавать детальные прототипы с высокой точностью. Axure включает в себя различные инструменты для моделирования вида виджетов, создания аннотаций и спецификаций и тестирования отображения страниц на различных устройствах.
• Sketch — программа для Mac известна своей простотой и скоростью. Sketch отличается меньшим количеством встроенных инструментов для анимации по сравнению с Figma и Adobe XD, но предлагает широкий спектр плагинов и интеграций для расширения возможностей.
• Adobe XD — это инструмент Adobe Creative Cloud и обеспечивает интуитивную среду для дизайна интерфейсов, прототипирования и работы с анимацией. Adobe XD отличается своей фокусировкой на анимациях и переходах.
• Moqups — это универсальная онлайн-платформа, позволяющая работать над каркасами, макетами и прототипами в режиме реального времени. Moqups содержит библиотеку из более чем 1000 визуальных элементов и позволяет легко редактировать, комментировать и аннотировать проекты прямо в шаблонах.
• Balsamiq — программа сосредоточена на создании каркасов интерфейса с низкой точностью, имитирующей процесс рисования на блокноте. Balsamiq предлагает сотни встроенных элементов управления и значков интерфейса в эскизном и чистом виде.

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

Как презентовать черно-белый прототип

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

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

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

РМ может сказать: «Мы сейчас будем обсуждать расположение элементов, каркас интерфейса и функциональность на черно-белом прототипе. На старте нам очень важно определиться с этими требованиями. Черно-белый вид прототипа выбран для того, чтобы мы обсудили вопросы по сути и команда могла уже работать над задачами, а не простаивать. Обсуждение сейчас сэкономит нам время и деньги, разблокирует команду.  

Мы сегодня это обсудим, вместе внесем изменения, и команда уже сможет делать какие-то эстимейты. 

А после того как примем окончательный вариант, можем спокойно приступить к выбору цветовой гаммы или готового набора графических элементов (UI kit), и просто расставим это все так, как на прототипе». 

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

Любой дизайн, и прототип в том числе, нужно проверить на соответствие 10 принципам Нильсена, затем создать готовый кликабельный прототип в Figma, InVision, Balsamiq, Marvel и протестировать удобство и понятность системы на потенциальных пользователях.  

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

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