Многие предприниматели и начинающие маркетологи недооценивают важность интерфейса сайта или приложения. Это приводит к снижению конверсии и общей эффективности продвигаемых ресурсов.
В статье расскажем, как избежать подобных проблем, покажем на практике хорошие и плохие примеры. В конце вас ждет бонус — чек-лист для проверки вашего проекта.
Что такое интерфейс сайта
При работе за компьютером или смартфоном мы постоянно сталкиваемся с интерфейсами и даже не задумываемся об этом. Но если у вас стоит задача сделать качественный сайт или мобильное приложение, нужно понимать, о чем речь и чем отличается хороший интерфейс от плохого.
Интерфейс — это средство взаимодействия пользователя и веб-продукта (сайт, сервис, приложение) через браузер, монитор, смартфон, простыми словами это картинка, которую мы видим на экране монитора.
Часто интерфейс упоминают в значении «графический пользовательский интерфейс», то есть сюда относят все элементы, представленные визуально (кнопки, пиктограммы и т. д.). Но нас в первую очередь интересуют те элементы, с которыми будут взаимодействовать пользователи вашего сайта или приложения: кнопки, формы захвата, фильтры. Ведь если посетитель будет понимать, куда ему нажимать для достижения цели, вероятность добиться от него этого действия многократно возрастает.
![Интерфейс интернет-магазина](/upload/terminy/16/image27.jpg)
При разработке сейчас стоит смотреть в первую очередь на мобильную версию сайта. Даже в сегменте B2B объем мобильного трафика превышает 50 %, а в некоторых нишах (детские товары, красота) может достигать 95–100 %.
Поэтому многие сейчас начинают разработку с мобильной версии ресурса.
Основные элементы интерфейса
К интерфейсу относятся все элементы на мониторе пользователя. Давайте разберем подробнее те, с которыми будут напрямую взаимодействовать пользователи.
Кнопка
Позволяет выполнить определенное действие при нажатии. На примере, при нажатии кнопки «Купить» пользователь попадет в форму оформления заказа:
![Кнопка на сайте](/upload/terminy/16/image12.jpg)
Чек-бокс
Позволяет выбрать сразу несколько элементов. Используется в фильтрах сайтов для настройки вывода информации.
![Элемент «чек-бокс»](/upload/terminy/16/image9.jpg)
Выпадающий список (select)
Позволяет выбрать одну из опций, скрытых до момента наведения мышки или клика по элементу. В приведенном примере предлагается выбрать способ вывода товаров:
![Выпадающий список в свернутом положении](/upload/terminy/16/image19.jpg)
Теперь посмотрим, как будет выглядеть выпадающий список в развернутом состоянии. В этом примере можно выбрать определенный вариант, иногда так показываются ссылки меню.
![Выпадающий список на сайте](/upload/terminy/16/image38.jpg)
Аккордеон
Список со скрытыми элементами. При клике на нем показываются дополнительные опции. Обычно он используется для сокращения меню, когда демонстрируются только основные разделы сайта, а остальные можно посмотреть при необходимости.
![Так выглядит аккордеон в меню](/upload/terminy/16/image10.jpg)
В развернутом виде аккордеон показывает скрытые пункты меню. Пользователь может открыть одно скрытое подменю или сразу все.
![Развернутый аккордеон на сайте](/upload/terminy/16/image14.jpg)
Слайдер
Несколько изображений, сменяющих друг друга. Они обязательно имеют кнопки-стрелки для смены картинки. Часто применяется для показа разных объявлений на сайте. Картинки могут сменяться самостоятельно или после клика по слайдеру.
![Слайдер на маркетплейсе](/upload/terminy/16/image23.jpg)
Контент
Блок с текстом или визуальной информацией на сайте. Мы видим изображение из текста статьи и фрагмент самого текста:
![Блок с контентом на сайте](/upload/terminy/16/image37.jpg)
Popup
Всплывающее окошко на сайте. Обычно используется для приглашения подписаться на рассылку, заказать услугу или прочитать похожую статью.
![Пример popup, предлагающего похожую статью](/upload/terminy/16/image35.jpg)
Модальное окно
Разновидность popup, но в отличие от первого закрывает большую часть экрана. Чтобы продолжить работу с сайтом, пользователю нужно или закрыть это окно, или выполнить требуемые действия.
![Модальное окно на сайте оконной компании](/upload/terminy/16/image11.jpg)
Экран (блок)
Фрагмент контента, рассказывающий об одной вещи. Чаще всего делается с расчетом на один экран.
![Блок контента на сайте](/upload/terminy/16/image30.jpg)
Страница
Структурная единица контента на сайте. Обладает отдельным адресом, обычно посвящена одной теме или товару/услуге.
![Пример страницы на сайте](/upload/terminy/16/image26.jpg)
Хедер (Header)
Шапка сайта. Располагается в верхней части страницы. Здесь обычно размещают контактную информацию и навигационные элементы: меню, поисковую строку.
![Пример шапки сайта](/upload/terminy/16/image28.jpg)
Подвал (футер/footer)
Элемент располагается в самом низу страницы. Здесь можно разместить адрес компании, дополнительное меню, услуги и ссылки на важные страницы.
![Footer на сайте Kokoc.com: у нас он достаточно информативный](/upload/terminy/16/image7.jpg)
Превью
Уменьшенное изображение при нажатии на которое открывается полная картинка, блок контента или страница сайта.
![Превью статей на сайте](/upload/terminy/16/image6.jpg)
Тултип (tooltip)
Всплывающая подсказка. В зависимости от настроек может появляться при наведении или нажатии на элемент.
![Пример tooltip с объяснением технического параметра](/upload/terminy/16/image4.jpg)
Навигационные элементы
Все что помогает пользователю ориентироваться на сайте: меню, сайдбары с подсказками, кнопки для быстрого перехода на нужный фрагмент страницы.
![Пример навигационного меню](/upload/terminy/16/image16.jpg)
К навигационным элементам относятся и кнопки для возврата вверх страницы. Иногда эти кнопки привязываются не к верхней границе страницы, а например, к форме заказа.
![Кнопка для быстрого возвращения пользователя вверх страницы](/upload/terminy/16/image21.jpg)
Еще один вариант навигационного элемента — дополнительное меню в сайдбаре. Позволяет пользователю видеть все доступные для перехода страницы.
![Дополнительное меню в сайдбаре](/upload/terminy/16/image15.jpg)
Пагинация
Разновидность навигации, позволяющая переходить на страницы идущие или по порядку, или по определенным правилам. Например, пагинация может предлагать похожие статьи.
![Пример постраничной пагинации](/upload/terminy/16/image39.jpg)
Хлебные крошки
Разновидность пагинации. Фактически — это подборка статей по выбранному параметру. Размещаются чаще всего внизу страницы, для увеличения кликабельности рекомендуется делать с использованием превью.
![Хлебные крошки на сайте](/upload/terminy/16/image-100.jpg)
Поисковая строка
Позволяет производить поиск на сайте. Некоторые ресурсы используют поисковую выдачу «Яндекса» или Google.
![Поисковая строка на сайте](/upload/terminy/16/image1.jpg)
Медиаплеер
Элемент, позволяющий просматривать видео непосредственно на сайте.
![Медиаплеер, связанный с YouTube](/upload/terminy/16/image8.jpg)
Поле для ввода личных данных
Поле для ввода имени при регистрации или оставлении заявки:
![Поле для заполнения личных данных](/upload/terminy/16/image18.jpg)
Маска для номера телефона
Если пользователю предлагается ввести номер телефона, используется «маска»:
![Пример маски для номера телефона на сайте](/upload/terminy/16/image31.jpg)
Форма для ввода пароля
Обычно символы пароля сразу скрываются точками с целью безопасности данных.
![Ввод пароля на сайте](/upload/terminy/16/image3.jpg)
Форма для входа на сайте обычно включает в себя логин или электронную почту и поле для ввода пароля. Современные сайты предлагают возможность входа через социальные сети или аккаунты Google и «Яндекса».
![Форма для входа на сайте](/upload/terminy/16/image24.jpg)
Элемент, показывающий процесс загрузки
Позволяет пользователю понять, что сайт или приложение работают и нужно просто немного подождать.
![Загрузка на сайте](/upload/terminy/16/image5.jpg)
Теги
Позволяют определить, к какой категории или рубрике относится страница. Могут использоваться для настройки пагинации. Размещаются или перед основным контентом или после.
![Теги на сайте](/upload/terminy/16/image29.jpg)
Мы перечислили основные элементы интерфейса, которые нужно знать начинающему разработчику. На самом деле элементов намного больше, но изучать редко использующиеся инструменты особого смысла нет: при необходимости с ними можно ознакомиться в процессе разработки.
Как сделать качественный интерфейс
Фактически интерфейс — это часть комплекса UX/UI.
UX — пользовательский опыт, который получает пользователь при взаимодействии с сайтом или приложением. Сейчас есть тренд делать ресурсы таким образом, чтобы они формировали положительный пользовательский опыт.
UI — пользовательский интерфейс. Подразумевает создание интерфейсов с учетом UX. Технически сюда относятся все элементы, с которыми взаимодействует пользователь: кнопки, контент, плееры и т. д.
Говоря о качественном интерфейсе, мы подразумеваем ресурс, имеющий элементы управления, созданные с учетом пользовательского опыта. К сожалению, не всегда получается сделать интерфейс, идеально подходящий для пользователей. Зачастую попытка заканчивается так, как на картинке ниже:
![Так работает интерфейс, созданный без учета пользовательского опыта](/upload/terminy/16/image34.jpg)
На практике необходимо делать интерфейсы не только красивыми, но и удобными для пользователей. От этого во многом зависит конверсия на сайте или то, насколько долго человек будет пользоваться вашим приложением.
В некоторых случаях самый простой элемент может значительно снизить конверсию. На скриншоте ниже показана шапка одного лендинга:
![Пример ошибки в размещении элементов интерфейса](/upload/terminy/16/image40.jpg)
Изначально он почему-то не давал регистраций в клуб. Причина была найдена после просмотра «Вебвизора». Обратите внимание на кнопку «Вход здесь»: люди видели ее при попадании на сайт и кликали по ней. Их сразу перебрасывало на форму оплаты, и они не понимали, что к чему и уходили с сайта.
После того как эту кнопку удалили, посетители стали сначала читать информацию, и только после этого уже осознанно переходили к форме оплаты.
Бывают и более простые ошибки. К примеру, может не работать кнопка заказа или она ведет на тестовую форму, и заявки не уходят.
Вообще все элементы интерфейса необходимо тестировать — это обязательное условие. Разработчик в процессе создания интерфейса прекрасно понимает, какой элемент и для чего нужен. Но вот пользователю это может быть не совсем понятно.
Чтобы избежать таких недочетов, имеет смысл провести тестирование интерфейса. В идеале оно проводится в два этапа:
- Проверка тестировщиком. Отдаем интерфейс человеку, который профессионально проверяет работу всех элементов интерфейса. Устраняем все выявленные недочеты.
- Beta-тест. Запускаем ограниченный трафик на сайт или приложение и смотрим, как реальные пользователи взаимодействуют с элементами ресурса.
На практике не всегда есть возможность привлечь тестировщиков, хотя бы по причине ограниченного бюджета. В таком случае необходимо хотя бы показать сайт нескольким знакомым и попросить проверить, как все работает.
Примеры крутых интерфейсов
Чтобы понимать, как отличить хороший интерфейс, давайте посмотрим на несколько вариантов.
Приложение «ВКонтакте»
Оно очень хорошо структурировано, все кнопки находятся в удобных местах. Без проблем можно найти все необходимое и перейти в нужный раздел в пару кликов.
![Приложение в «ВКонтакте»](/upload/terminy/16/image2.jpg)
Сайт магазина «Связной»
На главной странице разработчики умудрились разместить большое число информации и навигационных элементов. Сделано все максимально удобно.
![Главная магазина «Связной»](/upload/terminy/16/image25.jpg)
Если перейти в каталог «Связного», можно увидеть шикарно структурированное меню. Прямо из меню можно найти почти все необходимое.
![Меню каталога «Связной»](/upload/terminy/16/image32.jpg)
Качество интерфейса зависит не только от размещения меню и других элементов. На общее впечатление может оказывать влияние дизайн сайта или приложения.
Онлайн-кинотеатр «Кинопоиск»
Здесь очень хорошо подобраны шрифты и цвета. Пользователям приятно находиться на странице, а это улучшает UX.
![Пример удачного визуального решения: «Кинопоиск»](/upload/terminy/16/image13.jpg)
На самом деле хороших интерфейсов намного больше. Разработчикам стоит нарабатывать насмотренность, чтобы запоминать наиболее удачные решения и применять их на практике.
Примеры неудачных интерфейсов
Помимо хороших и удобных сайтов существуют и не самые удачные примеры. Рассмотрим несколько таких примеров.
Маркетплейс «Озон»
Разработчики заявляли, что проводили большое число тестов, добиваясь максимальной конверсии.
Возможно это действительно так, но если перейти в «Расширенные фильтры», можно увидеть только информацию, которая стандартна для этой группы товаров. В то же время многих важных параметров просто нет — пользователя это может запутать.
![Неудачный пример фильтров в маркетплейсе](/upload/terminy/16/image33.jpg)
Шахматный сайт Chess24
Вроде бы дизайн выполнен в минималистичном стиле. Но многие нужные функции не доступны с главного экрана. Также сама по себе навигация на сайте запутана.
![Пример с неудачной навигацией](/upload/terminy/16/image36.jpg)
Но бывает, что сайт имеет неудачный по всем статьям инструментарий взаимодействия с пользователями.
Оптовая компания «Форс»
Здесь не очень удачный дизайн, но это еще не все. Меню запутанное, что делает использование ресурса неудобным.
В целом ощущение, что сайт делал школьник из середины нулевых. Ссылки не читаются, то есть непонятно, куда и зачем нажимать. Контактные данные не кликабельны, ссылки на соцсети ведут на заблокированные страницы.
![Пример коммерческого сайта с неудачным интерфейсом](/upload/terminy/16/image17.jpg)
В основном проблемные интерфейсы имеют сложности с фильтрами и навигацией. В некоторых случаях встречаются недочеты в мобильной версии сайта.
Заключение. Чек-лист хорошего интерфейса
- Оценка основных элементов. Оцениваем, где находятся все элементы, с которыми пользователь будет взаимодействовать. Они должны располагаться удобно, а также не случайно нажиматься.
- Понимание того, что надо сделать. Если нужно кликнуть на кнопку, посетитель должен это понимать. Если требуется скроллить страницу, нужны соответствующие подсказки.
- Проверка работы форм и кнопок. Пользователя должно перебрасывать в нужное место, и там тоже все должно работать.
- Просмотр ресурса в разных разрешениях. Сначала на мобильном устройстве, потом на планшете и на десктопе: везде все должно работать.
- Оценка визуального отображения страниц. Не должно быть «вырвиглазных» цветов и шрифтов.
- Демонстрация сайта или приложения знакомым. Попросите их что-то сделать на странице: это позволит понять, действительно ли интерфейс удобен для пользователей.
Все перечисленное позволит вам сделать удобный инструментарий взаимодействия системы с пользователями. Это даст дополнительные преимущества при продвижении вашего бизнеса.