Прототипировали, прототипировали да не выпрототипировали. А зря!

Брюс Мау, «Неполный манифест творческого роста»

Никита Лисицын, руководитель Kokoc Lab (отдел веб-аналитики Kokoc Group) — о важных нюансах для начинающих юзабилистов и детективов-любителей из бизнес сферы, только знакомящихся с процессом проектирования сайта.

Одному моему знакомому дизайнеру интерфейс будущих сайтов снится. У него есть поверье: перед сном надо употребить пиццу «Четыре сыра» и три банки «Балтики». На следующее утро он просыпается с ясными картинками в голове. Врет или реально выходит — не знаю, но весит он полтора центнера и с прототипами никогда не работает. Говорит, что они отбивают у него вдохновение. 

Он и его контора — не исключение. В компаниях на периферии вам могут предложить схему с двумя ТЗ сайта — первоначальный вариант до дизайна и новый, с правками, уже после дизайна. Но более продвинутые компании (которые есть и в регионах) настаивают еще и на прототипировании. И тысячу раз правы. 

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

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

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

80% разработчиков, в число которых входят и фрилансеры, плюют на прототипирование и приступают сразу к прорисовке дизайн макетов. А это грозит первым недопониманием. Не забывайте, что дизайнер — художественная единица. Эти ребята привыкли «делать красиво». Как «сделать удобно» — их волнует в меньшей степени, да и не должно. В то же время, вы наверняка хотите получить на выходе максимально дружелюбный интерфейс. И наверняка, не в ваших интересах затягивать разработку. Прототипирование позволит представить сайт в действии уже на ранних этапах и исключить лишние переделки по дизайну, верстке, программированию. Вы сможете «потрогать» будущий сайт уже сейчас и оперативно (в течение дня) внести в модель правки. В том случае, когда проектная команда и клиент решают не тратить время на прототип, проблемы могут обнаружиться аж на этапе тестирования готового сайта. А еще — что очень важно — раннее прототипирование позволяет заранее продумать возможности для продвижения в поисковых системах и способы повышения конверсии. Сэкономите и время, и деньги, и хорошие рабочие отношения. Статистика из нашей практики: проекты, которые сопровождались прототипированием, на выходе экономили до 40% своего бюджета, потому что заказчик не вносил существенных изменений в функционал и структуру на поздних этапах.

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

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

Процесс создания прототипов состоит из трех частей. Это — промежуточные итоги работы:

1. Лейаут (набросок карандашом, эскиз, заготовка первых идей) — разрабатывается несколько вариантов и утверждается лучший.

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

3. Интерактивный прототип (добавляются интерактивные эффекты) — применение к вайрфрейму логики переходов между страницами, кликов по различным элементам и др.

Интернет предлагает огромное число инструментов-программ. Для разработки скетчей и вайрфреймов, как правило, используют Balsamiq Mockup, Designer Vista, SketchFlow, ForeUI, Pidoco, Pencil Project, MockFlow, WireFrameSketcher Studio. Требованиям динамического прототипирования отвечают Axure RP, GUI Design Studio, iRise, Microsoft Expression Blend, GUI Machine. 

Для быстрого прототипирования по эскизам в ежедневнике вам подойдет бесплатный Prototyping on paper. Если же есть желание заморочиться по-взрослому, выбирайте Axure, который используется в профессиональной среде.

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

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

Например, легко сформулировать задачу сайта. Хочу, чтобы продавал! Продавал женщинам, в возрасте до 30 лет, не обремененным замужеством. Не спешите с предположениями о розовом цвете и форме кнопочек в виде ромашки. Отыщите удачные приемы у конкурентов и best practices по схожим тематикам — то, что, по вашему мнению, помогает продавать. Далее — проанализируйте их пользовательские сценарии и составьте собственную journey map. Почему она будет лучше? В идеале — иметь доступ к аналитической информации этих ресурсов. Если такой возможности нет, попробуйте провести собственное исследование с привлечением представителей ц/а. Интернет кишит материалами по теме юзабилити, сделайте над собой усилие и проштудируйте основные правила.

Не забудьте про соответствие CRM и CMS. Если вы задумали интернет-магазин, стоит учесть, например, то, откуда будет исходить информация о товарах, куда будут уходить оплаченные заказы и т.д. 

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

Источник: Business Fun.