Как улучшить UX/UI сайта — семь советов по юзабилити
Если пользователь зашел на сайт из поисковика, побыл на нем какое-то время, а затем вернулся к поиску, робот сделает вывод, что сайт недостаточно хорош. Пользователь не нашел на нем то, что искал, значит сайт не достоин первых позиций выдачи и понизит его. Так работают алгоритмы поисковых систем, когда ранжируют сайты по запросам.
Юзабилити — один из главных факторов, влияющих на поведение пользователей и, как результат, на его видимость в интернете. Вот почему я, SEO-специалист, даю советы по юзабилити сайтов.
Как улучшить UX сайта — 12 советов по юзабилити С момента публикации
Краткое содержание этого выпуска:
- Как выглядит годный логотип.
- Как корректно оформить ссылки.
- Как сделать четкую кнопку.
- Как подобрать цветовую гамму для сайта.
- О чем помнить перед выбором фотографии.
- Как ставить отступы в соответствии с теорией близости.
- Как оформить таблицу.
Как выглядит годный логотип
Логотип лучше размещать в верхнем левом углу. Большинство людей читает слева направо, и это будет первое, что они увидят. Если адаптивной верстки нет, а размер экрана небольшой, браузер обрезает именно правую часть страницы.
VS.
Под логотипом уместно разместить пояснение — чем занимается проект:
Важно выбрать шрифт для логотипа так, чтобы он соотносился с тематикой сайта. Жирный шрифт с толстыми начертаниями букв создает ощущение надежности, стабильности и тяжеловесности. Отлично подойдет для использования в тематиках, связанных с недвижимостью, автомобилями, строительством и так далее.
Шрифт с тонкими, вытянутыми линиями хорошо подойдет для тематик, которые ассоциируются с красотой. Частично это связано со стереотипом: «стройный значит красивый».
Чтобы передать скорость, можно использовать курсив или наклонный шрифт, так как объекты, которые движутся быстро, кажутся размытыми и наклонными:
В логотипах компаний доставок:
Ссылки по теме:
- Как расположение логотипа влияет на юзабилити вашего сайта.
- 27 психологических тактик создания идеальной рекламы.
Как корректно оформить ссылки
Ссылки должны подчеркиваться, чтобы пользователь мог сразу сориентироваться, где находится ссылка, не наводя на неё курсор. Сейчас половина трафика поступает из мобильных устройств, а там пользователи просто нажимают на экран. Исключение — ссылки в меню.
Анкор ссылки должен соответствовать тому, что увидит пользователь, перейдя на страницу.
Хорошо:
Плохо:
Если действие важно для бизнеса, лучше использовать кнопку. Например, для оформления заказа.
Стоит помечать ссылки, на которые пользователь уже нажимал. Посещенные ссылки можно выделить более темным оттенком того же цвета, а непосещенные — более ярким. Так мы словно призываем пользователя кликнуть по ссылке.
Еще одно правило. Ссылки, при клике по которым происходит какое-то действие без перезагрузки страницы, отображаются прерывистой подчеркнутой линией. Это может быть появление окно справки, как иногда делают на новостных сайтах. В остальных случаях ссылку лучше подчеркивать сплошной линией.
Перед линками, которые ведут на файлы для скачивания можно поставить значок, соответствующий формату документа:
Статья по теме: «Юзабилити ссылок».Как сделать четкую кнопку
Если кнопка темнее фона, обводку лучше сделать более темного цвета, чем цвет кнопки.
Если фон темнее кнопки, обводка должна быть темнее цвета фона:
У кнопок могут быть четыре состояния: простое (input{}), наведение мыши (input:hover{}), нажатие (input:active{}), неактивная (input[disabled=\"disabled\"]{}). Указывайте состояния кнопок, чтобы пользователю было легче понимать логику процесса.
Статьи по теме:Как подобрать цветовую гамму для сайта
Вводим несколько основных высокочастотных запросов по тематике сайта в поиск по картинкам и смотрим на цвета изображений, которые выводятся на первом экране. Нужно попытаться понять, с какими цветами ассоциируется у большинства пользователей эта тематика.
Например, изготовление тортов на заказ:
Основные цвета — белый, коричневый, красный (розовый), зеленый. Красный цвет разжигает аппетит, что актуально для тематики тортов.
Пример дизайна:
Еще одна тематика — дрессировка собак:
Основные цвета: зеленый, бежевый, коричневый, черный.
Пример дизайна в этих тонах:
Чтобы не запутаться, проще использовать не более трех-четырех цветов.
Cерый чаще всего используется для второстепенных элементов, которые должны быть на странице, но не сильно выделяться. Основная задача — расставить акценты на элементах с помощью контраста цветов.
Ссылки по теме:- ColorScheme.ru — инструмент для подбора цветов и генерации цветовых схем) ;
- Flat UI Color — цвета для Flat-дизайна;
- Цветовые схемы в веб-дизайне: шесть советов для начинающих (оригинал, перевод) ;
- Статья про юзабилити и цвета.
О чем помнить перед выбором фотографии
Лучше заранее продумать пропорции и максимальный размер фотографий, которые будут использоваться на сайте. Так как мобильные устройства ресайзят картинки автоматически, для них не нужно ограничивать размер изображений , но стоит следить, чтобы картинка не была слишком маленькой.
Чтобы изображения помещались в окне браузера с учетом различных панелей и полос прокруток, рекомендуется использовать ширину 900-1000 пикселей и высоту 600-700 пикселей. Чаще всего используются пропорции 1:1, 3:2, 4:3:
Чтобы кадры с разным соотношением сторон комфортно смотрелись в браузере, можно использовать такие размеры (в квадратных скобках — размер для отображений на сайте с помощью тега IMG):
- 3:2 — 1800x1200 [900 х 600];
- 3:2 — 1000x1500 [500 х 750];
- 4:3 — 1800x1350 [900 х 675];
- 4:3 — 1050x1400 [525 х 700];
- 1:1 — 1200x1200 [600 х 600].
Как ставить отступы в соответствии с теорией близости
Это небольшая и на мой взгляд, очень полезная рекомендация, помогающая организовать элементы на сайте и расстояния между ними.
Основной принцип в том, чтобы делать внутренние отступы внутри элементов или блоков меньше, чем внешние.
Полезные статьи:- Теория близости (Habrahabr) ;
- Правило близости (DesignPub).
Как оформить таблицу
Просто гифка об оформлении таблиц.
Как построить диаграмму и не облажаться Читайте детально о том,
- Стив Круг, «Не заставляйте меня думать».
- Робин Вильямс, «Дизайн для недизайнеров».
- Артемий Лебедев, «Ководство».
Выводы
- Логотип лучше размещать в верхнем левом углу. Шрифт для логотипа должен соотноситься с тематикой сайта.
- Ссылки должны подчеркиваться, анкор должен соответствовать тому, что увидит пользователь.
- Если действие пользователя важно для бизнеса, лучше использовать кнопку.
- Если кнопка темнее, чем фон, на котором она расположена, обводку лучше сделать более темного цвета, чем цвет кнопки.
- С помощью поиска по картинкам поймите, с какими цветами ассоциируется у большинства пользователей эта тематика, и оформляйте сайт в соответствующей цветовой гамме.
- Чтобы изображения помещались в окне браузера с учетом различных панелей и полос прокруток, рекомендуется использовать изображения шириной 900-1000 пикселей и высотой 600-700 пикселей.
- Внутренние отступы в элементах на странице должны быть меньше, чем внешние.
- Цель таблицы — показать информацию наглядно. Поэтому убирайте лишние данные, разделители и цветовые выделения «для красоты».
Комментарии:
Примерно 70% конверсий происходит за счет дополнительных источников, их ценность отражается в GA. Разбираемся, какие отчеты использовать для анализа и оценки таких источников. Читайте далее!...
18 05 2026 21:36:17
Всё о метриках загрузки сайта. Как проверить и отслеживать реальную скорость загрузки сайта и почему нельзя доверять показателям Pagespeed Insights....
17 05 2026 7:21:13
Руководство к действию от основателя Netpeak Group....
16 05 2026 5:40:57
Пора сделать так, чтобы мобильная версия сайта приносила прибыль....
15 05 2026 21:39:14
Советы и даже требования SEO-специалистов к разработчикам сайтов....
14 05 2026 15:51:46
Блиц-инструкция и рекомендации по созданию эффективных описаний для мобильных приложений...
13 05 2026 19:55:46
Открытие проверенных действий по увеличению продаж...
12 05 2026 18:37:16
Идея ORM состоит в том, чтобы вызывать положительное мнение о вашей деятельности, работая с отзывами или комментариями, в результате чего больше людей будут покупать ваши товары или услуги. Узнать больше!...
11 05 2026 14:46:37
Определение сайта нового типа. Захочет ли бизнес интернета перевести свои веб-приложения на более прогрессивные рельсы?...
10 05 2026 16:42:24
Правильное распределение кодов ответов сервера позволяет поисковым системам экономить ресурсы на работу с сайтом. Поисковые роботы будут получать только необходимую информацию...
09 05 2026 8:51:33
Пожар в дата-центре, неудачные обновления и то самое падение Facebook....
08 05 2026 5:58:21
Что нужно делать на старте работ с интернет-магазином и как минимизировать риски для бизнеса онлайн, используя такие инструмента как SEO, PPC и Email-маркетинг — советы от эксперта. Читать дальше!...
07 05 2026 0:23:34
Как найти и быстро исправить причины падения трафика? Совет номер один — не паниковать....
06 05 2026 4:24:45
Выдержка из интервью Дэнни Салливаном с представителями компаний Google и Bing...
05 05 2026 9:51:45
Страховка, медицина, корпоративы, английский и оплата спортзала — знакомые плюшки IT-компаний. В этом материале читайте про редкие и необычные бонусы, которые предоставляются в некоторых IT-компаниях Украины....
04 05 2026 23:56:33
Пpaктическая информация о том, что и куда нужно постить....
03 05 2026 8:30:25
Читать только интернет-маркетологам, SMM, PPC и SEO-специалистам....
02 05 2026 4:28:35
Миссия компании: делимся опытом создания и реализации в компании с 300 сотрудниками...
01 05 2026 8:42:36
Эффективность продвинутой сегментации стала заметна уже в первый месяц ее функционирования....
30 04 2026 20:33:29
Увлекательные истории от специалиста по контекстной рекламе....
29 04 2026 8:15:16
История Affise от фаундера компании, рассказанная на SaaS Nation....
28 04 2026 6:49:49
Краткое сравнение двух инструментов и третьего на закуску....
27 04 2026 14:43:27
Кейс SMM-специалиста Edu-CASH.com о том, что делать, если Facebook страница заблокирована. И почему могут забанить аккаунт даже популярного бренда. Узнайте в статье!...
26 04 2026 6:47:20
Энн Смарти (Ann Smarty), пожалуй, самая известная публичная личность в мире контент-маркетинга и поискового продвижения. За несколько лет она прошла путь от SEO-блогера до главного редактора авторитетного Search Engine Journal и CEO одного из самых популя...
25 04 2026 3:35:53
Как отслеживать конверсии при многокaнaльном взаимодействии покупателя с вашим сайтом? Читайте далее...
24 04 2026 5:41:20
Google Data Studio: подробная инструкция и обзор возможностей...
23 04 2026 13:46:11
Сделать «на вчера», «внезапно», протестировать все варианты. Стоп! Остановитесь и выдохните. Be slow...
22 04 2026 1:11:47
Проверенный способ для сбора базы данных. Метод, с помощью которого можно извлечь контактные данные, а именно: название точки, телефон, адрес, сайт., а потом высылать своё КП, промокоды для акции, сообщить о выходе товара, сделать спецпредложение...
21 04 2026 0:24:17
Как работать с негативом и что делать, чтобы его было меньше/не было вовсе....
20 04 2026 21:12:27
Если вы не можете разработать технические задания для себя в виде структурированного текста, вы, скорее всего, плохо понимаете, что хотите от исполнителя...
19 04 2026 2:19:16
Рекомендации по ведению переговоров в непростых условиях....
18 04 2026 6:18:44
Менеджмент и лидерство: 4 разных типа руководства организацией и нескучные иллюстрации в стиле South park....
17 04 2026 4:57:23
Кейсы с наибольшим количеством комментариев, репостов, оценок и дочитываний; по контекстной рекламе, поисковому продвижению, аналитике, SMM и другие. Узнать больше!...
16 04 2026 0:19:34
Как научиться справляться со стрессом и находить в комaнду «тех самых» людей...
15 04 2026 10:15:28
Лайфхаки, как упростить работу с соцсетями от специалиста агентства Netpeak и ежедневной работы SMM-специалиста. Телеграм-боты, которые облегчат рутину и сэкономят время. Узнать больше!...
14 04 2026 8:25:55
Готовы ли вы доверить основные настройки кампании автоматическим алгоритмам?...
13 04 2026 8:18:46
Пользователи могут смотреть вирусные ролики без единого слова...
12 04 2026 15:57:51
Изучаем на примере тестирования товарных кампаний в момент смены логотипа и ренейминга...
11 04 2026 8:13:15
А ещё Netpeak Cluster стал инструментом и у нас появился хаб знаний на YouTube....
10 04 2026 9:34:49
Профессиональная лексика SEO-специалистов в буржунете и в рунете формируется в одном поле: Google-то общий. Но когда специалисты Востока и Запада встречаются, им сложно понять друг друга. Это неудивительно, так как язык отражает само восприятие SEO. А под...
09 04 2026 6:51:47
Словосочетания и аббревиатуры, которыми пользуются на рынке игрового маркетинга....
08 04 2026 16:45:52
Рассказываем про телеграм-канал со-основателя Netpeak и чем он интересен для предпринимателей, руководителей и маркетологов....
07 04 2026 3:18:58
Процесс привлечения сторонних ресурсов отнимает основную часть времени у большинства основателей стартапов. Читайте руководство, которое поможет сделать этот процесс во время серии А более эффективным....
06 04 2026 7:48:55
Как подготовиться и сделать из интервью полноценную историю, которая будет интересна аудитории...
05 04 2026 5:49:14
Используем возможности Google Cloud Platform в работе с R...
04 04 2026 18:11:21
Сравним разные модели атрибуции с точки зрения оценки финансовых показателей проекта...
03 04 2026 7:15:13
Сбор анкет до 16 декабря, публикация результатов в конце декабря...
02 04 2026 12:50:46
Как упростить работу со скриптами на языке R? Программирование удобного интерфейса с помощью пакета «gWidgets»...
01 04 2026 23:32:24
Как правильно мотивировать и демотивировать себя — теория и кейсы. Как бросить курить, начать бегать и наконец-то приступить к изучению английского. Читать!...
31 03 2026 1:48:22
Как узнать особенности бизнеса в нише и что позаимствовать у конкурентов для SEO...
30 03 2026 16:43:41
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
