Текст книги "Корпоративный веб-сайт на 100%. Требуйте от сайта большего!"

26. Художественное оформление веб-сайта

Идеальный интерфейс должен быть простым, удобным, понятным и красивым. Именно дизайн интерфейса формирует в сознании пользователя первое и самое общее впечатление о сайте. Оно (впечатление) иногда становится единственным и решающим

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

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

Как сделать хороший дизайн

♦ Следует обеспечить единство и сбалансированность визуальной концепции сайта, избавиться от «выпадающих» по стилистике элементов

♦ Следует максимально сократить «визуальный шум», отказаться от всех «неработающих» элементов, но при этом провести грамотную и тщательную нюансировку, проработать все мелкие детали

♦ Важно выдержать основные отраслевые стандарты

♦ Необходимо учесть множество особенностей восприятия, характерных для веб-среды (психологию цвета, национальные и/или интернациональные особенности, F-паттерн считывания информации с экрана, гештальты и др.)

♦ Следует предусмотреть возможность масштабирования интерфейса и контента (учесть разные размеры экрана, возможность расширения навигации, рост объемов контента и т. д.)

♦ Необходимо обеспечить полное соответствие сайта позиционированию бренда, соблюсти все стандарты фирменного стиля компании

♦ Желательно обеспечить уникальность, запоминаемость общего стиля оформления ресурса

♦ Необходимо соблюдать основные правила композиции (баланс масс, пропорциональность, «золотое сечение», наличие акцента и др.)

При использовании Ajax-технологий или skin'ов («оболочек») часть принципов начинает «звучать» иначе. Например, появляется:

♦ Грамотное разбиение контента на «закладки», позволяющие очень удобно и экономно располагать текст на экране

♦ Требование учета динамики смены элементов, то есть фактически анимации

♦ Унификация (то есть использование сходных элементов и структур для решения разных задач)

Не так страшен сайт, как его малюют

Оформление интерфейса

При разработке дизайна интерфейса мы рекомендуем обратить внимание на следующие моменты:

♦ Цвет шрифта и цвет фона должны быть достаточно контрастны

♦ Все функциональные и смысловые зоны следует визуально отделять друг от друга

♦ Должна присутствовать очевидная визуальная иерархия заголовков и информационных блоков

♦ Следует оставлять достаточно «белого пространства», «воздушности», «прозрачности» (чем больше – тем лучше)

♦ Логотип компании должен быть хорошо заметен и размещен вверху каждой страницы

♦ Навигация должна занимать не более 20 % площади экрана

♦ На странице должно быть не более десяти блоков, расположенных максимум в три колонки

♦ При выравнивании элементов следует соблюдать общий принцип (например, «все по левому краю»)

♦ Поля вокруг всех элементов следует делать равными со всех сторон

♦ При стандартном разрешении экрана (сейчас 1024 х 768 точек) горизонтальная прокрутка должна отсутствовать

Есть и более тонкие моменты, о которых знают профессионалы. К их числу относится уже упомянутый F-паттерн считывания информации с экрана и обнаруженный с помощью аппаратуры, отслеживающей движение глаз («eye-tracking»). Согласно нему, человек просматривает сайт по схеме: «по верху слева направо, потом вниз и посередине». Соответственно, вся наиболее важная информация должна располагаться на этих линиях.

Мода и тренды

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

Например, в 2008–2009 годах в качестве основных трендов стали называть использование эффекта прозрачности, «газетную» верстку, многоколоночность, внимание к шрифтам, активное внедрение видео и скринкастов, сложный фон, создание огромных иллюстраций. Интересно, что значительная часть этих «инноваций» ранее считалась морально устаревшей, так как активно применялась примерно 9-10 лет назад. Мода сделала круг.

Мы рекомендуем вам ориентироваться на более фундаментальные законы восприятия и удобства использования интерфейсов, а не на сиюминутные поветрия. Или, по крайней мере, не требовать от дизайнеров создания нефункциональных «красивостей», бизнес-задачи которых совершенно не очевидны.

27. Веб 2.0-интерфейс

Термин «Веб 2.0» (Web 2.0) впервые появился в 2005 году и до сих пор не получил однозначного определения. С ним связывают:

• идею генерации контента веб-сайта самими пользователями, социализацию, интерактивность;

• определенный стиль и набор принципов, используемых в дизайне интерфейсов.

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

Благодаря удобству использования и прогрессивности внедренных подходов, проекты тренда Веб 2.0 активно «стягивают» трафик с корпоративных сайтов. Это явная угроза для них.

Сайты тренда Веб 2.0 – это сервисные интернет-проекты, в большинстве своем ориентированные на активный маркетинг и последующую продажу

Как использовать идеи Веб 2.0

Если вы приняли решение об использовании на корпоративном веб-сайте принципов Веб 2.0, то желательно обеспечить следующее:

♦ Простой, компактный интерфейс, содержащий только реально востребованные для пользователей функциональности и материалы

♦ Использование «новых» технологий и решений, таких как Ajax, Mash-up, RSS/Atom, вебсервисы и др.

♦ Обеспечение максимальной обратной связи с посетителями

♦ Открытый маркетинг, избегающий пафоса, «раздувания щек» и обмана (отточенные тексты)

♦ Активное вовлечение пользователей в работу с контентом, создание сообществ, общение, поддержку рейтингов и т. д.

♦ Обязательное наличие явной и хорошо обозначенной бизнес-идеи

Некоторые элементы Веб 2.0-функциональностей присутствуют на корпоративных сайтах достаточно давно. Например, это форумы, а в последнее время – блоги, RSS и «облака тегов».

Следование тенденциям Веб 2.0-стиля предполагает:

♦ Уместное использование различных «звездочек», «теней», «отражений» и т. д. (например, для привлечения внимания к спецпредложениям или визардам)

♦ Укрупненный логотип

♦ Наличие крупных кнопок с явным обозначением их функций

♦ Резкое цветовое отделение верхней секции сайта

♦ Использование увеличенных, часто цветных заголовков

Обратите внимание, что многие крупные транснациональные корпорации (например, Xerox или HP) видоизменили свой фирменный стиль под эти тенденции.

В качестве примеров посмотрите следующие сайты: www.flickr.com, www.digg.com, www.blogger.com, www.elance.com, www.plaxo.com, www.metadesign.com, www.linkedin.com, www.salesforce.com. В данном случае обращайте внимание только на приемы, используемые для оформления интерфейса.

Перспективы – Веб 3.0

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

Семантическая паутина (англ. Semantic Web) – часть глобальной концепции развития сети Интернет, целью которой является реализация возможности машинной обработки информации, доступной во Всемирной паутине

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

Из рецензий наших экспертов

Из рецензий наших экспертов

28. Силы, влияющие на дизайн

Стилевой макет сайта – это почти всегда результат компромисса требований, а не продукт, полученный в ходе формального проектирования.

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

Мы рекомендуем вам внимательнейшим образом отнестись к анализу этих сил, чтобы не попасть в ситуацию «хотели как лучше, а получилось как всегда».

Давление со стороны участников проекта:

♦ Внутри компании-разработчика (менеджер проекта, руководство, аналитики, специалисты по юзабилити, другие дизайнеры, «лидеры мнений», просто коллеги)

♦ Со стороны Клиента (менеджер проекта, дизайнеры, менеджер по маркетингу и др.)

Давление со стороны других заинтересованных сторон:

♦ От дизайнерского сообщества

♦ От конкурентов

♦ От будущих Клиентов

♦ От друзей, родственников

♦ От традиционных и сетевых СМИ, социальных сетей, форумов и блогов, в которых обсуждаются проекты

Кроме этого, дизайнер должен учитывать:

♦ Технические и программные ограничения на стилевой макет (например, необходимость корректного отображения сайта в браузерах мобильных устройств)

♦ Отраслевые тенденции, стандарты, клише, стереотипы (такие, как использование отражений и градиентов на сайтах тренда Веб 2.0)

♦ Особенности восприятия целевой аудитории сайта (скажем, консервативные взгляды владельцев бизнеса, диктующие необходимость работы только с серо-синей цветовой гаммой)

♦ Собственные представления и амбиции (в том числе, например, личные пристрастия к определенным цветовым гаммам)

Психологические нюансы

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

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

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

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

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

29. Первая страница

Первая, или начальная, страница сайта определяет общее восприятие сайта примерно у 75 % (трех четвертей) посетителей. Соответственно, исходя из этого впечатления, компания получает или теряет Клиентов

Именно по первой странице, причем в течение 3–4 секунд, большинство людей принимает решение о дальнейшем своем пребывании на сайте

Мы можем дать несколько базовых рекомендаций по работе над первой страницей:

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

♦ Вся основная информация и сервисы должны быть вынесены наверх. Несколько лет назад это требование было критичным – Клиенты просто отказывались использовать вертикальный скроллинг (прокрутку вниз). Сейчас это менее значимо, и принцип отражает скорее расстановку акцентов («чем важнее, тем выше»), а не техническое ограничение. При этом использование Ajax-технологий часто позволяет собрать значительный массив разной информации на одном и том же месте экрана

♦ Необходимо обеспечить возможность постоянной и стопроцентной актуализации всей информации (на первой странице обычно ленты новостей), соблюдение единства «маркетингового образа» компании

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

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

Что разместить на первой странице

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

♦ Логотип, идентифицирующий принадлежность проекта к той или иной компании (бренду)

♦ Хорошо заметная и понятная фраза (слоган), однозначно характеризующая специализацию сайта и отвечающая на вопрос: «Куда я попал?»

♦ Основная навигация по всему сайту (основное меню)

♦ Уникальное торговое предложение, выраженное фразой, иллюстрацией, видео– или flash-роликом, подкастом и т. д.

♦ Основная иллюстрация, демонстрирующая базовый товар или услугу компании

♦ Прямой доступ к основным сервисам, предлагаемым на сайте (например, система «Buy now!», позволяющая начать оформлять туристическую поездку прямо с первой страницы)

♦ Лента новостей, снабженная ссылкой на архив новостей

♦ Корзина для продуктов, если на сайте функционирует интернет-магазин

♦ Рекламные баннеры, акцентирующие внимание на лидерах продаж или специальных предложениях

♦ Блок «С чего начать», позволяющий пользователю мгновенно понять систему работы с компанией и начать сотрудничество

♦ «Верительная информация», подчеркивающая статус компании за счет показа портфолио, рекомендаций от Клиентов, сертификатов, призов, партнеров и т. д.

♦ Контактная информация с явно выделенным предпочтительным для компании каналом связи – телефоном, электронной почтой, Skype, ICQ, адресом офиса и т. д.

♦ Система регистрации-авторизации, если сайт предполагает разграничение прав доступа к определенным материалам

♦ Достаточно заметное поле поиска по сайту и ссылка на карту сайта

Разумеется, использование всех перечисленных блоков не является обязательным. Приведенный список лишь поможет вам не забыть что-то важное и не «изобретать велосипед» самостоятельно.

Компании достаточно разместить на первой странице 5–7 блоков, наиболее важных с точки зрения маркетинга и продаж. И добавить несколько «фишек», которые запомнятся пользователям

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

На первой странице сайта не должно быть ничего лишнего

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

Отсеивание лишнего

Как правило, следует убедиться, что на первой странице веб-сайта не размещены:

♦ Фразы и блоки типа «Добро пожаловать!», «Мы очень рады…!», не несущие никакой полезной информации, банальные и очень дилетантские. Создайте у посетителя ощущение того, что ему здесь рады, другими способами, например, удобным дизайном, сервисом, вниманием к мелким деталям

♦ Стандартные и крайне редко используемые сервисы, например: «Добавить в “Избранное"», «голосовалки» (системы проведения опросов)

♦ Логотипы сторонних компаний – не ваших партнеров (например, логотипы поставщиков программного обеспечения, счетчики), не имеющие прямого отношения к задачам пользователей

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

Из рецензий наших экспертов

Из рецензий наших экспертов

30. Индексные страницы

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

Внутренние страницы сайта условно можно разделить на несколько видов:

♦ Контент-страницы (или страницы третьего уровня), на которых размещаются основные материалы сайта

♦ Служебные страницы (например, карта сайта, страница результатов поиска, страницы, оповещающие об ошибках, и т. д.)

♦ Индексные страницы разделов (или страницы второго уровня), как правило, содержащие элементы навигации по этим разделам и их краткое описание

Что разместить на индексной странице

Довольно часто владельцы сайтов испытывают определенные сложности с оформлением индексных страниц.

Наполнить их поможет следующий список типовых элементов:

♦ Иллюстрация-баннер, наглядно демонстрирующий содержание раздела (например, для раздела «Публикации» это может быть коллаж из статей или книг)

♦ Краткое текстовое описание раздела

♦ Навигация по разделу (например, в виде меню с подразделами)

♦ Рекламные баннеры, приоритет которых недостаточен для показа на первой странице

♦ Материалы «для скачивания», имеющие отношение ко всему разделу (например, прайс-листы или бланки документации)

Индексная страница – это карта соответствующего раздела

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

Из рецензий наших экспертов

31. Контент-страницы

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

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

♦ Виджеты (скачиваемые модули, предназначенные для доставки информации на «рабочий стол» пользователя)

♦ Презентации

♦ Графические элементы, входящие в фирменный стиль

♦ Фотографии

♦ Коллажи (композиции из фотографий)

♦ Записи действий на экране (screencasts)

♦ Видео– или flash-ролики

♦ Подкасты (аудиоролики)

♦ Контекстные ссылки

♦ Интересные факты (желательно с численными данными)

♦ Выходы на конкретные действия, например: «Купить», «Скачать», «Оставить комментарий», «Отправить заявку» и т. д.

♦ Графические баннеры, содержащие только текст и оформленные как врезка или цитата

♦ Схемы (в том числе, «карты памяти»), поясняющие содержание материалов

♦ Рекламные тизеры (то есть баннеры, содержащие некоторую интригу, недосказанность)

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

32. Иллюстрации

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

При подготовке и использовании иллюстраций мы рекомендуем придерживаться следующих принципов:

♦ Желательно использовать иллюстрации только в том случае, если визуальный образ значительно лучше передает информацию, чем текст, видео– или аудиоролик (например, почти всегда и везде в индустрии высокой моды)

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

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

♦ Иллюстрации не должны вводить в заблуждение (важно избегать иллюзии кликабельности у непредназначенных для этого изображений)

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

Иллюстрации, выполненные в различных цветовых гаммах, можно подобрать с помощью сервиса labs.ideeinc.com

Какие бывают иллюстрации

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

♦ Навигационные и служебные иллюстрации – значки, пиктограммы, иконки, «ползунки», кнопки, корзины для покупок, и т. д.

♦ «Продающие» иллюстрации, демонстрирующие товар или услугу, графики котировок акций, подчеркивающие преимущества и т. д.

♦ Имиджевые иллюстрации – любые изображения или фотографии, не несущие прямых бизнес-функций, но создающие настроение или необходимый образ

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

Лучше один раз увидеть, чем сто раз услышать! Старайтесь не забывать эту народную мудрость

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

«Продающие» и «имиджевые» иллюстрации, как правило, дополняют слоганами. Подробнее мы это обсудим в теме «Промоблоки».

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

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

Визуальное мышление

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

Форматы графических файлов

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

• GIF – для простых немногоцветных или анимированных изображений, а также изображений с эффектом прозрачности;

• PNG – для полноцветных изображений или изображений с эффектом прозрачности;

• JPG – для полноцветных и/или текстурных изображений.

Псевдотрехмерную графику лучше использовать только для демонстрации «физического объема» объекта

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