как создать навигацию, поиск и домашнюю страницу сайта

kak sozdat navigacziyu poisk i domashnyuyu straniczu sajta?v=1656590176

автор Анант Джайн

7-минутное руководство по правильному получению этих трех основных компонентов.

vIrqY20hUWlVlYv1fOfyvOY4ugEir62exVJL
Источник: Галимжан Абдугалимов на Unsplash

Если вы хотите купить новый молоток в строительном магазине, представьте, как вы это сделали:

  • Вариант 1: Вы можете или просмотреть магазин – там есть проходы с названиями отделов сверху, а внутри отдела есть вывески в конце каждого прохода.
  • Вариант 2: Вы можете найти ближайшего клерка и просто спросить, где они хранят молотки.

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

sub9RgTz1vWXzPMUgICxYdEukZGnP6d0lXoC

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

Это краткое руководство, частично основанное на фундаментальной книге Стива Круга «Не заставляй меня думать», Я научу вас, как создать навигацию, поиск и домашнюю страницу вашего сайта. Начнём с навигации.

Правильная навигация

Зачем нам нужна навигация?

В отличие от нашего примера с хозмагазином, сайт не является физическим пространством. Он отличается от хозяйственного магазина тремя способами:

  1. Веб-сайт не дает пользователю ощущения масштаба
  2. Веб-сайт не дает пользователю ощущения направление
  3. Веб-сайт не дает пользователю ощущения Местонахождение

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

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

cKZ17A3SyMsS0maXbcsLBN93030kLfd1xzeb

Как создать навигацию?

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

  • Идентификатор сайта в верхнем левом углу – это сообщает пользователю, на каком сайте он находится (логотип Apple на скриншоте выше).
  • Разделы сверху – способ обойти различные части сайта с выделенным текущим разделом, чтобы указать, где вы находитесь (например, разделы Mac, iPad и iPhon на снимке экрана выше).
  • Вкладки (необязательно) – вкладки, если они сделаны правильно, очевидны, их трудно пропустить и гладкие. Активная вкладка должна быть другого цвета и физически соединяться с пространством под ней, чтобы она выскочила на передний план.
  • коммунальные услуги таких как «Мой аккаунт», «Отслеживать заказ» и «Магазины». Не вставляйте больше пяти из них – остальные можно найти в навигации в нижнем колонтитуле.
  • Панировочные сухари: это еще один набор индикаторов «Вы здесь», например выделенный раздел вверху. Сделайте панировочные сухари небольшими и в верхней части страницы, где они не мешают основной навигации. Лучший способ сделать это – использовать > между уровнями и выделен жирным шрифтом последний элемент (элемент, на котором вы сейчас находитесь, и поскольку вы на нем это не должно быть ссылкой).
54GnJ97ntnTOaeNzAHOo4NyFT6Fhzk7ctev0
Панировочные сухари на странице продукта Best Buy
  • Название страницы: на какой ты странице? Каждая веб-страница в идеале должна иметь название, совпадающее со словами, щелкнутыми, чтобы попасть туда. Он должен быть заметен и в нужном месте. В визуальной иерархии страницы должно выглядеть, что она обрамляет содержимое, уникальное для этой страницы.
  • Местная навигация на левой боковой панели (необязательно): это параметры, доступные на текущем уровне.
  • Навигация в нижнем колонтитуле: сюда идут все остальные утилиты.
nOUQohyFKB02wR8us7BXOmMGNC5i28-a2-we
Нижний колонтитул на NNGroup.com

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

Упрощение поиска

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

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

f2NVvqtyqvrlO8NsZx1YrPE8X81pZLPIrodW
Когда поиск охватывает только публикацию, область поиска указывает на это.

Как вы знаете, хорошо ли вы поработали с навигацией?

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

  • что это за сайт? (идентификатор сайта)
  • на какой я странице?
  • каковы основные разделы этого сайта?
  • каковы мои варианты на этом уровне?
  • где я в схеме вещей?
  • как я могу искать?

Разработка домашней страницы

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

  1. Что это?
  2. Что они здесь имеют?
  3. Что я могу здесь сделать?
  4. Почему я должен быть здесь, а не где-нибудь?
  5. С чего начать…

…если я хочу искать?

…если я хочу посмотреть?

…если я хочу попробовать их самые лучшие вещи?

Задача домашней страницы – ответить на эти вопросы.

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

  1. Слоган: хорошие теглины четкие и информативные и объясняют, чем занимается ваш сайт или организация. Они достаточно длинные, но не слишком длинные и передают дифференциацию — они не звучат общими. Помогает, если они характерны, резвы и (иногда) остроумны.
  2. Поздравительная реклама: убедитесь, что это то, что передает то, что делает сайт.
  3. «Узнать больше»: Инновационные продукты, как правило, требуют достаточного количества пояснений. Люди привыкли смотреть короткие видео на своих компьютерах и мобильных устройствах и часто с готовностью просматривают их на домашней странице.
B6n9gkmElDG5VDt0dk93ra6LRt5fVcQRfHoz
Домашняя страница Commonlounge

Группа НН опубликовал следующий список из 10 рекомендаций по удобству использования домашней страницы, который является отличным контрольным списком перед запуском:

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

Вот список в действии на их собственном сайте:

un9wZKq4vaZQYMrHJv811HDvQtlEtTTrwLSW
Главная страница NNGroup, реализуя большинство их рекомендаций.

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

ldOxUIQ3-plBQqOi7VdZxLohPl-QpS-ouK10

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

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

R1v85eRIzXSYTP9Jfy3tJcYe1Vxi4kuqyCys

Добавить комментарий

Ваш адрес email не будет опубликован.