Вообще, давать рекомендации по веб-дизайну — это дело неблагодарное, ведь на конечный успех бизнеса влияет множество трудно прогнозируемых факторов. Даже имея за плечами 1000+ успешных веб-проектов, сложно сказать, что работает лучше всего, и по какой причине.
Сегодняшняя статья содержит 25 подробных и научно обоснованных рекомендаций, которые помогут сделать сайт ближе, удобнее и привлекательнее для каждого пользователя.
Большинство рецептов подкреплено современными исследованиями и многолетним опытом веб-разработки. Здесь и простые идеи UX для новичков, и продвинутые рекомендации для профи.
Лучшие советы по UX и веб-дизайну 2018
Для вашего удобства мы разобьем сегодняшнюю статью на несколько разделов, посвященных тем или иным аспектам веб-сайта.
И начнем с самого главного — структуры шаблона.
Советы по структуре веб-страницы
Веб-сайты состоят из двух частей — контейнера и контента.
Контейнер, в свою очередь, можно условно разбить на структуру и стиль. Начнем с первого.
Перечисленные ниже советы касаются структуры и расположения элементов страниц.
1. Соблюдайте визуальную иерархию
Каждая страница имеет определенную визуальную иерархию.
Если вы не знакомы с концепцией, вот определение: «Визуальная иерархия определяется расположением, размером, цветом и контрастом элементов веб-страницы. Она определяет их относительную важность и порядок, в котором они обнаруживаются глазом».
Веб-дизайнеры используют визуальную иерархию, чтобы в первую очередь обратить внимание посетителей на важные элементы.
Для этого продумывается положение (выше или ниже), размеры (больше или меньше), визуальные эффекты (видео, изображения, значки) и контрастность (негативное пространство).
Сочетание этих приемов усиливает эффект.
Каждый увидит большое видео, расположенное высоко на странице в окружении контрастного негативного пространства.
С другой стороны, мало кто обратит внимание на крошечный серый текст на белом фоне, спрятанный рядом с футером сайта.
2. Используйте описательный заголовок с ключевыми словами
Заголовок в верхней части главной страницы является либо описательным, либо бесполезным.
Если второе, посетитель не сможет ответить на свой первый вопрос: «Я попал по адресу?»
Заголовок — это уникальная возможность использовать целевую ключевую фразу и указать релевантность. Но многие маркетологи пишут что-то умное или расплывчатое.
Правило номер раз: ясный заголовок лучше, чем умный.
Он просто должен объясняет деятельность компании и выставлять вас в хорошем свете.
3. Не размещайте все призывы к действию вверху страницы
Да, посетители проводят больше всего времени в районе хедера, но это не означает, что они подготовлены к совершению целевого действия после прочтения нескольких строк!
Многие конверсии происходят после полного ознакомления со страницей.
Когда эксперты Chartbeat проанализировали 25 миллионов веб-посещений по всему Интернету, выяснилось: наибольшее число конверсий происходит значительно ниже шапки.
Не стоит заострять внимание только на верхушке — оставьте СТА для середины и футера.
4. Разрабатывайте длинные страницы. Отвечайте на все вопросы.
Больше пикселей — больше пространства для ответов, борьбы с возражениями и социальных доказательств. Если посетитель не нашел ответ на важный вопрос, он продолжает скроллинг.
Успешная страница электронной коммерции — это симулятор диалога продавца с покупателем. Прерывание диалога на полуслове оставляет нерешенные вопросы и не приводит к конверсиям.
Правило номер два: ВСЕ короткие страницы обрывают процесс конверсии.
Доказательства в студию! Знаменитое маркетинговое исследование студии Crazy Egg вынудило агентство сделать домашнюю страницу в 20 раз длиннее. Результат — рост конверсий на 30%.
5. Демонстрируйте одну вещь за один раз
«Мне нравится чистый, современный дизайн», - вот что говорит большинство клиентов при обсуждении внешнего вида будущего сайта. Они часто называют Apple в качестве примера.
Посетители не любят захламленные страницы. Они любят негативное пространство.
Иными словами, сайт электронной коммерции должен стремиться к визуальной простоте.
В 2012 году Google провел масштабное исследование, изучая вкусы аудитории.
Еще тогда аналитики пришли к заключению, что традиционный веб-дизайн с панелью навигации по левую сторону, областью контента посередине и сайдбаром справа — это неэффективно.
Большинство юзеров тяготеют к простому и понятному одноколоночному шаблону.
Поэтому демонстрируйте один важный элемент на экране, сменяя фокус по мере прокрутки.
6. Придерживайтесь стандартного шаблона
Упомянутое исследование Google выявило, что «высокая прототипичность» коррелирует с воспринимаемой красотой шаблона. Другими словами, странно – не всегда красиво.
Сайт, который следует стандартам веб-дизайна, с большей вероятностью полюбится клиентам.
По результатам опросов, сайты, считающиеся самыми красивыми, имеют как высокую прототипичность, так и низкую визуальную сложность. Они clean & simple.
Хотите выделиться на фоне конкурентов — замечательно.
Экспериментируйте с логотипами и слоганами, но шаблон — не место для опытов.
Будьте традиционны и сдержанны во всем, что касается UX. Но что есть стандарт?
Авторитетное американское агентство Orbitmedia провело собственный анализ, чтобы выяснить особенности дизайна 50 ведущих маркетинговых сайтов.
Вот его результаты:
• Логотип компании в верхнем левом углу: 100%
• Контактные данные в верхнем правом углу: 44%
• Элементы навигации в хедере сайта: 88%
• Ценностное предложение вверху страницы: 80%
• Призыв к действию вверху страницы: 78%
• Слайдшоу на домашней странице: 32%
• Строка поиска в хедере: 54%
• Подписка по email в хедере: 24%
• Иконки социальных сетей в хедере: 26%
• Иконки социальных медиа в футере: 72%
• Отзывчивый дизайн: 68%
Таким образом, «стандартным» может считаться следующий дизайн сайта:
• Логотип вверху слева
• Горизонтальная навигация в шапке
• Поисковая строка вверху страницы
• Ссылки на соцсети в подвале сайта
• Наличие отзывчивого дизайна
7. Остерегайтесь «фальшивого дна»
Современные маркетинговые сайты, особенно продающие, строятся из блоков контента.
Они состоят из кирпичиков, где текст в одном, изображение — во втором, а вместе эти блоки образуют монолитную стену. Но обратите внимание на подвал этого здания.
Футер сайта обычно делают более темным, чтобы посетитель в процессе скроллинга понимал — приближается конец страницы. Если вы сделаете элемент в середине страницы темным, данный прием сработает против вас. Человек подумает, что достиг подвала, и остановится!
Эту ловушку веб-дизайна называют «фальшивым дном». Не попадитесь!
Чтобы обезопасить свой бизнес, используйте при разработке блоков контента незначительные вариации оттенков. Чем резче контраст, тем выше вероятность остановки.
Проверить активность пользователей на странице можно с помощью тепловой карты.
8. Избегайте каруселей и вращающихся слайдеров
Карусели и слайдеры изображений годами были популярны в веб-дизайне.
Но есть маленькая проблема: посетители при посадке могут видеть только первый слайд.
На Западе проведена масса исследований в области UX, доказавших их нецелесообразность.
Месседж, который вы пытаетесь донести на втором, третьем, четвертом слайде, скорее всего, игнорируются или даже не попадают на глаза потенциального клиента.
Почему же слайдеры до сих пор живут? Причина проста: когда в крупной компании пятнадцать отделов борются за верхушку сайта, приходится складывать их в одну карусель.
Это здорового для внутренней политики, не для пользователей.
Чем заменить слайдеры и карусели:
• Размещайте фотографии по одной, чтобы они всплывали при скроллинге
• Используйте избранные фотографии, оказывающие мощное влияние на людей
9. Откажитесь от вкладок и расширяющихся блоков
В 2018 году веб-дизайн продолжает отходить от вкладок и расширяющихся блоков контента.
Вы должны были слышать, что 76% посетителей сайтов относятся к «сканерам», то есть бегло просматривают контент и не вглядываются в расстановку запятых.
Правило номер три: скроллинг быстрее и проще, чем кликинг.
Вкладки и всевозможные расширяющиеся элементы с контентов оказываются крайне неудобными, малоприятными для вечно спешащей аудитории. Если у людей нет времени кликать по вкладкам, они не увидят ваш интересный контент и не конвертируются.
Советы по использованию изображений в веб-дизайне
Давайте поговорим о визуальных образах, через которые вы воздействуете на клиента.
10. Размещайте фотографии людей
Лица обладают уникальной психологической силой. С момента рождения человек постоянно наблюдает за лицами других. Их магнетическая сила полезна в веб-дизайне.
Фотографии реальных людей не только привлекают внимание, но и способствуют конверсии.
Исследование онлайн-маркетологов Basecamp показало невероятный скачок конверсий на 102%, когда на странице продаж объединили визуальную силу лиц и отзывов покупателей.
Убедитесь, что ваш веб-сайт не похож на заброшенный корабль, покинутый командой.
На протяжении многих лет мы обсуждаем вопросы маркетинга с разными фирмами.
И знаете, что удивляет? Крупные компании стараются походить на милое кафе у вашего дома, а маленькие компании стараются выглядеть большими и солидными. Странно, правда?
На самом деле бизнес в Сети просто должен выглядеть более личным и «человечным».
2. Не применяйте стоковые фотографии людей
Для бесплатных стоковых фотографий есть свое время, но мы бы советовали избегать одинаковых улыбающихся образов как огня. Они никогда не работают. Скорее, вызывают недоверие.
Компании соблазняются на стоковые фото, потому что это бесплатный продукт высокого качества. Однако такие же лица улыбаются с миллионов других сайтов — и это разрушает доверие.
Правило номер пять: аутентичность дороже блеска.
Аналитики компании NN Group установили: пользователи уделяют повышенное внимание фотографиям и другим изображениями, содержащим релевантную информацию, однако игнорируют стоковые картинки, взятые из общедоступных источников. Наймите фотографа!
12. Используйте лица для привлечения внимания
Вы наверняка замечали: лицо на экране, которое обращено в сторону формы (призыва к действию, ссылки), действует подобно стрелке. Вы тут же присматриваетесь, что там интересного.
Это известный психологический феномен. Когда американский исследователь UX Джеймс Бриз показывал людям дизайн веб-страницы с одним и тем же лицом, обращенным в разные стороны, тепловые карты подтвердили: юзеры смотрят в направлении взгляда героя.
Вспомните известный эксперимент с ребенком. Когда ребенок смотрит в камеру, посетители смотрят на ребенка. Когда ребенок смотрит вправо (в направлении заголовка контента), взгляды посетителей переключаются на этот самый контент. Туда и следует направить внимание!
13. Используйте стрелки для привлечения внимания
Лица могут направлять внимание, но это не единственный способ контролировать глаза ваших посетителей. Маленькие стрелки по-прежнему остаются эффективными.
В экспериментах по ай-трекингу CXL было обнаружено, что простая стрелка эффективно контролирует внимание посетителей сайта.
Если вы хотите, чтобы посетители смотрели на что-то, наведите на него яркую стрелку.
Я не уверен: этот совет смехотворно очевиден или глубоко проницателен?
14. Управляйте вниманием при помощи цветов
У каждого цвета есть эмоциональные коннотации (красный – срочный, синий – спокойный).
Цветовая схема сайта может управлять вниманием пользователей.
Исследование Eyequant, посвященное цвету кнопок, подтверждает силу контраста.
Но исследование показывает, что красочные кнопки не всегда эффективны.
Если вы хотите сделать кнопку максимально заметной:
• Контрастируйте цвет кнопки с фоном
• Контрастируйте цвет кнопки с текстом кнопки
• Контрастируйте цвет кнопки с соседними элементами
• Оставляйте вокруг кнопки негативное пространство
Эффект фон Ресторфф
В 1930-х годах немецкий ученый Хедвиг фон Ресторфф обнаружил, что при показе ряда из десяти предметов люди запоминают предметы, отличные от других. Это связано с тем, что затылочная доля мозга наиболее чувствительна к визуальным различиям, или «прерываниям рисунка».
Веб-маркетолог Парас Чопра провел эксперименты, показавшие: отличные цвета не просто запоминаются лучше, посетители сайта кликают их на целых 60% чаще!
Совет по веб-дизайну: Выберите «цвет действия» для всех ссылок и кнопок. Сделайте этот цвет отличным от цветов бренда, используемых во всем дизайне (это «пассивные цвета»).
Не применяйте цвет действия нигде, кроме как в приоритетных кликабельных элементах.
Советы по навигации и ссылкам в веб-дизайне
Настало время окунутся в мир навигации по сайту с его меню, кнопками и ссылками.
15. Навигация должна быть очевидной
Навигация – это всегда отличная возможность общаться. Посетители обычно начинают свой визит, просматривая заголовок. Все, включая ваши меню, скорее всего, будет на виду.
Но не все элементы страницы одинаково привлекают внимание. На рисунке вы можете видеть расположение четырех оптических зон в порядке их заметности (приоритетности).
Правила навигации по сайту отработаны на сотнях тысяч, даже миллионах веб-сайтов.
Придерживайтесь проверенной временем практики, и юзеры не заблудятся.
16. Смотрите, куда перенаправляете посетителей
Если посетитель приземлился на целевую страницу, ваша цель — конвертировать его в лида. Отправляя его по ссылкам читать блог, вы оставляете посетителя наедине с контентом, который менее ориентирован на конверсии. Посты в блоге, естественно, имеют больше отвлекающих факторов и возможностей бегства. Результат — низкие конверсии.
17. Будьте осторожны, ссылаясь на другие веб-сайты
Когда это уместно и помогает посетителям достигать целей, можете ссылаться на релевантный контент с чужих ресурсов. Эта практика способствует взаимному продвижению в поисковой выдаче.
Нередко в топ-3 тематических страниц по SEO и веб-разработке можно встретить публикации, которые ссылаются на десятки статей и исследований!
Но на целевых страницах и homepage нужно проявлять осторожность со ссылками.
Спросите себя: если ваша страница оптимизирована для преобразования посетителей в клиентов, действительно ли вы хотите, чтобы посетители нажимали на чужую ссылку?
Помогает ли это достичь целей вашего бизнеса? Вряд ли.
18. Не размещайте кнопки социальных сетей в хедере
Яркие кнопки социальных сетей в хедере сайта тоже не помогут конверсиям.
Представьте, что посетитель только начал осваиваться с новым ресурсом — и вдруг замечает знакомую иконку Facebook. Он вспоминает, что не проверял сообщения, переходит по ссылке и… никогда больше не возвращается на ваш великолепный homepage.
Ссылки на посторонние ресурсы в хедере — это неправильный способ интеграции.
Если вы ссылаетесь на социальную сеть, делайте это через футер.
Советы по наполнению сайта контентом
Итак, мы разобрались со структурой шаблона, визуальными эффектами и даже отдельными аспектами навигации в веб-дизайне 2018. Теперь пару слов о наполнении контентом.
19. Публикуйте информативные подзаголовки
Расплывчатые подзаголовки повсюду. Они большие и бесполезные, но за ними часто следуют маленькие, куда более полезные вещи. Странно, правда? Почему не наоборот?
Удостоверьтесь, что заголовки и подзаголовки вашего контента четкие и информативные.
Если они называются «продукты» или «услуги», поймут ли их новые посетители?
И вообще, любой длинный контент должен разбиваться толковыми подзаголовками.
Это хорошо для сканеров. Это хорошо для людей с нарушениями зрения.
Это также хорошо для SEO. Никогда не упускайте шанс угодить поисковикам!
Совет по веб-дизайну: подзаголовки могут быть совершенно ненужными. Если страница очень компактная и отлично воспринимается без них, удалите лишнее. Все гениальное просто.
20. Избегайте длинных абзацев и строк
Массивные кирпичи абзацев напоминают скучный учебник, а не продающий текст.
Надлежащая практика UX предполагает разбивку больших абзацев на более короткие, не превышающие 3-4 сроки в высоту. Кстати, длина тоже решает: специалисты рекомендуют выстраивать в одну строку не более 12 слов.
«Короткие абзацы люди читают, длинные абзацы просматривают, очень длинные — пропускают», - говорит Джейсон Фрайд, основатель и генеральный директор компании Basecamp.
21. Избегайте жаргона. Говорите ясно.
Правило номер шесть: чем проще читается текст, тем успешнее будет сайт.
Говорить нужно на языке предполагаемой целевой аудитории.
Если вы пишете контент для сайта частной клиники, четко разделяйте — будут его читать профессионалы здравоохранения или обычные пациенты. В целом, длинные предложения и малопонятные термины (жаргонизмы) затрудняют чтение. Это плохо.
«Будьте проще! Когнитивная беглость – показатель того, насколько легко мозг посетителя обрабатывает увиденное. Когда что-то трудно читать, мы подсознательно находим его более рискованным и / или трудоемким. Чтобы повысить конверсии, используйте короткий текст, простые шрифты и легко читаемый дизайн», - советует Роджер Дули, автор Brainfluence.
Контент, который работает на «малограмотных» юзерах, работает на всех.
Мы не о том, чтобы делать текст «тупым»; мы об использовании доступного языка.
Исследование Nielsen Norman Group показало, что уровень читабельности текста существенно повышает успешность веб-страницы в целом. Для всех посетителей.
|
Процент успеха оригинального контента |
Процент успеха упрощенного контента |
Малограмотные пользователи |
46% |
82% |
Квалифицированные пользователи |
68% |
93% |
Специалисты взяли заумный контент и продемонстрировали его двум разным аудиториям, оценив показатель конверсии. Затем переписали его простыми словами и повторили эксперимент.
Каково же было удивление бывалых специалистов UX, что даже юзеры со степенью доктора философии предпочитают читать контент, написанный на уровне восьмиклассника!
Теперь спросите себя: 100% посетителей понимают написанное?
22. Тщательно продумывайте порядок контента
При разработке веб-страницы помещайте наиболее важный материал в начале и конце.
Удержать внимание читателя труднее всего в середине любого списка. Когда посетители просматривают страницу, в кратковременной памяти останутся первый и последний пункты.
В психологии это называется эффектом порядкового номера (serial-position effect).
23. Отвечайте на главные вопросы посетителя
Люди приходят на сайт за ответами.
Ваша главная задача — предоставить это ответы.
Каждый оставшийся без внимания вопрос снижает шанс построить доверие.
Каждый вопрос без ответа склоняет посетителя нажать на Х.
Когда Джоэль Клеттке применил авторскую методику написания вопросов и написания ответов, он удвоил коэффициент конверсии на посадочных страницах Hubspot. Он брал интервью у клиентов, анализировал ответы, уделял приоритетное внимание их потребностям, и, в конце концов, использовал родной язык целевой аудитории в маркетинговом тексте. Умно!
Ключевые вопросы, которые стоит задать посетителям:
• Что заставило вас искать решение на сайте?
• Что еще вы пробовали и что вам не понравилось?
• Что удержало вас от совершения целевого действия?
• Что придало вам уверенности, чтобы попробовать?
• Что сделало X самым лучшим решением для вас?
• Что было для вас самым важным при оценке Х?
• Что дало вам взаимодействие с сайтом?
24. Используйте социальные доказательства
Человек склонен делать то, что делают люди вокруг.
Предъявляя социальные доказательства — способ действий, выбранный другими — вы укрепляете решимость. Цель маневра состоит в том, чтобы внушить пользователю: способ действия, принятый вне нашей компании — это не норма (не так, как все).
Для этого следует насытить посадочные страницы мощными доказательствами. В идеале, каждая маркетинговая претензия компании должна подкрепляться отзывами и т. д.
«Сколько раз вы кликали на сайты раскрученных маркетинговых агентств, победителей конкурсов и обладателей наград, закатывали глаза и возвращались в поиск? Нельзя доверять маркетологам, сулящим «создать нечто полностью уникальное» - доверяйте специалистам, которые создают то, что ожидают клиенты», - говорит Джен Саламандик из Kick Point.
Самый простой способ укрепить доверие – добавить отзывы клиентов.
Есть и другие социальные доказательства:
• Подтверждения от влиятельных лиц, отраслевых экспертов
• Качественные обзоры товаров (распаковки), сделанные клиентами
• Логотипы медиа, которые упоминают вашу продукцию или услуги
• Виджеты социальных сетей с указанием числа подписчиков
• Награды, сертификаты, знаки членства в ассоциациях и др.
Сколько доказательств публиковать? Много отзывов и наград на сайте не бывает.
Вы знаете, что на странице одного из самых успешных товаров Amazon 43% всего контента занимают социальные доказательства всевозможных видов?
Совет по веб-дизайну: Не составляйте страницы отзывов. Они, как правило – скромные источники трафика. Вместо этого добавьте отзывы на каждую целевую страницу.
25. Оптимизируйте формы подписки по электронной почте
Большинство сайтов преследуют цель расширить круг подписчиков, чтобы более эффективно взаимодействовать с аудиторией и продвигать свои товары (услуги). Но сделать это непросто.
Во-первых, призыв к действию для подписки должен:
• Стоять выше остальных элементов в визуальной иерархии
• Обещать пользователю конкретные преимущества подписки
• Подкрепляться социальными доказательствами
Во-вторых, дизайн самой веб-формы должен соответствовать четким принципам, которые подробно излагались нашими специалистами в предыдущих статьях.
Больше, чем просто красивый веб-дизайн
«Жизнь дизайнера — это борьба против уродства», - Массимо Виньелли.
Все любят красоту. Все любят крутые дизайнерские фишки.
А еще все любят критиковать.
Но посетителю нужна не только красота, ему нужна информация.
А владельцу сайта нужны реальные результаты.
Ниже приводятся два интересных исследования, которые пришли к одному выводу.
Опрос, проведенный Hubspot, обнаружил: типичный пользователь ценит понятный дизайн и доступность информации выше по сравнению с очаровательным веб-дизайном.
Что для вас является самым важным в веб-дизайне:
• Простота поиска нужной информации — 76%
• Красивый внешний вид сайта — 10%
• Передовой интерактивный опыт — 9%
• Остальные факторы — 5%
Второй опрос, организованный NN Group, показал: наиболее частой причиной отказа посетителей являются трудности с поиском необходимой информации.
Основные причины отказа посетителей сайта:
• Трудности с поиском — 72%
• Оформление веб-страницы — 9%
• Малоинформативный контент — 9%
• Отсутствие поддержки — 5%
• Другие причины — 5%
Мы любим красивый веб-дизайн, но этого недостаточно.
Акцентируйте внимание на разработке контента, а не только контейнера.
Веб-сайты должны быть красивыми. Они должны оказывать эмоциональное воздействие.
Но успех сайта — не только в красоте. Пользователь должен находить то, за чем пришел.
Это цель всех перечисленных советов веб-дизайна.
Это цель всех веб-сайтов.