25 советов начинающим веб-дизайнерам — Лайфхакер

10 ноября 2015 Советы

Никита Обухов, основатель сервиса Tilda Publishing и креативный директор студии FunkyPunky, выпустил теоретический курс по веб-дизайну «Дизайн в цифровой среде». Специально для Лайфхакера он сформулировал несколько тезисов курса, которые помогут начинающим дизайнерам понять, как делать сайты для себя или для клиентов.

Никита Обухов

Дизайнер. Основатель сервиса Tilda Publishing. Руководитель дизайн-студии FunkyPunky. Куратор курса по веб-дизайну в Британской высшей школе дизайна.

Это учебник нового формата, в котором знания и опыт, накопленные за 15 лет работы в вебе, систематизированы и упакованы в 20 увлекательных лонгридов, написанных простым языком.

1

Создание сайта — это технология

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

2

Нельзя работать над проектом, который ты ненавидишь

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

3

Любая разработка начинается с боли и неудовлетворённости

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

4

Умение слушать — первое, чему следует научиться дизайнеру

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

Нужно понять мир, в котором существует человек. У каждого из нас есть уникальный опыт (события, которые мы пережили), который детерминирует наше отношение к миру. Часто мы говорим: «Да, я это знаю, мне всё понятно». Но оказывается, что разница кроется в деталях и она может быть принципиальной. Поэтому, когда мы слушаем человека, нужно постараться вжиться в его образ, как это делают актёры. Почувствовать себя на его месте.

Иллюстрация из лекции об эмпатии курса «Дизайн в цифровой среде». Автор: Юлия Засс

5

Идея требует времени

После того как вы сформулировали задачу, не терзайте свой мозг, дайте время подсознанию найти решение.

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

6

Используйте майндмэппинг для генерации идей

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

7

Проводите исследования

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

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

8

Смотреть картинки — это работа

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

Фото: Tilda Publishing

9

Следите за трендами

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

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

10

Хороший дизайн — это результат вашего саморазвития и самообразования

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

11

Учитесь не только веб-дизайну

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

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

12

Направляйте критику в конструктивное русло

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

13

Найдите вдохновляющих людей

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

Скриншот Twitter-аккаунта Стефана Загмайстера

14

Не жалейте времени на хорошую композицию

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

Людей давно соблазняет мысль рассчитать идеальные пропорции математически (канон Виллара де Оннекура, ряд Фибоначчи и так далее). Но никакие цифры не позволят создать такую композицию, которую вы почувствуете, раз за разом меняя положение объектов. Это непросто, требует навыков и опыта, но это самый интресный и плодотворный способ.

15

Ограничьте цветовую палитру

Цвет — это просто. Это такая супербазовая единица, как буква. Но это не значит, что нужно покрасить всё в разные цвета. Наоборот, используйте один цвет, который займёт 80–90%, и дополнительный цвет в качестве акцента. Один — лучший вариант. Три использовать нельзя. Два — очень аккуратно.

16

Подключите фирменный шрифт

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

17

Используйте сетку как вспомогательный инструмент

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

18

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

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

Фото: Tilda Publishing

19

Итерации — основа хорошего дизайна

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

20

Главный навык дизайнера — уметь рассказать историю

Навык рассказывания историй стоит освоить. Сейчас это новый формат, но скоро он станет привычным и естественным. Слово «сторителлинг» используется в разных контекстах. Например, у актёров свое понятие сторителлинга — определённая последовательность изложения, где есть завязка, кульминация и развязка.

В веб-дизайне под сторителлингом мы понимаем способ подачи информации. Цифровой сторителлинг — сочетание контента и интерфейса.

21

Рисуйте каждую страницу как Landing Page

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

22

Добавьте «воздуха»

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

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

23

Не перегружайте меню

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

Скриншот сайта дизайн-студии Surf

24

Продавайте себя, а не портфолио работ

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

25

Увлеките пользователя продуманной типографикой

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

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

Теоретический курс «Дизайн в цифровой среде» можно почитать тут.

*Деятельность Meta Platforms Inc. и принадлежащих ей социальных сетей Facebook и Instagram запрещена на территории РФ.

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%

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

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

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

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

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

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

12 правил веб-дизайна

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

Во-первых, что нужно делать

1. Поддерживайте согласованность интерфейса

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

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

2. Разработка простой в использовании навигации

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

Практические советы:

• Сохраняйте навигацию верхнего уровня для основных параметров навигации . Ограничьте навигационные ссылки верхнего уровня максимум семью вариантами ━ количество объектов, которые среднестатистический человек может удерживать в рабочей памяти, составляет 7 ± 2 ━ и создайте вложенную навигацию с четкой категоризацией.
• Используйте четкие метки для параметров навигации . Используйте знакомые слова для опций меню, чтобы посетители лучше их понимали.
• Сокращение времени, необходимого пользователям для перехода к месту назначения . Спроектируйте навигацию таким образом, чтобы посетители попадали туда, куда они хотят, с наименьшим количеством возможных кликов. При разработке веб-сайта помните о правиле трех кликов, которое гласит, что ваши зрители никогда не должны находиться дальше, чем в трех кликах, от того, что они ищут.
• Включите параметры навигации в нижний колонтитул вашего сайта . Нижний колонтитул — это место, где посетители ожидают найти варианты навигации и контактную информацию.

3. Изменение цвета посещенных ссылок

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

Делать. Визуально различайте посещенные ссылки.

4. Упростите сканирование ваших страниц

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

Практические советы:

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

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

До. Mailchimp выделяет наиболее важную информацию на странице ━ кнопки призыва к действию ━.

• Учитывать естественные шаблоны сканирования . Люди в западном мире обычно читают слева направо и сверху вниз. Дизайн, который идет вразрез с этим шаблоном, представляет кривую обучения для ваших посетителей. Веб-сайты с хорошим дизайном обычно размещают свой контент в форме буквы «F» или буквы «Z».
• Придерживайтесь сетки . Макет сетки позволяет организовать информацию таким образом, чтобы посетителям было легче читать и понимать информацию, представленную на странице.

До. Используйте макет сетки при разработке веб-интерфейса.

5. Серьезно относитесь к содержанию

Копирование так же важно, как и дизайн вашего веб-сайта. Более 95 процентов информации в Интернете находится в письменной форме. Даже если ваш сайт красиво оформлен, это не более чем пустой фрейм без хорошего контента; хороший веб-сайт имеет как отличный дизайн, так и отличный контент. Работа дизайнера заключается в том, чтобы убедиться, что дизайн помогает и дополняет контент.

Практические советы:

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

6. Проверьте свой веб-сайт на наличие ошибок

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

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

7. Минимизируйте количество вариантов выбора

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

Делать. Facebook использует пошаговый процесс запроса личной информации.

8. Привлекайте пользователей к прокрутке

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

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

9. Пометьте кнопки в соответствии с тем, что они делают.

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

Не надо. Заставьте людей задуматься, что делает элемент интерфейса. Зачислено на UXMattersDo. Проясните, что произойдет, когда пользователи щелкнут элемент пользовательского интерфейса. «Получить бесплатную пробную версию» — это четкая этикетка для формы регистрации. Предоставлено Treehouse

10. Сделайте так, чтобы вещи выглядели так, как будто они работают

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

Не надо. Является ли оранжевая рамка в верхнем левом углу экрана кнопкой? Нет, но форма и метка делают элемент похожим на одно целое.

11. Сделайте свой веб-сайт адаптивным

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

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

Практические советы:

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

12. Проверьте свой дизайн

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

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

Теперь о том, что нельзя делать

1.

Не заставляйте пользователей ждать загрузки контента

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

Чем быстрее ваш сайт, тем удобнее. Изображение Google.

Практические советы:

• Избегайте пустых страниц при загрузке . Если загрузка занимает некоторое время, рассмотрите возможность отображения части содержимого вместе с какой-либо формой визуальной обратной связи, например индикатором загрузки.
• Оптимизировать изображения . Изображения,  особенно большие фоновые изображения, могут долго загружаться. Вы можете значительно сократить время загрузки, оптимизировав изображения.
• Измерьте текущую производительность вашего веб-сайта. Инструменты Google PageSpeed ​​Insights и Think With Google не только помогут вам определить проблемы с производительностью вашего веб-сайта, но и предложат решения для определенных проблем.

2. Не открывать внутреннюю ссылку в новых вкладках

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

3. Не используйте слишком много шрифтов

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

Не надо. Слишком много шрифтов могут конфликтовать друг с другом и подавлять посетителей.

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

4. Не используйте слишком много цветов на своем веб-сайте

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

Не надо. Используйте слишком много цветов в дизайне. Изображение Pine-Sol.

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

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

5. Не показывать всплывающие окна слишком рано

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

Не надо. Первое, что люди видят при посещении сайта The New York Times, — это всплывающее окно с промо-рекламой.

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

6. Не используйте обычные фотографии людей

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

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

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

7. Не позволяйте продвижению затмить собой

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

Не надо. Реклама может отвлекать посетителей от основного контента и портить дизайн.

8. Не воспроизводить фоновую музыку или автоматически воспроизводить видео с музыкой

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

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

Практический совет: Предоставьте пользователям контроль. Настройте музыку на отключение звука по умолчанию, но разрешите им включить ее, если они нажмут ━ создайте кнопки воспроизведения/паузы для вашего аудиоконтента.

Делать. Видео в Facebook настроено на автоматическое воспроизведение, но звук не будет воспроизводиться, если пользователи не покажут, что смотрят видео, т. е. взаимодействуют с видео.

9. Не злоупотребляйте прокруткой

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

Не надо. На странице регистрации Tumblr используется перехват прокрутки.

10. Не используйте горизонтальную прокрутку

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

Не надо. Посетители не будут знать, что они должны прокручивать страницу горизонтально, особенно когда нет визуальных подсказок. Изображение от axelwyart.

11. Не жертвуйте удобством использования ради красоты

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

Не надо. Низкоконтрастный текст — это всегда плохая идея.

Практический совет : Проверьте коэффициент контрастности . Коэффициенты контрастности показывают, насколько цвет отличается от другого цвета. Такие инструменты, как Color Contrast Checker, помогут вам проверить, достаточно ли у вас цветового контраста, всего за несколько кликов.

12. Используйте мерцающий текст и рекламу

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

Заключение

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

Words by
Ник Бабич

Ник Бабич — UX-архитектор и писатель. Ник провел последние 10 лет, работая в индустрии программного обеспечения, уделяя особое внимание исследованиям и разработкам. Он считает рекламу, психологию и кино среди множества своих интересов.

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. Цветовая палитра

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

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

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

6. Заголовки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10. Пробелы

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