Категории: Интерфейс

Бумажное прототипирование интерфейсов

Прототипирование – это быстрый набросок, черновой вариант готового проекта. Сегодня я бы хотел поговорить об очень удобном (лично для меня) методе прототипирования — «бумажном прототипировании». Прототипы на бумаге часто именуют эскизами. Я пожалуй не соглашусь с этим понятием т.к. прототип — понятие более емкое, чем эскиз. В статье будет представлен вашему вниманию небольшой рассказ о том, за что я люблю бумагу и как самому начать использовать данный инструмент.

Основные достоинства

  • Скорость. Набросать схематичное на бумаге быстрей, чем с помощью специализированного софта.
  • Фиксация идеи. Вытекает из предыдущего достоинства. Бывает, что в процессе разработки прототипа вас буквально осеняет вдохновение. В такие моменты важно быстро зафиксировать идею, а не распыляться по мелочам
  • Легкость изменения. Переставить элементы в нарисованном за минуту прототипе гораздо легче, чем менять те же элементы в графическом редакторе с уже отрисованными тенями и бликами. Минута времени потраченного на прототипирование интерфейса в будущем сэкономит гораздо больше времени в разработке.
  • Дешевое тестирование. Бумажный прототип интерфейса легко протестировать показав его будущим пользователям и программистам.
  • Легкость создания. Для разработки прототипов интерфейса не важно знаете ли вы языки программирования и умеете ли вы прекрасно рисовать. Главное, понимание принципов работы правильного интерфейса.
  • Живое тестирование. В процессе тестирования есть возможность легко изменять принципы работы интерфейса и тут же фиксировать идеи и вновь давать прототип интерфейса на оценку пользователю. Нарисованный на бумаге прототип не жалко выкинуть.
  • Прозрачность интерфейса. Мне кажется, гораздо правильней говорить об удобстве какого-либо интерфейсе, если он не отягощен различными эффектами. При подобном анализе графические эффекты только отвлекают.
  • Доступность. Даже технические неподкованные люди могут использовать инструмент бумажного прототипа.
  • Комментирование. Свои комментарии могут оставлять все желающие прямо на прототипе.

Основные недостатки

  • Подходит не для всех ситуаций. Например, в некоторых случаях бумажный прототип интерфейса лучше всего не показывать заказчику.
  • Тестирование бумажного прототипа не выявляет всех проблем интерфейса (полосы прокрутки, шрифты, скорость работы).
  • Пользователь может работать с бумажным прототипом совсем иначе, чем с реальным интерфейсом.
  • Бумажный прототип может быть неточен. Если вы нарисовали прекрасный интерфейс — это еще не значит, что он поместиться на отведенное ему пространство.
  • Эффект «бумажного» прототипа проявляется только при обсуждении.

Как начать?

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

Желающим в помощь, я выложу этот PDF файл, который  можно распечатать и начать рисовать «как бы в окне браузера».

Скачать «Лист для прототипирования» (165,8 Kb)
Как любезно указали в комментариях — данный PDF файл сделал Алексей Черенкевич.

Поделиться

Посмотреть комментарии

  • Опять я на ваш блог наткнулась - и что я вижу? Опять не указан источник, как и со статьей про минимализм! Я правда не могу понять, вам так нравится пользоваться чужими плодами для повышения собственной популярности? Этот pdf рисовал Алексей Черенкевич, выкладывал на своем сайте и в своем жж http://cherenkevich.livejournal.com/39461.html, и не подразумевал, что кто-то будет его распространять без указания ссылки на автора!

    • Пост между прочим авторский. Однако PDF я нашел в подборке инструментов для прототипирования без указания создателя. Ссылку по вашей наводке добавил :)

      В следующий раз попрошу Вас быть более корректной и не бросаться оскорблениями.

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

        • Наверное я виноват, что пишу на интересные Вам темы. Шутка =)

Последние посты

Дайджест ABOUT FACE #5: дизайн-принципы хороших продуктов, Sketch + AE, правильная иконка шаринга

Хорошей среды! Пришло время нового выпуска дайджеста. (далее…)

% дней назад

Дайджест ABOUT FACE #4: агенство или продукт, After Effects в код, 100 книг для дизайнера

Хорошего понедельника! Давно не было свежего выпуска дайждеста, а материала накопилось порядочно 😍 (далее…)

% дней назад

5 современных альтернатив WordPress

Это рекламная статья. Многие считают, что WordPress — одна из наиболее популярных open-source систем для…

% дней назад

Дайджест ABOUT FACE #3: новая книга Бюро, CSS в Скетче, дизайн для нескольких языков

Хорошего понедельника! Надеюсь все отлично отдохнули, потому как я собрал для вас новую порцию интересных…

% дней назад

Дайджест ABOUT FACE #2: книги по типографике, одновременная работа с макетом, дизайнер-cатана

Хорошего понедельника! Приветствуем второй выпуск дайджеста. Для тех, кто не в теме, дайджест просеивает тонны…

% дней назад

Дайджест ABOUT FACE #1: редизайн Хрома, сколько зарабатывают дизайнеры, каким должен быть VR интерфейс

Хорошего понедельника! Как я писал в паблике, я решил немного изменить формат выхода новостей. Поэтому всё…

% дней назад