Интерфейс сайта: понятие, элементы, этапы разработки

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

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

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

Понятие интерфейса сайта

Существуют аппаратные интерфейсы, обеспечивающие контакт устройств. Так, благодаря USB-разъему кабель удается подключить к компьютеру. А пользовательские интерфейсы упрощают взаимодействие человека с устройством.

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

Интерфейс веб-сайта выполняет такие функции:

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

• осуществляет управление приложениями;

• обеспечивает обмен данными с устройствами;

• взаимодействует с операционной системой.

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

UI-дизайн интерфейса

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

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

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

Разработка интерфейса для взаимодействия людей с машиной направлена, в первую очередь, на создание UI, благодаря которому можно добиваться желаемого эффекта интуитивно, эффективно и с удовольствием. Последнюю характеристику называют еще «user friendly» (дружественный пользователю). В идеале от пользователя требуются минимальные усилия для ввода, чтобы получить желаемый вывод. Кроме того, устройство сокращает долю выводимых лишних данных.

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

Далее речь пойдет о тех, которые имеют отношение к компьютерам:

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

• Веб-интерфейс, или WUI, представляет собой совокупность средств, позволяющих взаимодействовать с сайтом или приложением через браузер. Новые реализации основаны на Java, JavaScript, AJAX, Adobe Flex, Microsoft.NET и подобных технологиях. Таким образом достигается контроль в режиме реального времени, поэтому нет необходимости в обновлениях, что и лежит в основе HTML-браузеров.

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

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

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

Речь идет о настоящем ремесле, так как результатом проектирования интерфейса сайта является красивая, конкретная система, создаваемая при помощи навыков, знаний, методов и опыта. Дизайнеры пользовательского интерфейса чаще всего применяют «Photoshop», «Illustrator», «Fireworks», «Cinema 4D», «ZBrush», не забывая также о привычной ручке и бумаге. Но не получится добиться успеха в сфере разработки интерфейсов, не зная о UX.

UX-дизайн интерфейса

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

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

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

Прототипы могут быть:

• горизонтальные – здесь предусмотрен значительный список опций при небольшой функциональности;

• вертикальные – глубокая работоспособность сочетается с ограниченным перечнем действий;

• Т-прототипы – большая часть конструкции делается на поверхностном уровне, однако ряд функций реализуется более серьезно;

• местные – применяются, если нужно создать альтернативный дизайн для известной модели взаимодействия.

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

Достаточно часто сложно отделить UI от UX, так как эти явления тесно связаны друг с другом. А интерфейс сайта нередко становится составляющей опыта взаимодействия. Однако нужно понимать, что UX может существовать и в отсутствие пользовательского интерфейса.

7 главных требований к интерфейсу сайта

1. Интуитивность

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

2. Отсутствие противоречий

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

3. Гибкость

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




4. Отсутствие избыточности

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

5. Прямой доступ к системе помощи

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

6. Логичность

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

7. Эргономичность

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

Основные элементы интерфейса сайта

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

Главная страница

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

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

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

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

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

Меню, навигация

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

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

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

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

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

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

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

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

• Фильтры и сортировка. Они упрощают поиск нужного продукта.

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

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

О компании

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

Ключевые компоненты:

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

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

Читайте также!

«Преимущества продукта: найти или сформировать с нуля» Подробнее

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

• Факты с цифрами легче цепляют и воспринимаются. Лучше представить 3–5 фактов, дополненных краткими пояснениями. Помните, что они должны быть понятными и ценными для посетителей, а не для компании.

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

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

Товары и услуги

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

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




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

• Доставка – опишите, куда привозите, сколько стоит услуга и как покупатель может ее получить.

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

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

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

Отзывы об услугах

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

Форма для сбора данных

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

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

Вопросы, ответы

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

Блог, новостной раздел

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

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

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

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

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

Контактная информация

Этот блок интерфейса сайта позволяет связаться с компанией и содержит в себе адрес, e-mail, телефон, карту проезда в офис и даже форму обратной связи.

Футер

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

Подготовка к созданию интерфейса

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

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

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

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

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

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

Когда оценка интерфейсов сайтов соперников завершена, можно переходить к работе над своим.

9 этапов разработки интерфейса сайта

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

1. Сбор данных

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

2. Список задач

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

– открыть портал;

– пройти авторизацию;

– зайти в профиль;

– кликнуть по аватарке;

– выбрать файл;

– подтвердить/изменить кадрирование изображения;

– сохранить.




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

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

3. Структура нового интерфейса сайта

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

4. Создание прототипа

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

Читайте также!

«Отзывы клиентов: где их взять и что с ними делать» Подробнее

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

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




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

5. Выбор стилистики

Рекомендуемые статьи по данной теме:

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

• Обратный звонок для сайта: волшебная кнопка, увеличивающая конверсию

• Кому нужен уникальный дизайн сайта и как его разработать

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

6. Дизайн-концепция ресурса

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

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

7. Оформление экранов

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

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

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

8. Анимация

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

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




9. Сбор материалов для разработчиков

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

3 варианта юзабилити-тестирования

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

1. Ручной

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

2. Автоматизированный

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

3. C участием фокус-групп

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




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

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

11 полезных советов по созданию хорошего интерфейса сайта

1. Попробуйте сделать макет с одной колонкой

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

2. Объедините схожие между собой функции

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

3. Дублируйте посыл

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




4. Выбирайте контрастные стили

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

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

5. Предлагайте отменить вместо того, чтобы просить подтвердить

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

6. Сократите количество полей для ввода

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

7. Не делайте отдельную страницу для полей ввода

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

8. Не скрывайте возможности

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

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




9. Дайте понять, что страница продолжается

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

10. Удерживайте внимание, откажитесь от избыточных ссылок

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

11. Отображайте состояние

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

Скачайте полезный документ:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

7 основных трендов в дизайне интерфейсов

Сдержанная анимация

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

Изображения во весь экран

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

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

Беспринципный отказ от правил

Данный тренд в оформлении интерфейсов сайтов вобрал в себя эстетику стрит-арта и анти-дизайнерского брутализма.

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

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

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

Вариативные шрифты

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

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

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

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

Крафт

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

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

Гибкие дизайн-системы

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

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

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

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Последние статьи этого автора:

• Адаптивная верстка сайта: гайд для начинающих
• Анкор ссылки: виды, правила составления, влияние на продвижение
• Белая раскрутка сайта без перехода на темную сторону

Забрать гарантированный подарок

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

Скачать 3,2 MB