Таблички для мобильного Интернета

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

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

Важность Wayfinding

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

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

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

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

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

Тираж Systems

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

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

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

The hierarchical tree model usually manifests in a horizontal navigation bar, often with a single or multilevel drop down menu. 1
Иерархическая модель дерева, как правило, проявляется в горизонтальном навигационной панели, часто с одинарной или многоуровневой выпадающего меню.( Просмотр большой version 2 )

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

Вложенные Doll

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

With the nested doll navifation, users incrementally tap or swipe to reveal additional menu options as they traverse up and down through the site map. 4
С матрешку navifation, пользователи постепенно нажмите или салфетки, чтобы выявить дополнительные опции меню, как они проходят вверх и вниз по карте сайта.( Просмотр большой version 5 )

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

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

The hub and spoke utilizes a central screen that acts as the launchpad for exploration. 6
Звезда использует центральный экран, который действует как стартовую площадку для исследований.( Просмотр большой version 7 )

Бенту Box

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

The bento box model pulls in dynamic components and information. 8
модель бенто коробка тянет в динамических компонентов и информации.( Просмотр большой version 9 )

Filtered View

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

Filtered views are seen in music apps, directories and other interfaces in which people navigate large volumes of data 10
Фильтры виды открываются в музыкальных приложений, каталогов и других интерфейсов, в которых люди обратятся с большими объемами данных.( Просмотр большой version 11 )

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

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

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

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

Rather than stick with a single information-architecture model and nest members-only content within the overall content hierarchy, we saw that a hub-and-spoke approach to the members center made sense 12
Вместо придерживаться одной информационно-модель архитектуры и гнездо только для членов содержание в общей иерархии контента, мы увидели, что концентратор и спицами подходчленам центр смысл.( Просмотр большой version 13 )

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

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

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

Landmarks

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

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

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

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

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

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

  • PositionОни сохраняют свою относительную позицию страницы, или же они прыгают вокруг
  • FormПункты сохраняют ли свою форму или преобразовать во что-то совершенно другое
  • ColorУ цвета текста и фона остаются теми же или переключиться
  • PriorityУ наиболее известных компонентов страницы сохраняют свою пропорциональную визуальный вес по размерам экрана, или же иерархии изменения
  • VisibilityЕсть видимые вещи по-прежнему выявленные и скрытые объекты до сих пор таится
United Pixelworkers' website has continuity between landmarks across breakpoints. The logo is red in the top left, the navigation is in a black bar along the top, and you can always access the cart from the bright blue button in the top right—no matter which size screen you visit from! 14
Сайт Единой Pixelworkers ‘имеет преемственность между достопримечательностями всей останова.Логотип красного цвета в левом верхнем углу, навигация в черной полосой вдоль верхней части, и вы всегда можете получить доступ к телегу с помощью синей кнопки ярко в правом верхнем — независимо от того, какой размер экрана вы посещаете от!( Просмотр большой version 15 )

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

Edges

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

Foursquare's app (left) packs a lot of tappable items into a small space. Yummly's app (right) uses distinct interface edges to define button tap targets and to visually separate the masthead region from the content area and to distinguish between individual recipes 16
приложение Foursquare в (слева) упаковывает много tappable элементов в небольшом пространств …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.