Сайт торгового центра «Пушкинский» в Курске (Часть 1)

В центре Курска в 2008 году открылся крупнейший в городе торговый центр «Пушкинский», а недавно он обзавелся собственным сайтом.
Разработкой сайта занималась компания High-Tech Media.

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

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

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

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

Давайте посетим сайт и посмотрим, насколько хорошо и были ли решены обозначенные задачи.
Под катом много картинок.

^{Похоже что на разработку данного элемента потрачена уйма времени и разработчики им очень гордятся}

Сайт встречает большой интерактивной иллюстрацией торгового центра и фоновой музыкой. Много копий сломано в обсуждениях того, должны ли сайты издавать звуки или нет. В данном случае смысловой нагрузки музыка не несет и включение ее по умолчанию, не оправдано. Обычно посетители уже слушают какую-то музыку или наслаждаются тишиной. Если заказчик посчитал необходимым добавить звуковое сопровождение, лучше было бы предложить пользователю включить звуковое сопровождение, объяснив почему его стоит послушать, например. В данном случае пользователь должен сначала понять откуда заиграла музыка (часто открыто параллельно несколько сайтов), потом найти элемент управления, который отключает звук, понять как он работает и уже потом отключить (к сожалению, если перейти на главную страницу снова, звук опять включается). Но спасибо, что он хотя бы есть (хотя добавить рядом текст «Отключить музыку» определенно стоит), и что музыка играет не на максимальной громкости.

Теперь о заставке. Цель ее размещения тут – произвести впечатление на посетителя. Да, неплохая иллюстрация, все переливается, шевелится. (Простим иллюстратору здание МГУ :-). Но давайте разберемся, оправдано ли появление данного элемента на странице. Во-первых, он занимает целиком весь первый экран. Спасибо разработчикам, что дали возможность прокрутить заставку вниз и ознакомиться с содержимым сайта не дожидаясь загрузки большого интерактивного элемента. Хотя сразу не понятно, что это можно и нужно сделать. Для того, чтобы как-то оправдать эту «картину» к заставке добавили элементы управления в виде кружочков. Они мигают для привлечения внимания, но не несут смысловой нагрузки. Например, сразу не ясно, что это и для чего. А места их расположения можно назвать как минимум странными. Почему вакансии над вывеской кинотеатра «Пять звезд», а новости слева от входа? Хоть они и ведут в основные разделы сайта, их дублирует удобное меню ниже всего этого «интерактива».

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

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

^{Такая гигантская «картина» будет сопровождать вас по всему сайту}

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

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

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

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

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

^{Верните горизонтальное меню. Лучше 2 раза.}

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

^{Зачем все это здесь? Где мы сейчас и как пройти дальше?}

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

^{Похоже информеры «затыкают» свободное пространство в верстке страницы}

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

Кстати
Информер погоды, в случае долгого отклика от гисметео или его недоступности, тормозит загрузку основного контента.

Главная страница призвана кратко рассказать о том куда мы попали и заставить заглянуть в другие разделы. Текст здесь достаточно стандартный и скучный. Хотя общую информацию о центре он дает. Читать его не сильно хочется – не хватает хорошей верстки. Фотографии не самые симпатичные, не релевантны тексту в абзацах и кажутся разбросанными по тексту, как и сами текстовые блоки. В идеале, тут стоило разместить инфографику, которая рассказала бы о торговом центре лучше любых слов.

^{Я бы не смог читать журнал, сверстанный таким образом. Даже газету не смог бы}

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

^{Новости уже закончились, картинка для привлечения внимания оторвалась от контента и появилась зияющая пустота}

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

С навигацией по основным разделам хорошо справится горизонтальное меню как на заставке сайта.

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

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

^{Данные о посещаемости на всех страницах, но почему-то где-то в середине. Там же притаился «Опрос»}

Кстати
Проголосовать можно сколько хочешь раз. Мы же за объективность опросов, не так ли?

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

^{Слава богу, нет жутких ссылок «Читать далее», но отсутствие подчеркивания ссылок не заставляет нажать на заголовок для прочтения заметки целиком}

В 2010 году не подчеркивать ссылки – это моветон. Вообще раздел пресс-релизов – это на самом деле новости связанные с торговым центром. Хотя судя по содержанию название очень подходящее.

Из-за ограничения на длину топика — продолжение читайте тут.