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

• Главная
• Каталог
• Страница товара
• Блог
• Отдельный пост
• О нас
• Доставка и оплата
• Акции и спецпредложения
• Личный кабинет
• Мои заказы
• Мои данные
• Настройки
• Корзина
• Оформление заказа
• Результаты поиска по сайту

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

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

Шаг первый

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

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

Шаг второй

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

1. Пользователь из поисковика (или каталога) попадает на страницу отдельного товара;
2. Добавляет товар в корзину. В этот момент интерфейс должен ему подсказать, куда двигаться дальше, чтобы продолжать покупки или оплатить товар;
3. Переходит в корзину для оплаты, редактирует содержимое, знакомится с дополнительной информацией, связанной с акциями;
4. Указывает личные данные, информацию о доставке, выбирает способ оплаты;
5. Оплачивает товар во внешнем гейте оплаты;
6. Возвращается на сайт магазина, в список своих оплаченных заказов и следит там за их статусами.

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

• Каталог
• Страница товара
• Корзина
• Оформление заказа
• Подтверждение оплаты
• Мои заказы в личном кабинете

Шесть экранов! И это с учётом того, что мы уже проработали навигационное решение. То есть, нам не нужно выдумывать навигацию личного кабинета или придумывать, куда структурно воткнуть тупиковые (или разводящие, т.е. те, где сценарий закончен и надо бы направить пользователя куда-нибудь дальше) страницы.

Шаг третий

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

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

А напоследок давайте вспомним, что обычно показывают проектировщики на первой демонстрации прототипа.

— Это главная страница!
На главную страницу обычно попадает до 10% трафика, если речь не идёт о каком-нибудь исключении в виде популярного сервиса, поэтому не стоит с неё начинать

— Каталог товаров и карточка отдельного товара. Мы можем добавить товар в корзину прямо из каталога. Я кликаю по этой кнопке, у нас в корзине появляется плюс один и стоимость, а кнопка превращается в «Добавить ещё один».
А здесь пример преждевременной проработки динамических элементов. Клиент может сосредоточиться на комментаровании этой страницы и создать много сложной работы по переделке, хотя это всего лишь первый шаг в нашей сценарной цепочке

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

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

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

Автор:

Источник