Основы web-дизайна. Часть 2.
1. Простота и сложность.
2. Позиционирование проекта и сегментация ЦА
В качестве примера я хочу привести несколько проектов. http://absolut.com/ - сайт производителя известной марки спиртного напитка. Первая страница фильтрует посетителей неалкогольного возраста, и никакой информационной нагрузки не несет. Но открывающееся со следующей страницы великолепие приводит в восторг даже искушенных в веб-проектах разработчиков (комментарии в стиле - "маньяки делали... но сделано круто!!!... куча чумовых фишек!"). Да, flash-анимация, все ярко и выразительно, как праздник, разъезжается, двигается, подмигивает... и мешает работать. Сотруднику фирмы, переводчику дали задание найти информацию о нескольких марках у производителя и перевести их на родной язык. Барышня с задачей не справилась. Сначала она наткнулась на ошибки браузера (анализ этого проекта показал, что функциональность действительно реализована сложными скриптами, в ИЕ версии 5 и 5.5 не грузились некоторые разделы, в Опере не работал сайт вообще, в Мозилле некоторые "чумовые фишки" не показывались), но самое удивительное было не это. При всей сказочности визуального дизайна, оказалось, практически невозможно найти конкретную информацию. Навигация по сайту реализована, судя по всему в виде системы головоломок, что-то типа теста на уровень интеллекта - и в случае если посетитель головоломку не собирает (в силу недостаточности этого самого IQ), то и описание марки спиртного напитка ему читать не положено. Так, судя по всему, решили разработчики этого милого проекта.
К сожалению, у многих читателей флешевый сайт Абсолюта даже не загрузился. А у тех, у кого загрузился, таки вызвал описанные в прошлом выпуске эмоции - все супер, но ничего не понятно 
И самое печальное в таких проектах - найти html-версию сайта, добраться до информации практически не возможно! И, как заметили наши читатели, "...особый цинизм когда кнопка "пропустить заставку" выполнена тоже во флеше. Цинизм с извращениями - когда она появляется в конце, после вынужденного просмотра всего ролика". Впрочем, компания, которую представляет этот сайт, не чувствует себя ущербной, не ожидает снижения количества продаж своей продукции, ничего не теряет от "надуманной небезупречности usability своего веб-представительства".
Впрочем, многие флешевые сайты предоставляют и правильное решение - отделение мультимедийной презентации от информационной версии сайта. Присутствует обязательная кнопка-ссылка "Skip Intro" - которая позволит остановить презентационный ролик, и все-таки найти нужный документ. Поскольку даже самую выдающуюся флеш-презентацию можно посмотреть один, два, максимум три раза, дальше публика приходит работать, и посетителя будет только раздражать все, что мешает ему заниматься делом. Мы в данном случае не рассматриваем флеш-мультики типа "Масяни" - здесь флеш-анимация ради самой флеш-анимации, это и есть информация, за которой люди шли на проект mult.ru - конечно же, скачивать мультики! Однако если рассматривать каждый флеш-ролик масяни как единицу информации, и оценить проект mult.ru в целом, можно отметить, что информационная архитектура разработчиками продумана великолепно, навигация - наглядная и удобная, и баланс информация/графика - практически оптимальный.
С другой стороны, есть сайты (к примеру - http://www.sql.ru), которые при минимуме графического оформления при этом имеют настолько ясную информационную архитектуру, настолько легкий и ненавязчивый дизайн и такой большой объем необходимой (специфической аудитории) информации, что и статистика посещений у них высока, и оценки посетителей более чем благожелательные.
Одна из задач веб-разработчика - таким образом систематизировать информацию и навигацию по ней, чтобы посетители могли наиболее успешно находить и обрабатывать нужные им данные. Однако в некоторых случаях в силу целей проекта (а довольно часто - просто прихоти заказчика) приходится жертвовать оптимизацией информационной архитектуры в пользу визуального бума.
Таким образом можно сформулировать следующее: для того, чтобы дизайнер смог приступить к работе над реализацией эскиза первой страницы, у него в голове должен сформироваться четкий образ того, что и для кого он делает - т.е. определены позиция и сегмент целевой аудитории проекта.
Простота и сложность.
Сегодня, не взирая на погодные условия и политические передряги, мы продолжаем разговор, начатый в прошлом материале - Основы web-дизайна. Часть 1. (так же его можно найти в архиве рассылок - ноябрьские выпуски) о том, с чего начинается web-дизайн. С чего правильно начинать дизайн? с разработки эскиза визуального интерфейса? С проектирования системы управления содержанием? С анализа содержания и информационной архитектуры сайта? Многие разработчики имеют свое мнение, как правило, основанное на личном опыте.
Есть две группы людей, непосредственным образом влияющие на работу дизайнера - это заказчики и потенциальные посетители.
Заказчик всегда требует сложного, навернутого решения, с анимационными прибамбасами и эффектами - поскольку в его представлении главная цель - выделиться среди конкурентов, привлечь внимание большей части потенциальных потребителей их товаров или услуг.
Посетителю же, как правило, требуется содержимое сайта - информация, сервисы - доступ к которым он легко может получить благодаря как можно более понятному и доступному интерфейсу.
Задача дизайнера - найти универсальное решение, баланс между визуально эффектной графикой и легким, доступным интерфейсом с понятной навигационной структурой.
Автор: Татьяна Вукс
Источник: NunDesign: материалы для веб разработчиков
Позиционирование проекта и сегментация ЦА
Повторяясь, отметим, что разработка web-сайтов начинается с анализа целей и задач проекта и его целевой аудитории. Следует тщательно и единственно верно оценить нишу, которой принадлежит сайт, и, кроме того, желательно эту нишу описать. Многолетний опыт разработки сайтов "с нуля" и редизайна уже существующих проектов говорит о том, что чем качественнее анализ проекта, тем меньше затраты на то, чтобы доделать и/или переделать уже готовый сайт.
В простейшем случае определите - чем ваш будущий проект отличается от других, уже существующих в сети сайтов. Далее - выделите группу сайтов, которая по качеству и объему предоставляемой информации или сервисов в значительной мере соответствует идее вашего проекта, и установите, чем выбранные проекты все же отличаются от вашего. Таким образом происходит позиционирование сайта (учитывающие сильные и слабые стороны как вашего сайта, так и конкурентов) - а верное определение оптимальной позиции проекта необходимо для следующего шага - выявления сегмента (или сегментов) вашей будущей целевой аудитории.
Мы уже писали о том, насколько важно для разработчика уметь составить портрет потенциального пользователя сайта. Самого типичного пользователя. В описание портрета так же должны входить ответы на вопросы типа: "Зачем человек пришел на этот сайт?". Мы не будем сегодня затрагивать вопросы семантики и анализа ключевых слов в документах и мета-тегах, однако откуда может прийти на сайт посетитель? По прямой ссылке (прислали друзья, прочел адрес в рекламе, порекомендовали партнеры по бизнесу...) или через поисковую систему.
Во втором случае, мы имеем дело с пользователем, который в поисках информации набрал ключевое слово или словосочетание в строке поисковика, получил список ссылок на сайты, в которых это словосочетание присутствует (и которые этим поисковиком предварительно проиндексированы) и открыл ваш проект. И вот теперь представьте себе ситуацию, что ваш сайт имеет выдающийся, уникальный, выразительный дизайн, со сложными и безупречно работающими программными решениями, и на нем огромное количество отличного материала - текстов, графики, мультиков... и вот вы обнаруживаете, что пользователи не могут найти нужную им информацию, а вы сами не можете определить, куда следует положить новый материал и когда следует убирать старый.
В голову пришел образ, описанный во второй книге "Гарри Поттер" - там мальчик, с трудом вырвавшись от своих родственничков, приезжает погостить в семью своего друга Рона. Там, на контрасте с обыденной стерильностью в доме дяди и тети он наблюдает удивительное сооружение - усадьба, в которой живет большая семья его дружбана-волшебника. Очень хотелось бы опубликовать небольшой блок текста дословно, однако опасаюсь преследований за нарушение авторских прав JJ. Речь идет о том, что вся усадьба выглядит так, как будто начиналась она с одного маленького сарая, и в дальнейшем - пристройка за пристройкой - к нему добавлялись сарайчики побольше и поменьше, росла семья - росло количество пристроек, и вот получилось удивительное сооружение, которое непонятно как существует и на чем держится, однако удивительно живое и уютное.
Многие web-сайты напоминают именно такое сооружение - которое начиналось с одной-двух страниц, далее рос сайт, росло количество документов, и в какой-то момент оказывается, что вы сами не можете разобраться в том, что где лежит и куда все это девать.
Не скажу, что идеальным, однако весьма здравым решением для сложных (и относительно сложных) проектов является наличие карты сайта. Всегда держите вашу карту сайта в актуальном состоянии - это поможет и вам, и вашим посетителям разобраться в объеме информации, представленном на вашем проекте.
Всемирная паутина на сегодняшний день представляет колоссальное количество сайтов, web-документов, сервисов, и, как следствие, можно выделить группы посетителей сайтов с совершенно различными нуждами и желаниями. Для того, чтобы определить "позицию" вашего проекта в интернет-пространстве и представить "портрет посетителя" - попробуйте составить описание вашего проекта исходя из ряда пунктов:
1. Какие причины есть у вас (или у вашего заказчика) для разработки сайта? возможные ответы:
* Хочется рассказать о себе и своих талантах;
* Конкуренты используют представительство в интернет - а чем мы хуже;
* Только для рекламы предоставляемой услуги, марки или продукции;
* В рамках масштабной рекламной кампании - как поддержка традиционной рекламе;
* При продаже услуги или товара - для привлечения новых клиентов из интернет;
* Для работы с партнерами или дилерами - при наличии значительного регионального разброса;
* возможно у вас есть другой ответ...
2. К какому типу веб-сайтов вы относите вашу разработку:
* Домашняя страница;
* Презентационный сайт фирмы (товара, услуги);
* Информационный сайт;
* Корпоративный сайт;
* Электронный магазин.
3. Какая целевая аудитория проекта (опишите не только их возраст, должность или сфера деятельности, степень "обученности" пользованию on-line сервисов и другие характеристики - обязательно следует учесть их потребности.)
Кроме того, вы можете составить портрет вашего посетителя, используя анкеты и опросники. Впрочем, получить эту информацию можно или воспользовавшись статистикой (анкеты или опросника) на уже работающем сайте, который вы определили как соответствующей нише вашего проекта. Или - в случае редизайна уже существующего проекта - не ленитесь разместить формы с опросом на сайте и собрать эту информацию до того, как начнется работа над новым дизайном.
На основании первого опроса вы сможете сформулировать - какие задачи должен выполнять проект.
На основании последующих - какими методами и решениями вы будете пользоваться, чтобы привлечь на ваш проект необходимую вам аудиторию - насколько сложной позволительно сделать навигацию по страницам сайта, какое цветовое решение использовать для оформления страниц, какой сложности (и какого объема) рекомендуется предоставлять текстовую информацию...
Следующий этап - не менее важный, однако в некоторых ситуациях более сложный - структурировать информацию, которая будет составлять проект. Если информация на сайте будет статическая и редко обновляемая -структура будет представлять собой одноуровневый список разделов - "обо мне" (или "о компании"), "услуги", "контактная информация"... Сложнее, когда на сайте присутствуют разделы, которые требуют регулярного обновления, серверного программирования и наличие таких разделов должно быть учтено до, а не в процессе (и тем более не по окончанию) разработки проекта.
1. Для cайта любого типа и любой сложности:
* Помощь (она же - поддержка, она же - support, может включать в себя FAQ, или - Часто Задаваемые Вопросы, которые могут пополняться)
* Сервис поиска. Поиск может быть простым - по слову или словосочетанию или сложный - с учетом критериев, выбора рубрики, языка, регистра etc.
* Карта сайта.
2. Для сайта любого типа - есть ли необходимость предоставлять дополнительные сервисы обратной связи с посетителями:
* Гостевая книга
* Форум
* Опросы посетителей
* Подписка на новостийную рассылку
* Сервис мгновенной обратной связи
3. Информационная часть -
* Будут ли обновляться новости - и как часто? Несколько раз в день? Раз в неделю? В полгода?
* Статьи - будут это материалы на одну тему(к примеру совпадающую один к одному с темой сайта) или для них следует написать внутреннюю структуру - дерево тематик для статей, иначе говоря - рубрикатор, и как часто статьи будут добавляться?
* Будет ли обновляться (расти) сам рубрикатор?
4. Для коммерческого сайта, цель которого - продажа товара или услуги, необходимо так же описать наличие динамических документов/разделов, таких как:
* Каталог товаров/услуг (обязательно следует оценить как объем товаров в каталоге, так и наличие/отсутствие рубрикатора каталога)
* Оперативно обновляемый прайс-лист
* Регистрация партнеров и диллеров (т.е. возможность предоставления посетителю "приватной" зоны проекта)
* Регистрация клиентов - потребителей товара/услуги
* Электронный магазин - собственно продажи.
Сформируйте на основании подобного опроса древовидную структуру - в будущем этот документ вы сможете использовать при формировании "карты сайта". Один из вариантов реализации такой карты вы можете наблюдать здесь: http://www.nundesign.com/sitemap.html.
Теперь у вас есть информация - как, что, для чего и для кого вы собираетесь разрабатывать; определились со структурой и объемом сайта. Возможно, проект не сможет жить и развиваться без CMS - Системы Управления Содержанием, однако что это такое - вы спросите у ваших программистов - и, помимо всего прочего, рекомендуется у них же выяснить пожелания к дизайну первой и последующих страниц сайта, поскольку некоторые CMS могут оказаться недостаточно гибкими и ограничивать дизайнера как в выборе модульной сетки проекта, так и в размещении (да и оформлении) информационных и навигационных блоков, однако трудности и сложности в системах управления контентом мы рассмотрим в последующих материалах.
Собственно мы уже плавно подошли к описанию типов навигации, однако подробно мы остановимся на этой теме позже, сегодня (вкратце) только лишь укажем те типы, которые будут рассмотрены в следующем информационном блоке.
* Навигационное меню - простой список, ряд кнопок, выпадающие (или всплывающие) меню.
* Хлебные крошки - сквозной маршрут сквозь иерархическую структуру сайта
* Карта сайта - пример развернутой иерархической структуры.
* Текстовая навигация - перемещение по документам проекта, да и всей сети в произвольном порядке.
* Каталог - структура представления данных, удобная для электронных магазинов (предоставить каталог продукции по типам, подтипам...), для каталогов сайтов по рубрикам (Яндекс, Рамблер...)
* Пейджинг - перемещение страницам (применяется в многостраничных галереях, в длинных списках ссылок...)
По методам реализации каждого типа навигационной модели: это может быть текстовое решение, графическое (картинки с графическим текстом или иконки), флэшевое или комбинированное.