Начните с пользователя

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

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

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

Привяжите потоки действий пользователей к воронкам конверсии

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

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

Вот несколько типичных потоков пользователей:

• Платная реклама. Пользователь пришёл по баннеру или через рекламу в той или иной рекламной сети (Google AdWord, РСЯ).
• Соцмедиа. Пользователь пришёл из постинга своего знакомого в социальной сети.
• Электронная почта. Пользователь пришёл из рассылки или по реферральному приглашению.
• Поисковая выдача. Пользователь пришёл со страницы с результатами поиска.
• Новость. Пользователь встретил упоминание вас в новости или в постинге блога.

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

Вглубь воронки: как приобретается клиент

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

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

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

• С пользователями какого типа вы хотите работать?
• Что именно они делают: активно ищут решение проблемы или бесцельно лазят по сайтам?
• Какую проблему они пытаются решить?
• Как лучше всего завладеть их вниманием?
• Как вы соотноситесь с пользователем?
• Какой посыл найдёт отклик у пользователя?
• Есть ли у пользователя болевая точка, давление на которую ваш продукт или сайт может снять?
• Как вы можете чётко и быстро сформулировать это решение?
• Какие призывы к действию действительно будут работать для ваших целевых пользователей?

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

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

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

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

Для того, чтобы обеспечить это продвижение, используйте следующие методы:

• Выстройте уверенность посетителя путём чёткой формулировки ключевых преимуществ, подкреплённых легко усваиваемыми подтверждающими доказательствами.
• Переработайте контент и дизайн так, чтобы фокус был на чётком призыве к действию (в данном случае, на подписке).
• Уменьшите «трение» на каждом шаге. Запрашивайте у посетителя минимум информации, уменьшите количество заполняемых полей, производимых щелчков и время загрузки страницы.
• Создайте «приманку» — вызовите любопытство, удовлетворить которое можно только в случае завершения регистрации.

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

Свяжите потоки для обеспечения полного взаимодействия с пользователем

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

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

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

В рассматриваемом примере совокупная воронка состоит из воронки приобретения покупателя и потока управления взаимоотношениями с клиентом (CRM).

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

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

В этом потоке вам необходимо рассмотреть все элементы стратегии CRM и потока покупки на сайте, включая:

• взаимодействие с подписчиком по почте;
• страницы, на которые подписчик приходит при возвращении на сайте,
• поток от внутренних страниц к странице завершения покупки.

При проектировании цепочки от подписчика к покупателю имеет смысл обратить внимание на следующие ключевые моменты:

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

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

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

Выводы

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

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

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

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

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

Статья основана на публикации Моргана Брайана “Stop Designing Pages And Start Designing Flows” в издании Smashing Magazine.

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

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

Ниже приведена объединенная схема страниц, которые были разработаны и отмечено, сколько приблизительно еще предстояло сделать.

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

• Apple Human Interface Guidelines
• iPhone Human Interface Guidelines – PDF version
• Android User Interface Guidelines
• Windows Phone 7
• Windows Touch UI Guideline
• UI Design & Interaction Guide for Windows Phone 7 (PDF)
• UI Guidelines for BlackBerry 6.0 Smartphones – PDF version
• UI Guidelines for BlackBerry 4.x, 5.x Smartphones – PDF version
• BlackBerry Browser Content Design Guidelines (PDF)
• Motorola’s Best Practices for Android UI
• Nokia Design & User Experience Library
• Standard S60 UI Components
• Forum Nokia Design Portal (PDF)
• Nokia Series 40 UI Style Guide
• Bada Application UI Guide
• Sony Ericsson UI Rulebook PDF
• UI Guidelines for Windows Mobile
• webOS UI Guidelines
• Hildon UI Guidelines for Nokia Maemo
• MeeGo UI Design Guidelines
• GNOME Human Interface Guidelines

Сам по себе Indesign при проектировании я начал использовать года 3-4 назад. До этого были жалкие, как теперь мне кажется, попытки работать в Microsoft Visio, и как-то мой друг, Саша Юдаев, показал мне до чего же все просто. Просто в первую очередь потому, что я, как многие другие, начал пользоваться программами от Adobe давно и быстрые клавиши и типовые операции отлетали от рук уже сами по себе. И работать с этой программой мне приходилось, не часто, но определенный опыт был. Но до того, как увидел wireframe от Саши в Indesign, мне и в голову не приходило, что этой программой можно пользоваться для этого.

Но всегда есть место для нового опыта и спасибо Владу Головачу за его мастер-класс на WUD’10.

В Adobe Indesign есть одна функция, которая очень полезна для полиграфистов и не менее полезна при проектировании, задается в настройках документа и называется «Bleed and Slug».  Эта опция задает внешние, относительно основной области документа, границы и используется в полиграфии для обрезки и служебной информации, а при проектировании ее можно использовать, чтобы из одного документа делать как минимум два: интерактивный прототип и документированное описание к нему (в зависимости от необходимости используем при экспорте в pdf  «Bleed and Slug Settings» или нет).

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

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

Полный вариант с комментариями и выходными данными

Только контентная область и ссылки для перехода между страницами

Вспомогательный вариант, который сделан для наглядности, с использованием образа устройства

Собственно все, надеюсь, для опция «Bleed and Slug» окажется для вас полезной в работе.

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

Горизонтальное распределение внимания

Горизонтально распределение внимание посетителя сайта (для монитора разрешением 1024×768px)

Выводы, которые делаю в результате исследования:

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

• Размещайте основное содержание немного дальше от левого края страницы.
• Наиболее важные вещи должны быть продемонстрированы от одной трети до половины страницы. Здесь пользователи больше всего сосредотачивают свое внимание.
• Размещайте вторичное содержание справа. Пользователь не станет тратить много времени на просмотр этой части страницы, но заметит, например, где расположилась корзина и где ее искать.

Явно существует со-зависимость между эволюцией компоновки страниц и моделью просмотра страниц пользователями:

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

Вертикальное распределение внимания

Вертикально распределение внимание посетителя сайта (для монитора разрешением 1024×768px)

Очевидные выводы:

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

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

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

1. Добейтесь ясности ваших целей

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

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

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

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

2. Функциональность важнее красоты

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

В компании «Говард Бейнс» (Howard Baines) мы применяем аскетичный подход к прототипам. Они не содержат ничего, кроме функциональных элементов (блоки, кнопки, выпадающие меню и т. д.). Мы избегаем того, что может быть воспринято как оформление или компоновка. Некоторые могут пойти в этом немного дальше и включить в прототипы компоновку и детали оформления. Каждый выбирает то, что подходит именно в его случае.

3. Опирайтесь на собственный опыт

Чтобы начать, вам не обязательно иметь навыки проектирования или разработки. Все, что нужно — это опыт использования веб-приложений или сайтов. Разумеется, чем больше опыта, тем лучше, но для создания прототипов вам не нужно разбираться, например, в базах данных.

4. Выберите ответственного

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

5. Вовлекайте в процесс всех

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

6. Установите четкий срок готовности прототипов

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

7. Соблюдайте чистоту

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

8. Избегайте излишнего оформления прототипов

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

9. Помните, что пользовательский интерфейс и user experience — не одно и то же

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

10. Думайте о пользователе

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

11. Не ленитесь

Часто проще заявить: «Страница входа очевидна, давайте не будем создавать её прототип». Убедитесь, что вы запрототипировали абсолютно всё. В конце этого процесса у вас должен быть набор документов, по которому можно походить так же, как по конечному сайту. Каждый шаг важен и ни один нельзя игнорировать.

12. Организуйте ваши прототипы по разделам

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

13. Нумеруйте страницы

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

14. Ищите повторения

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

15. Проверяйте свой прототип

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

16. Реклама функциональна

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

17. Не только публичная часть сайта

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

18. Знайте, когда остановиться

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

19. Выберите верные инструменты

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

Когда вы начнете создавать документ, мы рекомендуем вам использовать тот инструмент, который для вас будет удобнее всего. Разработчики, например, могут использовать Micsofoft Visio, менеджеры проектов — PowerPoint, а дизайнеры — Adobe Fireworks.

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

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

20. Учитывайте зависимости

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

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

У вас есть советы, как быстро создавать качественные, удобные прототипы?

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

И в качестве дополнения к этому можно еще посмотреть:

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

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