Статьи

Исследуем одностраничные сайты

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

МЕНЮ

Услуги

8 800 555 09 27
звонок по России бесплатный
отправить заявку

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

Использование современных приемов создания сайтов позволяет скучные сайт-визитки превращать в настоящие произведения веб-искусства.

Предлагаем вашему вниманию статью http://www.smashingmagazine.com/2012/11/05/navigation-patterns-in-single-page-websites/#more-142481, любезно переведенную для сайта сотрудником нашей компании, отличным веб-верстальщиком, веб-технологом (и просто красавицей) Дороховой Анной.

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

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

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

Jess and Russ

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

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

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

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

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

Ballantyne

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

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

На главном экране при переходе на сайт мы видим ссылки “Основана в 1921 году” и “Контакты”. Щелчок по первой перематывает страницу наверх в раздел “Кто мы”. Вторая - через весь сайт с картинками и текстом - вниз страницы, в раздел контактной информации.

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

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

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

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

  • Нет ссылки, ведущей к основному экрану, на который мы попадаем, заходя на сайт. Чтобы попасть туда нужно самостоятельно прокрутить страницу, либо сначала перейти в раздел “Кто мы” и закрыть его. Это кажется странным;
  • Переход по ссылкам “Кто мы” или “Контакты” решен не так уж гладко;
  • Нет возможности прокрутить страницу в раздел “Кто мы”;
  • Не очевидно, куда ведет ссылка с текстом “Основана в 1921 году” на основном экране (фактически она ведет в раздел “Кто мы”).

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

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

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

Cadillac ATS vs The World

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

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

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

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

Клик по ней перемещает видео снизу на основной экран. Под видео мы видим уже знакомую стрелку с надписью “ATS vs The Wind”. Следующий клик перемещает на эту позицию нижележащий контент, на этот раз сопровождая перемещение сменой фонового изображения и параллакс эффектом.

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

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

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

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

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

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

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

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

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

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

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

Bleep Radio

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

В любом браузере, развернутом по крайней мере на 1200x900 пикселей, видно большую часть главного меню, находящегося внутри большого треугольника и сопровождаемого надписью “Discover”, вдохновляющей на исследования. Треугольная ссылка с надписью “program” приводит вас в раздел, расположенный выше - над основной частью страницы (как раздел “Кто мы” на Ballantyne). И снова - большой X, чтобы вернуться назад.

Большинство других ссылок расположены в главном треугольнике отдельно от упомянутой выше ссылки “program”. Ну и конечно, вы можете скроллить страницу вниз и вверх в поисках нужной информации.

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

  • Вам придётся обходиться без навигационного меню до тех пор, пока вы не переместитесь в самый верх или низ страницы - основной список ссылок (в большом треугольнике “Discover”) представлен лишь в этих местах;
  • Некоторые треугольные элементы на странице кликабельны, другие - нет, что вносит некоторую сумятицу, заставляя задумываться, какие из них всё же являются ссылками;
  • Страница всегда шире окна браузера, вне зависимости от его размера. При вертикальном перемещении по странице некоторые элементы обнаруживаются то с правой, то с левой стороны.

По справедливости говоря, сайт написан на греческом, поэтому я мог легко пропустить какие-то очевидные подсказки.

А теперь о хорошем - этот сайт имеет следующие одновременно приятные и забавные особенности:

  • Клик по треугольнику “Just Bleep” вверху страницы, убирает большинство контента со страницы, так что вы можете полностью сосредоточиться на своей задаче. Лично для меня ничего особенного не произошло после такого клика, хотя я полагаю, это бы случилось, залогинься я на сайте.
  • Раздел “Bleepers” - это сетка из фотографий участников. Поверх них расположено несколько полупрозрачных треугольников, и наведение на них мыши заставляет их двигаться влево и вправо. В этой особенности не заложено практической цели, но она придает ощущение некоторой интерактивности сайту.

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

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

EVO Energy: Интерактивный гид по энергопотреблению в Британии

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

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

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

  • Электроэнергией;
  • Биомассой;
  • Газом;
  • Бензином;
  • Твёрдым горючим.

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

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

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

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

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

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

Резюме

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

Вот уроки, которые преподносят нам эти сайты:

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

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

Для того, чтобы отправить нам вопрос, вы можете воспользоваться формой ниже: