Как улучшить 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 пикселей.
- Внутренние отступы в элементах на странице должны быть меньше, чем внешние.
- Цель таблицы — показать информацию наглядно. Поэтому убирайте лишние данные, разделители и цветовые выделения «для красоты».
Комментарии:
Менеджер, маркетолог, дизайнер программист? Делимся секретами нетпик, каким должен быть специалист по рекламе...
30 08 2026 20:17:42
Как контролировать множество сайтов — полезные сервисы и советы для вебмастеров. Одно дело — несколько десятков сайтов, а что если сотни или тысячи? Как раз это подробно и разберем....
29 08 2026 4:46:34
Что учитывать при продвижении недвижимости, клиник красоты, магазинов косметики, сайтов по продаже семян, шин?...
28 08 2026 10:38:18
Как протестировать MVP мобильного приложения, получить обратную связь и сформировать гипотезы...
27 08 2026 2:40:22
Интересные маркетинговые методы, эффективные профессиональные хитрости и много другое прозвучало на круглом столе по фишкам контекстной рекламы...
26 08 2026 16:54:14
Большинство покупателей предпочитают безналичный расчет, желают иметь разные варианты оплаты. Как их наличие или отсутствие влияет на средний чек?...
25 08 2026 3:50:44
Самые точные данные статистики, которые вы получите с помощью Google Tag Manager....
24 08 2026 7:50:36
Как тратить на ставки меньше денег и почему вырастает цена за клик, а также о том, как ее сделать ниже. Плюс список факторов, которые влияют на ставку для первой страницы для ключевого слова...
23 08 2026 23:56:57
Рассказываем в подробностях, что полезного сделал Netpeak для своих клиентов с января по апрель 2017 года...
22 08 2026 5:29:13
В семье Leo Burnett - 7750 человек из 84-х стран мира. В Украине всего - 90 творческих единиц....
21 08 2026 9:52:46
Tencent — китайская компания, мировой лидер в сфере игр. Все о создании компании, доходах, прибыли, инвестициях. Особенности ведения бизнеса в Китае — в пересказе статьи Паки Маккормик. Читать дальше!...
20 08 2026 18:35:13
Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....
19 08 2026 16:21:28
21 апреля Google официально начнет учитывать совместимость с мобильными девайсами в качестве одного из факторов ранжирования сайта в мобильном поиске. Что это значит для владельцев сайтов и вебмастеров? Мы подготовили небольшой FAQ по теме для рубрики «SE...
18 08 2026 21:49:14
Предложение для крупных и средних бизнес-проектов по эффективному использованию больших бюджетов при запуске на новых рынках...
16 08 2026 13:50:56
Создатель scrum model Джефф Сазерленд написал книгу о том, как использовать методику разработки программного обеспечения для развития бизнеса....
15 08 2026 8:49:51
Для эффективного ведения контекстной рекламы необходимо отслеживать продажи. Как сделать это с помощью Google Tag Manager расскажем в этой статье...
14 08 2026 16:38:59
Хакерские атаки с развитием технологий коснулись постаматов и доставки заказов из интернет-магазинов...
13 08 2026 14:54:11
При работе с рекламным аккаунтом приходится вносить много однотипных изменений. Рассказываем, как сделать это быстро....
12 08 2026 23:31:33
И как проверить релевантность на своем сайте. Если речь идет о страницах (сайтах), подразумевается соответствие контента запросу. Чем точнее страница отвечает на запрос, решает задачу пользователя, тем (при прочих равных) выше ее позиция в поисковой выдаче....
11 08 2026 19:47:16
Как получить больше конверсионного трафика из поиска и не выйти за рамки KPI? Запустите SNDS-кампании...
10 08 2026 20:32:33
Почему дешевый копирайт не подходит для текстов карточки товара...
09 08 2026 11:59:23
Лучшие фишки продвижения мобильных приложений в адаптированном переводе отчета Branch.io...
08 08 2026 16:46:44
При создании рекламы на украинском мы завоевываем большую долю рынка без повышения цены за клик....
07 08 2026 0:43:56
Представляем Netpeak Journal — новый этап развития блога Netpeak...
06 08 2026 11:23:43
Динамический ремаркетинг: как вернуть посетителя на сайт и продать, когда человеку «надо ещё подумать»....
05 08 2026 14:25:57
Узнаем расширенную информацию о посещениях сайта с помощью языка R — кейс Netpeak...
04 08 2026 11:41:43
Образ гармонии, почерк и потребности — рецензия на книгу Яна Чихольда «Облик книги»....
03 08 2026 5:49:20
Фишка, которую можно позволить себе даже когда портал продает всего несколько товаров или услуг...
02 08 2026 10:48:24
Партнерская сеть, к которой нужно присоединиться уже сейчас....
01 08 2026 3:34:41
В Twitter удобно собрать список потенциальных клиентов, чтобы время от времени посматривать за их новостями...
31 07 2026 11:25:46
Популярные скрипты Google Рекламы позволяют автоматизировать рутинные и монотонные процессы. Каждый скрипт состоит из функций, переменных, объектов, сущностей, селекторов, итераторов...
30 07 2026 2:53:22
89% предпринимателей не тестируют свои продающие тексты. О том, что и как нужно тестировать, рассказал в гостевом посте директор Студии эффективных текстов Владимир Руков....
29 07 2026 21:12:15
Убираем человеческий фактор при сборе отчетов по контекстной рекламе...
28 07 2026 7:34:57
Решили написать про новый формат рекламы — баннерный...
27 07 2026 23:20:27
Почему в высококонкурентных тематиках важно оптимизировать поведенческие показатели...
26 07 2026 4:43:53
Возможности и перспективы Clubhouse, лайфхаки для пользователей и бонус в конце...
25 07 2026 5:38:55
Наибольший эффект по продвижению сайта при минимальных затратах — именно таков принцип SEO growth hacking. Как найти кратные точки роста, читайте статье....
24 07 2026 4:41:19
Как говорят легенды, на создание дизайна этих носочков Sammy Icon вдохновили рисунки на стенах храма Темпло Майор в древнем городе Теночтитлан. К сожалению, город сейчас разобрали перуанские строители, но память о нем осталась в киевских носках...
23 07 2026 12:49:10
Не Google единым. Нужные и важные знания по Яндекс.Вебмастер....
22 07 2026 17:55:42
Шпаргалка по размерам креативов для всех, кто запускает рекламу в соцсетях...
21 07 2026 12:53:15
3 часто задаваемых вопроса о раскрутке сайтов об эффективной организации SEO своими силами, способах проверки оптимизации сайта и о том, как быстро можно увидеть эффект от SEO. Узнайте больше!...
20 07 2026 5:29:11
Чем удивляла, радовала и смешила реклама в социальных сетях в июне 2021 года...
19 07 2026 5:27:48
Как стать заметнее для поисковых роботов Яндекс и Google...
18 07 2026 3:28:56
RFM — это аббревиатура слов Recency, Frequency, Money — новизна, частота, деньги. То есть считаем, как давно клиент купил товар в последний раз, сколько всего покупок он сделал и сколько денег принес нам за все время заказов....
17 07 2026 1:38:40
Как использовать автостратегии для экономии рекламного бюджета...
16 07 2026 13:56:59
Как с помощью Google Tag Manager отслеживать исходящие ссылки на сайте и загрузки файлов с него...
15 07 2026 14:41:24
Старт любых активностей в сфере email-маркетинга — разработка стратегии...
14 07 2026 3:32:27
Кейс выполнимой миссии — отправили рассылку по «холодной» базе и обошли запреты почтовых сервисов на изображения 18+...
13 07 2026 6:46:46
Почти 4,5 млрд людей имеют аккаунты в соцсетях. Огромная и активная аудитория. Но как среди нее найти своего клиента? Поможет таргетированная реклама....
12 07 2026 13:48:12
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
