Прототипирование на бумаге


Как просто быстро и дешево сделать 99 дизайнов интерфейса? Нарисовать их на бумаге! Как это делается и какие есть особенности у этого процесса нам расскажет статья «Paper Prototyping» из онлайн журнала «AListApaprt»

Paper Prototyping by Shawn Medero
http://www.alistapart.com/articles/paperprototyping/

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

Всем нравится бумага!

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

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

Просто повторить

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

Создано экономить

    Если бюджет проекта кот наплакал, то бумага даст возможность не приобретать дорогостоящие программы (не тратить время на скачивание — прим. перев.). Если же бюджет располагает, то можно даже накупиться разноцветными стикерами и закладками, что сделает ваши модели более сложными. Если потребуется, то можно некоторые элементы моделей выводить на принтере. Можно найти какой угодно принтер, подключить к компьютеру и использовать прямо во время обсуждений. Если кто-то вспоминает какой-то сайт, то распечатывайте скриншот, крепите на стену и начинайте «штурмовать». Менее заметная сторона дела: с бумагой вы можете работать и быть абсолютно независимым от техники.

Легко комментировать

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

Покажите-ка бумажку

    Традиционный виджет может быть полностью спроектирован на бумаге. Вот пример окна виджета: несколько кнопок и возможность демонстрации действия по клику:


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



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

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

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

Где место для бумаги
в процессе дизайна?

    Вот два основных случая использования этого метода:
1) Команда дизайнеров (разработчиков) объясняет свой дизайн группе заинтересованных в работе лиц (заказчик, например).
2) Пользователей «прогоняют» через бумажный интерфейс или предлагают зарисовать их собственные предложения на чистой бумаге.

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

Тестируем функционал
бумажным прототипированием

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

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

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

Иногда бумага не подходит

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

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

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

Куда идем дальше?

    Если вы жаждете капнуть глубже, то советую вам «Бумажное прототипирование» авторства Carolyn Snyder — самое почтенное издание по этой теме.

    Бумага находит свою популярность в руках интеллектуальных тружеников, которые стремятся упорядочить каждый аспект своей жизни. Hipster PDA вдохнул жизнь в своих пользователей и породил множество проектов, таких как DIY Planner, основанный на готовых к печати штампах для каледнарей, ежедневников и т.д.

    NB: Бумажное прототипирование выиграло бы от наличия открытых библиотек с готовыми к печати заготовками в открытом векторном формате или PDF. Онлаин-ресурсы, как GUIdebook и шаблоны для Visio и OmniGraffle — отличное начало для создания таких шаблонов. Если кто-либо из вас пожелает создать такую библиотеку, то я готов предоставить бесплатный хостинг для Вики-подобных проектов с лучшими и новейшими шаблонами для бумажного прототипирования.

    Ну и напоследок: многие стараются синтезировать бумажное прототипирование с КПК-подобными компьютерными средствами. Профессор James Landay из University of Washington разрабатывает инструмент DENIM c 90-х годов. Цель профессора — создавать сайты. DENIM позволяет набрасывать идеи, аннотировать их, даже экспортировать в рабочие html-модели.

перевод: Рехимкулов Ринат

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s