Основные принципы

По определению качественным является тот дизайн, который позволяет пользователю с комфортом использовать продукт, испытывая при этом сенситивное (в случае с сайтами — визуальное) удовлетворение.

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

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

Управление вниманием

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

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

Также необходимо учитывать еще одну особенность человеческого восприятия: письменность влияет на порядок считывания информации. В тех странах, где люди читают слева направо и сверху внизу, в таком же порядке воспринимают всю информацию, особенно оформленную однотипно.У посетителей сайтов обычно есть определенные цели: получить информацию, произвести заказ товаров/услуг и т.д. Но иногда цели владельцев сайтов отличаются от целей посетителей (в нюансах или глобально) — в этом случае, управляя вниманием пользователя, дизайнер должен отдавать приоритет задачам владельца сайта.

Настроение и декорирование

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

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

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

Контраст

Если в дизайне какие-либо два однотипных элемента отличаются друг от друга, то это различие должно быть существенным. Надписи размером 16 пикселей и 18 пикселей отличаются незначительно. Плашки с непрозрачностью в 90% и 100% отличаются незначительно. Кнопки с цветом #ff0 и #fe3 отличаются незначительно. Скорость анимации в 0.4 секунды и 0.55 секунды отличаются незначительно.

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

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

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

Теория близости

Формулировка теории очень проста: если рядом, значит вместе.

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