Давайте возьмем пример, понятный каждому.
Интернет-магазин.
Итак, вы впервые встретились с клиентом, обсудили, что должен и чего не должен делать его будущий проект. После этого мы сформировали список функциональных требований и сопроводили его предварительной картой сайта.
Все это дело позже будет помещено в приложение номер один к договору на проектирование, но сегодня речь не об этом.
Давайте сначала взглянем на карту сайта, которую мы получили.
- дом
- Каталог
- Страница продукта
- Блог
- Отдельный пост
- О нас
- Доставка и оплата
- Акции и специальные предложения
- Личный кабинет
- Мои заказы
- Мои детали
- Настройки
- Корзина
- Размещение заказа
- Результаты поиска по сайту
Опытный дизайнер скажет, что их здесь будет до 30. Давайте ответим на вопрос, что следует донести до клиента на первой встрече, чтобы он остался доволен, и при этом минимизировать риски и затраты в процессе проектирования.
И вот небольшое лирическое отступление.
Здесь мы не будем рассматривать персонажей и сценарии взаимодействия как нечто документированное, потому что… Мы предполагаем, что прототип стандартный и нам не нужно синхронизировать наши и клиента представления о целевой аудитории и ее действиях на сайте.
Вся эта информация хранится в голове дизайнера и основана на других десяти интернет-магазинах, сделанных ранее.
Первый шаг
Придумываем навигационное решение и определяемся с сеткой.Я работаю в Axure (и я помогаю работать для других), поэтому под прототипом будем понимать набор интерактивных HTML-страниц.
Методика проста: вытаскиваем на одну страницу все сквозные элементы (логотип, корзина, меню навигации, копирайты в футере, строка поиска, выбор языка, иконки с типами приема платежей и т. д. и т. п.
), перемещаем их до тех пор, пока не получим полную и понятную картинку, после чего создаем мастера для хедера, футера и всего остального, что будет повторяться со страницы на страницу (особо любопытные могут посмотреть мой видеоурок , демонстрирующий этот процесс).
Затем создаем структуру будущего прототипа, копируем и вставляем на каждую страницу наши сквозные элементы и все это связываем.
Таким образом, мы получаем интерактивный прототип, в котором мы можем пройти все разделы, но эти разделы будут пустыми.
Если бы мы говорили не об интернет-магазине, а о чем-то более сложном, то именно на этом моменте мы могли бы остановиться и продемонстрировать результат клиенту для промежуточного утверждения.
Но в нашем случае это не обязательно, поэтому идем дальше.
Шаг второй
Берем из головы самый распространенный сценарий взаимодействия и, продвигаясь по нему, детализируем страницы, попадающиеся на нашем пути.В случае с интернет-магазином чаще всего это будет выглядеть так:
- Пользователь из поисковой системы (или каталога) попадает на страницу отдельного продукта;
- Добавляет товар в корзину.
В этот момент интерфейс должен подсказать ему, куда идти дальше, чтобы продолжить покупки или оплатить товар;
- Переходит в корзину для оплаты, редактирует содержимое и знакомится с дополнительной информацией, связанной с акциями;
- Указывает личные данные, информацию о доставке, выбирает способ оплаты;
- Оплачивает товар на внешнем платежном шлюзе;
- Он возвращается на сайт магазина, к списку своих оплаченных заказов и следит там за их статусом.
Но чаще всего это происходит в нашем воображении.
Давайте теперь посмотрим, над какими разделами карты сайта нам нужно поработать и в каком порядке.
- Каталог
- Страница продукта
- Корзина
- Размещение заказа
- Подтверждение оплаты
- Мои заказы в личном кабинете
То есть нам не нужно придумывать навигацию личного кабинета или придумывать, куда структурно вставить тупиковые (или отвлекающие, т.е.
те, где скрипт закончен и нужно направить пользователя куда-то дальше) страницы.
Шаг третий
Мы приходим к клиенту с промежуточным результатом, который состоит из полностью разработанного и связанного навигационного решения и шести детализированных страниц.Наш демо-прототип выглядит целостным и завершенным, потому что.
Мы продвигаемся по сценарию, попутно обсуждая тонкие моменты и уточняя, насколько сценарий соответствует реальным возможностям клиента.
Мы не боимся правок в результате комментариев здесь, потому что.
Никакой мелкой детализацией мы не занимались.
Никакой динамики, никаких украшений.
Но клиент будет просто в восторге.
Ведь прошло совсем немного времени, а дизайнер уже показывает ему путь от попадания пользователя на сайт до вытаскивания своих денег из кармана.
После этого мы уходим довольные и прорабатываем оставшиеся несколько сценариев, которые также демонстрируем клиенту.
А в самом конце уже занимаемся детализацией и добавлением динамических элементов там, где это необходимо.
Выгода.
И напоследок вспомним, что обычно демонстрируют дизайнеры при первой демонстрации прототипа.
- Это главная страница! На главную страницу обычно приходится до 10% трафика, если только речь не идет о каком-то исключении в виде популярного сервиса, поэтому начинать с него не стоит. — Каталог товаров и индивидуальная карточка товара.
Мы можем добавлять товары в корзину прямо из каталога.
Нажимаю на эту кнопку, плюс один и стоимость появляется в нашей корзине, а кнопка превращается в «Добавить еще один».
А вот пример преждевременного развития динамических элементов.
Клиент может сосредоточиться на комментировании этой страницы и выполнить множество сложных переделок, хотя это только первый шаг в нашей цепочке сценариев.
— Это блог, отдельный пост, раздел о нас, доставке и оплате и акциях.
Есть разделы, которые создают иллюзию того, что над прототипом была проделана большая работа, хотя по трудозатратам они в совокупности сравнимы с размещением заказа в корзине.
Клиент не получит на первом этапе именно то, что он ожидал увидеть, если из-за этих разделов не будут доработаны другие, более важные.
— Вот страница заказа, а дальше пользователь попадет в свой личный кабинет, но это я покажу позже, в следующей итерации.
Скрипт не доделан, хотя дизайнеру не составило бы большого труда сделать тупиковую страницу или просто зарисовать что-то блочное Мы все прошли через это.
И как клиенты, и как дизайнеры.
И поначалу все наступали на подобные грабли.
Поэтому желаю вам больше практики и успешных рабочих отношений.
Любая инструкция будет действительна только в определенных условиях, а практика даст вам опыт, который поможет адаптироваться к этим условиям.
Теги: #Прототипирование #Юзабилити #axure #axure #Демонстрация прототипа
-
Freedos
19 Oct, 24 -
Семиотика
19 Oct, 24 -
Работа С Ssh В Python
19 Oct, 24 -
Пенсионный Фонд Подставил Ibm
19 Oct, 24
