Первым шагом при создании нового сайта является разработка визуального дизайна, подразумевающая продумывание общей схемы сайта и использование графики. Эта визуальная архитектура определяет “внешний вид и поведение” сайта с точки зрения пользователя.
Сначала вы должны решить, какое впечатление вы хотите, чтобы складывалось у пользователя при работе с вашим сайтом, и только затем приступать к разработке кода, который будет обеспечивать это впечатление. Одними из основных деталей, влияющих на впечатление пользователя, являются меню и возможности навигации, наличие изображений и организация элементов на странице.
Меню должны быть интуитивно понятными и подкрепляться навигационными подсказками, такими как карта сайта или контакты, которые напоминают пользователю о том, где он находятся относительно корня сайта в целом. В этом контексте подразумевается набор небольших ссылок на странице, которые служат путеводной нитью, позволяющей пользователям возвращаться на предыдущую страницу при помощи щелчка на соответствующей нужной странице ссылке в иерархии страниц.
Прежде чем приступать к написанию какого-либо кода дизайна сайта, обязательно нужно познакомиться со специальными средствами, чтобы иметь возможность воспользоваться результатами работы, проделанной разработчиками. Хорошо продуманная с технической точки зрения архитектура увеличивает вероятность повторного использования кода и делает его более удобным в плане обслуживания. Речь пойдет об общей структуре сайта.
Многие разработчики начинают писать код, не обращая внимания на главную задачу сайта: предоставлять простое, но имеющее множество функциональных возможностей графическое приложение пользователям для работы. Создание пользовательского интерфейса кажется очень простой задачей, но если ее не выполнить должным образом, к ней придется возвращаться во время разработки кода, причем возможно даже не один раз. Каждый такой возврат и изменение фундаментальных возможностей будет требовать затраты определенных дополнительных усилий, не говоря уже о проверке взаимодействия и функционирования всех компонентов с самого начала. Что еще хуже, слишком небрежное отношение к пользовательскому интерфейсу вполне может в конечном итоге закончиться тем, что пользователи предпочтут не пользоваться данным сайтом вообще.
При создании дизайна сайта должны продумываться различные элементы. Во-первых, нужно убедить себя в одной простой вещи: внешний вид имеет значение! Лучше даже будет повторить это несколько раз вслух. Если сайт плохо выглядит, люди могут пожалеть, что зашли сюда. Разработчики склонны уделять больше внимания сложным задачам, таким как организация исходного кода в классы и кодирование бизнес-логики — по сравнению с ними разработка косметических средств сайта не кажется такой уж важной, правильно? Нет, не правильно! Пользовательский интерфейс — это первое, что видит конечный пользователь: если он уродливый, непонятный и вообще не удобный в использовании, скорее всего, пользователь покинет этот сайт с плохим впечатлением как о самом сайте, так и о разрабатывавших его людях.
И, как ни печально, это произойдет независимо от того, насколько быстрым и масштабируемым является этот сайт. Кроме того, нужно еще учесть тот факт, что не все пользователи имеют одинаковое мнение о шаблоне сайта. Некоторые пользователи могут плохо воспринимать текст на сайте с определенной цветовой схемой и отдавать предпочтение какой-нибудь другой цветовой схеме, которая может быть непонятна многим другим пользователям. Подобрать один шаблон и одну цветовую схему, которая будет нравиться всем, очень трудно. Именно поэтому на некоторых сайтах пользователям предлагается на выбор множество различных цветовых схем и шаблонов, что позволяет им настраивать пользовательский интерфейс по своему личному вкусу — и, возможно, в соответствии со своими физическими недостатками, такими как дальтонизм, например.
Исследования показали, что удивительно много людей страдает от частичной “цветовой слепоты”, которая не позволяет им различать определенные цвета, а это значит, что у них должна быть возможность выбирать цвета, которые они могут различать и которые при этом все равно будут довольно приятными на вид. Выбрав схему расположения элементов и цвета, которые будут использоваться, следует удостовериться в том, что сайт будет выглядеть одинаково во всех браузерах. Пару лет назад Internet Explorer (IE) был бесспорно доминирующим браузером среди пользователей Windows, и, разрабатывая технический сайт, ориентированный на Windows-разработчиков, можно было смело предполагать, что для просмотра сайта по большей части будет использоваться браузер IE, и, следовательно, разрабатывать и тестировать его нужно было только относительно IE. Однако сегодня среди пользователей Internet все более популярными становятся другие браузеры, которые к тому же доступны и для других операционных систем. Поскольку расчет делается не на узкий круг пользователей (т.е., не только на Windows-разработчиков, а на всех людей) и поскольку существуют и другие популярные браузеры помимо IE, обязательно необходимо удостовериться в том, что сайт будет работать хорошо с большинством популярных браузеров.
Если не сделать этого и ориентироваться только на IE, может случиться, что пользователи Firefox, зашедшие на сайт, обнаружат сильно отличающую от того, что они ожидали, схему расположения элементов, с неудачным выравниванием, размерами и цветами, с накладывающимися друг на друга панелями и текстом — в общем, полную неразбериху. Нетрудно догадаться, что пользователь, попавший на такую нелицеприятную страницу, естественно, покинет ее, что для электронного магазина означает потерею потенциального клиента или заказчика.
В худшем случае посещение такого пользователя будет представлять собой генерацию представлений страниц и, следовательно, просмотр баннеров. Поскольку терять посетителей никто не хочет, мы будем брать в расчет как Internet Explorer, так и Firefox. Процесс проектирования уровня пользовательского интерфейса не означает только написание HTML-кода для страницы; он также подразумевает разработку навигационной системы и обеспечение для Web-мастера или администратора сайта (если не конечного пользователя) возможности легко изменять внешний вид сайта, не редактируя сами страницы содержимого (которых очень много).
Совсем не помешает разработать систему, позволяющую людям легко изменять меню сайта и его внешний вид (шрифты, цвета и размер различных компонентов, из которых состоит страница), поскольку это сводит к минимуму объем работы администраторов и делает счастливыми пользователей. После того, как будет разработана домашняя станица сайта, разработка всех остальных страниц не займет много времени, потому что домашняя страница определяет схему и элементы навигации, которые будут применяться ко всему сайту. А при необходимости изменить что-нибудь в схеме сайта (например, добавить новое поле опроса так, чтобы оно отображалось в правой части любой страницы), это будет очень легко сделать, если был разработан общий интерфейс, используемый совместно многими страницами. Именно поэтому, несомненно, стоит потратить дополнительное время на продумывание уровня пользовательского интерфейса, вместо того, чтобы сразу же начинать писать код. Это поистине стратегическое решение, которое может сэкономить несколько часов или даже дней работы в будущем. Помните о том, что фундаментальные изменения, вносимые позже в процессе разработки, будут отнимать больше времени и усилий.
