75статья

Особенности дизайна для Retina Display

Опубликовал Александр Иваничкин, 21 марта 2013

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

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

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

Jess and Russ

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

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

Я начал писать данный пост, надеясь, что мы сможем предложить нечто большее, чем просто прокрутку. Этот пример показывает, что иногда прокрутка – это наиболее очевидный способ навигации. Сайт Джесс и Расс можно было легко разбить на несколько страниц (с навигацией при помощи ссылок «Далее» и «Назад» сверху и снизу каждой страницы). Таким образом, все будет двигаться также линейно, однако каждый клик моментально будет нарушать повествование. В данном случае, прокрутка оказалась лучшим вариантом.

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

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

Ballantyne

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

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

В загрузочной части для домена расположены ссылки с текстом «Established 1921» («Основано в 1921 году») и «Контакты». При нажатии на первую, страница пролистывается вверх до раздела «Кто мы такие» (информация «О нас» вверху). Вторая прокручивает страницу мимо всех изображений и текста вниз страницы к контактной информации.

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

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

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

Также как и сайт Джесс и Расс, Ballantyne наиболее удобно прокручивать. Здесь у нас также есть альтернативные способы навигации вдобавок к прокрутке. Однако, тут есть несколько проблем:

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

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

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

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

Cadillac ATS против Мира

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

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

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

Мы здесь чтобы исследовать, а потому тут есть моментальная подсказка, как это делать. Анимация из набора стрелок, показывающих вниз, предполагает, на что мы смотрим. Они направляют взгляд на другую направленную вниз фигуру-стрелку со словами «посмотрите видео». Фигура и слова – это ссылка.

Клик мышкой прокручивает видео снизу и размещает его в нужном месте. Под видео расположена еще одна уже знакомая нам направленная вниз фигура со словами «ATS против Ветра». Еще один клик прокручивает контент снизу, в этот раз дополняясь сменой фонового изображения и эффектом параллакса.

Каждый последующий клик прокручивает новую часть страницы. Вы можете пройти всю страницу, нажимая фигуры одну за другой, пока не дойдете до конца, где вы можете зарегистрироваться (поделиться информацией на FaceBook, Twitter или Google+) или посетить одну из оставшихся трех локаций.

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

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

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

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

Клик по любой из точек прокручивает страницу до определенного раздела или подраздела. При наведении курсора на светлой точке появляется подсказка-указатель с заголовком раздела.

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

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

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

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

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

Bleep Radio

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

Любой браузер, открытый при разрешении как минимум 1200?900, отображает большую часть главного меню, расположенного внутри большого треугольника со словом «Discover» («Откройте») (опять-таки, зазывая к исследованию). Ссылка «Program» («Программа») переносит вас в раздел вверху страницы (как «Кто мы такие» на сайте Ballantyne). Также, тут есть знак Х, который позволяет вернуться.

Кроме ссылки «Program», большинство других ссылок расположены в основном треугольнике «Discover». И, конечно же, вы можете прокручивать страницу вверх и вниз в поисках различного контента.

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

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

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

С более позитивной точки зрения, данный сайт имеет некоторые качества, которые одновременно являются привлекательными и забавными:

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

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

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

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

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

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

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

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

  • Электричество
  • Биомасса
  • Газ
  • Нефть
  • Твердое топливо

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

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

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

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

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

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

Заключение

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

Эти сайты позволяют нам запомнить несколько уроков в отношении навигации:

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

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

Это перевод статьи под названием “Exploration Of Single-Page Websites” от Steven Bradley. Перевели в компании UXDepot с одобрением издания Smashing Magazine.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂

VK.init({apiId: 2745953, onlyWidgets: true}); VK.Widgets.Like(‘vk_like_6006’, {type: ‘button’, pageTitle: ‘Исследуем одностраничные сайты’, pageUrl:’/exploration-of-single-page-websites/’, verb: ‘0’}, 6006);

Все комментарии:

    Нет комментариев.


    Оставьте комментарий: