Проектирование информационной архитектуры сайта. Курс выживания.

(начало в №№7-13) Навигация Как аудитория будет пользоваться сайтом? Как посетители попадут из одного места в другое? Как сделать так, чтобы они не заблудились? В процессе работы над системой навигации вам придется найти ответы на все эти вопросы. Взгляните на иерархию разделов сайта. Видите основные разделы (“корни” дерева)? Это превосходные кандидаты в систему глобальной навигации, которая доступна на всех страницах сайта и позволяет пользователям быстро переходить из одного раздела в другой. Лучше, если таких разделов будет около пяти-семи. Неплохо так же включить логотип фирмы в систему глобальной навигации в качестве ссылки на домашнюю страницу. Локальная система навигации может принимать различные формы. Это может быть список тем, как на Yahoo!. Либо локальная навигация может быть организована в виде выпадающего меню, либо как ряд ссылок, как, например, отображаются результаты поиска в поисковых машинах. Главное — документ должен содержать не только глобальную систему навигации, но и достаточное количество систем локальной навигации. Например, сайт Webmonkey имеет навигационную систему, которую можно описать следующим образом: “Система глобальной навигации содержит ссылки на все главные разделы сайта: дизайн, HTML, программирование и т.д.”. Локальную систему навигации на этом же сайте можно описать так: “В случае, когда статья разбита на несколько частей (страниц), внизу каждой страницы появляется список частей, каждый из элементов списка является ссылкой на соответствующую часть статьи. Названием элемента списка служит название части (главы) статьи”. Концепция сайта: Структура сайта Пора вернуться к основному документу! Резюмируйте метафорическое описание сайта. Добавьте иерархию разделов. Если список разделов слишком длинный, используйте неполный вариант, а полный вынесите в приложение. Добавьте также архитектурные планы, опишите глобальную и локальные системы навигации. Как обычно, опубликуйте результаты своей работы. Например: 4. Структура сайта. 4.1. Иерархия разделов сайта (или резюме этого документа). 4.2. Архитектурные планы. 4.3. Глобальная и локальные системы навигации. Пришло время заняться визуальным дизайном. Смысл проектирования визуального дизайна состоит в том, чтобы дать пользователям “чувство места”. Посетители должны понимать, где они находятся на сайте, где они уже побывали и как попасть туда, куда им нужно. Четкая структура сайта совместно с эффективным визуальным дизайном позволяют посетителю мысленно представлять себе карту сайта и не заблудиться на нем. Цель этого этапа проектирования информационной архитектуры сайта заключается в том, чтобы визуально представить структуру сайта. Первый шаг: необходимо нарисовать сетки дизайна (layout grids), которые представляли бы структуру с навигацией на уровне одной отдельной страницы. Затем эскиз дизайна поможет представить, как все это будет выглядеть. Сетки и эскизы приводят к созданию предварительных страниц (так называемая “рыба”), из которых, в свою очередь, получается окончательный вариант. На этом этапе вам понадобится помощь дизайнеров, арт-директоров, креативных директоров и команды разработчиков. Сетки дизайна Сетки — это своего рода макеты, описывающие содержание веб-страницы, а не представляющие его, как, например, эскиз дизайна. Элементы содержания должны быть размещены именно в нужных местах. Необходимо также отвести место для глобальной и локальной систем навигации и интегрировать другие элементы, которые могут не являться структурными элементами самого сайта (например, реклама). Бренд компании обязан присутствовать на каждой странице. Реклама и спонсорские ссылки также должны быть где-то размещены. Вот пример сетки: Для начала возьмите список разделов сайта и сделайте из него список страниц всех возможных типов. Отдельные страницы сайта должны быть выполнены в одном стиле в пределах всего сайта. Просмотрите инвентарный список элементов содержания и попытайтесь отобрать два-три основных типа содержания. Вы начнете со страниц этих типов, остальные будут созданы на их основе. (продолжение следует) По материалам John Shiple “Squishy’s Crash Course in Information Architecture” Андрей Тихонов
Весь номер

Новости партнеров: