Рассмотрим важные критерии построения сайта с точки зрения удобного юзабилити. Для наглядности приведем примеры удобных и не очень удобных сайтов.
Тонкости дизайна Визуальная составляющая — важный фактор влияющий на конверсию сайта. Важно чтобы пользователя ничего не отвлекало от восприятия информации, поэтому категорически запрещено:
перегружать визуальную часть множеством деталей, цветов и динамичных элементов; обилие контраста, разноплановая графика; оставлять большое количество ссылок, которые только сбивают с толку; плохо читабельный текст. Хорошим примером, того «как нельзя делать», является представленный сайт:
Разумеется, дизайн сайта зависит от его специфики. Возложена важная задача: дать понять пользователю, куда он попал и в тоже время стимулировать к действию. Хорошим примером удачного дизайна является сайт сайт магазина Tessemae’s, который продает приправы:
представлены фото продукции и варианты сервировки; использованы яркие цвета, которые ассоциируются с чем-то острым; посетителю сразу становится понятно, что за продукт ему предлагают приобрести; сайт не перегружен лишней визуальной информацией; оформление «аппетитное» и влечет совершить покупку.
Логотип Логотип — важнейший элемент имиджа сайта. Более того, он помогает идентифицировать бренд перед посетителем. Хитрости расположения логотипа:
логотип лучше размещать в верхнем левом углу, ведь большинство людей читает слева направо, и это будет первое, что они увидят; под логотипом уместно разместить пояснение: чем занимается сайт; важно выбрать шрифт для логотипа так, чтобы он соотносился с тематикой сайта. Пример удачного размещения логотипа:
Посетитель сайта, обращая внимание на логотип, сразу понимает специфику ресурса.
Какие могут быть ошибки при оформлении логотипа? Самые банальные:
слишком большой логотип; нарушение пропорций логотипа; отсутствие прозрачного фона: белый прямоугольник вокруг логотипа сильно портит впечатление, тусклое изображение логотипа; ужасная графика логотипа: слишком много цветов, плохое качество и т.п. Также огромной ошибкой является отсутствие логотипа:
Навигация Возвращаясь к вопросу удобства стоит отметить важность комфортного и понятного перехода пользователя с одной страницы на другую. Более того, продуманная навигация важна для поисковиков: какую роль играет каждая страница.
Основные характеристики продуманной навигации:
продуманное визуальное оформление: элементы навигации( меню, кнопки призыва к действию, иконки) должны соответствовать общему дизайну ресурса, при быть заметными; ясность: необходимо, чтобы все составляющие интерфейса были понятны на любом пользовательском уровне; доступность на всех страницах сайта кнопок переходов. К примеру, на сайте Zara в США навигацию легко понять и изучить: все новости и акции изображены в фоновом режиме, а более отвлекающий контент расположен ниже и не мешает посетителю разобраться с функционалом.
Хорошая навигация обязательно имеет:
меню: понятное и удобное, имеющее все необходимые рубрики; кнопка вверх, «Домой» или «Главная»; раздел «О нас»; иконки ( вместо текстовых ссылок); ссылки на страницы, которые встроены в текст; фуллер: область в самом конце веб-страницы с размещенными на ней ссылками на разделы, указанием контактных данных, ссылками на правила пользования сайта; элементы навигации, которые представляют собой путь от главной страницы сайта до необходимого раздела и обратно — «хлебные крошки»; призыв к действию: нажать на кнопку, зарегистрироваться, читать далее и т.п.; в интернет-магазинах обязательными элементами навигации также являются корзина и кнопка совершения покупки; Категорически запрещено перегружать страницы информацией, как это сделано на этом сайте, который функционирует с 2019 года( на минуточку):
Связь с пользователем Пользователь сайта должен быть в курсе любых изменений:
прошла ли успешно регистрация; принят ли его заказ; перезвонят ли ему и в течении какого времени; несуществующая страница и прочее. Главная ошибка сайтов в этой плоскости отсутствие пояснений для пользователя. К примеру, та же несуществующая страница 404 может не иметь информации нужной информации куда вернуться пользователю:
Важно оставить для пользователя ссылки на страницы куда он может перейти из страницы 404. Иначе посетитель быстро покинет сайт.
Ненавязчивое предложение помощи Расположение формы помощи — хороший способ поддержания связи с посетителем сайта. Однако, огромная ошибка навязчивые всплывающие окна, без возможности закрыть форму.
Лучше разместить форму в свернутом состоянии, но при этом заметной — к примеру, в виде яркой боковой вкладки и не перекрывающую контент на странице:
Форма регистрации Чем лаконичнее — тем лучше. Большое количество полей для заполнения подталкивает желание их заполнять. При регистрации необходимо запрашивать минимум информации. Несколько приемов:
отказ от «обязательных» полей, вместо них можно ввести «дополнительные», то есть оставить выбор за посетителем; отказ от подтверждения почты или номера; чтобы не заставлять пользователя подтверждать пароль, необходимо предусмотреть возможность увидеть его — это увеличит количество незавершенных регистраций; наличие инструкции: объяснение для посетителя, что необходимо вводить в данной форме; возможность авторизации через соц. сети: удобный путь регистрации, который можно совершить в несколько нажатий. Как например, это делает сайт Vimeo:
Кстати, огромным козырем этого сайта также является наличие преимуществ регистрации. Так пользователь видит, чем регистрация на этом сайте выгодная для него.
Грубыми ошибками в формах сайтов являются:
наличие большого количества полей; подтверждение почты и пароля; необходимость введения номера телефона.
Строка поиска Обязательный атрибут любого сайта. Важными критериями строки поиска являются:
длина строки поиска: 27 символов( в 90% случаев сюда поместится даже длинный запрос); размещение строки поиска: оптимальное размещение( и самое удачное) в шапке сайта:
Для сравнения приведем размещение формы поиска внизу страницы: не самый удобный вариант, учитывая, что пользователь автоматически ищет эту опцию в верхней части сайта.
Подача информации От грамотной подачи информации зависит захочет ли посетитель с ней ознакамливаться. Сюда относиться как текст, так и размещение изображений. Важные правила подачи информации:
текст, разбитый на абзацы; наличие заголовков в статьях; размер шрифта; качественные иллюстрации на сайте; цвет фона и шрифта; построение различных таблиц и диаграмм для упрощения восприятия информации на веб-сайте. Антипример подачи информации на сайте:
Здесь налицо использование неудачных цветов и неподходящие шрифты, очень скудная графика.
А вот пример удачной подачи информации на сайте. Зарубежный блог о технологиях, запущенный в 2013 году Verizon. Глаз приятно радуется:
Заключение Юзабилити сайта — это простота в использовании, удобство и полезность для посетителей. По нему оценивается качество использования ресурса, его привлекательность и пригодность к взаимодействию с пользователями. Важными составляющими юзабилити сайта являются дизайн и наличие логотипа, удобная навигация, поддержка связи с посетителем и предоставление удобных форм поиска, регистрации и т.д. При выборе тех же тем для сайта важно просматривать эти критерии и сосредоточить внимание на подборе и размещении качественного контента.