NNGroup: 5 основополагающих принципов проектирования главной страницы сайта 

Привет дорогой.

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

В этой статье:

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

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

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

1.1 Убедитесь, что каждая страница содержит как скрытые, так и явные ссылки на главную страницу.

Люди обычно ориентируются на главную страницу, даже если попадают на внутреннюю страницу через поисковую систему. Прямая ссылка на главную страницу является обязательным элементом веб-сайта, поскольку она обеспечивает безопасный запасной вариант. Чтобы обеспечить легкий доступ к главной странице, используйте как неявные ссылки (через логотипы), так и явные (через ссылку с надписью Home).

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

URL должен легко выводиться из названия вашей компании. Предсказуемые URL, такие как company.com, позволяют пользователям угадать адрес сайта, не прибегая к помощи поисковой системы. (Это также снижает вероятность того, что предложения браузера будут ошибочными).

Если ваш продукт или компания часто упоминаются под альтернативными названиями, например "Coke" для Coca-Cola, заведите URL-адреса и для этих распространенных прозвищ. Например, попытка посетить www.coke.com перенаправляет на основной URL, www.coca-cola.com.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разработка дизайна для сгиба имеет две стороны (каламбур не удался); она включает в себя:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.3 Расположите основную навигацию в хорошо заметном месте.

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

Принцип 5: Сохраняйте простоту домашних страниц

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

5.1 Отдавайте предпочтение простым, стандартным дизайнам домашних страниц.

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

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

5.2 Сведите к минимуму движение и анимацию.

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

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

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

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

5.3 Обеспечьте мгновенный доступ к содержимому.

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

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

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

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

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

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

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

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

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

В 2001 году Якоб Нильсен в своей книге Homepage Usability: 50 Websites Deconstructed определил 113 рекомендаций по удобству использования домашней страницы. Большинство из этих рекомендаций остаются актуальными и сегодня и являются приложениями 5 основополагающих принципов, обсуждаемых в этой статье.

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

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

Спасибо, дорогой!

Уютная тележка: https://t.me/yetanotherdesigner
ВКшечка: https://vk.com/yetanotherdesigner