Статьи партнеров: Создание продуманного интерфейса сайта на примере доски объявлений

15.03.2017

Создание продуманного интерфейса сайта на примере доски объявлений

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

Что такое интерфейс?

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

Интерфейс может включать в себя:

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

Каким должен быть интерфейс?

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

  1. Простота – необходимо как можно проще реализовать визуальную составляющую, не перегружать страницу графикой и различными блоками. Дизайн не должен отвлекать пользователя от контента, поэтому не зря на сегодняшний день одним из трендов в области веб-дизайна является минимализм.
  2. Скорость – интерфейс не должен быть перегружен. Код должен быть максимально оптимизирован (все js, css – необходимо выносить во внешние файлы). Страницы должны отрисовываться и прогружаться моментально, чтобы это не вызывало дискомфорт при просмотре. Отличный инструмент для тестирования скорости предлагает компания Google - https://developers.google.com/speed/pagespeed/insights/?hl=ru
  3. Видимость – весь контент должен находиться в рабочей зоне сайта и располагаться, как можно выше к шапке, чтобы пользователь сразу видел необходимую ему информацию.
  4. Адаптивным – интерфейс должен корректно отображаться на любом экране и типе устройств, так как на мобильные устройства по некоторым тематикам приходится около 50% трафика.

С чего необходимо начинать?

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

Выбираем цветовую палитру

При выборе цветовой палитры стоит руководствоваться специальным цветовым кругом, где хорошо видна совместимость определенных цветов и как это примерно будет выглядеть на сайте, хороший онлайн сервис по подбору цветов https://colorscheme.ru/. Также готовую цветовую гамму можно выбрать на данном портале http://color.romanuke.com

Еще одним из хороших способов будет подбор палитры на основе поиска по картинкам в Google. Например, забиваем запрос «объявления» для доски объявлений Maxni.ru, чтобы понять, какая основная палитра и получаем следующую картину:

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

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

Рабочая зона

Рабочая зона – это видимая область, где располагаются все основные элементы сайта и его контент. Ширина рабочей зоны может быть самой разной. Для мобильной версии, это может быть от 300 px, а для ПК версии от 940 px. При выборе рабочей зоны, необходимо учитывать тематику разрабатываемого проекта, например, для корпоративного сайта ширина рабочей зоны может быть 1180, так как такой сайт может содержать большое количество графических элементов (фото примера работ, графики, таблицы и т.д.). Для новостных сайтов, порталов и досок объявлений лучше не использовать большую рабочую зону, так как такие ресурсы несут на одной странице большое количество текстовой информации, и пользователю проще фокусироваться, если она вся попадает в видимое поле человеческого глаза.

Как видно на примере Maxni.ru – ширина сетки рабочей зоны составляет 998 px и контент читается без труда.

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

Подбор шрифтов

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

Обычно выбирается несколько шрифтов:

  • Для заголовков (Крупный, жирный)
  • Для элементов, различных блоков (Может быть даже более крупный, чем для заголовков)
  • Для основного текста (Менее крупный, чем все остальные. В примере ниже показан Verdana, однако, в основном сейчас идет тренд на использование шрифта Open Sans)

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

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

Элементы, кнопки

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

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

Разберем пример страницы оплаты VIP объявления, как видно, что кнопка «отказаться от услуг» сделана оранжевого цвета, а кнопка «продолжить» – зеленого.

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

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

Оценка поведенческих факторов

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

Принцип А/Б тестирования заключается в том, что вы попеременно для одного и того же канала трафика показываете разные варианты страниц (например, страница с большой кнопкой «заказать звонок» и с маленькой), после накопления достаточного количества данных, вы производите анализ страницы по таким показателям:

  • Время просмотра
  • Активные клики
  • Глубина просмотра
  • Процент отказа
  • Точка выхода
  • И т.д.

И принимаете уже окончательное решение.

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

Эту страницу просмотрели: 52 уникальных посетителей