Как правильно показывать клиенту интерактивный прототип сайта в первый раз / Habr

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

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

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

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

Шаг первый

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

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

Шаг второй

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

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

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

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

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

Шаг третий

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

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

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

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

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

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

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

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

Прототипирование сайта | Агентство KOLORO

Изготовление сайтов: этапы формирования прототипа

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

На втором этапе разрабатывается проект главной страницы. Вот принципы ее создания:

• удержание пользователя. Посетитель решает, остаться ли ему на веб-ресурсе. На это влияют дизайн, подача информации, навигация, быстрота загрузки. Надо сразу создать привлекательные образы, которые захватят потенциального клиента;
• лаконичность. На главной оставляют только самые важные элементы. Если на экране больше 7 объектов сразу, то человек перегружен информацией, у него начинается стресс. Надо стремиться к простоте и лаконичности;
• удобная навигация. Нужная страница должна открываться в 2-3 клика;
• однотипность части элементов. Логотип компании располагается вверху сайта, а корзина для покупок – в правом верхнем углу.

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

На четвертом этапе

прорабатывается интерактивность. К блокам и элементам прикрепляют какие-то действия: переходы на другие страницы, выпадающие списки меню, просмотр фотографий, анимация.

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

Все шаги обсуждаются с заказчиками. Обращайтесь к нашим специалистам агентства KOLORO – вы будете без лишних технических заморочек сами контролировать весь процесс.

Как сделать прототип веб-страницы: 15 лучших сервисов | Академия Лидогенерации | Официальный сайт

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

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

Так может выглядеть прототип страницы

Moqups

Сайт: moqups.com

Язык: английский

Цена: от $13 в месяц

Бесплатная версия: есть, включает 1 прототип весом до 5 Мб

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

Так выглядит элементарный прототип в Moqups

Интерфейс простой. Слева — меню выбора элементов (фигур, текстовых блоков, кнопок и т.д.). Справа — область для настройки каждого элемента (тут можно указать размер и расположение фигуры, шрифт текста). Разобраться легко, даже если не знаете английский язык.

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

Бесплатная версия ограничена по функционалу. Создавать эскизы можно бесплатно, но чтобы скачать их в формате PDF или PNG — надо заплатить.

Balsamiq Mockups

Сайт: balsamiq.com/products/mockups

Язык: английский

Цена: $ 89 для локальной версии; от $ 12 в месяц в облаке; $ 5 в месяц за расширение для Google Chrome

Бесплатная версия: 30 дней во всех вариантах, полнофункциональная

Balsamiq Mockups можно установить на компьютер или открыть в браузере. Еще есть расширение Balsamiq Wireframes для Google Chrome. С расширением можно создавать эскизы сразу на Гугл Диске.

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

В отличие от обычного Moqups, меню элементов здесь горизонтальное
и расположено сверху, а не слева

Внутри лежит очень много кнопок, форм и других элементов (в платных тарифах — более 3000). Все это нарисовано в нарочито небрежном стиле, словно от руки. Если вам не нравится такой стиль — можно отключить его и заменить более строгим. Как и Moqups, Balsamiq легко освоить.

Готовый прототип вы скачиваете в формате PNG или PDF.

Mockplus

Сайт: mockplus.com

Язык: английский

Цена: $ 199 в год или $ 399 единоразово

Бесплатная версия: 8 дней, без ограничений

Mockplus мало отличается по функционалу от от обоих «Мокапсов». Здесь много эскизных элементов (около 3000) и интуитивный интерфейс. Есть версия для мобильных устройств — под iOS и Android. Можно рисовать прототипы на ноутбуке, с планшета или Айфона.

Перед созданием эскиза вы выбираете размер в соответствии с назначением. Делайте прототип для обычной web-версии или специально под мобайл.

Можно выбрать стандартное разрешение (например, 1024х1366 для iPad Pro)
или установить нужный размер

Для всех фигур предусмотрена тонкая настройка — устанавливайте размер в пикселях, смещайте, задавайте шрифт и размер текста, группируйте отдельные элементы.

В Mockplus получаются понятные симпатичные прототипы

Можно создавать интерактивные многостраничные эскизы — с активными ссылками для перехода с одной страницы на другую.

Pidoco

Сайт: pidoco.com

Язык: английский

Цена: от $12 в месяц

Бесплатная версия: 31 день

Сервис хорош простотой. Шаблонов и элементов там немного (по сравнению с другими сервисами). Интерфейс интуитивный — в Pidoco разобраться легче, чем в любом другом сервисе. Открываете и сразу работаете. Он хорош для новичков: минималистичное меню, легкое управление, месяц бесплатного пользования.

Здесь тоже можно делать прототипы обычных веб-страниц, мобильных версий сайтов или мобильных же приложений под разные устройства

Интересно, что есть несколько уже «собранных» прототипов:

Прототип страницы поисковой выдачи Google. Возьмите его за основу —
и сделайте что-то свое

Axure

Сайт: axure.com

Язык: английский

Цена: от $29 в месяц либо $495 единоразово

Бесплатная версия: 30 дней, без ограничений

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

Axure подходит для продвинутых пользователей. Им пользуются UI-дизайнеры и проектировщики интерфейсов. У него самый богатый функционал, но и стоит сервис дороже прочих.

Начало работы с Axure

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

WireframeSketcher

Сайт: wireframesketcher.com

Язык: английский

Цена: $ 99 единоразово

Бесплатная версия: 14 дней, без ограничений

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

Слева — панель настройки отдельных элементов, справа — склад этих элементов

Помимо Windows и Mac, сервис работает на операционной системе Linux (в отличие от большинства других). Есть режимы скетч — «набросок от руки» — и обычный. Можно делать интерактивные прототипы на несколько страниц (для комплексных сайтов).

Из минусов — «тяжелый», визуально устаревший интерфейс. К нему надо привыкать.

Ninjamock

Сайт: ninjamock.com

Язык: английский

Цена: от $10 в месяц (либо бесплатно, но эскизы будут видны другим пользователям)

Бесплатная версия: есть

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

Рабочая область Ninjamock

Освоиться можно за пару минут. Все элементы расположены в левой части, в основном меню ничего лишнего. Выбирайте нужную фигуру или текстовое поле, перетаскивайте мышкой и изменяйте, как захочется. Все это — в том же стиле «набросок от руки».

Ninjamock работает только в браузере — десктопной версии нет.

PowerMockup

Сайт: powermockup.com

Язык: английский

Цена: от $60 (единоразово)

Бесплатная версия: есть, ограничена по функционалу

Этот сервис расширяет возможности стандартного PowerPoint (из пакета Microsoft Office). Устанавливаете — и в PowerPoint появляется вкладка PowerMockup.

Решение интересное, но пробная версия почти бесполезна. Там очень мало доступных элементов прототипа. Чтобы пользоваться сервисом полноценно, надо заплатить 60 долларов.

Iplotz

Сайт: iplotz.com

Язык: английский

Цена: от $15 в месяц

Бесплатная версия: есть

У Iplotz есть полноценная бесплатная версия для Windows, Mac и мобильных устройств на Android. Ограничения небольшие: можно работать только с одним проектом (максимум на 5 страниц-прототипов) и нельзя подключать к работе других людей. Если вам нужно просто набросать схему странички, это не помешает.

Рабочая область Iplotz

Фигур и иконок мало — всего несколько сотен. Создать детализированный красивый прототип не получится. Но если вы не дизайнер, много красивостей вам и не нужно.

Выгрузить эскиз можно в PNG, PDF или HTML.

Другие сервисы

Если ни один из сервисов вам не понравился — попробуйте эти:

• Gomockingbird.com — приятный несложный сервис по цене от $12 в месяц. Пробный период — 6 дней.
• Mockflow.com — еще один простой редактор. Стоит от $14 в месяц, пробный период — 14 дней.
• Mockupbuilder.com — ничего необычного: большой набор элементов, легкое управление, возможность совместной работы. Зато стоит недорого — от $7 в месяц. Бесплатно — в течение 14 дней.
• Marvelapp.com — интересен тем, что есть шаблоны для прототипов на любые устройства — включая «умные часы». Есть бесплатная версия, но скачивать эскизы можно только в платной — она стоит от $14 в месяц.

Что лучше?

У всех сервисов много общего: готовые наборы шаблонов, многопользовательский режим. Все работают в браузере, некоторые — в виде отдельной программы на ПК. Все — только на английском, и почти все — платные. Это минус. Зато у большинства предусмотрен пробный период сроком 14-30 дней — это плюс.

• если для вас важнее бесплатная версия — попробуйте Ninjamock и Iplotz;
• наиболее сбалансированные по возможностям, удобству и цене сервисы — Pidoco, Moqups, Balsamiq Mockups, Mockplus;
• для профессиональной работы лучше подойдут Axure и WireframeSketcher.

это схематический макет страницы или страниц сайта

Как гласит старая латинская пословица, победа любит подготовку. Её можно сказать в равной степени и про планирование, и про прототипирование. Это что такое? Какие существуют особенности? Об этом и не только будет вестись разговор в рамках статьи.

Что называют прототипированием

Под этим понятием понимают быстрый «черновой» вариант реализации базового функционала, чтобы можно было проанализировать работу системы в целом. Она может быть неэффективной, содержать ошибки или работать не полностью – всё зависит от целей прототипирования. Такой подход позволяет лучше увидеть, как устроена система. Прототипирование применяется в приборо- и машиностроении, программировании и ряде других технических областей. После этого процесса часто пересматривают архитектуру системы, реализацию функций, различные разработки и, если нет претензий, тестируют конечный продукт.

Особенности прототипирования

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

Техническое задание + прототипирование сайта = ?

Подобные образцы являются частью ТЗ. Они позволяют задавать четкие границы разработки и способствуют устранению недопонимания между заказчиком и исполнителем. С помощью текста описывается техника, логика, структура и особенности администрирования сайта, а благодаря прототипу это всё визуализируется и есть понятие, что и как будет выглядеть. Ведь как должен быть выполнен сам проект, каждый представляет и интерпретирует со своей точки зрения. Если нет желания делать самому всю работу, то можно обратиться в специальный центр прототипирования. И там всё сделают специалисты. Хорошо, если заказчик (с позиции фрилансера) сам перед дачей технического задания обратился в центр прототипирования. Таким образом можно получить понятное ТЗ. С такой точки зрения прототипирование – это качественная ступень реализации проекта.

Делаем качественный прототип

Для этого следует тщательно проанализировать техническое задание. Такое часто можно было видеть в школьных учебниках: задача не содержит вменяемого (для вас) условия, но решить её надо. Поэтому следует всегда нацеливаться на получение тщательно проработанного технического задания. Как показывает практика, для полноценного и многофункционального сайта оно занимает как минимум 50 страниц А4. Технические задания на пару сотен – это даже не предел в данной сфере, а обычная норма. Необходимо, чтобы в нём был прописан каждый аспект и нюанс – вот такой прототип сайта нужен.

Работа над ошибками

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

Бумажный макет

Для начала прорисуйте прототип на бумаге. Можно на ней создать даже вид из браузера (тоже нарисованного). Сначала прорисуйте базовые элементы. Что необходимо изобразить, конкретно отличается от предназначения сайта. Так, в интернет-магазинах делают статичными меню товаров и строку поиска. Затем создавайте поочередно все страницы и выражайте функционал, который на них будет. Расположите все элементы интерфейса сайта на своих местах. Прототипирование – это процесс, что позволит создать более совершенный продукт, в котором будут устранены разночтения технического характера, и будет получен результат, соответствующий техническому заданию. Каждая ошибка, которая будет допущена, является дорогой в прямом смысле слова. Поэтому прототипирование сайта необходимо проводить со всёй ответственностью.

Процесс создания прототипа

Итак, начинаем. Для создания прототипа необходимо сделать четыре шага:

1. Определяем начальные требования, которым должен он соответствовать.
2. Разрабатываем первый вариант прототипа, в котором содержится исключительно пользовательский интерфейс системы.
3. Передаём прототип заказчику/конечному пользователю, чтобы они смогли его изучить. Важной на этом этапе является настройка обратной связи про внесение необходимых изменений, а также дополнений.
4. Прототип перерабатывается на основании полученных предложений и/или замечаний.

Можно воспользоваться специальными средами. Так, доступным является 3D-прототипирование, что позволит лучше осмотреть всё с разных сторон.

Прототипирование программных продуктов и компьютерных систем

Поскольку мы рассматриваем создание макета сайта, то необходимо знать, как это можно сделать. Чтобы создать прототип, используются языки программирования высокого уровня абстракции. В нашем случае это PHP, JavaScript, ActionScript и многие другие. Также могут применяться и специальные инструменты. Когда прототип утверждён, то в конечной реализации создают документированный и более аккуратный код. Одновременно с этим увеличивается количество усилий, что тратятся на отладку и тестирование сайта, чтобы убедиться, что он полностью выполняет свой функционал. На этапе прототипирования выявляют самые значительные архитектурные ошибки, вносят изменения в интерфейс модулей системы, а также проводят перераспределение их обязанностей.

Какими качествами должен обладать эффективный прототип

Можно выделить довольно много точек опоры, но в рамках статьи предлагаются такие:

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

Заключение

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

Создание прототипов сайта — иллюстрированное руководство к работе

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

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

Шаг 1. Создаем дизайн домашней страницы

Итак, первым шагом будет разработка дизайна для будущей домашней страницы сайта. Скопируйте стартовый шаблон в папку, которая называется Wireframes, и назовите файл, к примеру, ProjectNew-Home.psd. Далее откройте файл и включим отображение направляющих.

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

Шаг 2. Рисуем первые элементы прототипа

В подготовленном файле PSD можно приступать к рисованию первых элементов прототипа и делать вводную секцию. Для примера будем использовать наброски, в которых должно быть больше введения, а посередине будет одно сообщение. Откройте приложение Photoshop Wireframe Kit в новом окне. Это необходимо для того, чтобы просто перетаскивать новые элементы: благодаря таким действиям не придется создавать их заново каждый раз при разработке нового шаблона.

Теперь необходимо воспользоваться Rectangle Toll для того, чтобы нарисовать задний фон секции «Введение». Не делайте высоту идеальной. После переходите к использованию Photoshop Wireframe Kit. С помощью этого приложения легко и быстро можно добавить изображения, заголовки, навигацию и различные кнопки. Ниже изображен пример секции «Введение».

Шаг 3. Создаем различные разделы

На этом этапе разрабатывается новый раздел — «Сервисы». В этом разделе будет использоваться решетка из 12 колонок. Поделим макет на три колонки, добавим новые элементы, которые будут отображать примеры кнопок, изображений, заголовков и описаний.

Далее разработаем раздел о проекте. Здесь мы также будем использовать решетку из 12 колонок и поделим этот раздел на 3 части. В левую колонку добавим пример текста и изображение, а в центральную и правую колонки – текст «о проекте».

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

Следующим этапом в процессе создания макета домашней страницы будет разработка отзывов и призывов к действию. Их макет состоит и одной вертикальной колонки.

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

Приложение Photoshop Wireframe Kit имеет простой в использовании элемент, который специально предназначен для заметок. Создадим новую папку, которая будет включать в себя слои, и назовем ее Notes . Она потребуется для, чтобы спрятать в нее все заметки с макета.

Шаг 4. Создаем прототип для страницы блога

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

Так как мы создаем блог, то лучше сделать заголовок небольших размеров.

В той области, где будет располагаться текст, с правой стороны будет сайдбар и небольшой список статей блога. При помощи решеток разделим макет на две колонки. Также здесь между областью контента и сайдбаром присутствует небольшая колонка. Оставим немного свободного места для блога — таким образом мы добьемся того, что статьи не будут сталкиваться с виджетом сайдбара.

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

Шаг 5. Создаем прототип для страницы о проекте и статьи блога

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

Ниже представлен пример готового прототипа страницы о проекте. Внимательно изучите его.

В процессе работы над прототипами вы потратите значительное количество времени на размышление и планирование, а не на саму работу в приложении Adobe Photoshop. Вам следует запомнить, что концентрировать свое внимание необходимо на функциональности дизайна, а не на его внешнем виде. Неплохим способом добавить себе уверенности будет создание нескольких версий определенных страниц.

А на этом примере вы увидите, как может выглядеть готовый прототип для страницы со статьей блога:

Процесс разработки сайта. Этап 1: разработка интерактивных прототипов сайта

Обухов Константин

26.10.2012

Этой статьей мы открываем цикл публикаций для клиентов и заказчиков о процессе разработки сайта.

Цикл рассматривает все шаги и этапы разработки: от идеи до запуска проекта и поможет избежать типовые и скрытые ошибки. Результат – сэкономленные деньги и время.

В этой статье мы пропускаем нулевой этап, когда идея: «Нам нужен сайт!», превращается в набор требований и функций сайта.

Речь пойдет об интерактивных прототипах.

Прототипы: как они разрабатываются и зачем нужны

Перефразируя определение в Wikipedia, можно сказать, что прототип — это быстрая «черновая» реализация основных блоков содержания и функций сайта. Это архитектурный план, по которому будет разрабатываться сайт.

В самом примитивном виде прототип – это рисунок «от руки», чертеж основных блоков странички сайта на бумаге или в Excel.

Источник

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

Преимущества интерактивных прототипов

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

1. Прототипы позволяют осмыслить будущий сайт

Сайт на этапе обсуждения идеи представляет собой нечто эфемерное. 95% наших клиентов в процессе разработки прототипов приходят к расширенному и более точному понимаю проекта.

2. Точно определить содержание сайта

Все блоки содержания указываются с точностью до буквы. Уже на данном этапе можно указать расположение и внешний вид контента.

3. Сымитировать работу функций сайта до этапа программирования

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

4. Построить модель реализации целей пользователей, протестировать и скорректировать ее (этап 0)

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

5. Сэкономить время и деньги на этапе дизайна

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

В результате, дизайн растягивался на недели, при этом удобством и функциональностью сайта подчас жертвовали в угоду «красоте».

С введением этапа проектирования прототипов все встало на свои места. Дизайнер работает с уже сформированной структурой шаблонов. Это значительно сокращает время и стоимость разработки дизайна сайта.

6. Привлечь программистов к анализу технических путей реализации нужного Вам функционала и найти оптимальное решение

Читать даже хорошо написанное техническое задание – тяжелая работа. Наличие интерактивного прототипа помогает программистам понять логику работы сайта уже на этапе проектирования. К тому же, при анализе работы прототипа, программисты «примеряют» функционал сайта на ту или иную систему управления сайтом и выделяют наиболее нестандартные (дорогие) блоки.

7. Выявить узкие места и ошибки, а также узлы сайта, генерирующие большую нагрузку на сервер

Опытный программист, поработав с прототипом, сможет указать на логические ошибки в работе функций сайта и на те блоки, которые генерируют наибольшую нагрузку на сервер.

В итоге работы над прототипом, вместо «рисунка на бумаге» мы получаем работающую модель основных разделов и функций сайта, в виде набора html-страниц, имитирующих функционал готового проекта.

Эти страницы можно открыть в любом браузере, покликать на меню, ссылки, кнопки и получить предполагаемый результат.

Просмотреть пример прототипа сайта можно здесь: (ссылка)

Программы прототипирования

В работе над сайтами мы используем программу проектирования интерфейсов Axure RP ( www.axure.com), которая позволяет создать прототипы как для веб-сайтов, так и для мобильных приложений, но, справедливости ради, упомянем и о программах-аналогах.

Работу в Axure RP мы рассмотрим в отдельной статье.

Этапы разработки прототипов

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

К примеру, для интернет-магазина список функционала может выглядеть следующим образом:
1. Каталог товаров
a. Список товаров
i. Сортировка товаров по цене, названию, рейтингу
ii. Постраничная навигация
iii. Карточка быстрого просмотра товара
b. Фильтрация товаров по свойствам
c. Добавление товара в корзину
2. Оформление заказа и т.п.

Теперь можно перейти к «закладке фундамента» будущего проекта – прототипированию. Важность этого этапа нельзя переоценить, ведь, как известно, ошибки, допущенные на самом раннем этапе разработки, в итоге оказываются самыми дорогостоящими.

Шаг 1

На первом шаге разработки прототипа из множества функционала определяем список уникальных шаблонов (страниц). Для выполнения каждой функции выделяем отдельную страницу.

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

1. Главная страница
2. Каталог
a. Список товаров
b. Список товаров с примененным фильтром и вариантом сортировки
3. Страница товара
4. Корзина

Каждая из этих страниц решает свою уникальную задачу. Так, главная страница – это основная точка входа, собирающая для пользователя наиболее важную информацию о сайте. Она решает наиболее сложную задачу удержания пользователя, поэтому, как минимум, должна:
• Удостоверять, что нужная пользователю информация есть на этом сайте
• Завоевать доверие пользователя и удержать его внимание
• Содержание и навигация должны быстро подсказать пользователю, куда пойти далее по сайту, чтобы достичь своей цели.

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

В итоге, в Axure RP мы получаем список прототипов.

Шаг 2

На втором шаге мы разрабатываем прототип главной страницы, на основе которой будут построены все остальные шаблоны сайта.

Принципы построения главной страницы:

1. Эмоциональное воздействие

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

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

Именно поэтому важно на этапе построения прототипа спроектировать нужное эмоциональное воздействие.

2. Информационная лаконичность

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

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

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

3. Удобная навигация

Зачастую шапка и футер главной страницы сайта наследуются внутренними страницами. Навигационные инструменты сайта (меню, поиск, «хлебные крошки» или путь по сайту) сквозным образом присутствуют во всех шаблонах. Их функциональность и удобство пользования должны быть тщательно продуманы и реализованы в прототипе. Принцип достижения нужной страницы в 2-3 клика еще много лет будет актуален.

В последнее время распространена тенденция закрепления навигационных инструментов и корзины в верхней части экрана при прокрутке страницы. Это повышает удобство работы пользователя с сайтом и позволяет с любого места страницы перейти в нужную часть сайта. Мы рекомендуем данный метод навигации для всех сайтов с большим количества контента.

Введение такого принципа отображения навигации решает частично и другую проблему: нежелание пользователя прокручивать страницу вниз.

4. Привычное расположение элементов

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

Такое расположение элементов сайта – результат исследований по юзабилити, опыт работы многих крупных сайтов и магазинов. Было бы ошибочно «изобретать велосипед» и пытаться приучить пользователей к другим местам размещения этих блоков. Пользователь приходит на сайт для своих целей, а не для того, чтобы найти на вашем сайте корзину, меню или переход на главную страницу.

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

Шаг 3

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

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

«Необходимо» — структура внутренней страницы должна содержать необходимые для решения своей задачи блоки и функции.

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

Рассмотрим пример. У страницы товара одна задача – «продать» товар посетителю. Только вот посетители находятся на разных этапах принятия решения о покупке:
• Еще не знают, нужный ли это товар или надо искать другой;
• Сравнивают товар с другим;
• Уже приняли решение брать этот товар, но ищут место покупки и выгодную цену;
• Склоняются купить товар в этом магазине, но не знают условий доставки и оплаты
• И т.д.

Необходимо: на странице удобным и понятным образом должна быть размещена вся информация о товаре, а также инструменты покупки товара (добавление в корзину или предварительный заказ).

Достаточно: страница должна содержать достаточно ссылок/вспомогательных блоков информации для осуществления продажи товара.

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

Шаг 4

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

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

Шаг 5

На последнем шаге, когда прототипы уже готовы и их работу можно проверить в любом браузере, проводится юзабилити-тестирование. Задача тестировщика – полностью сымитировать типовое поведение пользователя (пользовательские сценарии) на текущем прототипе. Желательно, чтобы тестируемый первый раз видел данный прототип. Задание может выглядеть просто: необходимо купить на данном сайте такой-то товар или найти такую-то информацию о товаре.

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

Идеально, если такое тестирование проводится с помощью реальных/лояльных клиентов/пользователей.

Техническое задание

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

Итог (спасибо, что дошли до конца статьи)

Разработка прототипов – это обязательный этап при создании сайта. Чем тщательнее и правильнее будет проведен этот этап, тем эффективнее будет работать сайт после запуска и тем больше будет экономия на всех других этапах производства сайта.

Просмотров: 2215