No Image

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

СОДЕРЖАНИЕ
0 просмотров
22 января 2020

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

Почему дизайнеру полезно создавать прототипы

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

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

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

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

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

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

С помощью составления прототипа дизайнер:

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

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

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

Рассмотрим процесс создания прототипа и основные инструменты для его разработки.

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

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

Этап 1. Аудит компании и анализ конкурентов

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

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

Этап 2. Разработка структуры сайта

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

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

Этап 3. Разработка прототипа

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

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

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

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

  1. Графические редакторы. Для прототипирования можно использовать те рабочие программы, в которых непосредственно создается дизайн сайта – Sketch, Figma, инструменты Adobe, Corel и прочее. Сюда же можно отнести стандартные редакторы Microsoft Office.
  2. Специальные программы и онлайн-ресурсы. Есть как платные, так и бесплатные приложения, созданные специально для разработки прототипов. Это может быть как лицензированное ПО, устанавливаемое на компьютер, так и онлайн-сервис, работающее через браузер. Примеры таких программ: Axure, Mockflow, Principle, Flinto и другие.

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

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

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

Например, так выглядит шапка интернет-магазина сладостей:

На прототипе все элементы изображаются схематично:

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

Контентная часть – это основная часть страницы. Здесь может располагаться:

  • слайдеры;
  • карточки товаров;
  • блок для отзывов;
  • баннеры;
  • статьи или промо-блоки для отдельных страниц;
  • текст и изображения;
  • блоки с призывом к действию и так далее.

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

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

Все элементы в прототипе можно разделить на три вида:

  1. Информационные. Данные элементы предоставляют какую-либо информацию о сайте и его владельце, это весь потребляемый пользователем контент. Текст, изображения и иллюстрации, которые помогают клиенту найти ответ на поставленный вопрос: как осуществляется доставка, какие товары есть в наличии, как оплатить покупку и прочее.
  2. Функциональные. Нужны для целевых действий пользователя – подписаться, купить, оформить заказ. Как правило, это кнопки и формы.
  3. Навигационные. Чтобы пользователь комфортно чувствовал себя на странице, понимал, в какой части сайта он находится и мог беспрепятственно перейти в нужный раздел, разрабатываются элементы навигации. Мы перечисляли основные приемы в этой статье.
Читайте также:  Тупит вк на компе

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

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

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

2 совета по созданию прототипов для веб-дизайнеров

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

1. При создании прототипа учитывайте мнение других исполнителей

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

2. Ориентируйтесь на конечную целевую аудиторию

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

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

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

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

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

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

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

Для чего мы создаем прототип?

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

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

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

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

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

К прототипам обычно применяют такие требования как:

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

Методы прототипирования сайтов

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

  1. Бумажное прототипирование;
  2. Прототипирование при помощи специальных программ (Axure Pro, WireframeSketcher, SketchFlow и т.д.);
  3. Прототипирование при помощи графических программ (Photoshop, Illustrator, InDesign и т.д.).

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

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

Из плюсов данного метода можно отметить:

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

Из минусов данного метода можно отметить:

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

Прототипирование при помощи специальных программ (Axure Pro)

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

Из плюсов данного метода можно отметить:

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

Из минусов данного метода можно отметить:

  • минусов не обнаружено, разве что изучение программы.

Прототипирование при помощи графических программ (Photoshop)

Следующий метод предлагаю рассмотреть на примере программы Adobe Photoshop. Выбор мой остановился на этой программе по причине своего личного опыта прототипирования сайтов. Лично я создаю прототипы в основном на бумаге и в фотошопе. Так как в фотошопе работаю постоянно, программу знаю довольно неплохо поэтому создания прототипа в ней у меня не вызывает проблем. Прототип можно создать довольно быстро, и понятно, эстетически привлекательно. Больше такой метод подойдет для создания простых и несложных прототипов. Для объемных и сложных проектов все же более приемлемо использовать специализированные программы, хотя это и не панацея.

Читайте также:  Сыктым перевод с татарского на русский

Из плюсов данного метода можно отметить:

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

Из минусов данного метода можно отметить:

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

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

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

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

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

Время чтения: 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-кнопка или форма.

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

Читайте также:  Смартфон нтс one dual sim

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

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

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

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

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

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

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

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

Общий стиль

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

Комментировать
0 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
Adblock detector