Статьи

29.07.2017

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

Перевод статьи Vitaly Friedman — Smart Responsive Design Patterns, Or When Off-Canvas Isn’t Good Enough

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

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

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

Адаптивный график сложности

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

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

Изображение: Википедия

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

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

Адаптивный интерфейс конструктора автомобиля

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

А что, если эта компания — BMW? И вам необходимо создать адаптивный автомобильный конфигуратор, который позволит покупателям создавать и приобретать автомобиль по своему выбору? Вам нужно сделать выбор деталей автомобиля снаружи и внутри, выбор объема двигателя, просмотр в режиме 360 градусов и возможность сравнить модели между собой. Очевидно, что интерфейс должен быть адаптивным. Время на исходе, так как подойти к решению задачи?

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

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

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

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

Если мы посмотрим на Конфигуратор машин BMW, то увидим именно то, что мы может определить, если абстрагируемся от макета страницы. На узком экране клиент может выбрать модель в раскрывающемся меню или нажать на фото в линейке автомобилей. Поскольку на мобильных 75% навигации выполняют большие пальцы, имеет смысл разместить кнопку «далее» и другие элементы управления в нижней части экрана. Для того, чтобы дать возможность пользователям быстро перемещаться между разделами конфигуратора, мы можем добавить значок «обзор», предлагающий полноэкранный обзор всех шагов в конструкторе.

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

Конфигуратор BMW использует доступное пространство для подсветки автомобиля; Выбор колеса смещен на боковую панель, по сравнению с более узким видом выше. Увеличить

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

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

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

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

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

Адаптивная выпадающая навигация

В одном из своих эссе Джейсон Фрид из Basecamp сказал, что «наибольшие трудности в области разработки продукта и дизайна интерфейсов возникают при попытке сбалансировать очевидное, простое и возможное». Это может звучать как очень общее наблюдение, но на практике оно оказывается очень жизнеспособным. В действительности, каждый раз, когда мы создаем навигацию, мы пытаемся распределить элементы именно по этим трем критериям. И навигация на сайте будет зависеть от того, как вы их распределите. А теперь посмотрим, что же они означают?

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

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

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

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

World Wildlife Fund выбрал именно такой подход: вместо того, чтобы всегда показывать полную навигацию вне зависимости от размера экрана, они оставили более приоритетные функции, а остальные скрыли, чтобы ими можно было воспользоваться при необходимости. На большом экране верхняя панель навигации включает 7 выпадающих меню. На маленьком экране вы увидели бы только 2 ссылки: «Пожертвовать» и «О нас» и иконку гамбургера, за которой скрыт список с навигацией основного уровня, но не ссылки, которые отображаются на большом экране при наведении курсора. Эти области все еще доступны пользователю, когда он продвигается вниз к разделу страницы.

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

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

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

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

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

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

The Institute for Faith, Work & Economics использует подобный метод для более простой навигации. Он отображает дополнительную навигацию при наведении на широких экранах и использует свободное пространство для отображения дополнительной навигации в правой части панели навигации на узких экранах. Чтобы указать вторичную навигацию, стрелка указывает на право. Однако эта стрелка должна быть больше.

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

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

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

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

Адаптивные мозаики с содержанием

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

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

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

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

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

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

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

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

Адаптивные карты и графики

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

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

Другая опция — принять изначально менее точное представление данных. Например, на карте мира на сайте Кремля пользователю предлагают выбрать интересующую его страну из списка (те страны, которые находятся в интересующей пользователя области карты). Безусловно, пользователю доступны и традиционные функции увеличения и уменьшения масштаба, но найти таким образом, например, Андорру, будет довольно затруднительно. В то же время гораздо проще будет выбрать область на карте, и затем интересующую вас страну из предложенного списка. На веб-сайте есть еще десяток полезных шаблонов, и мы показали их в тематическом исследовании на веб-сайте Кремля в прошлом году. Стоит прочитать!

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

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

Адаптивный арт-дирекшн

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

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

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

В мобильной арабской версии веб-сайта женщина смотрит слева направо, со стаканом апельсинового сока в левой руке. Изображение совсем другое на настольной арабской версии.

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

Еще одна область, где может пригодиться адаптивное художественное направление — это сторителлинг. Так, на сайте Kobe Marathone QBB используется серия мультфильмов, рассказывающая о герое, бегущем по Токио. Изображения меняются в зависимости от размеров экрана, и то же самое происходит с фоновыми изображениями на страницах.

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

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

Заключение

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

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

Автор — Vitaly Friedman, см. оригинал статьи

Другие статьи

+7 495 724-60-03

info@userhouse.ru

119435, Москва, Большой Саввинский переулок, 12с5

Мы в соц. сетях:

© 2010–2017 User House