Лого vc.ru

Как разработать навигацию для сайта или приложения: ошибки и решения

Как разработать навигацию для сайта или приложения: ошибки и решения

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

Поделиться

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

Монтгомере приводит в пример песню This Place is a Prison группы Postal Service, в которой есть строчка «Если вечеринка случается каждую ночь, это не вечеринка» — мысль заключается в том, что любое событие, которое происходит регулярно, теряет свое значение. По мнению UX-эксперта, то же самое можно сказать о навигации — человеческий мозг устроен так, чтобы замечать вещи, которые чем-то выделяются из окружающей однообразности. Именно поэтому на копировальных машинах кнопка для начала печати всегда яркая и большая.

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

Приоритезация и визуальный язык

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

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

Интерфейс приложения для управления проектами Harvest выделяет основные функции (отчеты и расписание), а второстепенные делает менее заметными («Профиль»)

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

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

Ошибки в навигации

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

Craiglist

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

Jimmy John's

На сайте компании Jimmy John's, которая предлагает сэндвичи (в том числе с доставкой), навигация также выполнена не лучшим образом, считает Монтгомери. Он говорит, что каждый раз, когда хочет сделать заказ, ему приходится читать каждую надпись на странице. Ради того, чтобы сайт выглядел единообразно, разработчики использовали для элементов навигации только три цвета: красный, черный и белый.

Microsoft Metro UI

Монтгомери критикует и навигацию в Metro UI от Microsoft, сочетание цветов в котором (белые буквы и иконки, однотонный фон) заставляет пользователей читать все надписи на экране.

iPhone-приложение Rdio

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

Apple iTunes

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

Слева скриншот 9-й версии iTunes, справа — 10-й с черно-белыми иконками

Верные решения

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

Twitter

Веб-интерфейс Twitter очень прост, в нем не так много кнопок, но каждой из них соответствует «говорящая» иконка. Для самого важного действия — создание нового твита — используется цветная иконка.

Instagram

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

EPB Fiber Optics

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

ESPN 

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

Советы по созданию навигации

В заключение, Монтгомери дает UX-специалистам и дизайнерам несколько советов по созданию интерфейсов с хорошей навигацией.

Необходимо думать о целях пользователя и конверсии

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

Единообразие не всегда полезно

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

Нужно использовать не только текст, но и визуальный язык

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

Цвет и размер имеют значение

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

Статьи по теме
Визуальное представление контента: карточные интерфейсы17 июля 2014, 13:19
Когнитивная нагрузка: как облегчить восприятие интерфейса продукта27 августа 2014, 14:58
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Некоторые скриншоты из прошлого века )

статья из разряда: Хорошо делать хорошо, а плохо - плохо! ценность статьи для дизайнеров - 0,0
а остальным... только еще больше запутает.

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

ну навскидку - habrahabr.ru/post/31408/
очень многим дизайнерам не помешали бы эти правила. и уж точно 99,9 людям, имеющим отношение к digital проектам.
Несмотря на кажущуюся очевидность, людям нужен кто-то извне, чтобы донести это до них. если уж они сами себе не верят.

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

0

из конкретики: "Именно поэтому на копировальных машинах кнопка для начала печати всегда яркая и большая."

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

ну и по иконкам - главное в них очевидность. даже если они будут черно белые, но легко считываться - то проблем в восприятии не возникнет.
например: cdn3.pcadvisor.co.uk/cmsdata/features/3528441/Android-L-screenshots-Apps-Multitasking_thumb.jpg

>> она выделяется чтобы те, кому не нужны остальные кнопки, не выискивали основную

Так ровно об этом речь в материале и идет

0

не совсем. "монотонность" применимо к набору иконок но не к элементам, различие которых закладывается на самом глубинном уровне. да, монотонности стоит избегать в иконках, но даже в этом случае вы забываете про обучаемость. хотя намек на это был с иконкой Yelp: часто используемые иконки человек учиться распознавать по неким отличительным признакам, главное чтобы они присутствовали. и тут ряд иконок различных по цветам - ок. или ряд одноцветных иконок, различных по форме - тоже ок. главное чтобы различия были достаточно явные. и тогда при кажущейся монотонности - человек не будет путаться.
это основное с чем не согласен, а расстановка акцентов - это такие прописные истины, даже удивительно было зачем об этом писать ;)

да нормальная статья. просто все тут профи типа))) ну и устарело все немного. Крейглист вообще можно целиком на помойку.

0

из-за таких статей большинство считает что в винде глупые одноцветные плитки...но на самом деле вот как-то так

а по мне - одноцветные плитки были лучше.

0

Очередная статья от Капитана.

designmodo.com/design/ux-design/

ну тогда можно здесь почитать.

0

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

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Vsevolod Volchansky
Chat Helpdesk

Ему про Фому, он про Ерему))

«Тинькофф банк» анонсировал открытие сети центров разработки
0
FrostBite
ProGamer.ru

Всем. Я за нацию технологий и творчества.

Власти России намерены снизить беспошлинный порог для ввоза интернет-посылок до 500 евро с середины 2018 года
0
Alex Samoylenko

Кандидатам на лучшую мобильную игру в Минске передает привет лучшая мобильная игра в Минске) шучу) Андрей, Ксения, вы молодцы! Игра крутая.

Mushroom Wars 2: рассказ российских разработчиков о том, какой путь прошла игра от концепта до релиза
0
reggaejunkiejew

так в том и вопрос, в статье вообще не сказано чего они там такие умные и красивые настартапили и на антрепренировали.

Дом, который построил Питер Тиль
0
Anton Kuchumov
WorkOut

Спасибо, из всего списка как раз хотел начать с неё.

Лучшие книги 2016 года — выбор Билла Гейтса
0
Показать еще