Советы для создания дизайна сайта: 25 советов по веб-дизайну и UX, которые помогут бизнесу в 2018 году

25 советов по веб-дизайну и UX, которые помогут бизнесу в 2018 году

Вообще, давать рекомендации по веб-дизайну — это дело неблагодарное, ведь на конечный успех бизнеса влияет множество трудно прогнозируемых факторов. Даже имея за плечами 1000+ успешных веб-проектов, сложно сказать, что работает лучше всего, и по какой причине.

Сегодняшняя статья содержит 25 подробных и научно обоснованных рекомендаций, которые помогут сделать сайт ближе, удобнее и привлекательнее для каждого пользователя.

Большинство рецептов подкреплено современными исследованиями и многолетним опытом веб-разработки. Здесь и простые идеи UX для новичков, и продвинутые рекомендации для профи.

Для вашего удобства мы разобьем сегодняшнюю статью на несколько разделов, посвященных тем или иным аспектам веб-сайта.

И начнем с самого главного — структуры шаблона.

Советы по структуре веб-страницы

Веб-сайты состоят из двух частей — контейнера и контента.

Контейнер, в свою очередь, можно условно разбить на структуру и стиль. Начнем с первого.

Перечисленные ниже советы касаются структуры и расположения элементов страниц.

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%

Мы любим красивый веб-дизайн, но этого недостаточно.

Акцентируйте внимание на разработке контента, а не только контейнера.

Веб-сайты должны быть красивыми. Они должны оказывать эмоциональное воздействие.

Но успех сайта — не только в красоте. Пользователь должен находить то, за чем пришел.

Это цель всех перечисленных советов веб-дизайна.

Это цель всех веб-сайтов.

13 основных правил веб-дизайна, которые полезно знать заказчику

Что такое современный сайт? Удобная навигация, красивые картинки, графика и видео и… много других опций, которые подчиняются определенным правилам. Сегодня расскажем об основных правилах веб-дизайна, которые актуальны сейчас. Проверьте, соответствует ли им ваш сайт!

Сразу оговоримся: сегодня расскажем об основных правилах, этакой библии каждого веб-дизайнера. Есть и более тонкие нюансы — о них речь пойдет в следующих статьях. Кстати, если вам попался специалист, который утверждает, что не признает никаких правил и любит креативить — сто раз подумайте, а еще лучше — посмотрите его портфолио и оцените работы лично. Представьте, что вам попался каменщик, который отвергает строительные нормы и кладет кирпичи как попало — доверите вы ему свой дом? Вот то-то же. Итак, 13 главных правил хорошего веб-дизайна перед вами.

Правило 1. Хорошая скорость загрузки страницы

Казалось бы, причем здесь веб-дизайн? Объясняем. Многие специалисты так увлекаются графическими экспериментами, что не обращают внимания на скорость загрузки. А она, если напичкать сайт виджетами, анимацией и видео, неизбежно будет падать. Если сайт будет грузиться медленно — не у каждого посетителя хватит терпения ждать, половина просто покинет ваш ресурс, не успев ничего толком посмотреть. С другой стороны, без графических эффектов тоже никуда. Скучную серую простыню текста никто читать не будет — если у вас, конечно, не “Википедия”.

Подумайте: что вам важнее: визуализация или скорость. Мы советуем искать золотую середину: графика, разумеется, нужна, но попросите веб-дизайнера действовать без фанатизма. Ну и делайте сайт на хорошем движке: от него тоже многое зависит.

Правило 2. Юзабилити, или удобство использования сайта

Ваш сайт может быть современным и красивым, но какой в этом толк, если он безнадежно, отчаянно неудобен? Под юзабилити подразумевается удобство ресурса для посетителя. Например, заходит он на главную страницу и видит краткое описание: ага, это интернет-магазин спортивных товаров, все понятно. Хочет посмотреть меню, там все разложено по полочкам: вот каталог, вот условия заказа, здесь сведения о доставке, а тут контактная информация. Идет в каталог, видит категории и подкатегории товаров. Если на сайте действует правило трех кликов (добраться до нужного товара пользователь должен не более чем за три клика. Если действий предполагается больше — юзабилити хромает, надо исправлять) — замечательно.

Идем дальше. На сайте есть окно поиска — прекрасно, человек может найти нужный товар в один момент. Имеется большая кнопка корзины, как положено, в правом верхнем углу, видимая с каждой страницы? Замечательно: посетителю не придется возвращаться на главную и искать корзину среди иконок и пунктов меню. Ну и так далее.

Если всего этого нет — сайт неудобен, посетитель с большой вероятностью покинет его и будет искать другой, в котором позаботились о юзабилити. Никто не будет сидеть и разбираться, где же на сайте находится раздел “Распродажи” — проще закрыть вкладку и вернуться в поисковик. Конкуренты скажут вам за это спасибо, а вот бюджет на продвижение помашет ручкой и скажут “прощай”: считай, деньги улетели в трубу. Да и конверсия падает: посетитель ушел и не успел совершить никаких целевых действий.

Правило 3. Читаемые шрифты

Давно миновала эпоха, когда чем заковыристее были шрифты — тем круче считалось. Случалось, что буквы были такими затейливыми, что слова просто не читались. А на стандартные шрифты накладывались эффекты и цвета. Сейчас тренды сменились: чем шрифты проще, тем лучше. Посмотрите, как оформляют сайты крупные компании и интернет-магазины: они используют крупные читаемые шрифты, которые разберет даже младенец. Еще одно правило: на странице должно быть не более 2-3 разных шрифтов. Если больше — это граничит с аляпистостью и безвкусицей. Допустимо использовать в логотипе один шрифт, оффере — второй, в тексте — третий, и достаточно.

Еще лучше разработать фирменный стиль, в который будут входить определенный набор корпоративных шрифтов. Как правило, при разработке заказчику выдается брендбук, в котором прописаны эти шрифты. Это очень удобно для дальнейшей работы с дизайнерами, типографией, которая изготовит вам визитки, буклеты и другие промо-материалы. Согласно условиям договора, они будут обязаны использовать в работе только эти шрифты — без всякой самодеятельности. Впоследствии, если вы поменяете веб-дизайнера, просто дадите брендбук другому исполнителю — он все поймет.

Правило 4. Умеренная цветовая палитра

Тут тоже действует правило: не более 3 цветов на странице. Допускаются оттенки и полутона, но не более. Черный, красный, желтый и зеленый — это уже перебор: пожалейте бедного посетителя. За буйством красок он просто не заметит полезную информацию или будет продираться сквозь ваши светофоры с лупой в руках. И снова будем советовать фирменный стиль: помимо шрифтов, вам подберут еще и корпоративные цвета, которые в дальнейшем вы будете использовать для любых промо-материалов, в том числе и оформлении сайта, паблика в соцсетях, ютуб-канала и других.

Правило 5. Современный фон

Еще один привет из девяностых: сложносочиненный фон, или подложка, для сайта. До сих пор используется в среде начинающих веб-дизайнеров, на бюджетных сайтах доменов второго и третьего уровня, очень активно — в “Живом журнале”. Наивно думать, что если вы продаете украшения — фоном должны идти золотые россыпи, если продукты — груды еды. Все это слишком очевидно и банально. Нет, картинки в тему всегда актуальны, но для фона лучше выбрать что-то необычное, неизбитое. Чистые тона и градиенты, трехмерные изображения, виртуальная реальность — вот что модно сейчас.

Правило 6. Единый стиль

Шрифты — строгие, цвета — веселенькие, а картинки надерганы из разных стоков по принципу “пусть будет, да побольше”? Одна форма заказа горизонтальная, другая — вертикальная, и в каждой разные шрифты? Стоп, так не пойдет: продающий дизайн предполагает единство стиля. Как сказал классик, “в одну телегу впрячь не можно коня и трепетную лань!”

Правило 7. Золотое сечение

Это альфа и омега любого дизайна — правило золотого сечения дает идеальные пропорции, дизайн выглядит гармонично и естественно. Золотое сечение выглядит визуально вот так:

Если не заморачиваться с формулой, пропорции золотого сечения отдельных элементов составляют 3/2, или 5/3, и так далее. По этому принципу делаются основные элементы сайта. Например, когда при разработке лендинга нужно разместить на странице несколько блоков, золотое сечение приходит на помощь. Идеальная пропорция ширины каждого блока выглядит примерно так:

То же самое касается типографики: колонок текста, размеров заголовка по отношению к шрифту основного текста, размера рекламного баннера и текста под ним и так далее. Золотая спираль может быть как вертикальной, так и горизонтальной.

Правило 8. Правило третей

Еще одно незыблемое правило дизайна, которое применяется в разметке страниц и наполнении их контентом. Каждая страница делится на три одинаковые части по горизонтали и вертикали. На месте пересечения этих частей мысленно поставьте точки — это и будут ключевые места, куда чаще всего падает взгляд посетителя.

Следовательно, рядом с этими точками нужно размещать самую важную информацию — чтобы наверняка увидели. Это может быть кнопка с call to action — призывом к действию, или форма заказа. Считается, что самая “активная” точка — левый верхний угол. Присмотритесь: именно там на сайтах по традиции располагается логотип. Совпадение? Не думаю!

Правило 9. Знание эффекта “баннерной слепоты”

Наверняка вы слышали об этом понятии. Люди так привыкли к обилию рекламы, что баннеры и прочие рекламные блоки просто игнорируют — сразу ищут глазами актуальную информацию. Скажем, если посетитель зайдет на страницу карточки товара, он сразу найдет глазами самое главное — цену, фото, описание. Если даже эта информация окажется в плотном кольце рекламы — ее не заметят или отмахнутся, как от назойливой мухи.

Согласно исследованию Якоба Нильсена, мы просматриваем информацию примерно вот так, как на этой картинке. Красно-желтые пятна — то, что привлекает внимание посетителей. Зеленым выделены рекламные блоки — как видите, на них совсем не обращают внимания.

Что же делать? Хороший веб-дизайнер знает несколько правил, как бороться с баннерной слепотой, и обязательно порекомендует их заказчику. Впрочем, прочитав эту статью, вы и сами будете в курсе. Итак, правила:

• размещать рекламу чем выше — тем лучше. Огромный баннер на главной с информацией о скидках точно не пройдет незамеченным;
• играть на контрасте: выделять рекламу ярким цветом, делать контрастные кнопки призыва к действию. Главное — чтобы глаз зацепился;
• придумывать креативные (но не желтые!) заголовки, привлекающие внимание;
• использовать фото человека, который смотрит в направлении рекламного баннера. Это работает!

Правило 10. Кнопка “вверх”

Казалось бы, такая мелочь, а как важно! Представьте, что у вас интернет-магазин с огромным каталогом товаров или крупный новостной портал — чтобы пролистать сайт вниз, нужно достаточно долго скроллить (крутить колесиком мыши) вниз. А как потом вернуться назад? Многие веб-дизайнеры забывают об этом, заставляя посетителей отматывать страницы вверх. А ведь достаточно всего прикрутить кнопку “Вверх” или графическое изображение ^ — и все сразу понятно. Так вы экономите время пользователя и делаете сайт более удобным.

Правило 11. Новая ссылка — та же вкладка

Любая внутренняя ссылка с вашего сайта (баннер на главной, ведущий на страницу распродаж, статья в блоге, которая отсылает посетителя в карточку товара, видео на “Ютубе”, иконка соцсетей, в которых представлен ваш ресурс — что угодно) должна открываться в том же окне. Много копий сломалось на эту тему: пользователям удобнее, когда ссылка открывается в новом окне, особенно когда ссылок много. Но в этом случае они могут не нажать кнопку “назад” и не вернуться на самую первую страницу, а то и забыть, о чем там вообще говорилось. А это значит, что они могут покинуть ваш сайт, не досмотрев важную информацию. Поэтому мы советуем внутренние ссылки открывать во внутренних же окнах, а внешние — в новых. Например, если ссылки ведут на дружественный сайт — пожалуйста, пусть открывается в новом. Если направляют на свой же паблик в соцсети — тоже без проблем.

Правило 12. Больше визуализации!

Если на сайте и так много информации, облегчите жизнь пользователям: там, где можно применять иконки или анимацию — применяйте. Например, уже повсеместно используются кнопки соцсетей, корзина для складывания товара, значок лупы — для поиска, и так далее.

Наш совет: используйте понятные распространенные картинки и иконки, чтобы не запутать посетителя. Особенно это касается сайтов, нацеленных на продажи. Здесь чем проще, тем лучше: процесс покупки должен быть как можно легче, чтобы не отбить охоту вообще что-то покупать.

Правило 13. Адаптивная верстка

И последнее: веб-дизайнер должен уметь делать адаптивную верстку. Не просто мобильную версию — а именно адаптивную, которая одинаково хорошо отображается со всех устройств. Все больше людей заходят на сайты со смартфонов и ноутбуков — важно, чтобы сайт отлично загружался и читался. Также нужно обратить внимание на то, что один и тот же ресурс может по-разному отображаться даже на разных браузерах. Поэтому нужно проверять макет будущего сайта на каждом браузере и устройстве.

И это еще только начало! Веб-дизайн — целая наука, которой мы овладели, смеем надеяться, на твердую пятерку. В этом блоге мы постараемся рассказать вам обо всех тонкостях нашей работы. Давайте общаться!

9 Руководящие принципы и практические рекомендации для исключительного веб-дизайна и удобства использования

Когда дело доходит до дизайна или редизайна веб-сайта, легко зациклиться на эстетике. Этот оттенок синего подходит? Логотип должен быть справа на экране или слева? Что, если мы поместим гигантский анимированный GIF в середину страницы?

Однако в мире, где у людей есть более 1,8 миллиарда веб-сайтов, на которые они потенциально могут попасть, вам нужно убедиться, что ваш сайт — это не просто красивое лицо. Он должен быть разработан с учетом удобства использования, простоты использования вашего веб-сайта и пользовательский опыт (UX) , насколько приятно взаимодействовать с вашим сайтом.

Теперь вы можете потратить годы на изучение всех тонкостей этих дисциплин. Но чтобы дать вам отправную точку, мы собрали список основных рекомендаций и лучших практик, которые вы можете применить к своему следующему редизайну веб-сайта. или запуск сайта. Затем мы рассмотрим 10 функций, которые вам понадобятся на вашем сайте, чтобы применить эти рекомендации на практике. Давайте углубимся.

1. Руководство по дизайну веб-сайта

2. Лучшие практики веб-дизайна

3. Требования к дизайну веб-сайта

Руководство по дизайну веб-сайта

1. Простота
2. Визуальная иерархия
3. Мореходность
4. Консистенция
5. Отзывчивость
6. Доступность
7. Традиционность
8. Достоверность
9. Ориентированность на пользователя

1.

Простота

Хотя внешний вид вашего веб-сайта, безусловно, важен, большинство людей приходят на ваш сайт не для того, чтобы оценить его привлекательный дизайн. Они хотят выполнить какое-то действие или найти определенную информацию.

Таким образом, ненужные элементы дизайна (т. е. те, которые не служат никакой функциональной цели) будут только подавлять и мешать посетителям выполнять то, что они пытаются выполнить.

С точки зрения юзабилити и UX простота — ваш лучший друг. Если у вас есть все необходимые элементы страницы, сложно сделать слишком простым. Вы можете использовать этот принцип в различных формах, таких как:

• Цвета: По сути, не используйте много. В Handbook of Computer-Human Interaction рекомендуется использовать максимум пять (плюс-минус два) различных цветов в дизайне.
• Гарнитуры: Выбранные вами гарнитуры должны быть хорошо разборчивыми, поэтому ничего слишком вычурного и минимального шрифта, если таковой имеется. Что касается цвета текста, опять же, держите его минимальным и всегда следите за тем, чтобы он контрастировал с цветом фона. Общая рекомендация — использовать максимум три разных шрифта максимум трех разных размеров.
• Графика: Используйте графику только в том случае, если она помогает пользователю выполнить задачу или выполнить определенную функцию (не добавляйте графику волей-неволей).

Вот отличный пример простого, но эффективного дизайна домашней страницы от HERoines Inc:

Источник изображения

2. Визуальная иерархия

Тесно связанная с принципом простоты, визуальная иерархия означает размещение и организацию элементов веб-сайта таким образом, чтобы посетители естественно тяготеть к наиболее важным элементам в первую очередь.

Помните, когда дело доходит до оптимизации удобства использования и взаимодействия с пользователем, цель состоит в том, чтобы побудить посетителей выполнить желаемое действие, но таким образом, чтобы это было естественно и приятно. Настраивая положение, цвет или размер определенных элементов, вы можете структурировать свой сайт таким образом, чтобы зрители в первую очередь обращали внимание на эти элементы.

В приведенном ниже примере из Spotify вы можете видеть, что основной заголовок «Получите 3 месяца Premium бесплатно» находится на вершине визуальной иерархии с его размером и позицией на странице. Это привлекает ваше внимание к их миссии прежде всего. Далее следует призыв к действию «Получите 3 месяца бесплатно». Пользователи могут щелкнуть этот CTA или просмотреть пункты меню выше, чтобы найти дополнительные действия.

Источник изображения

3. Навигация

Планирование интуитивно понятной навигации на вашем сайте имеет решающее значение, чтобы помочь посетителям найти то, что они ищут. В идеале посетитель должен попасть на ваш сайт, и ему не нужно долго думать о том, куда щелкнуть дальше. Перемещение из пункта А в пункт Б должно быть максимально плавным.

Вот несколько советов по оптимизации навигации по вашему сайту:

• Старайтесь, чтобы структура вашей основной навигации была простой (и находилась в верхней части страницы).
• Включить навигацию в нижний колонтитул вашего сайта.
• Рассмотрите возможность использования хлебных крошек на каждой странице (кроме главной страницы), чтобы пользователи запоминали свой путь навигации.
• Включите панель поиска в верхней части сайта, чтобы посетители могли выполнять поиск по ключевым словам.
• Не предлагайте слишком много вариантов навигации на странице. Опять простота!
• Включите ссылки в копию страницы и четко укажите, куда ведут эти ссылки.
• Не заставляйте пользователей копать слишком глубоко. Попробуйте создать базовую каркасную карту всех страниц вашего сайта, расположенных в виде пирамиды: ваша домашняя страница находится вверху, и каждая связанная страница с предыдущей образует следующий слой. В большинстве случаев лучше держать карту не глубже трех уровней. Возьмем, к примеру, карту сайта HubSpot.

Источник изображения

Еще одна подсказка: как только вы определились с основной (верхней) навигацией вашего сайта, держите ее последовательной. Метки и расположение вашей навигации должны оставаться одинаковыми на каждой странице.

Это хорошо подводит нас к следующему принципу…

4. Согласованность

В дополнение к единообразию навигации общий внешний вид вашего сайта должен быть одинаковым на всех его страницах. Фон, цветовые схемы, шрифты и даже тон вашего письма — все это области, где согласованность оказывает положительное влияние на удобство использования и UX.

Это не значит, что каждая страница должна иметь один и тот же макет. Вместо этого создайте разные макеты для определенных типов страниц (например, целевых страниц, информационных страниц и т. д.). Последовательно используя эти макеты, вы облегчите посетителям понимание того, какой тип информации они могут найти на данной странице.

В приведенном ниже примере вы можете видеть, что Airbnb использует один и тот же макет для всех своих страниц «Помощь», что является обычной практикой. Представьте, что было бы с точки зрения посетителя, если бы каждая страница «Помощь» имела свой собственный уникальный макет. Вероятно, многие пожали бы плечами.

Источник изображения

5. Оперативность

По данным Statista, 48% глобальных просмотров страниц были совершены с мобильных устройств, таких как смартфоны и планшеты. И согласно нашему исследованию, 93% людей покинули веб-сайт, потому что он не отображался должным образом на их устройстве.

Вывод: чтобы обеспечить действительно хорошее взаимодействие с пользователем, ваш сайт должен быть совместим со многими различными устройствами, которые используют ваши посетители. В мире технологий это называется адаптивным дизайном.

Адаптивный дизайн означает инвестиции в очень гибкую структуру веб-сайта. На адаптивном сайте содержимое автоматически изменяется и перетасовывается в соответствии с размерами любого устройства, которое использует посетитель. Этого можно добиться с помощью адаптированных для мобильных устройств HTML-шаблонов или путем создания специального мобильного сайта.

В конечном счете, гораздо важнее обеспечить удобство работы на разных устройствах, чем выглядеть одинаково на этих устройствах.

Источник изображения

Помимо удобства для мобильных устройств, стоит проверить совместимость вашего веб-сайта с разными браузерами. По всей вероятности, вы просматривали свой сайт только в одном веб-браузере, будь то Google Chrome, Safari, Firefox или что-то еще.

Сейчас самое время открыть ваши страницы в каждом из этих браузеров и оценить, как выглядят ваши элементы. В идеале особой разницы в представлении не будет, но нельзя знать наверняка, пока не увидишь сам.

6. Доступность

Цель веб-доступности — сделать веб-сайт доступным для всех, включая людей с ограниченными возможностями или ограничениями, которые влияют на их работу в Интернете. Как дизайнер веб-сайта, вы должны думать об этих пользователях в своем плане UX.

Как и отзывчивость, доступность распространяется на весь сайт: структуру, формат страницы, визуальные элементы, а также письменный и визуальный контент. Руководство по обеспечению доступности веб-контента (WCAG), разработанное Инициативой по обеспечению доступности веб-сайтов и Консорциумом всемирной паутины, устанавливает руководящие принципы доступности веб-сайтов. В широком смысле эти рекомендации гласят, что веб-сайты должны быть:

• Воспринимаемый: Посетители осведомлены о содержании вашего сайта.
• Действующий: Функциональность вашего веб-сайта должна быть доступна по-разному.
• Понятно: Весь контент и оповещения понятны.
• Надежный: Ваш веб-сайт можно использовать с различными вспомогательными технологиями, устройствами и браузерами.

Для более глубокого изучения этой темы см. наше Полное руководство по веб-доступности.

7. Традиционность

Большой проблемой в веб-дизайне является баланс между оригинальностью и вашими ожиданиями. Большинство из нас являются опытными пользователями Интернета, и есть определенные соглашения, к которым мы привыкли со временем. Такие соглашения включают:

• Размещение основной навигации вверху (или слева) страницы.
• Размещение логотипа в левом верхнем углу (или в центре) страницы.
• Сделать логотип кликабельным, чтобы посетитель всегда возвращался на главную страницу.
• Наличие ссылок и кнопок, которые меняют цвет/вид при наведении на них курсора.
• Использование значка корзины покупок на сайте электронной коммерции. На значке также есть значок с номером, обозначающий количество товаров в корзине.
• Обеспечение наличия кнопок на ползунках изображений, которые пользователи могут нажимать для поворота слайдов вручную.

Хотя некоторые могут отказаться от них ради уникальности, это ошибка. Есть еще много места для творчества в рамках ограничений веб-конвенциональности.

Кратко рассмотрим еще одну область дизайна — архитектуру. Строительные нормы и правила введены в действие, чтобы люди могли легко и безопасно заселять помещения. Архитектор не жалуется на эти нормы и не нарушает их, потому что, помимо юридических последствий, они обеспечивают безопасность и комфорт гостей. Неважно, насколько ослепительно выглядит здание — если вы споткнетесь о неровную лестницу или не сможете выбраться из огня, вы можете предпочесть остаться снаружи.

Точно так же вы можете создавать незабываемые впечатления, оправдывая ожидания пользователей. Если вы нарушите ожидания пользователей, они могут чувствовать себя неловко или даже разочарованы вашим сайтом.

8. Достоверность

Соблюдение веб-конвенций придает вашему сайту авторитет. Другими словами, это повышает уровень доверия к вашему сайту. И если вы стремитесь создать сайт, обеспечивающий наилучшее взаимодействие с пользователем, доверие имеет большое значение.

Один из лучших способов повысить доверие к себе — четко и честно рассказать о продукте или услуге, которую вы продаете. Не заставляйте посетителей копаться в десятках страниц, чтобы найти то, чем вы занимаетесь. Будьте прямолинейны на своей домашней странице и посвятите немного недвижимости объяснению ценности того, что вы делаете.

Еще один совет для доверия: создайте страницу с ценами, ссылку на которую также можно найти на главной странице. Вместо того, чтобы заставлять людей связываться с вами, чтобы узнать больше о ценах, четко укажите свои цены на своем сайте. Это делает ваш бизнес более надежным и законным.

Вот пример эффективной страницы ценообразования с веб-сайта Box:

Источник изображения

9. Ориентированность на пользователя

В конце концов, удобство использования и взаимодействие с пользователем зависят от предпочтений конечных пользователей. . В конце концов, если вы не делаете дизайн для них, то для кого вы делаете дизайн?

Таким образом, хотя принципы, описанные в этом списке, являются отличной отправной точкой, последним ключом к улучшению дизайна вашего сайта является проведение тестирования пользователями, сбор отзывов и внесение изменений на основе того, что вы узнали.

И не утруждайте себя тестированием юзабилити. Вы уже вложили много времени в свой дизайн, что привносит в уравнение ваши собственные предубеждения. Получите тестировщиков, которые никогда раньше не видели ваш сайт, как и любого посетителя, впервые зашедшего на него.

Вот несколько инструментов пользовательского тестирования, которые помогут вам начать работу:

• Website Grader : Наш бесплатный инструмент оценивает ваш сайт на основе нескольких факторов: мобильных устройств, дизайна, производительности, SEO и безопасности. Затем он предлагает индивидуальные предложения по улучшению. Вы можете узнать больше о Website Grader в нашем специальном блоге.
• Crazy Egg : Отслеживайте несколько доменов под одной учетной записью и получайте информацию о производительности вашего сайта, используя четыре различных интеллектуальных инструмента — тепловую карту, карту прокрутки, наложение и конфетти.
• Loop11: используйте этот инструмент для простого создания тестов удобства использования, даже если у вас нет опыта работы с HTML.
• Пользователь пьян : Заплатите Ричарду Литтауэру, чтобы он напился и просмотрел ваш сайт. Не верите мне? Мы попробовали.

Еще больше полезных опций см. в нашем списке лучших инструментов пользовательского тестирования.

Надеемся, что эти рекомендации будут полезны для информирования о структуре ваших веб-страниц и веб-сайта в целом. Но как применить эти рекомендации на практике? Давайте рассмотрим некоторые практические рекомендации, которым вы можете следовать в процессе проектирования.

Лучшие практики веб-дизайна

1. Выберите типографику, которую легко читать и просматривать.
2. Выберите цветовую схему, которая подходит вашему бренду.
3. Используйте пробелы для разделения текста и других элементов.
4. Используйте текстуру, чтобы добавить индивидуальности и глубины.
5. Добавьте изображения, чтобы заинтересовать и проинформировать читателей.
6. Упростите навигацию.
7. Сделайте ваши призывы к действию выделяющимися.
8. Оптимизация для мобильных устройств.
9. Ограничить параметры, предоставляемые пользователям.

1. Выберите типографику, которую легко читать и просматривать.

Типографика относится к тому, как шрифт — то есть буквы и символы — расположен и представлен на странице. Поскольку типографика веб-сайта влияет не только на то, как мы читаем, но и на то, как мы относимся к тексту на веб-странице, важно тщательно выбирать.

В идеале вам нужен шрифт:

• легко читаемый
• легко снимается
• доступно для всех пользователей
• читаемость на разных устройствах и размерах экрана

Вы также хотите, чтобы он соответствовал внешнему виду вашего бренда. Например, роскошный модный бренд Burberry впервые за 20 лет обновил свой логотип в 2018 году. Он заменил старый шрифт с засечками на жирный шрифт без засечек, заглавные буквы, и отказался от эмблемы рыцаря. В результате получился более простой и современный логотип, который легче читать на любом экране, а также он отражает изменения в компании, которые делают ее более прозрачной и привлекательной для молодого поколения.

Источник изображения

2. Выберите цветовую схему, подходящую для вашего бренда.

Как и типографика, цвет может влиять не только на то, как мы понимаем контент и взаимодействуем с ним, но и на то, как мы к нему относимся. Поэтому ваша цветовая схема должна быть отмечена теми же галочками, что и типографика вашего сайта. Он должен:

• усиливать индивидуальность вашего бренда
• сделайте ваш сайт удобным для чтения и навигации
• вызвать эмоции
• хорошо выглядеть

Buzzfeed, например, использует желтый и красный основные цвета, чтобы привлечь внимание пользователей и заинтересовать их контентом. Он резервирует использование основного синего цвета, который ассоциируется с доверием, исключительно для ссылок и кнопок CTA. Обе эмоции идеально подходят для медиа-сайта.

Источник изображения

3. Используйте пробелы для разделения текста и других элементов.

Пробелы относятся к отрицательным областям в любой композиции. Пустое пространство предоставляет пользователям визуальные перерывы при обработке дизайна или контента веб-сайта, что не только эстетически приятно. Сводя к минимуму отвлекающие факторы, пустое пространство облегчает пользователям концентрацию, обработку информации и понимание того, что важно.

Это означает, что вы можете использовать пробелы, чтобы избежать информационной перегрузки или паралича анализа, а также выделить важные элементы на странице. Это может помочь убедить пользователей совершить определенное действие, например подписаться на информационный бюллетень, купить вашу последнюю коллекцию и т. д.

Например, Eb & Flow Yoga Studio использует пробелы, чтобы подтолкнуть пользователей к определенному действию: записаться на трехнедельные занятия. Обратите внимание, что пробел не означает отсутствие цвета или изображения. Вместо этого это означает, что каждый элемент на странице расположен стратегически, с большим пространством между ними, чтобы не перегружать и не сбивать с толку посетителей.

Источник изображения

4. Используйте текстуру, чтобы добавить индивидуальности и глубины.

Напоминающие трехмерную тактильную поверхность, веб-текстуры призваны воспроизвести физическое ощущение осязания другим ощущением — зрением. Это отличная дизайнерская альтернатива сплошному цветному фону, особенно если вы хотите добавить индивидуальности и глубины своему сайту.

Взгляните на текстуру на главной странице ресторана Mony’s Tacos в Санта-Барбаре ниже. Это похоже на нарисованное мелом на доске, не так ли? Не знаю, как вы, но я почти чувствую мел на пальцах, просто глядя на него. Это идеальный вид для ресторана, который стремится стать предпочтительным выбором Funk Zone в Калифорнии для мексиканских деликатесов.

Источник изображения

5. Добавьте изображения, чтобы заинтересовать и проинформировать читателей.

В дизайне веб-сайтов очень важно соблюдать баланс между текстом и изображениями. Включение визуальных эффектов может сделать ваш контент более информативным, привлекательным и запоминающимся. Вы наверняка слышали статистику, что люди запоминают только 20% прочитанного, но 80% того, что видят? Хотя точные проценты обсуждаются, основная идея — нет. Некоторым людям легче усваивать и обрабатывать информацию визуально.

Вот уникальный пример разделения текста изображениями с веб-сайта косметической компании. Это показывает, насколько бесконечны возможности включения изображений в дизайн вашего сайта.

Источник изображения

6. Упростите навигацию.

Навигация — один из важнейших элементов дизайна веб-сайта. Это влияет на то, переходят ли посетители на вашу домашнюю страницу и просматривают ли ее, или нажимают кнопку «Назад». Вот почему важно сделать его максимально простым.

Многие веб-сайты выбирают горизонтальную панель навигации. Этот стиль навигации перечисляет основные страницы рядом и помещается в заголовок веб-сайта.

В качестве примера возьмем панель навигации на Blavity. Представленные разделы включают три категории контента — «Новости», «Отзывы» и «Образ жизни», а также ссылки на их страницу отправки и страницу регистрации. Это обеспечивает посетителям легкий доступ к страницам, которые они, вероятно, ищут. Другие элементы навигации размещены в раскрывающемся меню с надписью «Дополнительно», поэтому их по-прежнему легко найти, но они не загромождают навигацию верхнего уровня. Наконец, панель навигации является липкой, поэтому посетителям не придется прокручивать страницу вверх и вниз, чтобы просмотреть сайт.

Источник изображения

7. Выделите свои призывы к действию.

CTA — это элементы на веб-странице, в рекламе или другом контенте, побуждающие аудиторию к действию. Призыв к действию может заключаться в том, чтобы зарегистрироваться, подписаться, начать бесплатную пробную версию или узнать больше, среди многих других.

Вы хотите, чтобы CTA отображались в дизайне вашего веб-сайта. Чтобы это произошло, подумайте, как вы используете цвет, а также другие элементы, такие как цвет фона, окружающие изображения и окружающий текст.

Square — отличный пример призыва к действию. Используя одно изображение, чтобы продемонстрировать простоту использования своего продукта, Square использует жирную типографику, чтобы также показать, насколько уникален и ориентирован на будущее их продукт. На этом драматическом фоне синий призыв к действию «Начать» ждет вашего нажатия.

Источник изображения

8. Оптимизация для мобильных устройств.

Мы уже обсуждали, насколько важно, чтобы ваш сайт был адаптивным. Но поскольку на мобильные устройства приходилось 59% обычных посещений поисковых систем в 2021 году, мы удваиваем важность того, чтобы дизайн вашего веб-сайта был удобен для мобильных устройств. Это может означать изменение или удаление некоторых элементов, которые будут загромождать меньшие размеры экрана или отрицательно влиять на время загрузки.

В качестве примера одного из лучших дизайнов мобильных веб-сайтов сравните домашнюю страницу Etsy для настольных компьютеров и мобильных устройств. На рабочем столе вы увидите панель навигации с категориями. При наведении курсора на каждую категорию открывается раскрывающееся меню.

Источник изображения

На мобильных устройствах это сворачивается за кнопкой-гамбургером, что улучшает внешний вид и производительность мобильного сайта. Вы также заметите, что изображения стали крупнее — идеально для касания пальцем экрана мобильного устройства.

9. Ограничьте параметры, предоставляемые пользователям.

Согласно закону Хика, увеличение количества и сложности выбора увеличивает время, необходимое человеку для принятия решения. Это плохая новость в веб-дизайне. Если посетителю веб-сайта предоставляется слишком много вариантов, он может разочароваться и отказаться от покупки или выбрать вариант, который вам не нужен, например, отказаться от своей корзины. Вот почему важно ограничить количество опций, предоставляемых пользователю.

Например, у посетителя, попадающего на домашнюю страницу мороженого Шона Мишель, будет три варианта: узнать больше о компании, ароматах или ингредиентах. Но вместо того, чтобы отображать все три варианта одновременно, они представлены по одному в ползунке. Это отличный пример реализации закона Хика в UX-дизайне.

Источник изображения

Совет: нет времени следовать правилам? Вы всегда можете скачать готовый шаблон веб-сайта, который послужит надежной основой для вашего сайта.

Теперь мы понимаем принципы и рекомендации, которыми вы должны руководствоваться в процессе проектирования. В следующем разделе давайте пробежимся по основным элементам страницы, которые вам обязательно нужно включить в свой план дизайна.

Требования к дизайну веб-сайта

1. Верхний и нижний колонтитулы
2. Навигация по меню
3. Панель поиска
4. Брендинг
5. Палитра цветов
6. Заголовки
7. Прозрачные этикетки
8. Визуальные эффекты и медиа
9. Призывы к действию (СТА)
10. Пробел

1. Верхний и нижний колонтитулы

Верхний и нижний колонтитулы являются основой почти каждого современного веб-сайта. Попробуйте включить их на большинство своих страниц, начиная с главной страницы, заканчивая сообщениями в блоге и даже страницей «Результаты не найдены».

Ваш заголовок должен содержать ваш брендинг в виде логотипа и названия организации, навигацию по меню и, возможно, призыв к действию и/или панель поиска, если она расположена на большом расстоянии и минимальна. С другой стороны, нижний колонтитул — это то место, где многие пользователи будут инстинктивно прокручивать важную информацию. В нижнем колонтитуле разместите контактную информацию, форму регистрации, ссылки на ваши общие страницы, юридическую политику и политику конфиденциальности, ссылки на переведенные версии вашего сайта и ссылки на социальные сети.

2. Навигация по меню

Будь то список ссылок в заголовке или аккуратная и компактная кнопка-гамбургер в углу, каждому веб-сайту необходимо руководство по навигации, расположенное в верхней части как минимум вашей домашней страницы и других важных страниц. Хорошее меню ограничивает количество кликов для доступа к любой части вашего веб-сайта всего несколькими.

Чтобы уменьшить беспорядок, вы можете рассмотреть возможность сделать некоторые или все пункты меню раскрывающимся меню со ссылками внутри него, как это можно увидеть на домашней странице HubSpot.

3. Панель поиска

В дополнение к навигации по меню настоятельно рекомендуется разместить панель поиска в верхней части ваших страниц, чтобы пользователи могли просматривать содержимое вашего сайта по ключевому слову. Если вы включаете эту функцию, убедитесь, что ваши результаты релевантны, не допускают опечаток и способны приблизительно соответствовать ключевым словам. Большинство из нас каждый день используют качественную поисковую систему, будь то Google, Amazon, YouTube или где-либо еще. Все они устанавливают стандарт для вашего собственного поиска по сайту.

4. Брендирование

Помните соглашения, которые мы обсуждали? Тот, который вы видите практически везде, — это логотип в верхнем левом углу. При первой посадке глаза многих посетителей будут инстинктивно переключаться на эту область, чтобы убедиться, что они находятся в нужном месте. Не оставляйте их висеть.

Чтобы укрепить это представление, включите брендинг вашей компании в каждый элемент, который вы добавляете, часть контента, который вы публикуете, и цветовую схему, которую вы создаете. Вот почему мы рекомендуем установить руководство по бренду, если вы еще этого не сделали — ознакомьтесь с нашим руководством по стилю для справки.

5. Цветовая палитра

Выбор цвета играет важную роль в удобстве и удобстве использования вашего сайта. Это решение имеет тенденцию быть более субъективным, чем другие требования в этом списке. Но, как и все остальное, что мы обсуждали, постарайтесь упростить — ограничьте выбор цвета максимум 3-4 яркими цветами.

Создавать цветовую палитру с нуля в первый раз может быть на удивление сложно. Кажется, мы интуитивно понимаем, какие цвета хорошо сочетаются друг с другом, а какие нет, но мы спотыкаемся, пытаясь выбрать из бесконечного количества доступных комбинаций.

Решение? Попробуйте цветовую палитру, которая, как было показано, работает на других веб-сайтах. Воспользуйтесь влиянием своих любимых сайтов и ознакомьтесь с нашим списком наших любимых цветовых схем веб-сайтов, чтобы начать работу.

6. Заголовки

Заголовки являются ключом к созданию визуальной иерархии, которую мы обсуждали ранее, особенно на страницах с большим количеством текста. По мере того, как пользователи просматривают ваши страницы, что вам нужно, четкий и точный заголовок предупреждает читателей о необходимости прекратить прокрутку после того, как они найдут то, что им нужно. Используйте столько заголовков, сколько отдельных разделов на странице, так как слишком много увеличенного и выделенного жирным шрифтом текста ослабит этот эффект.

7. Четкие метки

Всякий раз, когда пользователь совершает действие на вашем веб-сайте, должно быть ясно, что именно он делает и/или куда идет. Все кнопки должны иметь четкий текст или значок, чтобы точно и лаконично обозначать их назначение. То же самое касается текстовых ссылок и виджетов (простых интерактивных элементов, таких как раскрывающиеся списки и текстовые формы).

Например, кнопка со ссылкой на страницу с ценами должна просто читать «Цены» — все, что сверх этого (например, «Посмотрите наши цены», «Проверьте страницу с ценами для сделки») является излишним. Для панели/кнопки поиска нужен только значок поискового стекла (🔍) и, возможно, также слово «Поиск», чтобы обозначить ее назначение.

Пользовательское тестирование может оказать большую помощь. Хотя вы сами знаете, что делают все элементы вашей интерактивной страницы, этого нельзя сказать о новом пользователе. Тестирование даст ценную информацию о том, что, по мнению пользователей, означают ваши ярлыки, помимо вашей собственной точки зрения.

8. Визуальные материалы и мультимедиа

При размещении на страницах статических изображений, гифок, видео и других мультимедийных материалов помните о том, что ваш выбор должен быть последовательным и обдуманным. Эти элементы будут привлекать внимание по сравнению с остальным текстом и, скорее всего, останутся в памяти пользователей, поэтому выбирайте их с умом.

Вот только один пример эффективного медиа на главной странице. Обратите внимание, как каждое изображение дополняет эстетику страницы и поддерживает предложение персонализированных тренировок по фитнесу с результатами.

Источник изображения

Кроме того, все изображения и видео должны быть оптимизированы для поисковых систем и содержать описательный альтернативный текст для доступности.

9. Призывы к действию (CTA)

Иметь приятный веб-сайт — это здорово, но как узнать, действительно ли посетители делают то, что вам нужно? Они взаимодействуют с вашим контентом? Здесь в игру вступают CTA.

Призыв к действию — это любой элемент страницы, который побуждает пользователя к действию. Действием может быть добавление продукта на карту, загрузка предложения контента или подписка на список рассылки. Сделайте элементы призыва к действию заметными в визуальной иерархии (вспомните наш пример Spotify), но не навязчивыми и не отвлекающими, как многие рекламные объявления с переходом по клику.

Если вам нужны идеи для изящных призывов к действию, которые увеличивают количество конверсий, посмотрите наш список примеров призыва к действию.

10. Пробелы

Как упоминалось выше, иногда речь идет об элементах, которые вы не включает . После прочтения этих руководств и требований у вас может возникнуть соблазн наполнить свои страницы всеми элементами, необходимыми для безупречного UX. Не забывайте, что вашим зрителям нужно место, чтобы переварить всю эту новую информацию, поэтому дайте вашим элементам пространство для дыхания.

Но сколько пробелов у вас должно быть? Это еще один личный звонок, и он варьируется от сайта к сайту. Таким образом, пользовательское тестирование здесь тоже пригодится. На что люди обращают внимание? Чувствуют ли они себя перегруженными плотностью контента? Опять же, все это связано с нашим первым принципом — простотой.

Дизайн, который ставит пользователей на первое место

Действительно, веб-дизайн в значительной степени субъективен — внешний вид вашего сайта не всем понравится. Тем не менее, существуют проверенные принципы UX, которые при тщательном рассмотрении и внедрении помогают посетителям чувствовать себя как дома.

По данным Amazon Web Services, 88% посетителей веб-сайтов с меньшей вероятностью вернутся на веб-сайт после плохого опыта. И как ты мог их винить? Мы наверняка все там были.

Итак, в качестве последнего кусочка мудрости юзабилити/UX, начните больше заботиться! Представьте себя на месте (или, точнее, окна браузера) ваших посетителей и помните о них на каждом этапе процесса проектирования.

27 Подтвержденные исследованиями советы по веб-дизайну: как создать работающий веб-сайт

Всего посетителей. Это легко увидеть. Каждый маркетолог знает, сколько трафика он получает, потому что он прямо в вашей аналитике. Но то, что происходит дальше, не так очевидно.

Вот почему давать советы по привлечению трафика легко, а советы по веб-дизайну — сложно. Есть так много факторов. Даже после более чем 1000 успешных проектов веб-дизайна нам трудно понять, что будет работать лучше всего.

В этой статье 27 советов по веб-дизайну, которые помогут получить больше от каждого посетителя. Большинство этих советов подтверждаются исследованиями. Они предназначены для начинающих дизайнеров и продвинутых UX-специалистов, для малого бизнеса и крупного предприятия.

Вот наши лучшие советы, идеи и вдохновение о том, как создать веб-сайт, который будет приносить результаты. Сайт, который выглядит красиво, конвертирует посетителей и получает больше пользы от каждого из этих с трудом заработанных посещений.

Два самых важных исследования, процитированные здесь, находятся в самом конце. Если вы нетерпеливы, пропустите!

Структурная схема веб-сайта

Веб-сайты состоят из двух вещей: контейнеров и контента. Контейнер — это две вещи: структура и стиль. Начнем с первого. Эти советы касаются структуры и макета страниц.

1. Используйте визуальную иерархию

Каждая страница имеет визуальную иерархию. Если вы не знакомы с этой концепцией, вот наше определение:

Визуальная иерархия относится к расположению, размеру, цвету и контрасту визуальных элементов. Это определяет их относительную известность и порядок, в котором они видны человеческому глазу.

Веб-дизайнеры используют визуальную иерархию, чтобы привлечь внимание посетителей в первую очередь к важным элементам. Макет веб-сайта включает в себя положение (верхнее или нижнее на странице), размеры (большой или маленький), визуальные элементы (видео, изображения, значки) и контраст (цвет и пустое пространство).

Объединение аспектов увеличивает их эффект. Все увидят большое видео высоко на странице. Мало кто увидит низкоконтрастный текст, окруженный изображениями.

Визуальная иерархия — это то, почему ваши глаза следуют по определенному пути на каждой странице, которую вы посещаете в Интернете. При сознательном использовании он направляет внимание посетителя через серию сообщений к призыву к действию.

2. Используйте описательный заголовок с ключевыми фразами в верхней части главной страницы

Заголовок в верхней части главной страницы (и каждой страницы) либо описательный, либо нет. В противном случае посетитель может быть не в состоянии ответить на свой первый вопрос: «Я в правильном месте?»

Это также возможность использовать целевую ключевую фразу и указать релевантность. Но вместо этого многие маркетологи пишут что-то умное или расплывчатое. Но понятно лучше, чем умно.

Вместо красивого, но расплывчатого заголовка напишите что-нибудь описательное. Убедитесь, что вы объясняете, чем занимается компания, вверху страницы, в верхней части страницы.

Подождите, фолд еще актуален?

Да, фолд есть. Для каждого посещения на каждом экране есть просматриваемая область. Внизу находится знаменитая складка. Чтобы увидеть что-либо ниже этой строки, этот посетитель должен прокрутить страницу.

Почему и имеет ли это значение в веб-дизайне — горячо обсуждаемая тема. Вот два лучших аргумента: «Нет фолда!» vs «Фолд по-прежнему имеет значение».

Конечно, существуют тысячи размеров экрана, от крошечных до огромных. За последний месяц этот веб-сайт просматривали на 958 экранах разного размера. Поэтому некоторые дизайнеры говорят, что складка больше не актуальна.

Но вот в чем суть (понятно?) По-прежнему есть фолд для каждого посещения и по-прежнему средний фолд для всех посещений. Такие инструменты, как Hotjar, четко отображают его в виде линии на тепловой карте прокрутки для настольных компьютеров/ноутбуков, мобильных устройств и планшетов.

Так что да, сгиб есть, и важно, что вы поместите над ним и под ним. Одно исследование показало, что посетители проводят 80% своего времени в верхней части страницы.

Итак, поместите свое ценностное предложение, эту версию из 8 слов о том, что вы делаете, высоко на странице, в верхней части страницы.

3. Но не размещайте все свои призывы к действию вверху

Посетители могут проводить там больше времени, но это не значит, что они готовы действовать. Много убеждений происходит дальше по странице.

Когда Chartbeat проанализировал 25 миллионов посещений, они обнаружили, что наибольшая вовлеченность происходит в нижней части страницы. Контент вверху может быть виден, но это не обязательно будет самое эффективное место для ваших призывов к действию.

Одно предостережение об этом часто цитируемом исследовании: Chartbeat в основном используется новостными веб-сайтами, которые сильно отличаются от маркетинговых веб-сайтов. На новостном веб-сайте никто не делает ничего особенного в верхней части страницы! Обычные советы по веб-дизайну неприменимы.

Не забудьте разместить призывы к действию дальше по странице, в любом месте, где интерес может быть высоким.

4. Сделать высокую страницу. Ответьте на все вопросы посетителей.

Больше пикселей означает больше места для ответов на вопросы, рассмотрения возражений и добавления подтверждающих доказательств. Если посетитель не находит ответа на важный вопрос, он может просто двигаться дальше вниз по странице. Как только они будут удовлетворены, они просто перестанут читать.

Самые эффективные страницы продаж имитируют разговоры о продажах.

Вы бы никогда не перебили кого-то во время встречи по продажам и не перестали бы отвечать на его вопросы, не так ли? Это все, что делает короткая страница; он перестает отвечать на вопросы.

Вот тут-то и появляется известное исследование Crazy Egg. Они опросили свою аудиторию, выявили их главные вопросы и опасения и создали большую страницу, на которой есть ответы на все вопросы.

Страница стала в 20 раз длиннее. Конверсия выросла на 30%.

---

“ Прокрутка – это продолжение. Щелчок — это решение». — Джош Портер, Rocket Insights

---

5. Показывайте по одному

«Мне нравится чистый, современный дизайн». Это то, что говорит нам большинство наших клиентов, когда мы начинаем проекты веб-дизайна. В качестве примера они часто ссылаются на веб-сайт Apple.

Посетители не любят беспорядка. Нам нравится пробел. Другими словами, нам нравится низкая визуальная сложность.

В 2012 году Google решил выяснить, какие типы веб-сайтов кажутся посетителям красивыми. Это исследование о простоте с очень сложным названием: Роль визуальной сложности и прототипичности в отношении первого впечатления от веб-сайтов: работа над пониманием эстетических суждений.

Они узнали, что более сложные конструкции с меньшей вероятностью будут восприниматься как красивые.

Это объясняет тенденцию к макетам с одной колонкой и высоким страницам. Дизайны с несколькими колонками (левая навигация, область содержимого, правая направляющая) более сложны, с большим количеством визуальных элементов в поле зрения посетителей.

Так что избавьтесь от беспорядка. Сделайте один из двух элементов фокусом на каждой глубине прокрутки.

6. Придерживайтесь стандартных макетов

То же исследование Google показало, что «высокая прототипичность» также коррелирует с воспринимаемой красотой. Другими словами, странное обычно не бывает красивым. Веб-сайт, который следует стандартам веб-дизайна, с большей вероятностью будет любим.

Сайты, считающиеся самыми красивыми, обладают как высокой прототипичностью, так и низкой визуальной сложностью. Они оба простые и чистые.

Подумайте об этом так: хорошо выделить свой бренд, но макет — не место для этого. Будьте разными в том, ЧТО вы говорите. Но будьте типичны в том, КАК используется ваш сайт.

Некоторые автомобили выглядят потрясающе. Они разные. Они красивы. Но у них по-прежнему есть двери по бокам, колеса снизу и фары спереди.

Но что такое стандарт? Согласно нашим собственным исследованиям, это стандартные элементы для веб-сайта:

«Стандартный» веб-сайт с высокой прототипичностью включает в себя следующее:

• Логотип вверху слева
• Горизонтальная навигация в шапке
• Панель поиска вверху
• Социальные иконки внизу
• Мобильный адаптивный дизайн

7. Остерегайтесь «ложного дна»

Современные маркетинговые веб-сайты, особенно страницы продаж, состоят из блоков страниц. Это строки контента, часто с изображением с одной стороны и текстом с другой, расположенные по странице в одном столбце.

Вот анатомия типичной служебной страницы на веб-сайте лидогенерации.

Как видно из диаграммы, нижний колонтитул имеет более темный цвет фона. Так делают многие сайты, что теперь посетители ожидают, что переход на более темный фон означает нижнюю часть страницы.

Но если в дизайне есть блок страницы с темным фоном, посетитель может подумать, что он дошел до конца и перестанет прокручивать страницу. Это ложное дно.

Примечание. Я обсуждаю этот вопрос со своими дизайнерами. Курт Круз, наш креативный директор, делает отличное замечание. Изменение цвета фона — отличный способ сообщить посетителям, что тип контента меняется. Я слышу тебя, Курт!

Будьте внимательны при выборе цвета фона для блоков страниц. На всякий случай выбирайте только небольшие вариации или всегда используйте белый или светло-серый цвет. Затем переключитесь на темно-серый или черный цвет в нижнем колонтитуле.

8. Избегайте каруселей и вращающихся ползунков

Они популярны уже много лет, и клиенты их любят. Но есть проблема со слайд-шоу на главной странице: посетители могут видеть только первый слайд.

Было проведено множество исследований, которые пришли к одному и тому же выводу. Сообщения на последующих слайдах вряд ли будут замечены, а призывы к действию вряд ли будут нажаты. Просто посмотрите на рейтинг кликов для слайдов на веб-сайте университета.

Они могут быть популярны, потому что их легко получить. Разные заинтересованные стороны из разных отделов получают несколько пикселей в верхней части страницы. Они хороши для внутренней политики, а не для посетителей.

Слайд-шоу на главной странице хорошо удерживают людей от поножовщины в конференц-залах.

Так что же делать вместо этого?

• Слайды сложите так, чтобы посетитель мог их увидеть, прокручивая страницу вниз. Они вдруг станут гораздо более заметными.
• Используйте избранное изображение , используя в качестве главного слайда самый эффектный слайд. Дайте хороший призыв к действию!

9. Избегайте вкладок и аккордеонов

Вот еще один способ вытащить вещи из укрытия: избегайте вкладок и раскрывающихся блоков содержимого.

Зная, что до 76% посетителей веб-сайта сканируют его, вы можете сделать свой контент более заметным для них, сохраняя его открытым, без необходимости щелкать, чтобы открыть что-либо.

Если бы вкладки и расширяемые аккордеоны были эффективны, вы, вероятно, увидите их на Amazon.

Помните, что прокрутка быстрее и проще, чем нажатие. Если посетителям приходится наводить курсор и нажимать или вводить вкладку, чтобы увидеть что-то, вероятность того, что они это увидят, меньше.

Изображения

Перейдем к визуальным эффектам. Эти советы относятся к изображениям на веб-страницах.

10. Используйте изображения людей

Лица — это уникальные мощные изображения. С самого рождения мы больше смотрим на лица. Магнетическая сила изображений людей очень полезна в веб-дизайне.

Лица не только привлекают внимание, но и коррелируют с конверсией. Знаменитое тематическое исследование, проведенное Basecamp, показало огромный рост результатов, когда лица и отзывы были объединены на странице продаж.

Убедитесь, что ваш сайт не похож на «заброшенный космический корабль» без души на борту.

На протяжении многих лет я разговаривал с тысячами компаний об их маркетинге и заметил закономерность. Большие компании всегда пытаются выглядеть маленькими, а маленькие компании стараются выглядеть большими. Странно, да?

Действительно, каждая компания должна стараться быть более личной, более человечной.

11. Но избегайте стоковых фотографий людей

Есть время и место для стоковых фотографий, но я бы избегал стоковых фотографий людей как чумы. Они просто никогда не чувствуют себя искренними, поэтому не завоевывают доверие.

Компании соблазняются фотографиями из-за высокого качества продукции. Но ваших посетителей больше волнует реальность. Они предпочли бы видеть реальных людей, которые действительно работают в компании.

Подлинность важнее полировки.

Исследование подтверждает это. Исследование, проведенное NN Group, показало, что посетители не обращают внимания на стоковые фотографии людей и «заполнители», но на самом деле смотрят на фотографии реальных людей.

Будьте собой, покажите свою команду и используйте фотографии реальных людей, даже если они идеально отполированы.

12. Используйте лица в качестве визуальных подсказок

Изображения людей дают вам особую возможность привлечь внимание посетителей. Знаменитое явление «ты смотришь туда, куда смотрят они».

Когда исследователь Джеймс Бриз продемонстрировал рисунки 106 людям, он продемонстрировал силу правильно расположенных лиц. У них есть возможность направить внимание посетителей на другие элементы.

Это знаменитый этюд с детским лицом. Когда ребенок смотрит в камеру, посетители смотрят на ребенка. Когда ребенок смотрит на заголовок, посетители смотрят на заголовок.

Мой друг Оли Гарднер устал от этого примера с ребенком (извини, Оли!). Если кто-то знает другие исследования или хорошие примеры, дайте мне знать в комментариях!

Используйте линию взгляда на изображении лица в качестве ориентира, чтобы привлечь внимание посетителей к заявлениям о преимуществах или призывам к действию.

13. Используйте стрелки в качестве визуальных подсказок

Лица могут направлять внимание, но это не единственный способ контролировать взгляд посетителей. Маленькие нарисованные от руки стрелки могут быть еще более эффективными.

В этом исследовании слежения за взглядом, проведенном CXL, было обнаружено, что простая стрелка еще более эффективно побуждает посетителей смотреть на элемент страницы.

Если вы хотите, чтобы ваши посетители что-то посмотрели, укажите на это стрелкой. Я не уверен, является ли этот совет смехотворно очевидным или глубоко проницательным.

14. Используйте цвет, чтобы привлечь внимание посетителей к призывам к действию

Цвета имеют эмоциональную окраску (красный — срочность, синий — спокойствие) и являются частью стандартов бренда. Но они также дают возможность привлечь внимание посетителей к кнопкам и призывам к действию.

Исследование цвета кнопок, проведенное Eyequant, подтверждает способность цвета и яркостного контраста привлекать внимание.

Но исследование показывает, что цветные кнопки не всегда эффективны. Если вы хотите, чтобы ваша кнопка была более заметной:

• Контрастируйте цвет кнопки с фоном
• Контрастировать цвет кнопки и текст кнопки
• Контрастируйте цвет кнопки с соседними элементами на странице (или оставьте вокруг нее много белого пространства)

«Эффект фон Ресторфа»

В 1930-х годах немецкий ученый Хедвиг фон Ресторф обнаружил, что, когда им показывают список из десяти предметов, люди запоминают предметы, если они отличаются по цвету от других. Это связано с тем, что затылочная доля чувствительна к визуальным различиям или «нарушителям шаблона».

Веб-маркетолог Парас Чопра провел эксперименты, которые показали, что выдающиеся цвета не просто больше запоминаются, но и чаще кликают по ним: на 60% больше!

Профессиональный совет! Выберите «цвет действия» для всех ваших ссылок, кнопок и эффектов прокрутки. Сделайте его цветом, отличным от цветов бренда, используемых в дизайне (это «пассивные цвета»). Используйте цвет действия только в элементах, на которые можно щелкнуть.

Навигация и ссылки

Теперь мы переходим к советам по навигации по сайту, включая меню, кнопки и ссылки, которые позволяют вашим посетителям перемещаться.

15. Будьте описательными

Навигация всегда визуально заметна, так что это возможность для общения. Посетители обычно начинают свой визит со сканирования заголовка. Все, что там есть, включая ваше меню, скорее всего, увидят.

Источник: UX Movement

Когда навигационные метки являются общими, вы упускаете возможность рассказать посетителям, чем вы занимаетесь. Сравните эти два примера:

Если ваши навигационные метки являются общими, то они являются общими для тысяч или даже миллионов веб-сайтов. Вы упустили шанс воспользоваться передовыми методами навигации по веб-сайту, помочь своим посетителям и повысить свой рейтинг в поиске.

16. Поместите домашнюю страницу слева, но в остальном не беспокойтесь о порядке пунктов меню.

Если у вас есть домашняя ссылка, поместите ее слева. Это самое распространенное место для него, поэтому посетители ожидают найти его там.

Что касается остальных пунктов меню, исследования показывают, что порядок не так уж и важен. Есть два разных исследования отслеживания взгляда, которые показывают низкую корреляцию между порядком пунктов меню и успехом посетителей (источник и источник).

Так что не тратьте уйму времени на беспокойство о порядке вещей в вашем меню.

17. Будьте осторожны при переходе со служебных страниц на сообщения блога

Если посетитель находится на служебной странице, цель состоит в том, чтобы превратить его в потенциального клиента. Если вы добавите большие возможности уйти и пойти читать свой блог, они окажутся на страницах, которые менее ориентированы на лидогенерацию. Сообщения в блогах, естественно, больше отвлекают, уходят и имеют более низкий коэффициент конверсии.

18. Будьте осторожны, ссылаясь на что-либо на других веб-сайтах

Когда это уместно, давайте ссылки на вещи, которые помогают посетителю достичь своих целей. В сообщении в блоге это часто ссылка на источник или ссылка на внешние ссылки. Этот пост содержит ссылки на десятки статей и исследований!

Но на страницах услуг и на главной странице следует с осторожностью ссылаться на другие сайты. Для любой страницы, оптимизированной для преобразования посетителей в потенциальных клиентов, спросите себя, действительно ли вы хотите, чтобы посетители нажимали на эту ссылку? Помогает ли это вам достичь ваших целей?

19. Избегайте использования значков социальных сетей в шапке сайта

Точно так же красочные значки социальных сетей в шапке не подходят для достижения ваших целей. Если посетители нажимают на любую из этих кнопок карамельного цвета, они попадают на сайт, наполненный отвлекающими факторами. Вряд ли они вернутся.

Как правило, это неправильный способ интеграции в социальные сети. Если вы ссылаетесь на социальную сеть, делайте это из нижнего колонтитула. Посетители могут найти социальные сети, если они ищут, но вы не предлагаете им уйти.

Письмо

Давайте поговорим о словах. Ранее мы рекомендовали размещать на главной странице заголовок, ориентированный на ключевые фразы. Вот еще несколько советов по написанию текста на веб-сайте, включая заголовки, подзаголовки и основной текст.

20. Пишите осмысленные подзаголовки

Повсюду расплывчатые подзаголовки. Часто они большие и бесполезные, но за ними следуют мелкие, но полезные вещи. Странно, да? Обратное имело бы больше смысла.

Убедитесь, что важные вещи значимы и полезны для посетителей. Если ваши подзаголовки говорят о таких вещах, как «товары» или «услуги», спросите себя, не будет ли более полезным более описательный термин. Вот некоторые примеры.

Это хорошо для сканеров и удобства использования. Это хорошо для слабовидящих и доступности. Это также хорошая практика SEO. Никогда не упускайте шанс указать актуальность!

Совет: подзаголовки могут быть совершенно ненужными. Была бы эта страница так же хороша без него? Будут ли посетители по-прежнему знать, на что они смотрят? Если это так, просто удалите его.

21. Избегайте длинных абзацев и длинных строк

Длинные, загроможденные абзацы не соответствуют передовым методам работы с цифровым контентом. Простое разбиение длинных абзацев облегчает восприятие контента. Как правило, не пишите абзацы длиннее 3-4 строк.

---

«Короткие абзацы прочитываются, длинные абзацы просматриваются, очень длинные абзацы пропускаются» — Джейсон Фрайд, основатель и генеральный директор Basecamp

---

Если длина строки очень длинная, посетителям может быть сложнее читать. Руководство по веб-стилю рекомендует строки не более 12 слов.

22. Избегайте жаргона. Используйте простые слова.

Чем легче читать, тем успешнее будет сайт. Используйте общие слова, которые ожидают посетители. Длинные предложения и замысловатые слова заставляют височную долю работать усерднее. Это не хорошо.

---

“ Все просто! «Когнитивная беглость» — это мера того, насколько легко мозг вашего посетителя обрабатывает то, на что он смотрит. Когда что-то трудно читать, мы подсознательно считаем это более рискованным и/или требующим много времени. Итак, чтобы максимизировать конверсию, используйте короткий текст, простые шрифты и легко читаемый дизайн. » — Роджер Дули, автор Brainfluence

---

Копия, которая подходит для «низкограмотного» пользователя, подходит для всех. Дело не в том, чтобы приуменьшить его; речь идет об использовании простого языка, понятного каждому. Исследования показали, что снижение уровня удобочитаемости может повысить вероятность успеха для всех посетителей.

Даже кандидаты наук предпочитают читать на уровне 8-го класса.

Это громкое слово может показаться вам умным, но посетитель может почувствовать себя тупицей. Посетитель, который сомневается в себе, вряд ли примет меры. Поэтому, пока вы пишете, продолжайте задавать себе этот вопрос:

Знают ли 100% посетителей значение слов на этой странице?

23.

Порядок списков и «Эффект последовательного положения»

При упорядочении любых списков в вашем экземпляре размещайте важные элементы в начале и в конце. Внимание и удержание читателя самые низкие в середине любого списка. Когда посетители просматривают страницу, первый и последний элементы, скорее всего, останутся в кратковременной памяти.

Источник: Теория эффектов порядка: превосходство против новизны

24. Ответьте на самые популярные вопросы посетителей

Они пришли с вопросами. Основная задача сайта — ответить на эти вопросы. Каждый оставшийся без ответа вопрос — это упущенная возможность укрепить доверие. Вопросы без ответов также увеличивают вероятность того, что посетитель уйдет.

Когда Джоэл Клеттке применил свой процесс поиска вопросов и написания ответов, он смог удвоить коэффициент конверсии на целевых страницах Hubspot. Он опрашивал клиентов, анализировал их ответы, расставлял сообщения по приоритетам и, в конце концов, использовал слова самой аудитории в новом маркетинговом тексте. Умный!

Вот вопросы, которые Джоэл использует, чтобы выявить самые популярные вопросы посетителей:

1. Что произошло, что заставило вас искать решение?
2. Что еще вы пробовали и что вам не понравилось?
3. Что почти удержало вас от покупки у нас?
4. Что вселило в вас уверенность в том, что вы решили попробовать?
5. Что сделало X лучшим решением для вас?
6. Что для вас было самым важным при оценке X?
7. Что вы можете сделать сейчас (или сделать лучше), чего не могли раньше?
8. Приведите пример, когда Х имел для вас значение?

Одним словом, какова цель вашего сайта? Отвечать.

Дополнительная литература: The Perfect B2B Website Service Страница: Контрольный список из 13 пунктов

25. Добавьте доказательства и социальное доказательство

«Предвзятость соответствия» — это человеческая склонность делать то, что делают другие люди. Таким образом, предоставление доказательств того, что другие выбрали вас, делает выбор вашей компании хорошим выбором. Цель — любое решение, кроме использования вашей компании, кажется ненормальным.

Предоставьте своим посетителям подтверждение того, что вы законны. В идеале каждое ваше маркетинговое заявление должно быть подтверждено доказательствами.

---

«Сколько раз вы переходили на веб-сайт из списка лауреатов премии в области дизайна и закатывали глаза при захватывающем заголовке «Дом»? Вот что происходит, когда вы доверяете агентству «создать что-то абсолютно классное и уникальное» вместо того, чтобы выбрать агентство, которое обещает создать что-то, что будет работать так, как нужно вашим клиентам / клиентам и ожидает, что оно будет работать». – Джен Саламандик, Kick Point

---

Самый быстрый и простой способ — добавить отзывы. Вот другие типы социального доказательства.

• Одобрения от соответствующих влиятельных лиц
• Отзывы о товаре от покупателей
• «Как видно из…» логотипы СМИ, в которых упоминалась ваша компания
• Виджеты социальных сетей, показывающие размер ваших подписчиков
• Знаки доверия, включая членство в ассоциациях, сертификаты безопасности и награды

Сколько доказательств достаточно? Сколько отзывов нужно добавить?

Много. Возможно, что доказательств слишком много не бывает. Мы провели быстрый анализ одной из страниц сведений о продукте Amazon и обнаружили, что 43% страницы составляют доказательства и обзоры.

Профессиональный совет! Не делайте страницу отзывов. Как правило, это страницы с низким трафиком. Вместо этого добавьте отзывы на каждую страницу обслуживания.

26. Упомяните дефицит, вызовите «неприятие потерь»

Люди не умеют эффективно рассчитывать затраты/выгоды. Мы склонны переоценивать потери и недооценивать приобретения. Другими словами, потери более болезненны, чем приятны приобретения.

Это верно как для онлайна, так и для оффлайна, и объясняет многое в человеческом поведении. Эта статья хорошо объясняет это: Применение поведенческой экономики и когнитивной психологии в процессе проектирования.

Это неприятие потерь может быть полезно веб-дизайнерам и копирайтерам. Вот несколько советов по написанию текста с учетом страха перед потерей.

• Подчеркните стоимость отказа от использования вашего продукта или услуги.
• Сгруппируйте затраты вместе, перечислите выгоды отдельно.
• Подчеркните немедленные выгоды.
• Создайте срочность с ограниченными по времени предложениями. Если товар дефицитный, так и скажите.

Аккуратно напомните своим посетителям, что они упустят, чем рискуют или что потеряют, если не примут меры прямо сейчас.

27. Оптимизируйте формы подписки по электронной почте для подписчиков

Внизу этого поста. Это призыв к действию подписаться. Если вы внимательно посмотрите, то увидите, что он включает в себя три отдельных элемента. Это 3 P для форм регистрации по электронной почте.

• Известность Выделяется в визуальной иерархии
• Обещание Сообщает читателю, что он будет получать и как часто
• Доказательство Используется социальное доказательство: количество подписчиков или небольшой отзыв

Когда мы впервые экспериментировали с этими изменениями, коэффициент конверсии в старой форме был очень низким, поэтому улучшение было значительным. Мы увидели увеличение числа подписок по электронной почте на 4863% .

При разработке формы подписки на электронную почту сделайте ее видимой, используйте социальное доказательство и расскажите читателям, что они получат.

Больше, чем просто красивый сайт

Все любят красоту. Всем нравятся крутые новые конструктивные особенности. Все критики. Но нам как посетителям нужно больше, чем просто красота. Нам нужна информация. И нам, как владельцам веб-сайтов, нужны результаты.

Вот два исследования с одним и тем же результатом. Первый — это опрос, проведенный Hubspot, который показывает, что посетители ценят простоту поиска информации больше, чем красивый дизайн или модный UX.

Это второе исследование является результатом серии пользовательских тестов, проведенных NN Group. Это показывает, что когда посетители терпят неудачу, это происходит потому, что они не могут найти информацию, а не потому, что сайт недостаточно красив.

No related posts.