Создание внутренней и взаимной структуры документов

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

Требования, классификация, и вложенность элементов более подробно

Если следовать современным лучшим подходам к разработке и использовать парадигму Ориентированного на пользователя дизайна (UCD - User Centered Design) для управления дизайном и решениями разработки, то целевые требования посетителей определяют каждый процесс проектирования.

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

Определение бизнес-целей

"Бизнес"-цели сайта будут подпадать под одно или несколько из следующих общих определений:

• Непосредственное получение прибыли (e-коммерция)

• Предоставление служб публикации, обмена сообщениями, и/или хранения через Web-интерфейс (например, Blogger, Flickr, Scribd, YouSendIt, Basecamp)

• Продажа продукта или услуги

• Предоставление информации

• Развлечение посетителя

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

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

Определение и удовлетворение требований посетителей

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

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

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

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

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

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

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

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

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

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

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

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

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

На практике это требует обычно проигрывания ролей и анализа выбора посетителей. Если и до тех пор пока эти задачи не будут выполнены, сокращенным вариантом этой рекомендации будет подчинение духу Принципа KISS ("Будь проще").

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

• При создании таблицы стилей присваивайте как можно больше свойств в правилах с селекторами простых элементов.

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

• Присваивайте id элементу body каждой страницы.

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

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

Более конкретный способ описания этой рекомендации состоит в том, чтобы "избегать плавающих меню, создаваемых при использовании методов аналогичных Suckerfish" (http://www.alistapart.com/articles/dropdowns) (здесь можно посмотреть другой набор методов Suckerfish (http:// www.htmldog.com/ articles/ suckerfish/ dropdowns/)), известных также как раскрывающиеся меню. Существуют четкие ситуации использования такого дизайна, и все они включают большие сайты, которые полагаются на одно- и двух-столбцовые компоновки, но их часто можно избежать. С другой стороны неопытные пользователи или имеющие недостатки двигательного контроля часто находят раскрывающиеся меню трудными для использования:

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

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

• Диапазон возможных пунктов назначения, доступных в заданном разделе сайта скрыт, пока посетитель не взаимодействует с такими элементами; что ограничивает его возможность сохранять чувство местоположения на сайте, пока он не получит опыт его использования.