- PVSM.RU - https://www.pvsm.ru -
Возьмём понятный всем пример. Интернет-магазин. Вот вы встретились с клиентом в первый раз, обсудили, что должен и не должен делать их будущий проект. После этого сформировали список функциональных требований и сопроводили его предварительной картой сайта. Всё это дело будет потом помещено в приложение номер один к договору на проектирование, но сегодня речь не об этом. Давайте для начала взглянем на карту сайта, которая у нас получилась.
При первом приближении у нас тут 15 экранов. Опытный проектировщик скажет, что их тут будет до 30-ти. Давайте ответим на вопрос, с чем стоит прийти к клиенту на первую встречу, чтобы осчастливить его, а заодно минимизировать риски и издержки в процессе проектирования. И тут небольшое лирическое отступление.
Здесь мы не будем рассматривать персонажей и сценарии взаимодействия как нечто задокументированное, т.к. предполагаем, что прототип типовой и нам не нужно синхронизировать наши с клиентом представления о целевой аудитории и их действиях на сайте. Вся эта информация хранится в голове проектировщика и основана она на других десяти интернет-магазинах, сделанных ранее.
Придумываем навигационное решение и определяемся с сеткой. Я работаю в Axure (и помогаю [1] работать другим), поэтому под прототипом будет пониматься набор интерактивных html-страниц. Методология простая: на одну страницу вытаскиваем все сквозные элементы (логотип, корзина, меню навигации, копирайты в подвале, поисковая строка, выбор языка, иконки с типами приёма платежей и т.д. и т.п.), перемещаем их до тех пор, пока не получим целостную и понятную картину, после чего создаём мастера для шапки, подвала и ещё чего угодно, что будет повторяться от страницы к странице (особо любопытные могут ознакомиться с моим видеоуроком [2], демонстрирующим этот процесс).
Затем создаём структуру будущего прототипа, копируем и вставляем на каждую страницу наши сквозные элементы и перелинковываем всё это дело. Таким образом у нас получается интерактивный прототип, в котором мы можем пройтись по всем разделам, но в разделах этих будет пусто. Если бы речь шла не об интернет-магазине, а о чём-то более сложном, то именно на этом моменте можно было бы останавливаться и демонстрировать результат клиенту для промежуточного согласования. Но в нашем случае в этом нет необходимости, поэтому двигаемся дальше.
Берём из головы самый распространённый сценарий взаимодействия и, двигаясь по нему, детализируем страницы, которые попадаются на пути. В случае с интернет-магазином чаще всего это будет выглядеть так:
Когда сценарии взаимодействия описаны, такой список есть у нас перед глазами. Но чаще всего он у нас перед мысленным взором. Давайте теперь посмотрим, какие разделы из карты сайта нам нужно проработать и в какой последовательности.
Шесть экранов! И это с учётом того, что мы уже проработали навигационное решение. То есть, нам не нужно выдумывать навигацию личного кабинета или придумывать, куда структурно воткнуть тупиковые (или разводящие, т.е. те, где сценарий закончен и надо бы направить пользователя куда-нибудь дальше) страницы.
Мы приходим к клиенту с промежуточным результатом, который состоит из полностью проработанного и перелинкованного навигационного решения и шестью детализированными страницами. Наша демонстрация прототипа выглядит завершённой и полноценной, т.к. мы двигаемся по сценарию, попутно обсуждая тонкие моменты и уточняя, насколько сценарий соответствует реальным возможностям клиента. Правки в результате комментариев нам здесь не страшны, т.к. совсем мелкой детализацией мы не занимались. Никакой динамики, никаких украшательств. А вот клиент будет просто в восторге. Ведь прошло совсем немного времени, а проектировщик уже демонстрирует ему путь от попадания пользователя на сайт до выкладывания своих денежек из кармана.
После этого мы уходим довольные и прорабатываем оставшиеся несколько сценариев, которые тоже демонстрируем клиенту. А в самом конце уже занимаемся детализацией и добавлением динамических элементов там, где это необходимо. Профит.
А напоследок давайте вспомним, что обычно показывают проектировщики на первой демонстрации прототипа.
— Это главная страница!
На главную страницу обычно попадает до 10% трафика, если речь не идёт о каком-нибудь исключении в виде популярного сервиса, поэтому не стоит с неё начинать
— Каталог товаров и карточка отдельного товара. Мы можем добавить товар в корзину прямо из каталога. Я кликаю по этой кнопке, у нас в корзине появляется плюс один и стоимость, а кнопка превращается в «Добавить ещё один».
А здесь пример преждевременной проработки динамических элементов. Клиент может сосредоточиться на комментаровании этой страницы и создать много сложной работы по переделке, хотя это всего лишь первый шаг в нашей сценарной цепочке
— Это блог, отдельный пост, раздел о нас, доставка и оплата и акции.
Сделаны разделы, которые создают иллюзию того, что над прототипом много работали, хотя по трудозатратам они вместе взятые сопоставимы с оформлением заказа в корзине. Клиент получит на первом этапе не совсем то, что ожидал увидеть, если из-за этих разделов не будут доработаны другие, более важные
— Вот страница оформления заказа, а затем пользователь попадёт в личный кабинет, но это я покажу позже, в следующей итерации.
Сценарий не доведён до конца, хотя сделать тупиковую страницу или просто набросать что-нибудь блочное не составило бы большого труда у проектировщика
Все мы через это проходили. И в роли клиентов, и в роли проектировщиков. И поначалу все наступали на похожие грабли. Поэтому желаю вам побольше практики и удачных рабочих отношений. Любая инструкция будет действовать только в рамках определённых условий, а практика подарит опыт, который поможет под эти условия подстраиваться.
Автор: Ekamelev
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/upravlenie-proektami/67393
Ссылки в тексте:
[1] помогаю: https://vk.com/axure
[2] видеоуроком: http://youtu.be/NMKLkqktLAM
[3] Источник: http://habrahabr.ru/post/233183/
Нажмите здесь для печати.