Вы читаете перевод статьи Ярека Береки "Paper Prototyping in Practice". Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.
Сегодня может показаться странным использовать в дизайне такой аналоговый метод, как прототипирование на бумаге. Ручка, бумага, ножницы — вот и весь набор? Но поверьте мне — иногда чем проще, тем лучше.
Как это работает?
Прототипирование на бумаге — простой метод. Вам не нужно уметь рисовать или кодить — вообще никакие особые навыки не нужны. Вы в буквальном смысле рисуете интерфейсы на бумаге. Эта техника — классный инструмент для проектирования, тестирования и прокачки UX ваших интерфейсов. Кроме того, это универсальный инструмент — его можно использовать не только для мобильных и десктопных интерфейсов, но и, например, для разработки меню ресторана.
Когда стоит использовать бумажные прототипы?
Сессию бумажного прототипирования стоит провести вместе с клиентом — так вы сможете быстро показать ему, какие функции планируете добавить в приложение. Плюс, вы сразу проверите, насколько все понятно и интуитивно для пользователей.
Для тестирования на разных экранах стоит подготовить макеты девайсов — это поможет визуализировать устройства в масштабе. Поверьте мне, вы удивитесь, сколько нового вы узнаете о юзабилити вашего дизайна во время этой сессии. Пользователи будут взаимодействовать с интерфейсами, а вы сможете лично наблюдать за этим процессом взаимодействия.
При помощи бумажного прототипа, можно вовлечь пользователей в тестирование на очень ранних стадиях — а это помогает здорово ускорить процесс дизайна. Кроме того, бумажные прототипы позволяют снять креативные блоки в процессе работы. Любую идею можно быстро визуализировать, чтобы посмотреть на нее под другим углом.
Но что если вы работаете удаленно? Клиент живет далеко и встретиться лично невозможно? Можно, конечно, провести сессию прототипирования по скайпу, но это не самое удобное решение. Здесь нам помогут инструменты для онлайн-прототипирования, вроде InVision или UXPin.
Еще нужно учитывать, что техника бумажного прототипирования не подходит для больших, сложных проектов. Если интерфейсов очень много, проще и лучше использовать специализированные программы, например, Figma и Sketch.
10 причин использовать бумажные прототипы
- Быстро и просто. Нужна только ручка и листок бумаги.
- Быстрые итерации. Можно собирать разные идеи и быстро их тестировать, чтобы выбрать стоящие. А еще, если вы что-то пропустили в первой версии прототипа, можно взять и дорисовать — и протестировать на той же сессии.
- Проверка идей. Новую идею можно тут же визуализировать и быстро проверить на жизнеспособность.
- Обратная связь и комментарии. Наблюдая за пользователями, вы можете сделать интересные открытия, и тут же внедрить идеи в прототип.
- Доступность. Не нужны никакие специальные навыки: этим методом могут воспользоваться и разработчики, и другие специалисты.
- Взаимодействие с пользователем и более глубокие интервью. Почему пользователь решил нажать на эту кнопку? Как, по его мнению, работает приложение? Что он пытается сделать в нашем интерфейсе?
- Творчество и генерация идей. Отличный способ прокачать креативность и обменяться идеями с командой. Плюс, много идей обычно возникает прямо во время сессии.
- Вовлечение клиента. Бумажное прототипирование помогает вовлечь клиента в процесс дизайна. Благодаря этому финальный продукт будет более целостным. Плюс, клиент будет понимать причины тех или иных изменений.
- Выявление проблем, не связанных с UI. В ходе сессии могут выплыть другие проблемы: например, с концепцией продукта в целом.
- Смена окружения и перспективы. Иногда бывает здорово отлипнуть от компьютера и поговорить с кем-то лично. Это также здорово заряжает на творчество.
С чего начать?
Прежде чем рисовать бумажные интерфейсы, нужно подготовить вот что:
- Концепт интерфейса
- Сценарии использования
- Бумагу, ножницы, маркер
- Макеты девайсов (не обязательно)
Разбор кейса: Прототипируем интерфейсы программы для 3D принтера
Я готовил интерфейсы программы для 3D принтера. Эта программа — часть экосистемы Skriware, в которую также входят домашний 3D принтер и эксклюзивный онлайн магазин 3D моделей — Skrimarket. Программа позволяет изменить и настроить модель, купленную онлайн, перед печатью.
Гипотезы
Я не был уверен в некоторых элементах интерфейса, поэтому хотел посоветоваться с пользователями. Например, у меня были сомнения по поводу панели инструментов:
- насколько понятны иконки для вращения и изменения модели;
- удобно ли расположены функции на панели инструментов;
- насколько понятно и удобно оформлены модальные окна для редактирования модели.
Итак, я не знал, насколько удобными и понятными будут мои решения для пользователей. Поэтому я решил провести сессию бумажного прототипирования, чтобы проверить свои гипотезы. В этот раз я пользовался макетами, которые подготовил заранее в графической программе, но вы можете просто нарисовать все ручкой на бумаге.
На сессию я пригласил специалистов из разных сфер: дизайнера интерфейсов, дизайнера ПО, разработчика оборудования, а также клиента и представителей бизнеса. Сессия длилась 2 часа и мы успели провести тесты с 8 людьми из нашей целевой группы.
Сессия бумажного прототипирования
На этом этапе не нужны красивые интерфейсы — главное, чтобы они были удобными. К примеру, во время сессии у нас была проблема: при “прокрутке” бумага двигалась. Тогда мы просто взяли и приклеили ее стикерами к столу. Идеально! Важно помнить, что самое главное тут — юзабилити.
На протяжении всей сессии мы делали пометки на бумаге, как можно улучшить тот или иной интерфейс. Это круто, потому что каждый следующий пользователь работал с улучшенным интерфейсом и давал еще больше полезной информации.
К сожалению, оказалось, что часть моих идей были не такими удачными, как я думал. Я забыл о такой элементарной штуке, как пустое состояние — и в результате первый пользователь чувствовал себя не очень комфортно в интерфейсе. И да, благодаря бумажному прототипированию я быстро нарисовал новую модель — и следующий пользователь уже быстрее сориентировался, как начать работу.
На основании данных, собранных в ходе сессии, мы частично поменяли панель управления. Мы заметили, что большинство пользователей — и не только опытных (как мы предполагали вначале) — хотят иметь быстрый доступ к некоторым функциям.
Кроме того, мы поменяли экран подготовки к печати: удалили начальные установки и добавили несколько новых подписей и информационных блоков. В процессе внесения этих изменений нам здорово помог разработчик. К примеру, он подсказал, что есть возможность показывать оставшееся время печати. Если вы хотите вытащить интересные детали — приглашайте специалистов из разных областей.
Попробуйте сами
Бумажное прототипирование — это простой инструмент с огромным потенциалом. С его помощью вы можете быстро адаптировать интерфейсы и вносить изменения в режиме реального времени. Очень важное преимущество для дизайна состоит в том, что мы вовлекаем пользователя на ранних этапах разработки — плюс получаем много полезной информации.
Не бойтесь экспериментировать и тестировать!
Все, что мы делаем, мы делаем для пользователей — чтобы они могли с легкостью пользоваться нашим сайтом или приложением. Бумажное прототипирование — это важная техника, которая поможет достичь нашей цели и лучше понять пользователей.