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

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

Важность Wayfinding

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

1. Вы паузу в воротах и ​​взгляд вокруг, чтобы быстро обследовать свое окружение .
2. Вы наблюдаете в каком направлении большинство людей, кажется, шел и начать движемся в этом направлении .
3. Как только вы начнете ходить, ваше внимание дартс из одного знака в другой, сканирование для любого количества символов или текста, который напоминает “получения багажа” или “наземное транспортное” и игнорируя все, что не соответствует ни тех .
4. После того как вы чувствуете, как вы движетесь в правильном направлении, ваше внимание расслабляет, и вы начинаете обращать внимание на любые магазины или рестораны, которые вы, возможно, захотите вернуться в следующий раз вы находитесь в аэропорту .

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

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

1. Тираж systemsИнфраструктура, которая позволяет людям перемещаться по space
2. Пространственное cuesНаблюдаемые свойства пространства, которые помогают людям разобраться в их surroundings
3. SignageУчебные знаки, символы и иконография, чтобы вести people

Тираж Systems

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

Иерархическая Tree

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

¹

Эта модель имеет тенденцию к превращению в ссылку тяжелые, что делает его хорошо подходит для больших экранов, но потенциально обременительным, если они упакованы в пределах небольшого экрана.Вместо того, чтобы хлюпать широкие меню на малюсенький экранов мобильных телефонов, дизайнеры изучали концепцию разворачивается experiences, термин дизайнер и исследователь Рэйчел Hinman ³ использует для описания систем,постепенно раскрывать информацию для пользователей.Как вы планируете систему циркуляции для вашего сайта, как вы могли бы включать следующие “разворачиваются” шаблонов:

Вложенные Doll

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

⁴

Концентратора и Spoke

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

⁶

Бенту Box

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

⁸

Filtered View

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

¹⁰

Объединение Systems

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

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

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

¹²

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

Пространственное Cues

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

Landmarks

Вехой любой замечательный, уникальный или запоминающимся объект, который вы наблюдать в вашем окружении.Некоторые достопримечательности могут видеть на расстоянии и поможет вам выяснить, где вы находитесь на вашем положении по отношению к ним.Например, Чикаго является домом для одной из самых высоких небоскребов в мире, Уиллис-тауэр.Если в любой момент вы становитесь дезориентированы, исследуя город, нужно только сканировать горизонт и сравнить ваш относительное положение башни, чтобы получить представление о том, где вы находитесь и в какую сторону есть что.Другие достопримечательности просто выровнять свой маршрут, помогая вам найти свой путь к и назад от конкретного места.Достопримечательности помочь нам определить и понять пространстве.Степень, в которой мы полагаемся на достопримечательности свидетельствуют как мы предлагаем направления: “Поверните налево на развилке дорог”, или “. Продолжить прямо в трех кварталах, пока не достигнете Starbucks, а затем повесить право”

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

• LogoДля возврата на главный экран easily
• Основной navigationБыстрый доступ к страницам первичных посадки, что позволяет пользователям получать сводные и исследовать другие разделы .
• Breadcrumbsукрепляет текущее местоположение в системе и действует как лестница для траверсировать копию сайта map
• SearchОбеспечивает уверенность и альтернативный способ искать информацию, когда пользователи не хотят возвращаться назад или продолжить browsing

Другие достопримечательности могут появиться только в определенных местах, помогая посетителям определить, где они находятся в определенном разделе сайта:

• Раздел bannersУсиливает какой раздел пользователь in
• Раздел navigationДоступ к подобным категориям content
• Уникальные шаблоны и компоненты (слайд-шоу, галерей или событиекалендари) Визуально идентифицируемые точки, которые пользователи могут помнить Передача и попытаться вернуть to

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

• PositionОни сохраняют свою относительную позицию страницы, или же они прыгают вокруг
• FormПункты сохраняют ли свою форму или преобразовать во что-то совершенно другое
• ColorУ цвета текста и фона остаются теми же или переключиться
• PriorityУ наиболее известных компонентов страницы сохраняют свою пропорциональную визуальный вес по размерам экрана, или же иерархии изменения
• VisibilityЕсть видимые вещи по-прежнему выявленные и скрытые объекты до сих пор таится

¹⁴

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

Edges

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

¹⁶