[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Alexander Lashkov", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f","\u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438","\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435_\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438","\u043a\u0430\u043a_\u0441\u043e\u0437\u0434\u0430\u0442\u044c_\u0443\u0434\u043e\u0431\u043d\u043e\u0435_\u043c\u0435\u043d\u044e"], "comments": 16, "likes": 13, "favorites": 2, "is_advertisement": false, "section_name": "default", "id": "5117" }
Alexander Lashkov
4 955

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

Энди Монтгомери, 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-специалистам и дизайнерам несколько советов по созданию интерфейсов с хорошей навигацией.

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

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

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

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

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

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

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

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

#Интерфейсы #навигация #интерфейсы #юзабилити #создание_навигации #как_создать_удобное_меню

Статьи по теме
Визуальное представление контента: карточные интерфейсы
Когнитивная нагрузка: как облегчить восприятие интерфейса продукта
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления