Информационный дизайн

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

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

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

• страна

• профессия

• номер телефона

• улица и дом

• имя

• почтовый индекс

• место работы

• город

• электронный адрес

Он кажется странным, потому что обычно подобные списки выглядят так:

• имя

• профессия

• место работы

• почтовый индекс

• страна

• город

• улица и дом

• номер телефона

• электронный адрес

Но даже такая организация может быть уточнена:

• личная информация

• имя

• профессия

• место работы

• почтовый адрес

• почтовый индекс

• страна

• город

• улица и дом

• прочая контактная информация

• номер телефона

• электронный адрес

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

• максимальная мощность

• размер ротора

• емкость бака

• тип трансмиссии

• средняя угловая скорость

• тип шасси

• максимальная производительность

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

Ориентирование

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

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

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

Прототипы страниц

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

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

Рисунок 11.14 - Прототип страниц

 

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

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

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

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

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

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

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

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

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

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

Вопросы для повторения

1. Укажите основное назначение уровня компоновки.

2. Что подразумевается под понятиями соглашение и метафора.

3. Для чего предназначен дизайн интерфейса.

4. В чем заключается суть дизайна интерфейса.

5. Какие технологии веб применяются для реализации интерфейса.

6. Назовите стандартные элементы интерфейса.

7. Каким образом выбираются элементы интерфейса для представления данных.

8. Что проектируется на этапе оформления дизайна навигации.

9. Какие задачи решает дизайн навигации.

10. Назовите системы навигации.

11. Охарактеризуйте функциональное назначение различных систем навигации.

12. Что представляет собой дополнительная навигация.

13. Что представляет собой сервисная навигация.

14. Что такое карта сайта.

15. Какую цель преследует информационный дизайн.

16. Для чего разрабатывается макет страницы.

17. В каком виде представляется макет страницы.

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

Резюме по теме

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