Как сделать сайт удобным

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

1. Где я нахожусь?

2. Где я уже был?

3. Куда я могу пойти?

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

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

логотип компании, который является ссылкой на стартовую страницу, а также краткое описание сферы деятельности;
центральная навигация, отображающая структуру основных информационных блоков сайта (разделов и подразделов);
форма поиска по сайту.
Если необходимо исключить попадание пользователя из поисковой системы на определенную страницу, необходимо установить запрет на ее индексирование поисковыми системами. Т.е разместить в элементе HEAD тег META NAME="robots" CONTENT="noindex". Поисковые серверы должны исключить такую страницу из баз данных.

Классификация элементов навигации

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

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

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

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

К примеру, это удобно представлять в виде пройденного пути: "Главная > Бытовая техника > Соковыжималки > Moulinex".

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

Для разделения звеньев навигации не рекомендуется использовать символы ":" и "|", т.к. они не информируют о вложенности и соподчиненности страниц. Оптимальным вариантом будет выбор в качестве разделителей "/" или ">".

Навигационная система должна чётко указывать пользователю о том, куда можно перейти с текущей страницы, и какую информацию при этом получить. Поэтому некорректно использовать ссылки с текстом "Вперед", "Следующая глава" и т.п. Особенно неуместна ссылка "Назад" на странице, на которую пользователь попадает с поисковой системы, т.к. ее можно интерпретировать как возврат к окну результатов поиска. Лучше использовать информативные ссылки вида: "Следующая глава: 5. Основы визуального проектирования".

Полезно заполнять для ссылок атрибут title, который при наведении указателя мыши выводит всплывающую подсказку с описанием ссылки. Иногда в отдельный тип выделяют ссылки глобальной навигации, которые ведут на страницы типа About us, Contact us и т.п.

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

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

URL как элемент навигации

URL'ы сайта удобны для пользователя, если названия каталогов и файлов являются информативными. Например: www.macromedia.com/software/dreamweaver/tutorial/links.html.

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

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

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

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

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

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

Текстовая ссылка как элемент навигации

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

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

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

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

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

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

Статьи по теме

9 лучших бесплатных фотостоков

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

2025-12-02

10 причин высокого показателя отказов на сайте

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

2025-11-26

Зачем запускать MVP и как сделать это грамотно?

Создание проекта без минимально жизнеспособного продукта (MVP) аналогично строительству здания без проверки несущей способности фу...

2025-11-26

Перенос сайта с большим количеством ссылок

Сложности переноса крупных проектов Перенос корпоративных сайтов с большим количеством URL требует решения не только техниче...

2025-11-20

Онлайн-формы: универсальный инструмент для сбора обратной связи

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

2025-11-14

Авторизация на сайте: как выбрать решение для удержания клиентов и сохранения продаж

Оглавление Кому нужна авторизация на сайте? Когда и как лучше вводить авторизацию? Виды авторизации: что выбрать для удерж�...

2025-11-14

Внедрение DMARC для защиты корпоративного домена от спуфинга

Привет, Хабр! В этом посте мы снова поговорим о проблеме подделки отправителя (или так называемом спуфинге)...

2025-10-28

Цифровой детокс: необходимость, тренд или искусственная потребность?

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

2025-10-24

No-code/low-code: как создавать цифровые продукты в 2025 без программистов

Представьте: у вас родилась блестящая идея. Не просто очередная догадка, а по-настоящему инновационное решение, которое может изм�...

2025-09-26

Yandex Data Lens: как визуализировать данные для маркетинга и аналитики

Yandex DataLens — это сервис от Яндекса, с помощью которого маркетологи визуализируют результаты рекламных кампаний. Он подключается к разным ...

2025-09-10

Владельцам сайтов: изменения в законе о персональных данных

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

2025-07-04

11 нейросетей для генерации изображений в 2025 году

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

2025-06-10

Год назад то, что занимало у меня несколько дней работы, сейчас я делаю за 1-2 часа. Без преувеличений. И это только начало

За этот год я нашел 7 способов применения ИИ, с которыми моя эффективность и качество взлетели минимум в пять раз. Расскажу честно — без п...

2025-05-30

Нейросети для написания текста: 7 сервисов в помощь копирайтеру

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

2025-05-25

Мы делали презентации 35 лет, а потом пришла нейросеть

*Отсчёт от создания PowerPoint в 1987 году Эту историю для блога рассказал Николай Букин, дизайнер и основатель брендингового ...

2025-05-05