Делаем веб-магазин

Александр Федулов

Спецвыпуск: Хакер, номер #050, стр. 050-078-3

Проектирование интерфейса

Теперь мы знаем, кто и зачем будет ходить на наш сайт, знаем, как сайт будет устроен... Самое время задуматься над тем, как расположить на странице элементы интерфейса так, чтобы пользователи не проводили часы в поисках всего нужного им (Не заставляйте меня думать! Я - солдат). Что мы имеем? Первое и самое важное - собственно магазин с каталогом товаров-рекламоносителей. Второе - элементы навигации сайта в целом и каталога в частности. Третье - текстовые блоки со ссылками на справочную информацию (например о том, как сделать заказ, как пользоваться этой мудреной картой и проч.). Ничего архисложного - выбираем классическую трехколоночную верстку, которая состоит из шапки с логотипом и элементами фирменного стиля (часто в нее включают навигацию, форму поиска на сайте и т.д.) Под шапкой располагается область контента, разделенная на три колонки. В самом низу - подвал, в котором размещаем выходные данные (копирайты, правовую информацию и прочее).

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