Всплывающее меню на основе off-canvas анимации, постепенно становится основной частью навигационной модели для мобильных шаблонов. Даже в некоторых шаблонах для персональных компьютеров используется эта популярная тенденция. Ведь недаром принято считать, что off-canvas меню — это отличный способ поддерживать контекст, давая пользователю множество дополнительной информации.
В этой статье мы поговорим о том, почему off-canvas модель стала настолько успешной в качестве навигационного шаблона, и покажем ее потенциал для получения ещё больших возможностей. Область использования данного шаблона простирается от фильтров на страницах с продуктовыми списками до корзин и перечней недавно просмотренных статей. Его потенциал напрямую зависит от нашего стремления создавать что-то новое и более современное. Настало время выяснить, как далеко мы можем зайти в использовании off canvas шаблонов.
Неизведанная территория.
Доводилось ли вам прежде сталкиваться с всплывающим меню на основе off-canvas технологии, вам знакомы эти боковые панели, которые перемещаются по краю экрана? В настоящее время их даже можно рассматривать, как вполне обычное явление. Совсем недавно удалось выяснить причину такой популярности: в области мобильных устройств почти исчезло понятие окна. Сегодня, большинство устройств, находящихся на рынке, практически не дают нам контроля над окном.
Вместо этого мы работаем только с двумя основными слоями: окно просмотра и холсты (или канва́с — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптования, обычно на языке JavaScript). Хотя и существует определенный потенциал, но дизайнеров очень часто раздражают ограниченные рамки окна просмотра. В этом пейзаже чрезвычайно важным элементом становится всплывающее меню на основе off-canvas шаблона. Имейте ввиду, что использовать его на рабочем столе нужно с особой осторожностью.
Из-за ограниченной недвижимости (доступное пространство) мобильных устройств, дизайнеры увидели необходимость использования дополнительного пространства и представления целевой информации таким образом, чтобы уберечь пользователя от потери контекста или текущей позиции на экране. Шаблон на основе off-canvas позволяет нам достичь этих целей. Off-canvas довольно редко используется на рабочем столе персональных компьютеров, поскольку в этом просто нет необходимости. Применимо к сфере мобильных устройств, off-canvas представляет собой полностью инновационную концепцию. Он создает новую область возможностей дизайна. Как и при исследовании любой неизведанной территории, тем, кто готов рискнуть, может выпасть щедрое вознаграждение. Для дизайнеров, это редкая возможность создать что-то новое.
Ранние исследования.
Думаю вполне очевидно, что история не сохранит имена тех людей, которые проявили храбрость и первыми рискнули выйти за рамки холста. Как и в случае с открытием Америки, мы будем помнить только тех, кто отметился наиболее выдающимися достижениями. Таким образом, Facebook будет для нас своеобразным Колумбом.
Разработчики Facebook поставили перед собой задачу решить вполне конкретную проблему, которая была связана с представлением этого ресурса на экране мобильного телефона. Меню навигации имеет большую длину, с множеством разделов, актуальных для пользователя. Пользователь должен иметь возможность визуального контакта с этим навигационным меню, при этом, не теряя выбранной позиции на временной шкале. Если пользователь принимает решение сохранить текущее местоположение, то должна существовать возможность перейти на предыдущую позицию.
Оригинальное off-canvas всплывающее меню Facebook во многом напоминало ту модель, которая в настоящее время используется в качестве основного шаблона мобильной веб-навигации. Сегодня off-canvas по-прежнему используется для системы обмена сообщениями, аналогично тому, как это происходит в Android приложениях.
Общие образцы навигации работать не будут. Меню слишком длинное, чтобы поместиться на экране, а если разместить его в другом месте холста, то это может привести к потере пользователями контекста. Решение проблемы заключается в том, чтобы заблокировать холст и потянуть его вправо, тогда навигационное меню будет отображено внизу. Использование off-canvas, аналогично тому, как это было в рассмотренном нами примере, является совершенно новой концепцией.
Планирование Новой территории.
Причина, по которой эта модель работает — и почему она выглядит так естественно — заключается в том, что само действие является очень естественным. Временное перемещение чего-то в сторону и перенаправление фокуса, позволяет пользователю сохранить представление о том, какие действия он выполнял ранее. Подобное действие является чрезвычайно распространенным в физическом мире. Мы стараемся запомнить текущее место в газете, когда нужно переключиться на другой раздел. Мы удерживаем большой палец на странице и переворачиваем ее, чтобы прочитать примечание в конце книге. Мы выходим за область таблицы, когда пытаемся найти квитанцию для соответствующей позиции в налоговой декларации.
Все это физические примеры того, что может эмулировать всплывающее off-canvas: вы без особых усилий можете сохранить текущую позицию и вернуться обратно к тому, что делали ранее. Всплывающее меню на основе off-canvas является идеальным способом взаимодействия с контентом на мобильных устройствах. Это объясняется в первую очередь тем, что пользователь может решить вполне конкретную задачу: сфокусироваться.
При использовании мобильного телефона нам очень часто приходится фокусироваться на отдельных элементах. Подобное поведение делает поддержание контекста чрезвычайно трудной задачей. Мы вынуждаем пользователей выполнять прокрутку страницы вверх и вниз, скрываем и отображаем контент и всячески стремимся заставить пользователей выполнять нужные нам действия. Полосы прокрутки, которые бы помогали пользователю определить текущее местоположение на странице, как правило, отсутствуют, и вернуться на исходную позицию очень часто бывает крайне трудно. Контекст играет роль карты, которая помогает пользователям ориентироваться в содержании. Без него они бы заблудились и, скорее всего, просто бы покинули веб-сайт.
С всплывающим меню на основе off-canvas модели, мы поддерживаем контекст на странице, представляя при этом огромную массу новой информации. Всплывающее меню может содержать целые страницы с новыми взаимодействиями и контентом, и позволяет пользователю довольно комфортно себя чувствовать. Это чрезвычайно мощный шаблон с большим потенциалом, который мы, несмотря на все его достоинства, даже не начали подробно исследовать.
Синдром плоской земли.
Несмотря на существующий потенциал, мы действительно пока еще не готовы расширить границы off-canvas. Дизайнеры любыми возможными способами пытаются избежать экспериментов и это уже стало неприятной тенденцией. Мы всегда готовы использовать проверенные и хорошо зарекомендовавшие себя образцы, и мы все реже проводим критический анализ того, почему выбранный подход оказался успешным. Конечно, все прекрасно понимают, что всплывающее меню на основе off-canvas отлично подходит для реализации навигации. Но некоторые разработчики не до конца понимают, насколько хорошо этот подход сочетается с особенностями их проекта.
При создании нового шаблона разработчики Facebook не ставили перед собой задач решения проблем, связанных с навигацией. Они прежде всего решали проблему взаимодействия. Им нужно было найти способ представления большого количества взаимодействий и информации, при этом не отвлекая пользователей от их первоначального намерения — просмотра перечня событий. Вместо того, чтобы думать об off-canvas выпадающем меню в качестве навигационного шаблона, мы должны думать о нем, как о контент стратегии. Как представить больше подробной информации для пользователя, при этом не отвлекая его от текущего занятия?
Facebook не ограничился использованием всплывающего меню только лишь для навигации. Оно также используется для списка контактов обмена сообщениями. Наверное, в подобной модели даже более эффективно используется всплывающее окно, так как пользователям удобнее открывать боковую панель и сразу же видеть, кто в отправил им быстрое сообщение, прежде чем вновь вернуться к просмотру списка событий. Шаблоны, наподобие этого, не являются чем-то постоянным. На самом деле, единственный способ их улучшения заключается в постоянном экспериментировании. Решение Facebook стало настоящей революцией в модели представления контента для мобильных устройств, и очень немногие люди продолжают продолжают развивать эту модель.
Остерегайтесь популярных тенденций.
В этом случае всегда присутствует риск. Мы не должны использовать off-canvas шаблон только потому, что он является новаторским или популярным. Как и большинство элементов веб-разработки, каждый метод имеет свои плюсы и минусы. Всплывающее off-canvas меню подходит не для всех проектов. Лучше всего оно подходит для тех ситуаций, когда нужно предоставить много информации или сложных взаимодействий без отвлечения пользователей от главного содержимого.
Если вам необходимо отобразить только несколько элементов навигации или, если дополнительная информация, которую вы хотите разместить, слишком коротка, то этот шаблон будет скорее нарушать общую структуру, нежели привносить какое-то удобство. Помните, что основное назначение этого шаблона заключается в создании нового представления, сохраняя при этом контекст первоначального представления. Люди могут потерять информационный поток всякий раз, когда перед ними появляется всплывающий элемент. Если объемы дополнительной информации относительны невелики, то лучше всего использовать поповер или взаимодействие магазинного типа, и оставлять пользователя в пределах экрана.
Другой важной деталью, которую всегда нужно иметь в виду, является тот факт, что всплывающее off-canvas меню требует немного больших объемов вычислительной мощности и возможностей браузера, чем другие методы. По большому счету, эту проблему можно решить благодаря использованию хорошего фреймворка (смотрите мою рекомендацию в конце этой статьи), но тем не менее, подобные проблемы до сих пор имеют место. Старые устройства и устройства без поддержки JavaScript могут работать некорректно, если вы не предоставите хороший запасной вариант для этого шаблона. Я рекомендую использовать прогрессивное улучшение — то есть использовать простое решение для старых браузеров, при обнаружении поддержки новых функций, и использовать более оптимальное решение для браузеров, которые могут выполнять соответствующую обработку.
Заполнение деталей.
Итак, насколько же хороши всплывающие меню? Ниже приведены несколько примеров, которые наглядно продемонстрируют их значимость.
Корзина.
В начале этого года я работал над дизайном веб-сайта, связанного с электронной коммерцией, для компании Garmin. Я как обычно воспользовался помощью своего стандартного “тестировщика” (то есть моей девушки). Мы немного поговорили о том, что она любит и, что ей не нравится на мобильных веб-сайтах, связанных с электронной коммерцией. По ее словам, самая большая проблема заключается в часто возникающей необходимости проверять содержимое корзины. Однако, чтобы сделать это, она должна переходить на страницу заказа. Таким образом, она вынуждена отвлечься от просматриваемого в текущее время содержимого.
В этот момент меня посетила хорошая идея. А почему бы не использовать всплывающее off-canvas меню для хранения всей информации из корзины? В случае необходимости, пользователь может быстро открыть корзину и посмотреть на ее содержимое. Они также могут немедленно начать процедуру оформления заказа. Это очень эффективно, поскольку сразу убирается целый шаг. Если вы работаете в сфере электронной коммерции, то наверняка должны знать, что чем меньше шагов присутствует в процессе оформления заказа, тем меньше вероятность того, что пользователь откажется от покупки.
На веб-сайте Garmin, вместо отдельной страницы заказа используется всплывающее окно. Через это …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров