⬆️ Победители в номинации Search Innovation
Google Partner

Одностраничные сайты: тонкости навигации

Автор:
Рецензент: Олег Гаврилюк
Руководитель оптимизаторов
5,00 1 оценка
4 комментария ,
Одностраничные сайты: тонкости навигации

Что такое навигация по сайту? Как правило, это методичные переходы от страницы к странице. Где-то сверху или сбоку всегда есть навигационная панель, и именно она выступает нашим поводырем по сайту. Если опустить все красивые CSS-фишки и не обращать внимания на чисто косметические перемещения блоков, то схема, как правило, практически идентична. Другое дело – одностраничные сайты. Их линейная структура очень часто может смотреться значительно более выгодно и куда эффективнее справляться с задачами, поставленными перед конкретным ресурсом.

Кейс №1: Jess & Russ (jessandruss.us)

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

Пример Jess & Russ выступает наглядным доказательством того, как форма на 100% отвечает содержанию. Осталось бы это ощущение последовательной и законченной истории, если бы сайт был нагружен навигацией и заставлял прыгать со страницы на страницу? Наверное, нет, и каждый новый клик, каждая миллисекунда ожидания загрузки новой части истории наверняка бы разрушали это ощущение цельного, рассказанного на одном дыхании, повествования. К тому же, за счет отличного дизайна, меткого и лаконичного текста и визуальных эффектов вам точно не придется скучать. Чего стоит один только эффект параллакса, который не просто радует глаз, но и сам является полноценным рассказчиком.

Кейс №2: Ballantyne (ballantyne.it)

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

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

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

Кейс №3: Cadillac ATC против мира (ats-vs-world.cadillac.com)

В отличие от истории любви Jess & Russ и интерактивного каталога Ballantyne, на сайте Cadillac есть несколько отдельных страниц и есть постоянная навигационная панель. Однако внутри каждой страницы мы снова сталкиваемся с принципом линейного повествования. В данном случае перед нами открывается четыре локации: Патагония, Марокко, Монако и Китай. Транспортное средство – сидан ATC, распрекрасная машина, на которой Вам и предлагают начать виртуальное путешествие.

Хитрость данного сайта в том, что здесь использованы сразу несколько типов навигации, рассчитанных на разных пользователей: обычный посетитель просто проматывает страницу вниз, раскручивая «сюжет» определенной локации, более внимательный и увлеченный юзер ищет и находит подсказки, позволяющие перепрыгивать через «главы». Все интуитивно понятно и, что самое главное, преподнесено как квест. Все служит одной цели – в легкой игровой форме рассказать об авто и продемонстрировать его достоинства и изящные изгибы на фоне красивых пейзажей Южной Америки, Африки, Европы и Азии.

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

Кейс №4: Bleep Radio (bleepradio.gr/program)

Bleep Radio – это наиболее нагруженный (если не перегруженный) пример одностраничных сайтов, с многоуровневой навигацией как по оси Х, так и по оси Y. Когда вы оказываетесь на главной странице, визуальное решение, безусловно, цепляет, однако стоит углубиться в изучение сайта, оказывается, что навигационные приемы противоречат друг другу.

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

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

Кейс №5: EVO Energy (evoenergy.co.uk/uk-energy-guide)

Рекомендуем почитать интересную статью о HD веб-дизайне

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

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

Резюме

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

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

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

По мотивам статьи: Exploration Of Single-Page Websites

Do something to stop this war! Russians are killing our children and civilians!