Что такое прототипирование сайтов и зачем оно необходимо


Оглавление (нажмите, чтобы открыть):

Прототипирование: что это такое и почему оно необходимо?

Если честно, то прототипирование очень сильно экономит время! В чем оно заключается: схематичное размещение элементов дизайна сайта на листе бумаги – блоки, модули, всё то, что мы планируем использовать – отражается на схеме сайта. Это и есть прототипирование (создание прототипа).

Зачем это нужно? Во-первых, мы планируем функционал сайта, размещаем его блочно и смотрим, как всё это выглядит схематично. Во-вторых, возможно, это главное, мы оцениваем пользовательское поведение, то есть насколько понятна схема расположения модулей и блоков для посетителей (Юзабилити). Это напрямую влияет на эффективность работы сайта, что так же отражается на конверсии, количестве обращений. Ну а дальше всё в Ваших руках!

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

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

Рекомендации от Веб-студии «Веста»:
– блоки меню располагать в левой части;
– кнопку с обратным звонком располагать в верхнем правом углу шапки сайта;
– в подвале и шапке сайта дублировать контакты;
– в слайдере размещать не более 3-5 слайдов;
– обращаться к специалистам по рекламе и маркетингу в интернете.

Зачем нужен прототип сайта и как его создать

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

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

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

Словом, прототип сводит к минимуму риски, что на стадии готового проекта окажется, что что-то пошло не так и нужно начинать сначала.

Прототип все упрощает

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

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

Устраняет недопонимание между вами и дизайнером

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

Вскрывает ошибки, незаметные в словесном описании

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

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

Позволяет протестировать удобство и функциональность будущего сайта

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

Легко переделывается, в отличие от готового сайта

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

Кто должен делать прототип

На первый взгляд может показаться, что, раз прототип «рисуют», значит, делать его должен сам дизайнер. На деле же прототип — это не «про рисование», а целиком и полностью «про ЦА».

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

Для этого вам нужно решить:

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

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

Но полностью переложить этот процесс на дизайнера («Вы профессионал, вот вы и делайте») — плохое решение.

Как создать прототип сайта: главные принципы

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

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

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

Прототипы бывают статичные и динамичные.

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

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

Составляем прототип: три инструмента для начинающих

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

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

Среди инструментов, доступных новичкам, — Draftium, Balsamiq и Мoqups. Давайте знакомиться.

Draftium.com


Сервис настолько прост, что не требует особых инструкций.

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

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

Редактировать прототип можно буквально в пару кликов — настройки продуманы очень удобно.

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

Balsamiq Wireframes

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

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

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

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

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

Мoqups.com

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

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

Готовые блоки и трафареты можно просто перетаскивать на холст из библиотеки или копировать с вашего устройства.

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

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

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

6 инструментов для прототипирования сайта

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

Из статьи вы узнаете:

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

Что такое прототипирование

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

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

Структура интернет-магазина штор, сделанная в программе Xmind (источник)

Узнать, как продвигать интернет-магазин, избежать ошибок и вдохновиться на процесс можно на бесплатной онлайн-конференции “Интернет-магазин от А до Я” от обучающего центра Cybermarketing.

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

Существует более прозрачный способ передать идею и получить обратную связь на вашу работу — инструменты прототипирования.

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

Пример вайрфрейма интернет-магазина в приложении Moqups

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

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

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

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

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

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

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

Зачем нужно прототипирование

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

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

Инструменты для прототипирования

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

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

Principle

Приложение для MacOS, совмещающее в себе возможности дизайнерских программ Sketch и After Effects.

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

Посмотрите, как работает готовый прототип модуля “Чек-лист” от SeoPult, сделанный в Principle:

Прототип модуля «Чек-лист» в Principle

Balsamiq

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

Оглавление книги в интерфейсе приложения для чтения — пример «аккордеон»-меню, созданный в Balsamiq (источник)

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

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

Moqups

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

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

Прототип мобильного приложения с сайта Moqups (источник)

Мастер Йода рекомендует:  ЧПУ и PHP (revisited) PHP

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

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

InVision

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

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

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

Pixate

Бесплатное приложение для рабочего стола Pixate Studio создаёт прототипы для мобильных, которые будут выглядеть как реальный продукт. Затем можно связать его с системой IOS или Android и протестировать на экране телефона.

Прототип интернет-магазина в Pixate

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

Axure

Дорогой, долгий, но фундаментальный. Он остаётся стандартом профессионализма для дизайнеров из России.

Пример интернет-магазина в Axure

С помощью платформы можно создавать кликабельные и адаптивные прототипы для ПК и мобильных, добавлять готовые средства из библиотеки — popup, выпадающие меню и другие формы.

Вызывает противоречивые мнения: одни говорят, что Axure сложная программа для быстрого прототипирования, другие разбираются в ней за 20 минут. Вы можете попробовать Axure. Для этого в инструменте есть пробная бесплатная версия на 30 дней.

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

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

Скупой платит дважды: для чего нужно прототипирование сайта?

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

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

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

Что дает прототип сайта?

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


Алексей Чертов, менеджер проектов «Синапс»

Этапы прототипирования сайта

После обращения в «Синапс» клиент попадает к менеджеру проекта. Сотрудник продумывает структуру или «дерево» сайта и утверждает её за одним столом с покупателем. Затем менеджер прототипирует веб-ресурс в специализированной программе Axure. Она позволяет создать полноценный скелет сайта с навигацией, слайдерами и другими интерактивными элементами.

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

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

Почему всем хорошо?

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

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

Прототипирование в «Синапсе»

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

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

Как создать прототип страниц для разработки сайта, чтобы исполнители не налажали

Время чтения: 14 минут Нет времени читать? Нет времени?

Мы продолжаем писать про UX/UI. На этот раз статья про то, как создать прототип страницы, чтобы облегчить жизнь себе и пользователю.

Прототипирование страниц – это продумывание содержания и расположение важных элементов страницы. Таких как:

  • навигация;
  • контактная информация;
  • CTA-элементы;
  • контент;
  • логотипы;
  • хэдер (шапка сайта);
  • футер (подвал) и так далее;

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

Эта статья рассчитана на заказчиков, которые хотят корректно составить ТЗ на разработку сайта. Технические нюансы по разработке прототипа читайте в гайде «Как сделать прототип в Axure RP, если ничего в этом не понимаешь».

Для чего нужно создание прототипа

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

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

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

Пользовательский опыт (UX – User eXperience) – это опыт, который накопился до или после того, как человек воспользовался вашим интерфейсом. Пользователь будет искать необходимые элементы исходя из своего опыта.

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

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

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

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

Разберем это на примере сайта TexTerra (опять). Целевая аудитория сайта – маркетологи и бизнесмены. Им выгоднее узнать, как сделать что-то самостоятельнее, а нам – убедить их заказать наши услуги.

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

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

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

Все это помогает задержать читателей, даже если они уже нашли ответ на свой вопрос.

Но тут нужно сразу отметить очень важный момент – мы никого не принуждаем:

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

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

Как создать прототип

Сначала у вас может возникнуть вопрос, что использовать для создания прототипа. Ответ очень простой – все. Любую программу, которая позволяет рисовать. Это может быть Adobe Photoshop, MS Paint, Adobe Illustrator, Gimp и другие. Можно воспользоваться MS Word или Google.Docs.

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

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

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

Сначала нужно создать шапку сайта. В ней могут быть:


  • логотип;
  • контактная информация;
  • CTA-кнопка;
  • форма поиска;
  • кнопка обратной связи и так далее.

Дальше идет контентная часть и сайдбар (если есть). Сайдбар может содержать:

  • форму авторизации;
  • ссылки на полезные материалы или социальные сети;
  • счетчики;
  • чат и так далее.

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

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

  • категории товаров;
  • карточки товаров;
  • список материалов;
  • портфолио;
  • статьи;
  • карта;
  • отзывы;
  • фотографии и многое другое.

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

Дальше проектируется целевой блок. В нем может находится еще одна CTA-кнопка или форма.

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

Все блоки и элементы для удобства можно разделить на 3 вида: информативные, функциональные и навигационные.

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

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

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

Желательно всегда использовать какие-нибудь элементы навигации. Например, не только пункты меню, но и номера страниц или кнопку «наверх»:

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

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

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

Общий стиль

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

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

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

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

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

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

Информирование со стороны системы и соответствие пользовательскому опыту

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

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

Мастер Йода рекомендует:  Маленькая баннерная сеть каждому Javascript

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

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

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

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

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

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

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

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

Тут можно предложить вернуть бесплатно вернуть одежду, если не подойдет размер, или добавить на сайт онлайн-примерочную. Если верить AstraFit, то их виджет помогает сократить количество возвратов на 48 %.

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

В то же время какие-то части сайта могут портить пользовательский опыт и убивать конверсию:

  • отсутствие адаптивной верстки;
  • долгая загрузка;
  • мелкий шрифт;
  • горизонтальная прокрутка и так далее.


Более подробный список полезных и вредных элементов на странице можно найти в статье Лилии Голиковой «Чек-лист по юзабилити: 200+ пунктов на проверку».

Заключение

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

Есть такие очень мелкие детали, которые могут показать совсем незначительными, но очень важны для людей, чтобы они комфортно пользовались интерфейсом. Рекомендую прочесть статью Дмитрия Дементия «Что такое UX и UI, и почему UX-дизайнеров не бывает», чтобы вообще понять, что такое UX и UI, как можно улучшить пользовательский опыт на этапе верстки и многое другое.

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

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

  • конструктор кастомных гитар;
  • конструктор пиццы;
  • логистический тетрис;
  • инструкция по сборке мебели с дополненной реальностью;
  • пособие по вычесыванию блох в VR;
  • генеалогический онлайн-калькулятор;
  • симулятор «100+ способов улететь в кювет» на сайте страховой компании.

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

Прототипирование — для чего оно нужно?

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

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

Что такое прототип?

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

Юзабилити и поведенческие факторы

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

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

Стоимость ошибки

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

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

Для балкона нужен второй этаж? Но вы же можете сделать для нас на первом в качестве исключения?

Можем. Настоящий профессионализм может все. Но помимо общей затратности таких методик есть еще извечно мучающий всех профессионалов вопрос — ЗАЧЕМ? Ценители прекрасного юзабилити будут бесконечно биться головой о стены (те самые, покрытые испанской штукатуркой) и убеждать вас в том, что балкон не нужен. Лучше поверить сразу.

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

Архитектура vs. дизайн

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

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

Чтобы заказчик был доволен

Расскажем по пунктам, что особенно хорошего дает этап проектирования в нашей работе.

  • 1. Взаимопонимание
    — Самый важный пункт. Мы слышим клиента и видим его задачи. А он в свою очередь понимает, что, где и зачем будет располагаться на его функциональном, красивом и структуно продуманном сайте.
  • 2. Быстрое (и безболезненное) прохождение этапов согласования
    Опять же наглядность и очевидность конкретных шагов. Сделали, увидели, согласовали. Переходим к следующему этапу.
  • 3. Прекрасные показатели юзабилити
    Которые достигаются благодаря анализу поведенческих факторов пользователей. Сюда же входит неизменная ориентация на ЦА и задачи проекта.
  • 4. Экономия времени
    Переделывать масштабно ничего не будет нужно, если все масштабные вещи будут заранее определены, утверждены и согласованы. А нужный бантик на нужную страницу мы вам потом прикрепим бесплатно (конечно, если это не будет чревато чрезмерными внутренними конфликтами для нашего дизайнера).
  • 5. Позволяет отделить дизайн как самостоятельную часть работ
    Этап прототипирования дает клиенту четкое понимание того, что есть на самом деле дизайн. И помогает всем на нем полноценно сосредоточиться тогда, когда все блоки и структурные элементы уже продуманы. Это позволяет отдельно видеть архитектуру и дизайн и адекватно оценивать качество работ по каждому этапу.

Прототип против дизайнера

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

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

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

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

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

Эти бравые первопроходцы день за днем несли в мир одну простую истину – если мы делаем сайт для людей, то почему бы не спросить этих самых людей что им действительно нужно?

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

Что же такое, черт побери, прототип?

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

Для тех же кто пока ни о чем не подозревает отвечу словами из википедии:

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

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


Стоп! Сценариев использования?

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

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

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

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

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

А как же бизнес, детка?

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

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

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

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

Конечно, часть процесса проектирования я опустил, не суть важна.

Что же будет дальше?

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

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

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

Должен ли дизайнер делать прототипы?

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

Должен ли дизайнер следовать прототипам?

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

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

Читают сейчас

Похожие публикации

  • 26 апреля 2020 в 15:46

Теперь можно научиться дизайну интерфейсов на Coursera

Наука на страже интерфейсов: как сделать кнопки в приложении по-настоящему удобными

Dribbble обзор №2 — наиболее интересные дизайны интерфейсов за последние 2 недели

Вакансии

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Комментарии 53

Да, все верно. Советую «выжать» статью, добавить картинки и заполнит ее примерами из жизни. Тогда читать будет реально интересно.

Считайте, что «дизайнер» в вашем понимании — это проектировщик в понимании автора этой статьи. А дизайнер в рамках этой статьи — «художник-оформитель» в вашем понимании. Тогда у вас всё сойдётся.

Это уже всё придирки к формулировкам, ИМХО.

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

А вообще можно статьи на сайте Лебедева например почитать, но это все как детектив: вроде и захватывающе, но специфику работы сыщика все равно не поймешь.

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

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

И тогда становится ясно, что поиск работает не так, как надо, блок с новостями нужно передвинуть, каталог переверстать, кнопку поменять, а текст переписать. Это нельзя предвидеть. Обычному человеку это не под силу (если только он не ученик мастера Йоды).

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

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

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


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

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

Это как в том анекдоте: в магазине «У ватман есть? — Он в отпуске. —Вы меня неправильно поняли — Я дизайнер. — Я и вижу что не Иванов»

Дайте определение значения слова designer на английском. Их там много.

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

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

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

А что делать дизайнеру, когда ему передают интерактивный прототип, с сеткой, готовой шрифтовой схемой, полностью описанным функционалом и интерактивом? Раскрашивать!

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

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

Это интересная идея, я поставил вам плюс. Но не самая лучшая из предложенных.

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

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

Мне понравилось вот это решение:

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

В большинстве случаев я бы заменил Проектировщика на Аналитика.

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

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

У нас работа идет в группе «проектировщик + визуализатор + ПМ». Они сидят за одним большим столом, работают все вместе и полностью синхронизированы. Поэтому указанной проблемы нет.

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

Интерфейсные (много кнопок) — сервисы, интранеты, магазины.
Контентные (много текстов) — корпоративные и продуктовые сайты.

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

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

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

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

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

Чёт я не пойму. То, что автор называет прототипом я воспринимаю как бета-версию.

Я прототипом называю wireframes. В moqups можно создать прототип сайта с переходами от одной странице к другой. Этот wireframe является как бы визуальной постановкой задачи как для программиста так и для дизайнера. Это самая важная часть проектирования. Разви ли это не прототип?

Прошу всех уважаемых дизайнеров, которые считают профессию проектировщика лишней, объяснить мне почему подавляющее большинство сайтов рунета созданы без учета основных пользовательских сценариев и у них уровень конверсии трафика в деньги катастрофически мал?
Суть в том, что сайты перестали быть просто источником информации, на подобии журнала/книги/газеты, где сценарий типичен и не важен — конверсия произошла в момент покупки журнала/книги/газеты. Сейчас многие сайты представляют собой сложные инструменты, со сложными информационными потоками, бизнес-задачами и методами их решений. И дизайнер, по сути своей профессии, уже далеко не всегда способен создать визуальное решение, которое позволит максимально возможно учесть все тонкости. Конечно же, исключения бывают — если дизайнер обладаем знаниями по физиологии, классической психологии, когнитивной психологии, антропологии, социологии, умеет построить бизнес-модель и визуализировать ее в рамках проектных ограничений. Специалист по проектированию отвечает на вопрос «как это должно работать, чтобы задача решалось максимально эффективно», он накладывает функциональные ограничения на творческий полет дизайнера и хороший дизайнер воспринимает это с благодарностью. Дайте мне любую, самую красиво нарисованную вами форму, и я найду, почти всегда, способ упростить процесс ее использования. И задам вам тогда вопрос — почему вы не сделали это перед тем, как нарисовать всю эту красоту? Это сэкономило бы время и силы вам и вашему пользователю.

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

Зачем надо делать прототип сайта

ЧАСТЬ 2

АНДРЕЙ БАТУРИН

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

Что дает наличие прототипа для заказчиков?

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

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

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

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

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

Правки, вносимые клиентом в прототип, стоят копейки по сравнению со стоимостью внесения правок в готовый дизайн или готовый сайт.

При наличии прототипа со средней степенью проработки можно:

проводить тестирование на удобство пользования сайтом (юзабилити);


проверить навигацию по сайту;

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

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

Для разработчиков

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

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

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

Семь раз отмерь, или зачем нужен прототип сайта

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

Отправим статью вам на почту:

Нажимая на кнопку, вы даете согласие на обработку своих персональных данных

Понравится и работать с нами.

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

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

Что такое прототип

Разработчик получает от заказчика ТЗ с задачами и параметрами сайта, на основании которого создает макет — схему будущего сайта. Этот макет — или прототип (англ. wireframes) — отображает интерфейс основных страниц (расположение текста, меню, кнопки и другие элементы) и моделирует навигацию по сайту.

Прототип бывает двух видов:

Статичный (в виде изображения)

Показывает структуру сайта, расположение элементов и блоков.

Интерактивный (в формате HTML)

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

Зачем нужен прототип

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

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

Что это дает заказчику

Визуализацию идеи на ранних этапах

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

Оптимальный результат

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

Сокращение сроков и затрат на разработку

Внести изменения в прототип гораздо проще, чем переделывать сайт после дизайна.

Что это дает разработчику

Удобный рабочий процесс

Упрощается согласование проекта с клиентом.

Качество продукта

Исключаются ошибки юзабилити до того, как будет готов дизайн сайта.

Оптимизацию сроков

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

Что такое прототипирование сайтов и зачем оно необходимо

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

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

Прототип — это схема страниц будущего сайта. Про это в нашем бложе писалось не раз и подробно, но давно — в бородатом 2012 году. С того времени многое произошло: Эппл напрягся, Крым наш, лайк в Фэйсбуке уже не очень-то и лайк. Жизнь меняется, а вместе с ней — прототипы.

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

С 2012 одно осталось неизменным — мы всё ещё работаем в программе Axure. Хороша, чертовка. Проста и понятна.

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

За что мы любим прототипы:

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

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

Бывают и заказчики-исключения, которые читают ТЗ с лупой и словарём технических терминов, а потом цитируют менеджерам. Таких огорчит столкновение с жестокой реальностью: редко какие готовые проекты хотя бы на 70% соответствуют техническому заданию. Юзабилити, бюджет, санкции — что угодно может стать причиной изменений в проекте.

Добавить комментарий