Возьмём понятный всем пример. Интернет-магазин. Вот вы встретились с клиентом в первый раз, обсудили, что должен и не должен делать их будущий проект. После этого сформировали список функциональных требований и сопроводили его предварительной картой сайта. Всё это дело будет потом помещено в приложение номер один к договору на проектирование, но сегодня речь не об этом. Давайте для начала взглянем на карту сайта, которая у нас получилась.
- Главная
- Каталог
- Страница товара
- Блог
- Отдельный пост
- О нас
- Доставка и оплата
- Акции и спецпредложения
- Личный кабинет
- Мои заказы
- Мои данные
- Настройки
- Корзина
- Оформление заказа
- Результаты поиска по сайту
При первом приближении у нас тут 15 экранов. Опытный проектировщик скажет, что их тут будет до 30-ти. Давайте ответим на вопрос, с чем стоит прийти к клиенту на первую встречу, чтобы осчастливить его, а заодно минимизировать риски и издержки в процессе проектирования. И тут небольшое лирическое отступление.
Здесь мы не будем рассматривать персонажей и сценарии взаимодействия как нечто задокументированное, т.к. предполагаем, что прототип типовой и нам не нужно синхронизировать наши с клиентом представления о целевой аудитории и их действиях на сайте. Вся эта информация хранится в голове проектировщика и основана она на других десяти интернет-магазинах, сделанных ранее.
Шаг первый
Придумываем навигационное решение и определяемся с сеткой. Я работаю в Axure (и помогаю работать другим), поэтому под прототипом будет пониматься набор интерактивных html-страниц. Методология простая: на одну страницу вытаскиваем все сквозные элементы (логотип, корзина, меню навигации, копирайты в подвале, поисковая строка, выбор языка, иконки с типами приёма платежей и т.д. и т.п.), перемещаем их до тех пор, пока не получим целостную и понятную картину, после чего создаём мастера для шапки, подвала и ещё чего угодно, что будет повторяться от страницы к странице (особо любопытные могут ознакомиться с моим видеоуроком, демонстрирующим этот процесс).
Затем создаём структуру будущего прототипа, копируем и вставляем на каждую страницу наши сквозные элементы и перелинковываем всё это дело. Таким образом у нас получается интерактивный прототип, в котором мы можем пройтись по всем разделам, но в разделах этих будет пусто. Если бы речь шла не об интернет-магазине, а о чём-то более сложном, то именно на этом моменте можно было бы останавливаться и демонстрировать результат клиенту для промежуточного согласования. Но в нашем случае в этом нет необходимости, поэтому двигаемся дальше.
Шаг второй
Берём из головы самый распространённый сценарий взаимодействия и, двигаясь по нему, детализируем страницы, которые попадаются на пути. В случае с интернет-магазином чаще всего это будет выглядеть так:
- Пользователь из поисковика (или каталога) попадает на страницу отдельного товара;
- Добавляет товар в корзину. В этот момент интерфейс должен ему подсказать, куда двигаться дальше, чтобы продолжать покупки или оплатить товар;
- Переходит в корзину для оплаты, редактирует содержимое, знакомится с дополнительной информацией, связанной с акциями;
- Указывает личные данные, информацию о доставке, выбирает способ оплаты;
- Оплачивает товар во внешнем гейте оплаты;
- Возвращается на сайт магазина, в список своих оплаченных заказов и следит там за их статусами.
Когда сценарии взаимодействия описаны, такой список есть у нас перед глазами. Но чаще всего он у нас перед мысленным взором. Давайте теперь посмотрим, какие разделы из карты сайта нам нужно проработать и в какой последовательности.
- Каталог
- Страница товара
- Корзина
- Оформление заказа
- Подтверждение оплаты
- Мои заказы в личном кабинете
Шесть экранов! И это с учётом того, что мы уже проработали навигационное решение. То есть, нам не нужно выдумывать навигацию личного кабинета или придумывать, куда структурно воткнуть тупиковые (или разводящие, т.е. те, где сценарий закончен и надо бы направить пользователя куда-нибудь дальше) страницы.
Шаг третий
Мы приходим к клиенту с промежуточным результатом, который состоит из полностью проработанного и перелинкованного навигационного решения и шестью детализированными страницами. Наша демонстрация прототипа выглядит завершённой и полноценной, т.к. мы двигаемся по сценарию, попутно обсуждая тонкие моменты и уточняя, насколько сценарий соответствует реальным возможностям клиента. Правки в результате комментариев нам здесь не страшны, т.к. совсем мелкой детализацией мы не занимались. Никакой динамики, никаких украшательств. А вот клиент будет просто в восторге. Ведь прошло совсем немного времени, а проектировщик уже демонстрирует ему путь от попадания пользователя на сайт до выкладывания своих денежек из кармана.
После этого мы уходим довольные и прорабатываем оставшиеся несколько сценариев, которые тоже демонстрируем клиенту. А в самом конце уже занимаемся детализацией и добавлением динамических элементов там, где это необходимо. Профит.
А напоследок давайте вспомним, что обычно показывают проектировщики на первой демонстрации прототипа.
— Это главная страница!
На главную страницу обычно попадает до 10% трафика, если речь не идёт о каком-нибудь исключении в виде популярного сервиса, поэтому не стоит с неё начинать
— Каталог товаров и карточка отдельного товара. Мы можем добавить товар в корзину прямо из каталога. Я кликаю по этой кнопке, у нас в корзине появляется плюс один и стоимость, а кнопка превращается в «Добавить ещё один».
А здесь пример преждевременной проработки динамических элементов. Клиент может сосредоточиться на комментаровании этой страницы и создать много сложной работы по переделке, хотя это всего лишь первый шаг в нашей сценарной цепочке
— Это блог, отдельный пост, раздел о нас, доставка и оплата и акции.
Сделаны разделы, которые создают иллюзию того, что над прототипом много работали, хотя по трудозатратам они вместе взятые сопоставимы с оформлением заказа в корзине. Клиент получит на первом этапе не совсем то, что ожидал увидеть, если из-за этих разделов не будут доработаны другие, более важные
— Вот страница оформления заказа, а затем пользователь попадёт в личный кабинет, но это я покажу позже, в следующей итерации.
Сценарий не доведён до конца, хотя сделать тупиковую страницу или просто набросать что-нибудь блочное не составило бы большого труда у проектировщика
Все мы через это проходили. И в роли клиентов, и в роли проектировщиков. И поначалу все наступали на похожие грабли. Поэтому желаю вам побольше практики и удачных рабочих отношений. Любая инструкция будет действовать только в рамках определённых условий, а практика подарит опыт, который поможет под эти условия подстраиваться.
Автор: Ekamelev
