Как улучшить 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 пикселей.
- Внутренние отступы в элементах на странице должны быть меньше, чем внешние.
- Цель таблицы — показать информацию наглядно. Поэтому убирайте лишние данные, разделители и цветовые выделения «для красоты».
Комментарии:
Программа покорения онлайн мира мобайла — самому и с ограниченными средствами на маркетинг...
04 10 2024 22:25:19
Как правильно оформлять свое портфолио, писать сопроводительные письма и делать посты в соцсетях. С помощью простой человеческой адекватности можно выигрывать у 90% других подрядчиков. Как это использовать? Читайте дальше!...
03 10 2024 6:13:46
Cafe case. Знакомство аудитории с только что открывшимся заведением: online + offline....
02 10 2024 6:45:33
Осторожно: очень страшно. Про теневой бан, гифки, цену клика, рекламный бюджет, ответы подписчикам, ошибки, наличие интернета подробно и в драматических деталях. Читайте в статье!...
01 10 2024 12:13:18
Сервисы для сбора поисковых фраз позволяют регулярно расширять семантическое ядро, обеспечивая сайту высокую видимость и увеличение трафика по тематическим запросам...
30 09 2024 4:55:57
Ссылка с сайта с высоким тИЦ уже не считается качественной. Хороший донор вычисляется по комплексу факторов. Большую часть работы придется делать вручную. Важно найти отличный сайт, с огромным количеством интересного контента, оцененного по достоинству читателями, и гармонично туда вписать свою статью со ссылкой...
29 09 2024 15:56:56
Разбираемся, как определить самые эффективные источники лидов....
28 09 2024 12:22:21
Зачем маркетологи и аналитики обращаются к языку программирования R в повседневной работе нужно и какая польза от программирования на R в интернет-маркетинге в интервью Алексея Селезнева...
27 09 2024 8:50:32
Обойдемся без теории, зато покажем пример SEO-аудита...
26 09 2024 17:56:31
При использовании похожих инструментов важно не переборщить с количеством рекламы...
25 09 2024 2:36:18
Субъективный рейтинг новых функций мессенджера от Head of Telegram Network в Netpeak....
24 09 2024 4:40:50
Детальная инструкция по настройке рекламы мобильного приложения в Яндекс.Директ....
23 09 2024 3:59:56
Как найти сетку сайтов конкурентов — рассказываем о популярных методах и секретных фишках. Бонус — инструкция по выявлению PBN конкурентов. Читать дальше!...
22 09 2024 16:35:52
Facebook раскрывает алгоритм формирования новостной ленты...
21 09 2024 19:20:57
Какой рекламный инструмент использовать, чтобы получить максимальный результат...
20 09 2024 22:13:24
Данные из контента страницы и основного заголовка h1 вместо метатега title. Что показало исследование Serpstat....
19 09 2024 23:33:14
В этом кейсе я не смогу похвастаться ROMI (возврат маркетинговых инвестиций), так как его герои — это новостные порталы. Основная задача — трафик. Но не просто трафик, а трафик по низкой стоимости....
18 09 2024 13:35:37
Владельцы айфонов в странах арабского мира легче расстаются с деньгами за приложения. Вот почему арабская локаль в App Store так привлекательна...
17 09 2024 19:48:21
21 апреля Google официально начнет учитывать совместимость с мобильными девайсами в качестве одного из факторов ранжирования сайта в мобильном поиске. Что это значит для владельцев сайтов и вебмастеров? Мы подготовили небольшой FAQ по теме для рубрики «SE...
16 09 2024 5:23:24
Бесплатные CMS помогают решить много задач без привлечения программиста или самостоятельного изучения кодов. Но у таких движков есть свои недостатки. Узнать больше!...
15 09 2024 1:30:38
Как Netpeak продвигал Cifrus.ru, один из ведущих магазинов цифровой техники в Москве....
14 09 2024 17:36:32
Чтобы обезопасить себя и своих клиентов, используйте технологию 3D Secure. Больше рекомендаций — в статье....
13 09 2024 16:43:28
Case по продвижению в Instagram. В любой непонятной ситуации — масштабируйте рекламные инструменты...
12 09 2024 18:32:51
«Rework» — одна из самых любимых книг нетпиковцев....
11 09 2024 20:54:27
Что делать, если вы специально или нет попали под фильтр: руководство от выявления до спасения...
10 09 2024 9:13:49
Счетчик Яндекс.Метрики: создание и установка кода, важные настройки....
09 09 2024 9:53:28
Проверьте свою логику, находчивость и креативность...
08 09 2024 0:43:22
Советы для фрилансеров и удаленных сотрудников: как строить рабочий процесс так, чтобы он вел к максимальной эффективности. О работе со временем, перерывами, необходимости выключать уведомления, статусе задач, празднованиях побед и организации рабочей среды...
07 09 2024 16:38:49
Клиенты, партнеры, потенциальные сотрудники — для каждой аудитории есть своя платформа. Какими нужно быть в соцсетях, чтобы вас заметили, читайте об опыте Reface....
06 09 2024 10:40:19
Обзор ресурса по подбору ключевых запросов www.SEMRUSH.com на Netpeak.ua...
05 09 2024 2:18:12
Мануал по созданию удобного планировщика повторяющихся действий....
04 09 2024 2:47:56
Сначала учитесь, а потом идите в бизнес и предпринимательство. Бизнес — это игра, в которую играют пару тысяч лет, и здесь не нужно придумывать велосипеды. Научитесь сначала просто ездить, потом уже будете думать про кастомы....
03 09 2024 16:51:27
У нас было 500 вечнозеленых постов и желание понять алгоритм ленты Facebook....
02 09 2024 8:26:24
Работать сейчас — не зазорно, а просто необходимо для страны...
01 09 2024 11:42:53
зеркальные нейроны и сознание. как они влияют на наше поведение?...
31 08 2024 17:37:48
Что делать, когда не получается заставить себя написать статью или кейс...
30 08 2024 4:15:32
Читайте, если не хотите «слить» бюджет. Определите конкретные цели и УТП, соберите аналитику, идите к специалисту без опыта работы в конкретной нише и другие рекомендации эксперта. Читайте подробнее в статье!...
29 08 2024 19:59:48
Тренинг по контекстной рекламе образовательных курсов в Google Ads, Яндекс.Директ, Target@mail...
28 08 2024 10:47:54
Как найти, нарастить и проанализировать ссылочную массу...
27 08 2024 17:50:22
Это не автобиографические романы, не бесплатные учебники и не подборка книжек, чтобы скачать в epub. Это интересная топ литература о маркетинге, которую мы хотим вам посоветовать....
26 08 2024 23:48:53
Оставить заявку на горячей линии МОЗ — это только вершина айсберга. Необходимо провести опрос среди сотрудников компании. И не один. А ещё подготовить несколько помещений для вакцинации и отдыха. Узнать больше!...
25 08 2024 16:34:36
Советы специалистам по контекстной рекламе. Технические сложности, которые возникают при работе с Google ***ytics: от ограничений интерфейса до ошибок настройки отслеживания и последующей недостоверности полученных данных, и решения для них...
24 08 2024 7:13:26
Подкаст — это аудиозапись в повествовательном, музыкальном, юмористическом формате. Создается с целью рекламы, увеличения потока посетителей на сайт и роста почитателей определенного продукта...
23 08 2024 14:57:20
Как вернуть на сайт как можно больше пользователей...
22 08 2024 18:37:24
Агентство Netpeak закрыло сделку по покупке агентства мобильного маркетинга Радомира Новковича RadASO....
21 08 2024 15:30:39
Как METRO Cash & Carry Украина нашла индивидуальный подход к 1 000 000 клиентов....
20 08 2024 16:21:10
Убираем человеческий фактор при сборе отчетов по контекстной рекламе...
19 08 2024 23:55:50
Как начать продавать и увеличить продажи, наращивая бесплатные ссылки...
18 08 2024 21:40:35
Если ваша фирма работает на предоставление услуг в медицине, следует учесть требования рекламных систем в интернете, чтобы объявления в с первого раза прошли модерацию...
17 08 2024 4:49:55
4 кейса с шагами, рекомендациями и результатами, которые помогут грамотно распределить средства на рекламу....
16 08 2024 3:16:31
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
