 |
Теоретические основы создания сайта и веб-дизайна |
Создание сайтов - это чрезвычайно просто! |
Не экономьте на информационной архитектуре сайта
Концепт корпоративного сайта
Источники: www.i2.ru,
www.artweber.ru
Автор: Сергей Волков
Основные цели корпоративного сайта:
Предоставлять пользователям своевременную и достоверную информацию о деятельности компании. И служить авторитетным источником информации о ней.
Создавать определенный имидж (напрямую зависит от хорошего дизайна и криэйтива). Сайт должен быть продуманным во всех отношениях и представлять компанию только с хороших сторон. К примеру, если у сайта домен третьего уровня - это сразу может сказать, что компания мелкая и ей жалко денег (или их нет) на нормальный домен и хостинг.
Обеспечивать поддержку предоставляемых услуг и способствовать росту популярности среди пользователей интернета.
Получать обратную связь от клиентов, пользующихся услугами компании.
Выполнять не только представительские, но и коммерческие функции - демонстрировать и предлагать к продаже продукцию или услуги.
Можно было бы разделить цели сайта на коммерческие и не коммерческие. Но, на мой взгляд, в случае с корпоративным сайтом сложно провести четкую границу между этими двумя областями деятельности. К примеру, в процессе раскрутки сайта можно зазывать любую аудиторию или только целевую. Казалось бы, какая польза может быть от заходящих на сайт пользователей, которые ни при каких обстоятельствах не востребуют услуги или продукцию компании? Коммерческая выгода может быть в том, что за счет количества посетителей сайт имеет возможность повышать свой рейтинг в целевых каталогах. А при попадании в первые две три страницы таких каталогов сайт выходит на целевую аудиторию и заложенные в сайте коммерческие функции имеют предпосылки реализоваться. Получается раздел с какими-нибудь бесплатными открытками может опосредованно привлечь и целевую аудиторию - все взаимосвязано. Многие порталы с кучей разнообразных сервисов зачастую преследуют похожие цели. Поисковые порталы, например, зарабатывают на размещении рекламы (в том числе). Естественно это не означает, что нужно делать именно так - без этого можно легко обойтись, например, если использовать на рекламу и раскрутку сайта серьезные финансовые вложения.
Сайт может преследовать коммерческие цели, как опосредованно, так и напрямую. В случае постановки коммерческих задач часть разделов сайта должны брать на себя роль инструмента продаж продукции или предоставляемых услуг компании. Индикатором эффективности этого инструмента, на мой взгляд, может служить обращение потенциальных клиентов через сайт за услугами или продукцией компании, и, конечно же, полученная от них прибыль. Но эта цепочка зависит от качественной работы менеджеров в оф-лайне.
Что бы цели сайта реализовались, необходим ряд художественных и функциональных особенностей. Попробую описать некоторые из них:
Художественные
Логотип и знак (или эмблема) должны быть сделаны на должном уровне. Не должна возникать мысль, что это сделано за пять минут человеком ничего не понимающим в этой области - это будет говорить о том, что компания пожалела средств на свое лицо. При хорошем логотипе дизайн сайта даже имеет возможность быть "спартанским". По значимости лого один из самых главных объектов на странице, он, как правило, выполняет еще и роль кнопки-ссылки на главную страницу сайта. В интернете постепенно складывается стереотип восприятия на такую функцию логотипа и в скором времени не понадобится делать текстовой навигации на такую страницу. При этой функции желательно закладывать какое-то маленькое анимированное событие (реакцию на курсор).
При использовании на главной и других страницах иллюстративного образа должно быть соответствие теме раздела и не высокий объем файлов картинки. Желательно что бы иллюстрации и все оформление имели стилевое единство.
Изобразительные элементы и даже просто цвет и тон фона не должны мешать удобочитаемости текстовых объектов.
Изобразительные объекты не должны вытеснять основную информацию за пределы первого окна при разрешении экрана 800х600. Под первым окном я подразумеваю часть страницы доступную взору без необходимости прокрутки. Даже если ставится цель довести пользователя до экстаза распрекраснейшей картинкой нужно помнить, что не у всех пользователей хорошая связь, и к тому же если пользователь заходит на сайт не первый раз, то ему уже не нужен экстаз от картинок - скорее всего уму нужна сама информация. Поэтому желательно находить золотую середину между художественными изысками на страницах сайта и временем доступа к информации.
При использовании пиктограмм желательно разрабатывать авторские и в русле фирменного стиля. Как правило, тон всему фирменному стилю задает логотип и знак. Достаточно хорошее стилевое единство логотипа и пиктограмм можно увидеть на примере сайта Expedia Travel.
Анимационные эффекты лучше использовать в меру, что бы не было ощущения, что все шевелится и сверкает, как на новогодней елке. Использование анимационных флэш-вставок влечет небольшое увеличение объема, хотя иногда анимация во флэше весит меньше аналогичной в гиф-анимации. Просто в некоторых случаях пока еще приходится рассчитывать на пользователей, у которых может не оказаться установленным флэш-плагин и подкладывать "бэкграундом" статичную копию изображения.
Функциональные
По возможности не использовать предварительных страниц. Доступ к основной информации должен быть максимально быстрым. Использование промежуточной страницы я считаю оправданным только в случае множества языковых и региональных версий сайта. И такая страница должна быть очень легкой, более подробно об этом я высказался на странице "Предварительные страницы".
Навигация по главным разделам будет более удобочитаема при любом разрешении экрана, если размер текста будет не менее 12 пикселов. Возможно использование нестандартных шрифтовых написаний в формате растровой графики, но наиболее быстро загружаемыми являются объекты в текстовой форме. Использование флэш-вставки в качестве навигации по основным разделам, на мой взгляд, чревато тем, что часть пользователей не увидит ее и покинет сайт, сочтя его интуитивно-непонятным. Конечно такие "флэш-навороты" могут в некоторых случаях облегчить навигацию по сильно разветвленному сайту с множеством уроней в глубину. Но все-таки будет хорошим тоном наличие дубль-навигации в традиционной технологии, которая доступна при любых условиях. Так же хорошим тоном считается наличие такой дубль-навигации в нижней части длинных страниц - это поможет пользователю переходить в другой раздел с меньшим количеством действий.
Названия разделов могут быть консервативно традиционными и лаконичными - в этом случае пользователи не будут ломать голову над названием, пытаясь понять содержание раздела. Навигация по разделам должна быть предельно интуитивно-понятной. Структура, бывает, захватывает один два уровня (раздел - подраздел) или наоборот множество уровней в глубину. Но для быстрого нахождения информации, по мнению Стива Круга, важно не традиционное правило "двух-трех кликов", а качество кликов, которых может быть намного больше, если они не требуют от пользователя размышлений.
Минимальное разрешение экрана, на которое стоит рассчитывать - 800х600. Другие наиболее используемые разрешения 1024х768 и 1280х1024. Еще совсем недавно многие ориентировались на минимальное разрешение 640х480. Это было обусловлено преобладающим парком мониторов. Сейчас качество и возможности настольных мониторов возросли и поэтому граница минимального разрешения сдвинулась в сторону большего разрешения. Но, мне кажется что, этот процесс будет идти равномерно по нарастающей. Годика через два-три возможно смещение этой границы обратно к параметру 640х480. Например, из-за развития карманных портативных компьютеров с доступом в интернет. В связи с этим, наиболее универсальным и живучим может оказаться масштабируемый сайт, еще их называют "резиновыми".
Длина страницы тоже важный момент. Так, как в интернете используются разные разрешения экранов, то, на мой взгляд, наиболее универсальны для восприятия страницы с длиной примерно 1,5-2,5 первого окна от разрешения 800х600 - в этом случае страница будет выглядеть законченным объектом при самых разных разрешениях экрана. Но, конечно же, не стоит ради этого доливать текст с чепухой.
На главной странице не нужны приветственные тексты, типа "Добро пожаловать! Вы попали туда-то. Сейчас мы вас осчастливим…" Наиболее полезной может оказаться широко используемая система блоков с кусками информации из разных разделов со ссылками "подробнее". Это позволит делать акценты на ту или иную информацию, направлять пользователей в нужный раздел. Если на сайте есть сервисы, например, почта с авторизованным входом (логин, пароль) важно чтобы такой блок входа попадал в первое окно и был хорошо заметен. Именно так и делают многие порталы имеющие почтовую службу, хостинг, доступ в интернет и т.п. Это помогает пользователю быстрее достигать наиболее часто используемого сервиса и это говорит о том, что компания заботится о своих клиентах и ценит их время.
Размещение банерной рекламы на страницах сайта имеет коммерческую цель и в некоторых случаях помогает существовать бесплатным сервисам. Но не стоит злоупотреблять временем и вниманием пользователя. В интернете всегда найдется множество конкурентов предлагающих то же самое. В конечном итоге пользователь выберет, где ему удобнее, дешевле и быстрее. Поэтому, если есть возможность, лучше обойтись без рекламных банеров хотя бы в верхней части, в шапке сайта. Это позволит оставить дизайн более целостным, облегчит вес страницы и оставит больше площади под информацию в пределах первого окна. Длинные рекламные банеры (размер 468х60) отчасти осложняют задачу сделать дизайн сайта масштабируемым и легким. Размещение маленьких счетчиков не несет особых осложнений, но только в том случае если их не много.
Применение фреймовой структуры в верстке и в дизайне сайта, на мой взгляд, является не оправданной. Все малочисленные преимущества не равноценны недостаткам и неудобствам, которые дает такая структура.
Следует уделять должное внимание заголовкам и титулам. Они помогают не заблудиться и понимать в каком разделе мы находимся. Очень важна и система отступов и выравниваний. Если внимательно посмотреть газетную и журнальную верстку то можно заметить, что существуют определенные принципы в верстке заголовков, выделений, абзацев и т.п. - все это основано на визуальной логике и основная цель, что бы текст правильно и легко воспринимался. Это как с организмом - если не замечаешь какого-то органа, значит он здоров. В верстке то же самое - если что-то не понятно и или вызывает раздражение, значит это сверстано как не здоровый организм. Наиболее распространенная ошибка в этой области верстка текста "встык" с другими объектами или границами секторов. Обычно это происходит из-за того, что этим занимаются люди хорошо знающие HTML верстку, но не принципы верстки текста. Конечно, интернет-технологии имеют свои ограничения (например, невозможность автоматической расстановки переносов), которые накладывают свой отпечаток на верстку текстов. Но существует множество сайтов, которые с блеском справляются с этими ограничениями. Один из лучших сайтов в этом отношении "Газета.Ру". По этому сайту сразу заметно, что версткой текста занимались ассы.
Может показаться, что некоторые затронутые темы являются мелочью, но я считаю, что большое количество мелких недочетов может перерасти в плохое качество. Это как в одежде - рубашка может быть чистой и хорошо отглаженной, но порвавшийся карман может сразу перевести вас в разряд неряхи. Перед публикацией сайта следует провести подробное тестирование и не только на предмет функциональных недочетов. Дизайнер должен осуществить авторский надзор на предмет соответствия утвержденному дизайну и качественность верстки текста.
