15.03.2017
В данной статье раскроем основные принципы построения продуманного интерфейса, за основу возьмем пример доски объявлений Maxni.ru
Интерфейс сайта – это визуализация всех структурных элементов, деталей и функциональных блоков, которые позволяют взаимодействовать пользователю с контентом и интерактивом веб-сайта.
Интерфейс может включать в себя:
Есть определенные аксиомы, которые необходимо учитывать при разработке дизайна для любого сайта:
Перед постановкой задачи дизайнеру на разработку интерфейса вашего проекта, необходимо составить техническое задание (ТЗ), которое будет отображать четко последовательную структуру и содержание каждой веб-страницы. Без грамотно подготовленного ТЗ, результат может оказаться совсем не тот, который вы ожидали. Основная проблема большинства современных сайтов, которые делаются на быструю руку – это отсутствие опыта, знаний и умений у проект-менеджера в области составлений ТЗ, а также пониманий основных веб-стандартов и трендов.
При выборе цветовой палитры стоит руководствоваться специальным цветовым кругом, где хорошо видна совместимость определенных цветов и как это примерно будет выглядеть на сайте, хороший онлайн сервис по подбору цветов https://colorscheme.ru/. Также готовую цветовую гамму можно выбрать на данном портале http://color.romanuke.com
Еще одним из хороших способов будет подбор палитры на основе поиска по картинкам в Google. Например, забиваем запрос «объявления» для доски объявлений Maxni.ru, чтобы понять, какая основная палитра и получаем следующую картину:
Видим, что основные цвета – это различные оттенки красного, зеленого и немного синего, а основным цветом является белый и светло-желтый.
Используя вышеперечисленные инструменты и полученные данные из поиска, можно составить отличную палитру, которая соответствует тематике вашего проекта.
Рабочая зона – это видимая область, где располагаются все основные элементы сайта и его контент. Ширина рабочей зоны может быть самой разной. Для мобильной версии, это может быть от 300 px, а для ПК версии от 940 px. При выборе рабочей зоны, необходимо учитывать тематику разрабатываемого проекта, например, для корпоративного сайта ширина рабочей зоны может быть 1180, так как такой сайт может содержать большое количество графических элементов (фото примера работ, графики, таблицы и т.д.). Для новостных сайтов, порталов и досок объявлений лучше не использовать большую рабочую зону, так как такие ресурсы несут на одной странице большое количество текстовой информации, и пользователю проще фокусироваться, если она вся попадает в видимое поле человеческого глаза.
Как видно на примере Maxni.ru – ширина сетки рабочей зоны составляет 998 px и контент читается без труда.
Основной упор в интерфейсе Maxni сделан на каталог и объявления, если сделать слишком широкую зону, то заголовки и краткие анонсы с фотографиями публикаций будут тяжело восприниматься посетителем и может вызывать некоторую рассеянность, что в конечном итоге может привести к отказу и негативным поведенческим факторам.
Один из самых важных этапов, правильно подобранный шрифт облегчает визуальное восприятие текстовой части, делает более простым работу с интерфейсом.
Обычно выбирается несколько шрифтов:
Всегда проблема использование того или иного шрифта, особенно когда речь идет о кириллице, к сожалению все шрифты разрабатываются с упором на латиницу, поэтому при подборе необходимо учитывать, что кириллический шрифт будет хуже смотреться, чем на латинице.
Также очень важна правильная сочетаемость разных шрифтов с друг другом, рекомендуем собирать все стили шрифтом на одном макете, где наглядно можно убедиться в правильности выбора.
Если ваш проект нацелен на электронную коммерцию, то очень важно правильно продумать цветовую гамму кнопок, их размер и видимость. Советуем изучить психологию цветов, какие оттенки человек принимает или отвергает на подсознании, как этим лучше манипулировать, чтобы заставить сделать пользователя, то что вам необходимо (заказ в корзину, покупка товара, оформление виртуальной услуги и т.д.).
Размер и видимость – кнопки должны быть большие и на видном месте, это не означает, что они должны отвлекать на себя все внимание в интерфейсе, однако, кнопки должны удобно позиционироваться на экране пользователя, чтобы он мог без труда их найти и нажать.
Разберем пример страницы оплаты VIP объявления, как видно, что кнопка «отказаться от услуг» сделана оранжевого цвета, а кнопка «продолжить» – зеленого.
Это сделано не просто так, дело в том, что человек на подсознании опасается красного и оранжевого цвета (например, красный сигнал светофора – запрещающий цвет) и больше склонен к выбору зеленого, т.к. с психологической точки зрения для многих это означает – стабильность, прогресс, новые возможности и т.д., опять же не зря во всех странах мира зеленый свет светофора – это разрешающий сигнал для продолжения движения.
Вы можете сами постоянно экспериментировать, используя различные инструменты аналитики для отслеживания конверсии и в конце концов понять, что нужно именно вашему интерфейсу.
После создания интерфейса и запуска проекта, необходимо постоянно проводить А/Б тестирование, отслеживать поведенческие факторы.
Принцип А/Б тестирования заключается в том, что вы попеременно для одного и того же канала трафика показываете разные варианты страниц (например, страница с большой кнопкой «заказать звонок» и с маленькой), после накопления достаточного количества данных, вы производите анализ страницы по таким показателям:
И принимаете уже окончательное решение.
Также постоянно необходимо находить страницы, где процент отказов является выше среднего относительно всего сайта. Их также можно разбирать по показателям, которые используются при А\Б тестировании, рекомендуем еще использовать инструмент Яндекс.Метрики – Вебвизор, который позволяет визуально продемонстрировать, что делал пользователь на странице (клики, скроллинг, ввод текста и т.д.).