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

0
98

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

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

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

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

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

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

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

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

Но что если вы работаете удаленно? Клиент живет далеко и встретиться лично невозможно? Можно, конечно, провести сессию прототипирования по скайпу, но это не самое удобное решение. Здесь нам помогут инструменты для онлайн-прототипирования, вроде 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.
Финальная версия интерфейса для 3D принтера Skriware.

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

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

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

источник