Как улучшить UX сайта — 12 советов по юзабилити
Клиенты довольно часто спрашивают: «Зачем вы, SEO-специалист, даете рекомендации по дизайну и юзабилити?». Все просто. Вне зависимости от уровня оптимизации пользователь сразу покинет сайт, если он неудобен. Подтверждающее правило исключение — тематики со слабой конкуренцией. Верно и обратное: проработка вопросов юзабилити может улучшить поведенческие факторы и, как результат, — видимость сайта. За несколько лет работы я собрал ряд заметок и наблюдений по улучшениям в сфере юзабилити, которые действительно оказывают влияние на показатели сайта.
1. Меню и навигация по сайту
Задача меню — показать пользователю основные разделы сайта и сделать навигацию легче. При составлении списка разделов стоит избегать излишне сложных или непонятных названий. Если пользователь не поймет что есть что с первого взгляда, то, скорее всего, просто прекратит дальнейшее знакомство с сайтом на главной странице.
1.1. Где использовать горизонтальное меню?
Такое меню органично смотрится на сайтах, посвященных одной определенной тематике, или корпоративных порталах.
Плюсы:
- занимает меньше места, чем вертикальное;
- не нужно скроллить.
Минусы:
- расположенные слева пункты привлекают больше внимания;
- воспринимается медленнее, чем вертикальное.
1.2. Где использовать вертикальное меню?
Такое меню хорошо подойдет для крупных интернет-магазинов или порталов с большим количеством разделов.
Плюсы:
- быстрее воспринимается;
- можно добавить большее количество пунктов, по сравнению с горизонтальным меню.
Еще один вопрос, связанный с вертикальным меню: где именно его разместить?
1.2.1. Зачем размещать вертикальное меню слева?
В большинстве случаев при беглом просмотре страниц взгляд пользователей движется по F-образной траектории. Это так называемый F-Shaped Pattern.
Следовательно, наиболее важную информацию стоит размещать слева (исключение — сайты в странах, где пишут справа налево).
Кстати, в выдаче поисковиков F-образная траектория просмотра теряет актуальность. Отмена правого рекламного блока в выдаче Google только содействует этому. Но я еще не встречал серьезных исследований с критикой F-паттерна для сайтов.
В частности, слева стоит размещать меню сайтов интернет-магазинов, где происходят, например, сезонные приливы новых пользователей. Еще один пример — сайт, связанный с ремонтом бытовой техники. Сюда заходят только тогда, когда что-то сломалось. Если основное меню разместить слева, пользователю будет проще сориентироваться на сайте и сделать заказ.
1.2.2. Зачем размещать вертикальное меню справа?
Впрочем, случается, что аудитория сайта постоянна и растет незначительно (блоги). В таком случае более актуальной информацией для пользователей будут новые публикации, их следует разместить слева. Меню стоит расположить справа, так как большинство пользователей уже знакомы с разделами сайта.
Известный в среде интернет-маркетологов блог Devaka.ru
2. Какие шрифты использовать
Красивые шрифты — не прихоть дизайнеров. Они делают процесс чтения более комфортным. Сам текст может быть написан профильным специалистом и идеально отвечать на вопрос пользователя. Но на пути к пониманию и одобрению контента может стоять плохой шрифт.
Читайте по теме:
- Азы типографики: нескучно о шрифтах;
- Ян Чихольд: «Неправда, что о вкусах не спорят, если речь идет о хорошем вкусе».
2.1. Семейство гарнитур
Начнем наш разговор о гарнитурах с совершенно постороннего, на первый взгляд, графика:
Распределение операционных систем в мире. Данные 2014 года
Пользователям Windows хорошо знакомы гарнитуры Arial, Tahoma, Verdana, Times New Roman, Georgia, Courier а также множество других, нестандартных шрифтов. Они установлены по умолчанию. На UNIX-платформах используются их аналоги. Правда, выглядят эти шрифты не совсем так, как в Windows, да и не для каждого нестандартного шрифта найдется соответствующий аналог.
Позвольте, спросите вы, но причем здесь сайты? Дело в том, что при загрузке сайта обычно никто не заливает на сервер файл со шрифтами. Из-за этого текст, набранный Arial, для пользователей Ubuntu, например, будет отображаться по-другому, чем для пользователей Windows.
Читайте по теме: Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты.
Самое простое решение вопроса — использовать шрифты из Google Fonts. Их легко подключать, кроме того, среди них нет некачественных гарнитур. Базовая рекомендация — сочетать для заголовка/основного текста шрифты с засечками/без засечек. Например, Antiqua для основного текста и Grotesque для заголовков. Еще несколько удачных, на мой взгляд, комбинаций из Google Fonts: Open Sans + Lora:
PT Sans + PT Serif:
PT Serif + Open Sans:
2.2. Вертикальный ритм текста
Помните, вы в школе писали в тетрадях в прямую линейку?
Глаза привыкают к постоянному размеру междустрочных интервалов. Соблюдение пропорций интерлиньяжа улучшает читабельность текста. При верстке сайта рекомендуется задавать такой размер шрифтов и междустрочный интервал, чтобы все элементы текста вписывались в горизонтальную сетку.
Высота элементов кратна высоте строки. Например, заголовок H1 — три высоты строки, H2 и H3 — две высоты строки. Пример соотношения размеров заголовков и текста в CSS:
h1 {font-size:36px; line-height:48px; margin:24px 0;}h2 {font-size:30px; line-height:48px; margin:24px 0;}h3 {font-size:24px; line-height:24px; margin:24px 0;}p {font-size:16px; line-height:24px; margin:24px 0;}
Здесь для простоты значения указаны в пикселях. На пpaктике обычно используют относительные единицы «em» или «rem». Так будет выглядеть текст с данным оформлением:
В свободном доступе можно найти множество различных калькуляторов для расчета вертикального ритма и размеров заголовков.
Например:
2.3. Как выбрать нужный контраст шрифта и фона?
Хороший контраст:
Плохой контраст:
Как понять, хороший ли контраст у шрифтов с фоном? Сделайте скриншот страницы и переведите картинку в оттенки серого в любом редакторе (нет фотошопа? Ловите Pixlr). Если текст по прежнему легко прочитать, то контраст достаточный. Второй способ — воспользоваться бесплатным инструментом для проверки контрастности шрифта.
Рекомендую использовать цвет шрифта от #000 до #333.
2.4. Оптимальная длина строки
Чтобы читатель не уставал, строка не должна быть ни слишком короткой, ни слишком длинной. Рекомендую задавать длину строки в 60-75 символов при отображении на десктопных мониторах (для мобильных устройств ситуация другая). Предпочтительней использовать выравнивание по левой стороне, чем по всей ширине экрана. При выравнивании по ширине часто возникают ситуации, когда из-за различной длины слов возникают слишком большие пробелы, особенно при малой длине строки на мобильных устройствах.
2.5. Оформление ссылок
Главное правило: пользователь должен узнавать текст с ссылкой, не наводя на неё курсор. Чаще всего, ссылка в тексте ассоциируется с нижним подчеркиванием. Поэтому для обычного текста на сайте такой метод выделения не подходит.
3. Когда стоит использовать кнопки?
Рекомендую использовать кнопки, когда надо заставить пользователя выполнить важное действие (CTA) — зарегистрироваться, купить, скачать.
Во всех остальных случаях рекомендуется использовать ссылки. Например, для фильтров по параметрам:
3.1. Где расположить кнопку?
Кнопки с важными CTA рекомендуется располагать справа. Это связано с тем, как пользователи просматривают страницу.
Диаграмма Гутенберга показывает ориентацию взгляда пользователя
Кнопка в четвертом квадрате — хороший призыв к действию. Она расположена именно там, где останавливается взгляд посетителя. Пример:
Посадочные страницы: инструкция по повышению эффективности Подобрать подходящий цвет для кнопки можно с помощью цветового колеса. О правилах составления текста для CTA читайте в посте «
Суммируем все рекомендации:
- Используйте горизонтальное меню на сайтах, посвященных одной определенной тематике, или корпоративных порталах.
- В горизонтальном меню более важные пункты размещайте слева.
- Используйте вертикальное меню для крупных интернет-магазинов или порталов с большим количеством разделов.
- Если аудитория сайта постоянна и растет незначительно, меню стоит расположить справа, так как большинство пользователей уже знакомы с разделами сайта.
- Используйте шрифты из Google Fonts для обеспечения единообразного отображения на разных платформах (Windows, Mac, UNIX).
- Сочетайте для заголовка/основного текста шрифты с засечками/без засечек.
- При верстке сайта рекомендуется задавать такой размер шрифтов и междустрочный интервал, чтобы все элементы текста вписывались в горизонтальную сетку. Таким образом соблюдается вертикальный ритм текста.
- Для проверки контраста шрифта/фона сделайте скриншот страницы и переведите картинку в оттенки серого в любом редакторе. Если текст по-прежнему легко прочитать, то контраст достаточный.
- Чтобы читатель не уставал, рекомендуется задавать длину строки на десктопе в 60-75 символов.
- Используйте выравнивание текста по левой стороне экрана, чтобы избежать появления слишком больших пробелов между словами при отображении на мобильных устройствах.
- Никогда не используйте нижнее подчеркивание для выделения текста.
- Кнопки с важными CTA рекомендуется располагать справа, в четвертом квадрате по диаграмме Гутенберга.
Эти наблюдения не претендуют на роль исчерпывающего руководства, да и в каждом конкретном проекте возможны варианты. Вскоре в блоге появятся кейсы от специалистов нашего отдела юзабилити, так что вы сможете сами в этом убедиться. Если вы используете другие фишки юзабилити, на пpaктике влияющие на поведенческие факторы сайта, оставляйте комментарии. Обсудим :)
Комментарии:
Данные по 33,5 миллионов кликов в 26 тематиках и 394 городах...
28 05 2023 17:20:25
Делимся полезным скриптом — он проверяет код ответа сервера для списка страниц, до 1000 за сутки....
27 05 2023 6:29:48
Как диагностировать Google Panda, понять, что нужно изменить на своем сайте и сделать пользователей счастливыми....
26 05 2023 18:38:30
Метод не для всех, но увлеченным веб-аналитикой точно понравится!...
25 05 2023 4:34:24
Список курсов, книг, каналов и пабликов для работы с данными...
24 05 2023 22:24:13
Разбираемся, как определить самые эффективные источники лидов....
23 05 2023 8:48:58
Опыт, накопленный за более чем 10 лет работы в нише и упакованный в специальные предложения....
22 05 2023 7:56:38
Работа — рекламировать. Интервью с директором по стратегии агентства Smartica/Skykillers....
21 05 2023 21:34:45
Объявление или кабинет блокируют из-за эмоджи. Что делать?...
20 05 2023 12:56:46
Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить. В этом заключается польза данного исследования. Читать дальше!...
19 05 2023 10:17:43
Не Google единым. Нужные и важные знания по Яндекс.Вебмастер....
18 05 2023 15:53:56
Как визуализировать данные Google BigQuery в Power BI? Пошаговая инструкция от руководителя отдела веб-аналитики Netpeak Алексея Селезнева...
17 05 2023 22:54:26
Про мобильный дизайн. С красивой и понятной презентацией внутри....
16 05 2023 17:14:15
Почему контент-план — не тетка, или о том, в какой последовательности выкладывать статьи...
15 05 2023 21:50:43
5 кейсов отлично иллюстрируют правила юзабилити и находки веб-аналитиков....
14 05 2023 10:58:35
Статистика изменений долей рынка после майского и декабрьского апдейта Google в 2020 году....
13 05 2023 8:19:37
Грамотно оформленные метатеги презентуют сайт, помогают пользователям быстро найти нужную информацию, а поисковым системам — повысить ресурс в выдаче...
12 05 2023 14:28:42
Какие рассылки можно отправить покупателю, если у вас есть только данные из карточки товара...
11 05 2023 14:56:24
Как регулярно мониторить перспективные товары, по которым можно запускать контекстную рекламу...
10 05 2023 19:52:31
Агентство Netpeak закрыло сделку по покупке агентства мобильного маркетинга Радомира Новковича RadASO....
09 05 2023 19:44:16
ПриватБанк, АТБ и ДТЭК — эти бренды уже создали свои образовательные центры. Узнайте больше о том, как компании обучают своих сотрудников у нас и за рубежом. Читать дальше!...
08 05 2023 19:11:49
Интересные маркетинговые методы, эффективные профессиональные хитрости и много другое прозвучало на круглом столе по фишкам контекстной рекламы...
07 05 2023 18:18:53
Много 404-страниц и ссылок на них негативно сказывается на ранжировании сайта в поисковых системах....
06 05 2023 18:12:52
Как пользоваться выбором высокочастотных фраз для метатегов, чисткой мусорных фраз и как расставлять приоритеты для навигационных запросов с указанием определенного направления...
05 05 2023 6:48:45
SMM для агентства перформанс-маркетинга. Как уйти от сухих текстов и стандартных баннеров для бизнес-страницы....
04 05 2023 20:33:21
Перевод статьи Никки Джиллиленд из Econsultancy об уроках для маркетологов про то, каким должно быть хорошее видео. Узнайте 4 правила эффективного видеоконтента прямо сейчас!...
03 05 2023 15:25:25
Примеры креативного авторского стиля копирайтеров, которые старались обыграть УТП продукта, услуги, стремились необычно подать обычное. Узнать больше!...
02 05 2023 17:20:35
Каким образом бизнес-модель маркетплейса может помочь увеличить трафик интернет-магазина в целом....
01 05 2023 18:36:32
Триггер — способ ненавязчивого воздействия на потенциального клиента путем использования психологических приемов в текстах, заголовках и остальном контенте...
30 04 2023 18:38:17
Кейс роста трафика из органического поиска на 200%....
29 04 2023 2:54:53
Бесплатная регистрация сайта в поисковых системах и каталогах – отличный способ увеличить объемы трафика и раскрутить собственный ресурс....
28 04 2023 19:33:10
Проверьте свою логику, находчивость и креативность...
27 04 2023 9:28:36
Увольнять сотрудника — это неприятно и порой сложно. Прежде надо убедиться, что такой шаг оправдан, но он же потребует от руководителя понимания, как действовать в подобной ситуации. На этом и остановимся...
26 04 2023 21:58:13
Филиалы курсов в Таллине, Москве, Днепропетровске. Оказывается, нельзя так просто взять и посчитать ROMI (возврат маркетинговых инвестиций) в этой тематике....
25 04 2023 6:17:57
Как правильно распределить рекламный бюджет? Читайте топ-50 самых дорогих ключевых слов Google Рекламы в Казахстане по версии Serpstat...
24 04 2023 9:42:48
Определение сайта нового типа. Захочет ли бизнес интернета перевести свои веб-приложения на более прогрессивные рельсы?...
23 04 2023 12:27:20
Как правильно группировать ключевые фразы для релевантности рекламных кампаний...
22 04 2023 8:10:39
Пять примеров дизайна, который помогает продавать в рассылках. Просто любуемся и тренируем насмотренность....
21 04 2023 14:18:20
Как преодолеть онлайн писательский ступор, разобраться с рутиной и освободить время для экспериментов...
20 04 2023 11:38:43
Private Blog Network для ниши безопасности, доставки цветов, товаров сантехники, туризма и выпекания. Сетки сайтов работают не всегда и это нормально. Узнать больше!...
19 04 2023 0:17:29
Каковы интересы вашей аудитории, как люди находят ваш контент. Рассказываем обо всех возможностях от Search Console Insights....
18 04 2023 10:24:53
Новости, доработки и обновления в услугах, блоге, Академии блога и Кластере....
17 04 2023 22:38:20
Как улучшить конверсию сайта: идеи для маркетологов...
16 04 2023 3:59:53
Персональный чек-лист автора десятков рассылок: три года опыта и регулярное общение с техподдержкой почтовых сервисов. Всё о том, как не попасть в спам и как из него спасаться. А может и не всё. Можете дополнить этот пост своими фишками? Делитесь!...
15 04 2023 5:34:25
Партнерская программа — это когда сервис дает партнеру вознаграждение за приведенных клиентов. Получить деньги и/или другие плюшки можно также по реферальной программе. Как это работает? Разбираемся на примерах....
14 04 2023 23:24:35
Дмитрий Шахов, Алексей Чекушин и другие эксперты поделились своим опытом решения сложных вопросов SEO на примере больших проектов....
13 04 2023 18:41:31
Легче запомнить алгоритм правильной отправки писем, чем потом вытягивать их из папки со спамом....
12 04 2023 20:28:40
Как начать бизнес в институте и масштабировать его до международной группы компаний. Собрали все самое интересное из интервью фаундера «Техно Ёж» Алексея Гулыя на конференции 8P....
11 04 2023 18:32:15
Реклама будет не настолько персонализирована, как сейчас....
10 04 2023 19:38:28
Представление — это уровень доступа в аккаунте Google ***ytics. На уровне представления можно предоставить или ограничить доступ пользователей к отчетам и аналитическим инструментам...
09 04 2023 0:43:29
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::