Простота и понятность
Для того, чтобы потенциальному клиенту было проще ознакомиться с вашим материалом или товаром, важное значение имеет юзабилити сайта. Дословно данный термин можно перевести на русский язык как "используемость". Говоря простым языком, это организация сайта и находящихся на нем данных, расположенная максимально комфортно и понятно. При оценке юзабилити, учитываются такие факторы, как:- Интуитивная понятность. Пользователь привыкает к тому, что главную страницу нужно скроллить колесом мышки вниз, кнопка входа и регистрации находится где-то справа, контактные данные располагаются в верхней части страницы и в подвале. Все это создает тренды на дизайн и интерфейс, в которые необходимо вписываться всем, кто хочет сделать понятный сайт, так как посетители со временем привыкают к такой обстановке.
- Структура. Данные должны четко распределяться. В этом помогают меню и дополнительные разделы. Пункты меню должны быть грамотно обозначаться и читаться без проблем.
- Читаемость и типографика. Используемые шрифты применяются на контрастном фоне, их видно даже если взгляд отведен в другую часть экрана. Применяются интервалы между строк, абзацы и списки.
- Яркие ключевые элементы. Это не значит, что кнопки оформления заказа и заявки должны быть окрашены в кислотные оттенки. Но важно, чтобы их было видно на общем фоне.
У вас есть несколько секунд
Статистика, получаемая от Яндекс Метрики покажет вам, что пользователю достаточно двух-трех секунд, чтобы понять, обнаружит ли он на данном сайте то, что искал или нет. Ваша задача - заставить его прочитать за эти три секунд тот текст, который привлечет его.Интернет-ресурс это не книга, которую открывают для целенаправленного чтения. Здесь большее значение имеют изображения и офферы, небольшие предложения, рассказывающие и выделяющие вас.Первым шагом к тому, чтобы зацепить клиента становится именно порядок. Попадая на грамотно структурированный ресурс, человек чувствует это и уже остается статистически дольше, нежели на оригинальной, но не понятно странице. Времена, когда человека можно было завлечь яркими flash-анимациями прошли, сегодня они оказывают негативный эффект, а основой становится именно понятность.
Главная страница
В первую очередь, главная страница должна содержать всю информацию, но выражать ее лаконично, в двух-трех предложениях. Хорошим вариантом остается построение текста по принципу "Кто мы, что мы делаем, чем мы вам поможем". Если речь идет о лендинге, одностраничном портале, то хорошо разместить обложку. Это изображение, которое становится фоном для вашего оффера. Важно, чтобы изображение выражало вашу работу.Простой тест: уберите текст и оставьте только картинки. Сможете ли вы догадаться, какую пользу людям оказывает сайт?
Текст, размещенный поверх изображения не должен терять в читаемости. Логично наложить на картинку тень или мягкий нейтральный фильтр. Главная страница должна содержать все контакты и меню. При этом меню должно бросаться в глаза. Не стоит размещать рядом с ним баннеры или плотный текстовый материал.
Структура
Посетитель должен суметь без лишних подсказок пройтись по его содержанию. Здесь на помощь придет меню, разделы сайта, грамотно составленные заголовки, раскрывающие суть текста. Используете внутреннюю перелинковку, то есть, оставляйте ссылки внутри одной статьи на другую. Также это повысит трафик по сайту, что будет положительно влиять на SEO ресурса. Если ваш портал наполнен страницами, то необходимо устроить поисковое окно. Желательно, чтобы это был свой встроенный поиск. Также добавьте туда исправление ошибок, вроде "Возможно вы искали", как в Google. Если у вас интернет магазин и ваше меню находится слева, постарайтесь чтобы его было видно целиком без скролла. Для этого можно сделать выпадающие разделы, автоматические или открывающиеся по клику. В них уже и создавайте более точное дробление товаров.Удобство и конверсия
Удобство - ключевой фактор на продающих сайтах, от которого зависит итоговая конверсия. Если клиент решил обратиться к вам, но не нашел кнопки заказа или телефонный номер, то у вас проблемы.Поле с контактами размещают в двух местах, в шапке и подвале. Таким образом, прочитав ваше предложение, клиент сразу же может обратиться, либо вернуться в верх страницы, еще раз увидеть оффер и решиться на звонок. В информационных порталах таким же способом стоит размещать форму на подписку.Кнопка заявки должна размещать в центре, на обложке лендинга, либо рядом с предложением. При этом она контрастирует с общим фоновым цветом. Более точное месторасположение вы можете выяснить, если посмотрите тепловую карту кликов и обнаружите, где ее ищут.
Разные сайты
Очевидно, что уровень подход к юзабилити может отличаться, в зависимости от сайта. К примеру, официальный сайт города Санкт - Петербург должен соответствовать статусу городского, поэтому яркие кнопки и предложение здесь неуместны. Его задачи сугубо информативные. В то время, как проект для небольшого стартапа должен сразу же заманивать потенциального клиента, демонстрировать достижения в работе и намекать на сотрудничество. Проектирование веб - страниц здесь происходит с учетом на покупку и малое время посещения. Пример: сайт компании Юзабилити Лаб — usabilitylab.ru. Поэтому проводить некий общий пример недопустимо. Сегодня навыки разработки преподаются в университетах, но тренды сменяются так быстро, что даже курсовая, написанная полгода назад может быть неактуальна.Анализ проектов
Проверка и анализ юзабилити сайтов может выполнять в двух вариантах:- Полноценная фокус-группа. Здесь привлекаются независимые тестировщики, которые будут пытаться получить на сайте информацию по сценарию, используя правила. Их ответы напрямую передаются разработчикам. Такой подход позволяет оценить степень пригодности ресурса, разработать советы и рекомендации по его улучшению. Минус: это обходится довольно дорого и долго.
- Онлайн - проверка. Есть масса сайтов, на которых анализ вашего проекта могут провести другие люди, при помощи скриншота или предоставления полного адреса проекта. Такое тестирование может быть как платным, так и бесплатно. Некоторые ресурсы попросят вас поучаствовать в оценке других проектов. Расценивайте это как обучение, так как поможет вам научиться самостоятельно оценивать юзабилити.
Фишки юзабилити
На данную тему проводится куча исследований. Приведем несколько фишек, которые вы можете использовать. Первая из них - на сайте стоит разместить лица. Люди интуитивно смотря в глаза друг другу, даже на случайных фото в Сети. Но из-за этого может страдать внимание на текст. Постарайтесь подбирать и размещать фотографии, где взгляд модели будет обращен в сторону текста. Тогда и посетитель обратит внимание.Общее качество дизайна повышает доверие. Заходя на ресурс, человек оценивает его. Если вы что-то продаете, но используете шаблон низкого качества, то доверие пользователя снизится. Простой, дешевый дизайн но оригинальный будет куда лучше. Это намекнет человеку, что вы тратите деньги на репутацию.Если вам надо выделить ссылки, то используйте голубой цвет или мягкие оттенки синего. Это приятный контрастный цвет, который будет выделяться в тексте, но сохранять читаемость. Особую любовь к синему вызвал Гугл. Люди привыкают кликать на его выдачу и интуитивно принимают такие ссылки как за то, куда стоит переходить. Лучший фон - белый. Если вам надо, чтобы текст действительно прочитали, то используйте белый фон. Это идеальный контраст, к которому мы все привыкли с детства, благодаря книгам и тетрадям.
Чек-лист понятного сайта
Пройдитесь по данному чек листу в процессе подготовки вашего проекта:- Главная страница - основа. Здесь вы должны компактно разместить информацию о продукте и пользе, приносимой им.
- Контакты должны размещаться как в верхней части, так и в подвале.
- Обложка для одностраничников выражает ваши задачи и предназначение. Проведите тест изображений без текста.
- Не старайтесь вместить все на одно поле. Люди умеют пользоваться прокруткой.
- Следите за текстом: интервалы между строк, абзацы, выноски, цитаты, списки.
- Логотип в верхней левой части, по клику на него загружается главная страница.
- Размещайте кнопки заказа в поле видения рядом с мотивирующим текстом. Так вы спровоцируете покупку.
- Навигация по меню сохраняет внешний вид, интуитивную понятность, порядок, в зависимости от популярных товаров. Сначала популярные разделы, затем не популярные.
- Используйте голубой цвет, чтобы выделить ссылки. Подбирайте картинки с лицами, но направляйте их в сторону текста.
- Белый фон - самый лучший. Если предпочитаете другое, то сохраняйте контраст, но только мягкими тонами. Красный на синем читается очень плохо.
