Урок юзабилити №3: Информационная архитектура сайта и юзабилити.

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

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

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

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

Одним из наиболее универсальных образцов информационной архитектуры являются публичные библиотеки. В 1876 году была разработана система картотек, называемая системой DDS, которая стала первым шагом на пути создания высокоорганизованной и гибкой схемы информационной архитектуры для книг. Такая продуманность и гибкость - то, что нужно, когда речь заходит о разработке ИА для web-сайта. Представьте, во что бы превратились библиотеки, если бы система DDS не смогла вместить в себя все новые темы и подтемы, появившиеся на свет за прошедшие 125 лет. Сколько времени библиотекарям пришлось бы всякий раз тратить на реорганизацию их каталогов и перестановку их карточек? Сколько раз web-мастера ломали голову над тем, как поменять положение материалов на сайте или втиснуть дополнительный пункт в уже готовое меню навигации?

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

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

Достоинства сайта с продуманной ИА

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

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

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

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

Сокращение времени разработки - выделив заранее время на разработку продуманной ИА Web-сайта, общее время разработки сайта можно сократить на 10-25%.

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

Советы по построению визуальной архитектуры на странице:

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

Визуальная иерархия на странице

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

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

Обычаи и условности

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

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

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

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

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

Разбиение страницы на четко разделенные области

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

По чему можно щелкать мышью?

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

Визуальный шум.

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

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

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