Элементы дизайна

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

Цвет

О дизайне в целом мы уже говорили отдельно, здесь поговорим о цвете и его влиянии. Главное в цвете — он включает эмоции. Большое значение имеет правильный подбор цветов. Как показывают специальные исследования, 80% цвета и света «поглощаются» нервной системой и только 20% — рением. Достоверно установлено, что каждый цвет вызывает подсознательные ассоциации. Цвет может привлекать и отталкивать, вселять чувство спокойствия и комфорта или возбуждать и тревожить.

Влияние цвета на потребительский выбор можно проиллюстрировать следующим экспериментом. Домохозяйкам дали продегустировать четыре чашечки кофе, стоящие рядом с коробками коричневого, голубого, красного и желтого цвета. Кофе во всех чашках был одинаковый, но дегустаторы об этом не знали. Результаты: 75% испытуемых отметили, что кофе, стоящий рядом с коричневой коробкой, по их мнению, слишком сильный. Около 85% испытуемых сочли кофе, стоящий рядом с красной коробкой, самым ароматным и вкусным. Почти все утверждали, что кофе, стоящий рядом с голубой коробкой, мягкий, а тот, что стоял рядом с желтой коробкой — слабый. Сейчас уже доказано, что цвет воздействует на ритм сердечных сокращений, частоту дыхания, артериальное давление и напряжение в мускулах. Так, в желтой комнате у человека пульс является нормальным, в голубой — замедленным, а в красной — заметно учащенным. Если облучать руку человека перед измерением силы сжатия кисти красным или оранжевым светом, то показания силы значительно возрастают. У лиц, адаптированных к красному цвету, явление укачивания развивается значительно позже, нежели у лиц, адаптированных к синему цвету.

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

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

Черный или серый цвет обладает значением изысканности, культурности. Он как бы противостоит всей гамме вульгарных красок. Но одновременно все активнее выступает яркий цвет как знак эмансипации, каникул, свободы. Цвет становится важным элементом общего решения внешнего вида вещи и ее рекламного образа. Интересно, что разные цвета в различных странах и культурах имеют свои психологические оттенки. Вот несколько примеров:
Красный: в Америке — любовь, в Китае — доброту, праздник, удачу, в России — высокую активность, агрессию, борьбу, в Индии — жизнь.
Желтый: в Америке — процветание, в России — солнечность и разлуку; в Сирии — траур, смерть, в Индии — великолепие, в Бразилии — отчаяние.
Зеленый: в Америке — надежду, в Китае — роскошную жизнь, в Индии — мир и надежду.
Голубой: в Америке — веру, в Индии — правдивость, в Китае — один из траурных цветов.
Фиолетовый: в Индии — печаль и утешение, в Бразилии – печаль.
Белый: в Америке — чистоту и мир, в Китае — подлость, опасность, траур; в Европе — молодость;
Черный: в Америке — символизирует сложную, чрезвычайную ситуацию, в Китае — честность.

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

Группировка информации

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

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

Структура меню

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

При большом количестве информации следует позаботиться о карте сайта и средствах поиска.

Навигация

Основной закон навигации — пользователь всегда должен видеть: в каком месте он находится, где уже был и куда он может двигаться дальше.

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

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

Логотип и название

Логотип и название компании традиционно располагают в верхней левой части сайта. В самом его начале. Традиционно логотип служит ссылкой на заглавную страницу сайта. При этом на самой главной странице этой ссылки не должно быть – ссылка не должна ссылаться на саму себя.

Контакты на каждой странице

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

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

Форма обратной связи

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

Версия для печати

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

Указание обратного адреса в печатных материалах и прайс-листах

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

Карта сайта

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

Часто задаваемые вопросы

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

Ширина текста на сайте

Страничка с широким текстом на весь экран "размазывает" внимание при чтении. Наши глаза так устроены, что им удобнее двигаться при чтении сверху вниз, чем слева направо. Вспомните, как устроены газетные колонки — они идут вертикально, причем каждая колонка очень узкая. Чем уже колонка текста, тем лучше она концентрирует внимание и тем легче для глаз ее читать. Однако, очень узкий текст также неудобен, поскольку он будет слишком растянут вниз и потребует более частой прокрутки экрана. Оптимальной считается ширина в 45-60 символов при стандартном размере шрифта.

Связано это с тем, что глаз обладает определенным углом зрения. Максимальный угол восприятия глаза — 57 градусов, оптимальный — 35-40 градусов. Если экран находится на расстоянии в среднем 35-40 см от глаз, то оптимальный размер видимой области составляет около 15 см по высоте и 10 см по ширине (учтены особенности бинокулярного зрения). Если колонка текста шире, это создает невозможность сконцентрироваться на ней полностью. Как следствие — лишние движения взгляда, меньшая скорость чтения и большая утомляемость глаз.

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

Ширина сайта

Сейчас, когда размер экрана и качество отображения серьезно увеличились, делать сайт на всю его ширину совершенно не- желательно. Это все равно, что печатать документы на формате А4 не вертикально, а горизонтально, как на альбомном листе. Это неудобно, некрасиво, мешает концентрации на информации, "размазывает" внимание посетителя. К сожалению, многие так и не избавились от своих старых привычек. Для тех, кто интересуется настоящим, стоит посмотреть на сайты таких гигантов, как:
http://www.mindjet.com
http://www.adobe.com/
http://www.bbc.com
http://www.yahoo.com/
http://www.sun.com/
http://www.apple.com/

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

Шрифт

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

Гарнитура шрифта

Шрифты с засечками, такие как Times New Roman, хороши для печатной продукции; для веб используются шрифты без засечек, такие как Arial, Verdana. Шрифтов на странице не должно быть более трех, причем каждый из них должен применяться для своих целей, скажем, один — для основного текста, другой — для заголовков и третий —для навигации. Смешивать разные шрифты в пределах одного информационного блока не рекомендуется, это ухудшает восприятие текста.

Подчеркивание текста и курсив

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

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

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

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

Гиперссылки

Гиперссылка (в обиходе просто ссылка) — это текст, кликнув по которому левой кнопкой мыши вы открываете связанный с этой ссылкой документ.

Подчеркивание и цвет, отличный от основного шрифта, являются стандартным способом обозначения гиперссылок в тексте. Это стандарт, который не стоит нарушать. Большинство пользователей будут искать гиперссылки именно по этим признакам. Допускается делать гиперссылки не подчеркнутыми, в этом случае они должны легко отличаться от обычного шрифта по цвету, а при наведении должны все же подчеркиваться. Точное решение определяется дизайном и целевой аудиторией (помните основную закономерность? Чем на более широкую аудиторию рассчитан сайт, тем стандартнее должны быть основные решения).

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

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

Больше пробелов

Один из секретов написания текста для веб — как можно больше пробелов между абзацами. Не стоит объединять абзацы в большие куски текста.

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

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

Ошибки в тексте

Практически не влияют на удобочитаемость, однако очень влияют на имидж предложения.

Было проведено интересное исследование, которое выявило независимость воспирятия тектса от поярка слеодвания букв внутри слвоа. Главное — это первые и последние буквы, по которым глаз схватывет слово целиокм, а то, что внтури слова, не так важно :) Позаботьтесь об имидже — обеспечьте правильную орфографию и пунктуацию!

12. Нежелательные элементы на бизнес-сайте

Вот короткий список правил дизайна коммерческого сайта — никаких заставок, никаких мигалок, плавающих менюшек и свистелок. Красота — это когда нет ничего лишнего.

Часто бывает так: заказчик, искренне желая получить хороший веб-сайт для компании, ставит эту задачу перед исполнителем. Звучит это примерно так: "Сделайте что-нибудь такое, ну такое, чтоб не как у всех, чтобы было ого-го!"

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

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

Теперь у исполнителя есть железное оправдание: "Посмотрите, сколько мы сделали! И какое все красивое, мигающее и переливающееся!" Заказчик не то что бы очень удовлетворен, но по существу ничего предложить не может, поэтому процесс создания сайта на этом заканчивается, а в сети появляется еще один шедевр веб-дизайна, рекламирующий веб-студию, но никак не бизнес заказчика.

Вообще отличить нужное от ненужного довольно просто — стоит лишь задать себе вопрос "Нужно это для реализации маркетинговой задачи сайта?" Ответ будет простым и понятным. Ниже рассмотрим наиболее частые ошибки в бизнес-сайтах.

Заставка

Иногда на сайте внедряют презентационную заставку. Еще ее называют Splash Screen. Эта заставка загружается до первой страницы сайта с содержанием и демонстрирует (обычно с долей пафоса) нечто, относящееся к бизнесу заказчика (а на самом деле возможности веб-студии).

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

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

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

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

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

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

Плавающие меню

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

Мигалки

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

Флешь непосредственно на сайте

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

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

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

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

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

Где действительно нужен флешь, так это в рекламных банерах. Банер, сделанный по этой технологии, будет красивый, анимированный, привлекающий внимание. Кто заинтересован в таком положении вещей? Владелец банера! Отсюда правило: держите свой флеш на чужих сайтах и не допускайте его на свой.

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

Свистелки

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