Блог свободен от NOFOLLOW!

Моя твоя не понимает или Прототипирование web-сайта

Дата: 21-10-2009 | Автор: Yaroslav.CH | Рубрика: Прототип
Метки: , ,

1

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

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

Представим себе, что вам нужно объяснить кому-либо дорогу. Что вы будете делать? Или попробуете показать человеку дорогу «на пальцах» или же возьмете лист бумаги и набросаете ему маршрут. Как вы думаете, какой из этих двух вариантов понятнее и нагляднее?

Второй пример — вам необходимо пояснить человеку принцип работы определенного механизма. Снова-таки — либо долгое заворачивание пальцев в «каральку», либо же рисунок.

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

А ведь гораздо же проще взять тот самый «лист бумаги», нарисовать макет будущего проекта и, показав его заказчику, объяснить на наглядном примере все те «прелести», которые исполнитель планирует реализовать.

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

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

Пример простейшего прототипа сайта, созданного в Microsoft Excel

Пример простейшего прототипа сайта, созданного в Microsoft Excel

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

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

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

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

В определенный момент, окончательно выдохнувшись от объяснений «на пальцах», я предложил нарисовать схему в Excel и на ее примере пояснить — для каких целей создается сайт, и каким именно образом и за счет чего будет реализован механизм продаж . Учитывая то, что проект, как я уже говорил, был в основе своей не сложен, на создание прототипа в банальном Excel мне понадобилось порядка часа. Кстати, отмечу, что в процессе отрисовки, я вспомнил еще несколько обязательных составляющих элементов, которые в процессе вербального обсуждения абсолютно выпали из головы. Все они, конечно же, сразу были отражены в прототипе. Например, каюсь, я запамятовал о необходимости сделать функциональный блок специальных предложений и акций. Конечно же, на этапе создания прототипа, он был добавлен.

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

Особенно мне запомнилась фраза заказчика, которая и определила мое понимание необходимости прототипирования: «— Вот теперь я наконец-то понимаю, КАК мой сайт будет продавать!»

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

Сейчас самое время поделиться статьей с другими!

А еще можно почитать:

Комментарии (1)

перейти к форме для комментирования

Спасибо за статью. Я для прототипирования использовал кусок разлинованной бумаги и пытался нарисовать прототип сайта карандашом, а затем как-то реализовать что получилось во css freamworks. Время занимает это жутко много, а толку мало! Вот теперь буду для такого простого макетирования excel использовать. Огромное спасибо за наводку!

ОтветитьОтветить

А Вы оставили комментарий? Ваше мнение очень важно!

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