Информационный Дизайн Сайта: Три Главных Проблемы

Информационный Дизайн Сайта: Три Главных Проблемы

Из статьи вы узнаете имеет ли значение число и порядок расположения ПУНКТОВ В ПАНЕЛИ НАВИГАЦИИ, а также о ВАЖНОСТИ КОРРЕКТНОГО ОТОБРАЖЕНИЕ МЕНЮ НА СЕНСОРНЫХ ЭКРАНАХ.

В НЕЙ СОБРАНЫ ОТВЕТЫ НА ЧАСТЫЕ ВОПРОСЫ ПО ИНФОРМАЦИОННОМУ ДИЗАЙНУ САЙТОВ И ПРИЛОЖЕНИЙ.

Некоторые трудности с информационным дизайном уникальны и возникают лишь в определённых ситуациях.

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

Однако эксперты в области информационной архитектуры отмечают неизменный интерес дизайнеров к определённому ряду универсальных вопросов.

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

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

Рассмотрим ключевые вопросы юзабилити, возникающие при разработке информационного дизайна.

КАКОВО ОПТИМАЛЬНОЕ ЧИСЛО КАТЕГОРИЙ?

Как правило, вам необходимо определить достаточное количество категорий для эффективного отображения всего контента на сайте или в приложении.

Но что значит «достаточное»? Во многом это зависит от контента и целей ресурса.

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

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

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

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

Небольшие сайты должны совмещать доступ ко всему контенту с небольшим числом категорий.

Пример совершенно другого подхода —  это сайт Merida. Это еще один бренд, предлагающий сушилки для рук и еще 15 видов оборудования для общественных туалетов.

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

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

Таким сайтам, как Merida, содержащим широкий диапазон контента, как правило, лучше работать с большим числом категорий.

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

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

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

Наличие именно 4 разделов меню — совсем не обязательное условие.

УПОРЯДОЧИВАТЬ ЛИ КАТЕГОРИИ В АЛФАВИТНОМ ПОРЯДКЕ?

Часто задаются вопросом, какой порядок категорий меню является оптимальным?

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

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

  1. Существует ли другой более удачный вариант организации категорий, который будет более осмысленным?
  2. Знакомы ли пользователи с точными названиями категорий?
  3. Сколько всего разделов в вашем меню?

ВАЖНЫЕ ПРИНЦИПЫ ОРГАНИЗАЦИИ КАТЕГОРИЙ

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

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

Так вы поможете наибольшему числу посетителей сайта получить доступ к искомой информации. Например, сайт-каталог недвижимости Rightmove.co.uk разместил на первых местах в меню сайта категории «На продажу» и «Аренда».

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

На панели глобальной навигации британского сайта-каталога недвижимости Rightmove.co.uk  основные категории (Аренда и Продажа) расположены первыми вопреки алфавитному порядку.

Вот что стало бы с вышеуказанным сайтом, если бы разделы были расположены в алфавитном порядке:

Раздел Продажа находился бы в середине, а раздел Аренда — в самом конце меню.

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

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

Стандартные названия

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

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

Однако помните, что новые клиенты, скорее всего, не знают названий ваших «денежных» брендов.

Оптимизация длинных списков при помощи алфавитизации

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

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

Например, на сайте Kniga.ru — 24 категории книг, т.е. достаточно длинный список.

Однако с учетом того, что ссылки расположены в алфавитном порядке, посетитель, интересующийся, например, темой Хобби и корректно предполагающий найти ее в категории «Хобби», может легко пролистать первую половину списка, не вчитываясь в названия категорий.

(Отметим, что это работает только в случае, когда надписи пунктов меню стандартны, как описано выше).

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

Расположение по алфавиту на Kniga.ru  работает весьма эффективно, позволяя представить достаточно длинный список категорий меню при условии, что названия категорий стандартны и интуитивно понятны.

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

Конечно, тут напрашивается вопрос — список какого размера следует считать длинным?

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

Если в вашем меню 10 пунктов и менее, то, вероятно, расположение по алфавиту не даст заметной пользы (за исключением случаев, когда названия категорий являются уникальными терминами, которые осознанно ищутся посетителями).

Совмещение алфавитизации с прочими принципами организации контента

Если ваш контент подходит под несколько видов организации категорий, то придется проявить креативность.

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

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

Например, Udemy.com комбинирует приоритетную, алфавитную и иерархическую структуризацию в меню.

Так как на сайте присутствует значительное количество курсов различной тематики, то их названия не стандартизированы, а структурированы в иерархический список, состоящий из двух уровней.

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

Список обучающих курсов по программному обеспечению на Udemy.com также упорядочен по приоритетности и алфавиту.

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

Сайт Udemy.com сочетает упорядочение по алфавиту с упорядочением по приоритетности  и иерархической структурой, что позволяет представить большое количество ссылок наилучшим способом.

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

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

Стоит ли отказаться на сенсорных устройствах от меню, раскрывающихся, при наведении указателя мыши?

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

Очевидно, что если меню адаптировано для активации наведением мыши, то оно не работает достаточно хорошо при серфинге с сенсорного экрана.

Даже если бы меню активировалось, мобильные устройства зачастую слишком малы, чтобы отобразить всего меню без искажений.

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

И меню невозможно деактивировать нажатием в другом месте страницы.

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

На стандартных ноутбуках и персональных компьютерах выпадающие меню обеспечивают важную функцию быстрого доступа к полному списку вариантов.

Соответственно, не отказывайтесь от такой возможности полностью (используйте ухудшение характеристик без нарушения работоспособности), попросту предложите пользователям мобильных устройств приемлемую альтернативу.

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

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

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

На мобильной версии FedEx всплывающие меню заменены упрощенным вариантом.

Заключение

У проблемы информационного дизайна сайта могут быть различные решения в зависимости от обстоятельств.

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

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

Share: