💪 Хотите больше практики в дизайне интерфейсов (ux/ui)?

Подробнее

Как использовать бумажные прототипы: практическое руководство

10 причин использовать метод бумажного прототипирования в UX/UI дизайне: разбираем на боевом проекте.
Иллюстрация Vikiiing: https://dribbble.com/shots/8172256-Blueprint-landing-page

Вы читаете перевод статьи Ярека Береки "Paper Prototyping in Practice". Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

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

Как это работает?

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

Когда стоит использовать бумажные прототипы? 

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

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

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

Но что если вы работаете удаленно? Клиент живет далеко и встретиться лично невозможно? Можно, конечно, провести сессию прототипирования по скайпу, но это не самое удобное решение. Здесь нам помогут инструменты для онлайн-прототипирования, вроде InVision или UXPin. 

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

10 причин использовать бумажные прототипы

  1. Быстро и просто. Нужна только ручка и листок бумаги. 
  2. Быстрые итерации. Можно собирать разные идеи и быстро их тестировать, чтобы выбрать стоящие. А еще, если вы что-то пропустили в первой версии прототипа, можно взять и дорисовать — и протестировать на той же сессии. 
  3. Проверка идей. Новую идею можно тут же визуализировать и быстро проверить на жизнеспособность. 
  4. Обратная связь и комментарии. Наблюдая за пользователями, вы можете сделать интересные открытия, и тут же внедрить идеи в прототип. 
  5. Доступность. Не нужны никакие специальные навыки: этим методом могут воспользоваться и разработчики, и другие специалисты. 
  6. Взаимодействие с пользователем и более глубокие интервью. Почему пользователь решил нажать на эту кнопку? Как, по его мнению, работает приложение? Что он пытается сделать в нашем интерфейсе? 
  7. Творчество и генерация идей. Отличный способ прокачать креативность и обменяться идеями с командой. Плюс, много идей обычно возникает прямо во время сессии. 
  8. Вовлечение клиента. Бумажное прототипирование помогает вовлечь клиента в процесс дизайна. Благодаря этому финальный продукт будет более целостным. Плюс, клиент будет понимать причины тех или иных изменений. 
  9. Выявление проблем, не связанных с UI. В ходе сессии могут выплыть другие проблемы: например, с концепцией продукта в целом. 
  10. Смена окружения и перспективы. Иногда бывает здорово отлипнуть от компьютера и поговорить с кем-то лично. Это также здорово заряжает на творчество.

С чего начать?

Прежде чем рисовать бумажные интерфейсы, нужно подготовить вот что: 

  1. Концепт интерфейса
  2. Сценарии использования
  3. Бумагу, ножницы, маркер
  4. Макеты девайсов (не обязательно) 

Разбор кейса: Прототипируем интерфейсы программы для 3D принтера

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

Таймлайн процесса дизайна

Гипотезы 

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

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

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

Сессия бумажного прототипирования

На этом этапе не нужны красивые интерфейсы — главное, чтобы они были удобными. К примеру, во время сессии у нас была проблема: при “прокрутке” бумага двигалась. Тогда мы просто взяли и приклеили ее стикерами к столу. Идеально! Важно помнить, что самое главное тут — юзабилити

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

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

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

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

Финальная версия интерфейса для 3D принтера Skriware.

Попробуйте сами

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

Не бойтесь экспериментировать и тестировать!

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

540

Посты в категории UX-дизайн

Как я прокачала навыки UX-дизайна, работая в техподдержке

Ольга Жолудова

11 марта 2020

Посты в категории UX-дизайн

Руководство: как подготовить и провести онлайн-опрос

Ольга Жолудова

10 декабря 2019

Посты в категории UX-дизайн

От тактики к стратегии: что такое сервис-дизайн?

Ольга Жолудова

11 ноября 2019