Как улучшить 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 пикселей.
- Внутренние отступы в элементах на странице должны быть меньше, чем внешние.
- Цель таблицы — показать информацию наглядно. Поэтому убирайте лишние данные, разделители и цветовые выделения «для красоты».
Комментарии:
Бесплатные CMS помогают решить много задач без привлечения программиста или самостоятельного изучения кодов. Но у таких движков есть свои недостатки. Узнать больше!...
01 06 2026 12:17:19
Гайд по рекламе для SMM-, PPC-специалистов, блогеров и владельцев бизнеса...
31 05 2026 23:36:11
Сервисы для определения оптимальной плотности ключевых слов...
30 05 2026 19:57:58
4 кейса с шагами, рекомендациями и результатами, которые помогут грамотно распределить средства на рекламу....
29 05 2026 17:46:36
Как сделать красиво. Алгоритм подготовки красивых и понятных презентаций, рекомендации и полезные ссылки, а также простые правила хорошего тона в дизайне Google Презентаций. Узнать больше и сделать свою презентацию эффективнее!...
28 05 2026 3:20:40
Рассказываем об интересных диджитал-специальностях и зарплатах, как обучиться этим профессиям с нуля (в том числе в зрелом возрасте) и можно ли работать удалённо....
27 05 2026 12:35:10
Мы запустили еще один полезный инструмент: Netpeak Spider....
26 05 2026 9:18:31
Тема поста — исследование электронной коммерции в Украине: рынки, статистика, объем продаж, поисковый потенциал....
25 05 2026 17:13:56
Поговорим о soft skills, потому что именно они, исходя из моего опыта, помогают строить поистине сильные комaнды....
24 05 2026 14:52:28
Новая партнерская программа Netpeak agency. Как получить теплого лида, стабильный пассивный доход, разместить свой логотип и ссылку на сайт на сайте Netpeak и другие бонусы партнерской программы. Узнать больше!...
23 05 2026 17:30:19
Как сохранить статистику переходов из органики Google, а также автоматизировать отчетность: подробное руководство для технического специалиста....
22 05 2026 18:10:13
Альтернатива классическому SQL — обработка запросов из множества таблиц с помощью функций подстановки в Google BigQuery....
21 05 2026 16:36:12
История создания и развития холдинга «Choco Family» помогает понять масштабы онлайн-рынка Казахстана, найти точки роста для собственного бизнеса в Казнете. Каково быть пионером ecommerce в стране? Чем казахстанский рынок ecommerce отличается от Рунета и Уанета? Читать!...
20 05 2026 18:30:28
Легче запомнить алгоритм правильной отправки писем, чем потом вытягивать их из папки со спамом....
19 05 2026 4:17:24
Контент может информировать, вовлекать и продавать, при этом для каждой цели нужен свой тип контента...
18 05 2026 16:35:16
Часто в распоряжении клиента только интерфейс конструктора сайтов, весьма ограниченный в функциональности. Тогда на помощь интернет-маркетологу приходит сервис Tag Manager, благодаря которому можно настроить необходимый код расширенной электронной торговли....
17 05 2026 4:28:32
5 мая в 17:00 — митап в Zoom с Радомиром Новковичем — фаундером RadASO и CEO Tonti Laguna Mobile....
16 05 2026 16:15:38
Учим правильно платить за верхние строчки показов объявления: настройка быстрых звонков из поисковых объявлений «Только номер телефона» Google Ads...
15 05 2026 18:58:41
Почему бизнесу нужно настраивать мультикaнaльную модель атрибуции на основе воронки продаж и как это сделать....
14 05 2026 9:50:42
Языковой закон требует, чтобы общение бизнеса с клиентами шло на украинском языке, если нет просьбы о другом приемлемом варианте. Что это означает для РРС, читайте дальше....
13 05 2026 12:42:39
Лучшие фишки продвижения мобильных приложений в адаптированном переводе отчета Branch.io...
12 05 2026 10:36:51
«Нет, нам нужна раскрутка и точка!» Список маркетинговых пpaктически применимых фишек....
11 05 2026 7:13:41
Как сократить время на создание собственных отчетов, если вы работаете с большими рекламными аккаунтами...
10 05 2026 9:11:35
Узнай, как бэкофис группы помогает развиваться компаниям, и выиграй iPhone — подбери крутое название для нашей группы....
09 05 2026 15:36:50
Как специалисту оптимизировать рабочее время, качественно развивать проекты и меньше нервничать...
08 05 2026 10:12:34
Мы решили определить и раскрыть самые популярные вопросы по работе нового алгоритма Google Колибри...
07 05 2026 8:58:54
Чек-лист для РРС-специалистов. Всегда быстрее учиться на опыте других людей, а не набивать шишки самостоятельно. А также советы, как исправить рекламные кампании. Обо всем читайте в этой статье!...
06 05 2026 7:50:43
При работе с рекламным аккаунтом приходится вносить много однотипных изменений. Рассказываем, как сделать это быстро....
05 05 2026 0:37:36
Отличная работа SEO-специалистов прошлого, породила касту PPC-специалистов настоящего, которые все еще ориентируются на публикации из 2017, ведь они все еще в ТОПе выдачи....
04 05 2026 1:11:57
Как определить, что SEO-продвижение не будет в тягость, что и кого читать начинающему специалисту...
03 05 2026 5:52:15
Новости агентства Netpeak за предыдущий квартал. Появление отдела веб-аналитики. Открыли услугу «Создание и ведение блогов». Добавили мультивалютность. Глобально изменили скрипт Netpeak X-Reference. Запустили серию писем. Что еще?...
02 05 2026 19:16:27
Как рекламировать смартфоны в YouTube — советы крупному бизнесу по настройке и запуску эффективной рекламы. Важно: корректный анализ результатов. Узнайте как его сделать!...
01 05 2026 20:29:35
Отрывок из книги «Статистика: базовый курс в комиксах» Грейди Клейн и Алана Дебни...
30 04 2026 22:21:36
Как стать заметнее для поисковых роботов Яндекс и Google...
29 04 2026 19:44:28
Основные этапы раскрутки сайта. Что такое и как работает поисковая оптимизация, ее виды, особенности, преимущества...
28 04 2026 11:39:10
Как научиться справляться со стрессом и находить в комaнду «тех самых» людей...
27 04 2026 16:23:45
Отмена видео-сниппетов в выдаче Google, удаление страницы с тегами и инструмента подсказки ключевых слов в YouTube — все события последних месяцев свидетельствуют: Google всерьёз взялся за видеохостинги и решил изменить правила игры для видеомаркетинга в...
26 04 2026 16:59:59
Всем, кто собирается перейти на Single Page Application, но переживает, что они поссорятся с поисковыми системами. Правильно переживаете!...
25 04 2026 1:22:52
Netpeak подводит итоги 2016 года и делится планами на будущее....
24 04 2026 4:26:44
Если ваш сайт не приносит желаемых продаж, задумайтесь о смене формата. Этот кейс о том, как с качественным лендингом можно достигнуть желаемой цены за конверсию....
23 04 2026 12:52:48
При наложении санкций на сайт его страницы заметно понижаются в выдаче. При наличии бана ресурс полностью исчезает из поиска, включая брендовые запросы...
22 04 2026 16:43:55
А сейчас про конференцию Netpeak Friends Day для друзей Netpeak Group...
21 04 2026 14:11:50
До понижения в органической выдачи Гугл у сайта есть около 15 дней с момента появления сообщения о вредоносном контенте....
20 04 2026 21:53:50
Адвент-календарь, конкурсы и викторины, праздничные линейки товаров, подборки подарков для родных и близких, опросы, тесты и другие интересности. Используйте, если нужны идеи и вдохновение....
19 04 2026 19:26:40
Дублирование контента на разных сайтах, ориентированных на рынки разных стран, например, на публику Канады...
18 04 2026 19:35:28
Если в сетке сайтов есть интересный домен, его можно использовать для дополнительной монетизации, а не только для ссылок. В таком случае важно знать, как правильно отслеживать трафик таких доменов....
17 04 2026 18:30:54
Как связываться с клиентами и что делать, чтобы качество обслуживания не просело. Менеджер, который обpaбатывает звонки со своего мобильного, остается без контроля, поэтому АТС оказывается идеальным решением. Разбираемся в статье!...
16 04 2026 21:18:47
Как новичкам в ecommerce выбрать первую CMS. Преимущества и трудности работы для крупных и небольших интернет-магазинов, русскоязычные и мультиязычные, с активной техподдержкой и без нее. Узнать больше!...
15 04 2026 2:51:22
Как с помощью элементов микро UX в дизайне сделать сайт интернет-магазина незабываемым...
14 04 2026 11:44:35
Будь мобильным — заливай видео на Youtube с телефона...
13 04 2026 23:35:45
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
