Как улучшить 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 пикселей.
- Внутренние отступы в элементах на странице должны быть меньше, чем внешние.
- Цель таблицы — показать информацию наглядно. Поэтому убирайте лишние данные, разделители и цветовые выделения «для красоты».
Комментарии:
Часто трафик проседает из-за удаления важных страниц или изменения URL-адресов. Анализ данных веб-архива позволит сохранить или восстановить посещаемость...
13 10 2026 10:58:39
Как вывести в индекс страницы сайта на Ajax: от необходимости их создания, роли SEO, ускорении индексации и реальные рекомендации всего в трех пунктах, чтобы основное преимущество таких сайтов работало безотказно...
12 10 2026 11:32:53
Гениальный математик создал систему, которая вполне может конкурировать с Google — Wolfram|Alpha. Или нет? Это не поисковик, тогда при чем здесь Гугл и теория вычислимости?...
11 10 2026 17:33:44
Правила Facebook позволяют пользоваться автоматизированным контролем над эффективностью рекламы. Читайте, как уменьшить количество ручной работы с помощью автоматических правил...
10 10 2026 3:17:32
В помощь контент-маркетологам, редакторам, авторам и бизнесу: идеи, которые учитывают фактор SEO. Переупакуйте статьи, заметки, любые другие посты — угодите читателям и поисковикам. Узнать больше!...
09 10 2026 20:33:53
Прогнозирование с помощью «Планировщика ключевых слов»....
08 10 2026 18:44:21
Как быстро систематизировать мысли и заметки? Используйте систему Zettelkasten....
07 10 2026 11:27:12
3D принтер — заработок миллионеров будущего! Тех, кто сейчас смог купить и начал заниматься ими или использует их в бизнесе, ждет объемный успех через каких-нибудь 3-5 лет....
06 10 2026 15:34:34
Полезный и интересный контент — это лучший крючок, который помогает привлечь новых клиентов на аграрном рынке и удержать их внимание....
05 10 2026 9:32:29
Данные о стоимости клика в наиболее популярных рекламных интернет-площадках страны....
04 10 2026 2:55:51
Какие типы звонков отслеживаются? Есть ли интеграция с Google ***ytics? Существуют ли в выбранном сервисе или на платформе инструменты интеграции с другими системами? Больше вопросов и ответов на них — в статье....
03 10 2026 13:35:55
Как улучшить видимость сайта после оптимизаторов-староверов — кейс в тематике «световое и звуковое оборудование»....
02 10 2026 17:27:57
20 сервисов для прокачки контента под SEO. Штуки, которые будут полезны новичкам и экспертам....
01 10 2026 3:10:10
Amazon сократил комиссию для сайтов партнеров от 30% до 80% — что делать дальше? Мнение эксперта....
30 09 2026 6:49:14
Данные по 22,4 миллионам кликов в 46 тематиках и 392 населенных пунктах страны — собрана статистика исключительно по проектам агентства Netpeak. Узнать больше!...
29 09 2026 4:19:54
Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....
28 09 2026 18:28:17
О том, как работают, празднуют, танцуют и в какой корпоративной культуре живут сотрудники корпорации Google. Этот пост развеет кое-какие мифы....
27 09 2026 18:49:38
Панельная дискуссия, на которой специалисты представляют нестандартные идеи для привлечения трафика, продвижения проектов. Всё, что можно применить на деле. Читать!...
26 09 2026 5:27:49
Перевод статьи о стадиях формирования комaнд по Брюсу Такмену — полезно знать всем....
25 09 2026 0:18:27
Мы запустили email с нуля и стали получать стабильный ежемecячный доход....
24 09 2026 10:32:32
Твиттереть нужно правильно. Интересная аналитики и планирование твитов по времени...
23 09 2026 4:20:37
Мы хотим купить комaнду с компетенциями в сфере медиабаинга, чтобы объединить силы для развития онлайн-рынка...
22 09 2026 17:18:32
Со старта сотрудничества, рост видимости сайтов клиента вырос в 15 раз....
21 09 2026 22:23:36
Как найти релевантный сайт-донор для размещения своей ссылки...
20 09 2026 1:27:45
Правильное распределение кодов ответов сервера позволяет поисковым системам экономить ресурсы на работу с сайтом. Поисковые роботы будут получать только необходимую информацию...
19 09 2026 7:51:50
Как делать большие деньги даже, когда случаются кассовые разрывы и каким образом строить процессы внутри компании, чтобы сотрудники горели своим (вашим) делом? Узнать!...
18 09 2026 12:51:38
10 базовых правил оформления онлайн-таблиц. Оформление — основа таблицы. Как работать со столбцами и ячейками, комментариями и примечаниями, делать корректные цветовые выделения. Читайте далее....
17 09 2026 20:25:20
Крупным брендам не избежать негатива в сети. Но с ним можно и нужно работать. Читайте успешный кейс для DOM.RIA....
16 09 2026 20:21:15
Об особенностях реализации интернет-проектов в Великобритании, России и Казахстане и фишках успешного ведения бизнеса онлайн мы побеседовали с Владимиром Меркушевым — руководителем интернет-проектов успешной казахстанской компании Kolesa.kz....
15 09 2026 3:30:34
Как зарегистрироваться и пользоваться аккаунтом в Google Business Profile: руководство для интернет-маркетологов и владельцев бизнеса...
14 09 2026 10:31:39
95% заполняемости коливингов для сервиса аренды жилья....
13 09 2026 14:37:37
Email-маркетинг — хороший полицейский, спам — плохой....
12 09 2026 15:34:54
Удача и везение — не случайность. Это выбор. Любопытные эксперименты профессора Ричарда Вайсмена инсайде...
11 09 2026 23:53:20
Раскрываем тайны показателя качества в рекламе гугл с помощью API...
10 09 2026 22:17:36
Какие возможности дает Chrome DevTools для SEO-оптимизации...
09 09 2026 11:56:37
Рассказываем о том, что такое Песочница, как сюда писать и получать больше аудитории для своего бизнеса...
08 09 2026 11:41:34
Быстрые ссылки и другие советы на тему того, как эффективно работать в Директ Коммaндере....
07 09 2026 12:42:13
После того, как мы разобрали виды мобильных версий сайтов, их плюсы и минусы — стоит поговорить о сервисах, которые облегчают аудит....
06 09 2026 4:15:25
На что обратить внимание при покупке интернет-ресурса, какие факторы влияют на цену и что помогает определить качество сайта? Ответы на все эти вопросы в статье. Читать!...
05 09 2026 23:47:28
Тестирования наличия важных тегов на целевых страница — бесплатный скрипт и алгоритм...
04 09 2026 7:41:50
кмс Google: как достичь поставленной цели с помощью рекламы? Делимся советам по настройке КМС-кампаний....
03 09 2026 2:35:20
Как заинтересовать инвесторов, сколько времени это займет, а также стратегии поиска....
02 09 2026 12:24:10
Данные, приведенные в исследовании, могут помочь в составлении медиапланов по продвижению в интернете. Читать дальше....
01 09 2026 9:25:42
Динамический ремаркетинг — один из самых эффективных способов продаж для любой группы товаров. В этой статье мы поделимся тонкостями технической подготовки к запуску динамического ремаркетинга в Facebook....
31 08 2026 9:22:46
Как узнать, хорошую ли статью вы опубликовали в блоге...
30 08 2026 10:58:12
Бренды поделились инсайтами на ДиВи Конф — фишки от MEGOGO, Google, TikTok, Banda, McCann, I am IDEA, AIR Brands, Rocket и Фокстрот...
29 08 2026 14:39:34
Правильно выбранная соц. площадка поможет раскрутить бизнес эффективно....
28 08 2026 4:20:23
Как понять, что проект нуждается в новых текстах и сделать читателя счастливым...
27 08 2026 4:58:52
All about internet mail. Примеры того, что стоит внедрить в рассылках почты онлайн....
26 08 2026 10:47:12
Влияет ли значение показателя отказов на ранжирование сайта в поисковых системах и стоит ли переживать из-за высоких показателей отказов? Узнать больше....
25 08 2026 10:51:39
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
