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

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

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

Установить Foundation

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

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

Где Start

Очевидное место, чтобы начать, думая о разработке эффективной навигации для любого размера экрана содержание сайта.Если веб-сайт является достаточно большим, или имеет много контента наследия, это может означать, проведения audit ² .Если веб-сайт имеет меньше структуру, то инвентаризация общего содержания групп и аудиторий может быть достаточно.Аудит, инвентарь или иначе, не обращая внимания содержание до тех пор, пока вы хорошо в дизайне является рискованным, как Сара Уотер Боеттчер напоминает us ³ :

“Ты уверен, что в конечном итоге с проблемами, как навигационной системой, которая работает только для двух уровней содержания, когда у вас действительно есть четыре уровня, чтобы бороться с, что делает все, что глубоком информации, доступной толькос трудно управлять (и находить) Текстовые ссылки — или, что еще хуже, что делает его полностью недоступным, кроме как через поиск “

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

• ? Какие существуют группы контент
• Что их таксономии выглядеть
• На какую аудиторию (ы) они служат
• Что отношения существуют между этими группами
• Какова их приоритет (с учетом перспектив и для бизнеса и пользователей)

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

Поговорите с People

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

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

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

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

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

Получить Messy

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

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

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

⁵

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

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

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

Получить Real

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

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

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

Используйте то, что вы Know

Я не был увлечен идеей использования “не-дизайн” инструмент, как Keynote для создания анимированных прототип на первый взгляд.Что продал св …

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