IAMPM
65000
+38 (091) 481 01 38+7 (495) 128 58 05info@iampm.club

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

3 марта 2021

  • Автор: Уля Днипрова

  • Сложность: не сложно

  • Время: 6 мин

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Wireframe

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

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

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

Low-fidelity  

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

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

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

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

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

High-fidelity 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Аватар

Уля Днипрова

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