Дизайн домашней страницы: 5 фундаментальных принципов

411
Команда AskUsers
Команда AskUsers
13 апреля 2024
Содержание

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

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

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

Принцип 1. Обеспечьте легкий доступ к главной странице

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

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

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

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

1.2 Используйте простой и предсказуемый URL-адрес своего сайта.

URL-адрес должен быть напрямую связан с названием вашей организации. Легко угадываемые адреса вроде «Company.com» позволяют посетителям без труда находить ваш сайт без использования поискового запроса. (Это также уменьшает шанс некорректных подсказок от браузера.)

Если ваш бренд или товар известен под альтернативным названием, например, «Coke» вместо Coca-Cola, рекомендуется регистрировать домены для этих популярных сокращений. Так, попытка перейти на «coke.com» автоматически перенаправит вас на официальный сайт: «coca-cola.com».

1.3 Сделайте главную страницу вашего сайта отличной от остальных.

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

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

Принцип 2: Сообщайте, кто вы и чем занимаетесь

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

2.1 Размещайте название и логотип компании на видном месте в левом верхнем углу главной страницы.

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

Логотип Chevron не бросается в глаза из-за нестандартного расположения по центру и небольшого размера. Кроме того, название бренда в логотипе очень маленькое, а цвет логотипа может сливаться с изображением на заднем плане.

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

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

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

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

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

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

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

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

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

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

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

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

На домашней странице Citizens Bank рекламируется услуга под торговой маркой Citizen Checkup — индивидуальная финансовая консультация. Однако в описании отсутствует ясное пояснение, что именно включает в себя данное предложение.

2.4. Удостоверьтесь, что изображения на вашем сайте отражают ваш бренд.

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

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

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

На домашней странице BP в главном пространстве представлены изображения ее предприятия, дающие информативное представление о направленности ее бизнеса.

Принцип 3: Раскройте содержание с помощью примеров

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

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

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

Дизайн первого экрана включает в себя два основных аспекта:

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

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

Bath & Body Works размещает рекламный баннер и часть виджета с видеороликом выше сгиба на своей главной странице. Темная область обозначает область ниже сгиба. К сожалению, контент над сгибом мало что рассказывает о продукте или бренде и не побуждает к дальнейшему знакомству.

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

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

3.2 Покажите реальные примеры того, что предлагает ваш сайт.

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

На главной странице сайта Freeport-McMoRan представлены четыре общие категории контента с картинками-ссылками на страницы каждой категории. Эта страница была бы более эффективной, если бы на ней отображались примеры контента из каждой категории.

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

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

Принцип 4: Оперативные действия и навигация

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

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

Ясные и понятные названия для ссылок критично важны для главной страницы сайта. Они должны быть точными и информативными.

Общие выражения типа «Кликните здесь», «Познакомьтесь с...» или «Подробнее» не дают понимания о том, что ждет пользователя после клика, и делают трудным различение между разными ссылками при просмотре страницы.

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

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

Главная страница сайта Роберта Халфа эффективно ориентирована на разную аудиторию за счет организации основных призывов к действию под четкими заголовками, такими как «Для ищущих работу» и «Для бизнеса».

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

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

Домашняя страница CSX страдает от отсутствия визуальной иерархии. Плотное и насыщенное содержимое страницы затрудняет выделение приоритетных задач.

4.3 Разместите основную навигацию на видном месте.

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

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

Принцип 5: Стремитесь к простоте в оформлении главной страницы

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

5.1 Отдавайте предпочтение простому и стандартному дизайну главной страницы.

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

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

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

5.2 Минимизируйте движение и анимацию.

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

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

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

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

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

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

5.3 Обеспечить немедленный доступ к контенту.

С момента появления Интернета скорость была важнейшим фактором, влияющим на удобство пользования сайтом. Несмотря на повсеместное распространение высокоскоростного интернета, время отклика остается таким же актуальным, как и 30 лет назад. Исследование Google показало, что вероятность того, что пользователи покинут страницу, возрастает на 32 %, если время загрузки увеличивается с 1 до 3 секунд.

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

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

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

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

5.4. Избегайте всплывающих окон и заставок, если это не предусмотрено законом.

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

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

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

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

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

Долговечность принципов домашней страницы

В 2001 году Якоб Нильсен в своей книге «Удобство использования домашней страницы: 50 деконструированных веб-сайтов» выделил 113 советов по созданию комфортной главной страницы. Большинство из этих советов остаются релевантными и сегодня, отражая пять ключевых принципов, которые обсуждаются в данной статье.

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

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

Узнайте, как увеличить конверсию на 41%!
Выберите
ваш сайт
Укажите сайт и получите 7 точек роста.
Рассчитайте
стоимость
Контролируйте стоимость и состав услуги. Авторизуйтесь и выбирайте только то, что нужно вам.
Получите результат
и сопровождение
После оплаты и выполнения задания продолжайте получать регулярные советы и рост конверсий.
Понравилась статья? Жмите лайк или подписывайтесь на рассылку.

А также поделитесь статьей с друзьями в соцсетях.

Команда AskUsers
Команда AskUsers