Прототипы страниц сайта: Сибирикс

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

Дигибу поговорил с ведущими российскими веб-студиями о том, как выглядит процесс создания прототипов в их команде.

Сибирикс
Роман Чигирёв

Рассказывает Роман Чигирёв

PR-менеджер студии Сибирикс, г. Барнаул

Прототип — музейные экспонаты руками трогать разрешается.

Если честно, мы совсем разлюбили технические задания. Чувства завяли, и очень давно. Ну кому нравятся скучные, многостраничные, формализованные пачки бумаги, от которых веет канцелярским холодком? Да, это был риторический вопрос.

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

А теперь — как мы прототипируем:

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

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

Второе. Делаем «логическую карту» будущей модели сайта: в виде блок-схем майндмэппинга. Делается в той же Axure или xMind’е и выглядит примерно так:

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

Третье. Когда список требований готов, готовим рабочее пространство — определяемся с шириной, строим сетку, набрасываем первые блоки. Всё в очень общем виде, без детализации и какой-либо конкретики. Выглядит реально пугающе :).

Когда тулсет подготовлен и основные элементы лежат на рабочем столе, начинается самое интересное — прототип обретает свои первые формы:

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

Собственно, пример детализации (полупрозрачные области — это всплывающие окна):

С помощью инструментария создается интерактив — теперь прототип можно щёлкать, трогать и пробовать на юзабельность. Что имеем:

  • Клиент тратит на изучение прототипа в разы меньше времени, чем на чтение объёмистого ТЗ.
  • Клиент видит, как выглядит его задумка в действии — и озвучивает предложения по её улучшению.
  • Клиент вносит правки уже на этапе, предшествующем разработке, — что намного дешевле правок на полуготовом продукте.
  • Клиент застрахован от недопонимания со стороны разработчика — ведь он видит будущий продукт своими глазами.

И мы не согласимся с теми, кто скажет, что прототипирование нужно, в первую очередь, самим разработчикам. Хотя определенные плюсы всё же есть:

  • В процессе прототипирования юзабилити-специалист сталкивается с ранее незамеченными сложностями в навигации — и устраняет их.
  • С каждым новым прототипом кастомный инструментарий расширяется, что облегчает создание последующих прототипов.
  • Разработчик застрахован от недопонимания со стороны клиента — аналогично пункту в предыдущем разделе :).

Всем Axure, посоны!