Прототип сайта: как вести работу над проектом

Вайрфрейм! Я выбираю тебя!

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

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

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





Так, порой случалось, что достаточно сырые варианты набросков интерфейса воспринимались заказчиком чуть ли не как готовые к релизу.

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

Гораздо хуже, когда в результате такого недопонимания набросок воспринимается как почти готовый результат, принимается клиентом как своё, родное. Получается, для одной стороны на данном этапе согласован прототип (эскиз, идея, концепция), а для другой — итоговый макет, который нужно лишь слегка сдобрить специями. В итоге обе стороны расходятся в полной уверенности, что поняли друг друга. На самом деле дальнейшая работа над проектом может оказаться шокирующей и совсем не соответствовать ожиданиям заказчика. Как же так? Теперь он видит совершенно переделанный ранее утвержденный им макет. Самое удивительное, что даже бывалый менеджер может допустить такую ошибку.

Проблем хотите? Вдвойне получите!

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





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

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

Это что за покемон?

Чтобы подробнее понимать как создаётся макет, давайте немного погрузимся во внутреннюю кухню. Рассмотрим на примере разработки интерфейса, из каких этапов состоит дизайн-процесс:

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

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

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





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

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