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

Я в дизайне интерфейсов давно, и хорошо помню, как они развивались. На самых первых веб-страницах была кнопка «Домой», кнопка «О нас» и, возможно, ссылка на контакты. Потом стали изучать «Фотошоп» и появились аляповатые изображения вместо кнопок. Лишь бы выглядело хорошо.

Раньше в интернете было полно плохо сгенерированного HTML, немного фреймов и тонны флеша. О да, все было на флеше. Чтобы окончательно распрощаться с SEO.

О, а вы помните списки?

Фото: twimg.com

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

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

Времена меняются

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

1. Сайты стали меньше, но больше (это сложно)
 

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

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

2. Гаджеты поменялись

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

3. Изменились пользователи и наше представление о них

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

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

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

Где мы сейчас?

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

1. Плоская навигация

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

Фото: The Cool Club

Исторически встречается на небольших сайтах:

2. Скрытая навигация

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

Фото: Awwwards.com

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

Еще примеры:

3. Гибридная навигация

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

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

Часто используется навигация в нижнем колонтитуле.

Примеры:

4. Навигация на основе систематики

Взгляните на какой-нибудь блог. Или новостной сайт. Или на Pinterest. Как раз здесь находится подобная навигация.

Фото: Pinterest

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

Примеры:

5. Экспериментальная навигация

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

Юзабилити с такой навигацией страдает, зато она свежа и креативна.

Примеры:

Навигация в будущем

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

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

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

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

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

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

Источник