Регистрация доменных имен

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

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

Поэтому не ленитесь оттачивать детали в своём произведении. Только обратите внимание: «оттачивать», а не добавлять что-то совсем новое. Это может нарушить интеграцию. Умение расставлять нюансы приходит с ренировкой и профессионалы делают это практически машинально. Тренируйтесь.

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

Пользователь, просматривая оформление, всегда стремится сделать вывод, ищет законченность в понимании представленной информации. И, сделав его, испытывает эстетическое удовлетворение. Задача дизайнера – помочь ему в этом. Построить твердый, конкретный ассоциативный ряд, раскрывая тему. Простой пример – когда используется перевернутый текст. Это простая преграда для его восприятия, и пользователь способен прочитать этот текст, но решение этой загадки приносит подсознательное удовольствие и заостряет внимание на этом слове или фразе. Другое дело – уместно ли такое действие в конкретной ситуации.

Теперь о способах и инструментах. Первое, на чем хочется остановить внимание, это способы проведения пользователя по композиции, построение ассоциативного ряда в нужном направлении. Восприятие текстовой информации (в большинстве языков) происходит слева направо и сверху вниз. Это правило хорошо помогает в карикатурах, когда есть сюжетный текст (например, вопрос – ответ). Чтобы зритель правильно понял сюжет, нужно заставить его прочесть сначала вопрос, а потом ответ. Текст вопроса выносится в верх изображения, поближе к левому углу, а текст ответа – в низ изображения или справа от вопроса. Это первый принцип, но есть и другие способы заострить внимание на конкретных деталях.
Еще есть пространственное понятие восприятия информации. То, что находится ближе (на переднем плане), воспринимается раньше, чем то, что на заднем. Эффект заднего плана можно получить достаточно сильной размывкой. Объект с нормальной резкостью будет выглядеть расположенным на переднем плане и восприниматься первым. Крупные и достаточно яркие (контрастирующие) элементы также воспринимаются раньше мелких, детализированных. Любой “выделенный” объект в композиции становится тематическим центром. Специалисты “строгановки” советуют использовать не более 3 тематических центров при 5-7 управляющих элементах (в рекламных материалах еще меньше). Я оставлю это без комментариев, но позволю себе не согласиться.

Еще один способ заострить внимание на конкретной детали – это освещение. Любой источник света гарантированно заставляет обращать на себя внимание. Даже тень и затемнение некоторых деталей подразумевают существование источника света. И затемненные детали оттесняются более яркими. Но, используя эффект освещения (внося источник света), можно совершить грубую ошибку. Человеческий глаз легко различает неправильное (неестественное) наложение теней. Поэтому понятиям света и тени уделяется очень большое внимание в программе обучения художников. Вот один пример из моей практики. Долгие обсуждения световой схемы в дизайн-макете вызвали естественное стремление к творчеству у клиента (достаточно частая ситуация). Но его предложение повергло меня в шок. Он предложил сделать графический элемент темно-синего цвета, а тень от него – желтой! Убеждения, что это неправильно, породили вопрос: …но это же можно нарисовать? Можно, конечно, но… мне не захотелось.

Никогда не старайтесь играть с пропорциями и перспективой в реалистичных изображениях и коллажах без конкретной цели. Законы пространственной геометрии и естественных пропорций – это законы природы. Спросите у людей, имеющих высшее художественное образование, сколько времени они посвятили изучению перспектив и пропорций. Человеческий глаз легко замечает ложь в этой области. И есть опасность, что пользователь подсознательно, отвлекаясь от темы, сосредоточит внимание на поиске источника зрительного дискомфорта в изображении и сделает совершенно другие выводы, чем вам бы хотелось. Другая ситуация – когда это сделано сознательно, сосредоточивая внимание на этом. Тогда нужно постараться убрать другие сложные элементы, избегая конфликтов.
Теперь, немного о “вечном” – о цвете. Вы, скорее всего, уже не раз читали различные материалы на эту тему и не раз видели статьи о психологическом восприятии цветов. Советую всегда скептически подходить к этому вопросу. Оставим бесспорным физические аспекты сочетания и свойств цветов, а остановимся на психологии. Многие выводы сделаны на основе достаточно спорных утверждений. В вопросе восприятия конкретного цвета психологи подходят индивидуально к каждому человеку. Дело в том, что конкретный цвет у каждого ассоциируется с конкретным образом, вещью или событием в его жизни и находится в подсознании человека. А эти ассоциации могут быть различными – как положительными, так и отрицательными. Это относиться не ко всем цветам подряд, а только к некоторым основным (у всех по-разному). Еще восприятие цвета может носить тематическую направленность. Например, красный. В технической области он символизирует опасность, а в области моды – чувственность и смелость. Если взять красный цвет в природе, то, скорее всего, он породит ассоциации со спелыми ягодами. А в социальной сфере он заставит вспомнить о коммунизме, однако у жителей других стран этой ассоциации может и не быть.

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

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

Эта статья может дописываться бесконечно, но, надеюсь, я смог объяснить важность психологии в дизайне. Рабочее место психолога в рекламных агентствах уже давно существует. А дизайнер просто обязан быть неплохим психологом. Если вы стремитесь к профессионализму, то постарайтесь прочесть соответствующую литературу и найти возможность общения с психологом. Не оставляйте без внимания различные статистические данные и публикации о результатах исследований. Не стесняйтесь спрашивать совета и чаще обсуждайте свои работы с другими. Всегда делайте выводы сами и скептически относитесь к выводам других. А книжки Д. Карнеги оставьте в покое, их нужно изучать в школе.

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

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

Типы ссылок

1. Текстовые ссылки – наиболее простая форма навигации. Обычно это 1-3 слова, которые описывают то, куда приведет данная ссылка. Например: карта сайта, связь с нами, ссылки, гостевая книга и т.д.

Преимущества:

Высокая скорость загрузки. Читаемость во всех броузерах. Легкая масштабируемость и редактирование. Помогают в ранжировании запросов с поисковых систем.

Недостатки:

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

Мысли:

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

2. Графические ссылки – разобъем их на две категории: графические карты (image maps) и кнопки.

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

Преимущества:

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

Недостатки:

Самый большой недостаток в том, что при отключении пользователем загрузки графики в своем броузере, карта бесполезна! Скорость загрузки графики играет немаловажную роль. Труднообновляемы (скорее всего придется переделывать всю карту). Пользователи иногда должны «поиграть мышкой», пытаясь найти ссылку. Для поисковых машин картинка мало что значит…

Мысли:

Правильно сделанные карты могут заставить пользователя «ахнуть» при заходе на сайт. Однако, вы НЕ МОЖЕТЕ полагаться на карты изображения, как на единственное средство передвижения по сайту. На некоторых сайтах я стал жертвой графических карт, пытаясь найти ссылки, и больше туда не вернулся… Также, ожидать карту размером в 100КБ – самоубийство. Это явно не поможет привлечению посетителей на сайт.

2.2. Графические кнопки

Преимущества:

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

Недостатки:

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

Мысли:

Графические кнопки, содержащие только текст, должны, вероятно, быть заменены текстовыми ссылками, менее загружащими траффик. Помните, что если вы собираетесь использовать OnMouseOver с вашими кнопками, то это удваивает скорость загрузки. Если ваш сайт нуждается в 20 кнопках для навигации, – о графических кнопках можете забыть, вместо этого используйте текстовые ссылки. Использование аттрибута ALT для описания ваших кнопок должно быть обязательным!

О месторасположении…

Ссылка1 | Ссылка2 | Ссылка3 | Ссылка4 | Ссылка5

Ссылка2

Ссылка3

Ссылка4

Ссылка5 | Ссылка4 | Ссылка3 | Ссылка2 | Ссылка1

От месторасположения навигационной панели зависит то, насколько эффективна навигация по сайту как таковая.

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

Если панель внизу – это удобно, так как чтение страницы обычно заканчивается именно там. Однако, эта область остается невидимой пока страницу не прокрутят до конца вниз. Хорошая новость для любителей навигации снизу: большинство людей знают о такой системе навигации спустя лишь несколько часов сёрфинга в интернете и пытаются найти такую панель внизу страницы.

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

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

Мысли:

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

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

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

Старайтесь быть описательными: вкладывайте как можно больше информации в вашу навигационную систему. Вы помните загадочную схему кнопок Майкрософта в их программах? Все мы потратили пару дней, для того чтобы узнать, что кнопка с пустой страницей это «Новый Документ» и что две страницы, одна над другой, это «Копирование». Это – НЕ интуитивная навигация. Добавляйте текст к графическим кнопкам. Используйте текстовые ссылки с открытым смыслом, будьте описательными настолько, насколько это позволяет место.

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

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

Последнее замечание о навигации

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

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

Затем происходит поиск специалистов, которые могли бы осуществить подобную разработку. Здесь существует несколько различных вариантов:

  1. Поиск специалиста среди знакомых и друзей

  2. Поиск исполнителей посредством поисковых систем и каталогов

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

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

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

  Итак, что же включает в себя создание сайта? Условно можно выделить 5 этапов:

  1. Разработка концепции будущего сайта

  2. Создание сайта(дизайн и программирование)

  3. Этап контентного наполнения (какую информацию, как и в каком объеме размещать)

  4. Раскрутка и продвижение сайта, привлечение партнеров, создание партнерских программ, создание постоянной аудитории и т.д.

  5. Постоянное техническое обслуживание и и развитие сайта

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

К сожалению, подавляющее большинство существующих студий и некоторые из самостоятельных разработчиков, – качественно выполняют только второй этап, а остальные обычно не выполняют вообще либо выполняют, но ни о каком качестве говорить не приходиться. Эффект от таких разработок или нулевой или даже отрицательный. Поэтому, прежде всего поинтересуйтесь у потенциального исполнителя что он может Вам предложить. Если разговор не заходит дальше разговора о создании необходимых скриптов, дизайне и стоимости создания каждой странички, при этом Вас уверяют что ниже цен Вы не найдете, то можете быть уверены – это непрофессионал и ему не стоит доверять. Нужно помнить, что у каждой вещи есть своя цена и стоит она ровно столько, сколько она стоит. И если кто-то предлагает Вам евроремонт за 40$ или 600-й Мерседес за 1000$, то кроме настороженности такие предложения не должны ничего вызывать. Поэтому необходимо помнить, что непрофессиональных разработчиков интересуют только быстрые деньги, но никак не качество, и уж тем более судьба созданного ими сайта. Именно поэтому важно найти исполнителя, который не только создаст для вас красивый и запоминающийся сайт, но и всячески будет содействовать Вам в его популяризации и привлечении целевой аудитории, т.е. грамотно выполнит все 5 этапов.

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

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

Поисковую форму надо рассматривать с двух позиций — с функциональной стороны и со стороны оформления.

Функциональная сторона. О том, как надо искать.

Искать надо точно, надо уметь «понимать» запрос пользователя. Более того, найденное желательно преподнести в надлежащем виде. Вот, например, на не безызвестном портале софта download.ru, чтобы в результатах поиска дойти до нужного, но уже как бы найденного файла, надо потратить значительное время. Сканируя своим взглядом одну за другой страницы. Но это задача не дизайнера, а программиста. Задача же дизайнера в том, чтобы сделать результаты поиска лёгкими для восприятия и максимально полезными для дальнейшего использования.

Эстетическая сторона. О том, кто должен искать.

Предполагается, всё, что создаётся в интернете, в том числе различными программами, роботами и роботами-программами предназначено для человека. Бывает, в сети встречаешься с такими вещами, что возникает обратное впечатление.

Пример

Поисковая система RAGY: «удобный поиск, 4 поисковых системы в одной, 4 поисковика на одной странице». 
 

Чем не целесообразна такая поисковая форма? Функции одной поисковой системы дублируются четырежды. Зачем искать в четырёх поисковых системах одновременно, если можно поискать в одной, наиболее мощной? Можно было бы сделать эту систему более полезной, дав возможность поиска отраслевой информации, которую наиболее эффективно позволяет искать только отдельно взятый поисковик. Например, Яндекс ищет по новостям и рунету, Апорт — mp3, Google — по интернету, Rambler — Top100. Кроме того, допускается, что интересы посетителя шире интересов того, кто делал эту систему. Поэтому кроме представленных рубрик посетитель, возможно, пожелает поискать по энциклопедиям, интернет-блогам или по товарам. Не надо пытаться интересы пользователя сузить — не получится. А вот потерять за счёт этого недостатка часть аудитории — легко.

Пример

Форма поиска Справочной службы Сибирского региона. 
 

Уменьшаем размер и вес в 2 раза: 
 

Эта поисковая форма в отличие от предыдущей исключает возможность одновременного поиска по нескольким категориям. Но ищущий от этого ничего не теряет, т.к. представленные категории не пересекаются. Т.е. человек, который ищет в базе справочника предприятия, занимающиеся пищевой промышленностью не нуждается в одновременном срочном поиске софта. Наименования категорий ftp и Google заменены наименованиями файлы и интернет соответственно. Возможно, сайт посетит тот, кто с интернетом пока на «Вы».

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

Дизайнер — это универсал, он совмещает в себе возможность одновременно мыслить как творчески, так и логически. Чтобы делать удобные сайты, надо уделять внимание каждой мелочи. Не торопится. Ставить себя на место пользователя. Размышлять, почему лучше сделать именно так, а не иначе.

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

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

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

Это заставляет изыскивать другие пути для оформления “тела” документа. B частности выделение необходимых частей текста цветом, применением СТРОЧНЫХ символов, их курсивного и полужирного начертания, а также манипуляции с кеглем шрифта выводимого на экран клиента. Немаловажным для удобства восприятия информации оказывается цветовое соотношение текста и фона. Если предполагается передача клиенту достаточно большого объема информации, то с точки зрения удобочитаемости, желательно чтобы текст был выполнен темным цветом на светлом фоне и быть достаточно контрастным. Применение ярких подложек под текст (задний фон) является сильным выразительным средством, но необходимо помнить, что читать текст по яркому, а тем более пестрому, фону трудно, а иногда просто невозможно, так как символы теряются в пестроте подложки.

Одним из показателей удобочитаемости является ширина строки документа. С появлением мониторов поддерживающих большое разрешение экрана стало возможно “укладывать” в одну строку до нескольких сотен знаков, однако строка “идеальной ширины” должна умещать порядка 50-70 знаков. При их большем количестве скорость чтения замедляется и утомляемость наступает значительно быстрее.

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

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

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

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

Когда использовать базу данных

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

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

Когда не использовать базу данных

Так когда же не нужно использовать базу данных? Наверняка многие из читателей скажут: «Это ведь смешно – всегда можно извлечь выгоду от использования базы данных», что будет равносильно русской поговорке: «Кашу маслом не испортишь!»… Позвольте мне объяснить, почему это не всегда так.

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

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

Примите решение

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

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

Для написания HTML и создания графики хороший инструментарий просто необходим. Вам понадобится хороший HTML-редактор, графический пакет для создания растровой графики и программа для ее оптимизации.

HTML-редакторы

Все специализированные редакторы делятся на две группы:

• WYSIWYG-editors
• Source editors

Аббревиатура первой группы расшифровывается как What You See Is What You Get (”Что видишь, то и получишь.”). К ней относится, например, Microsoft FrontPage. Работа с FrontPage очень проста и напоминает работу с Microsoft Word. В редакторах этого типа создание HTML-кода возлагается на саму программу, а пользователь занимается лишь оформлением странички.

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

Я бы советовал сразу забыть про существование WYSIWYG-редакторов, даже начинающим. Создавать web-страницы подобным образом такая же нелепость, как программирование с помошью мышки. Язык HTML не прост, он примитивен. Поэтому не стоит упрощать работу с элементарным, даже если вас об этом просит сам Microsoft.

Да-да, я призываю к написанию HTML “руками”. Так вы быстрее разберетесь что к чему, и очень быстро научитесь бегло читать HTML-код.

Что любопытно, на свете есть особый род людей, которые гордятся тем, что пишут HTML в стандартном “Блокноте” Windows. Это настоящие фанаты написания HTML вручную, просто млеющие от глубины своих немеряных познаний в области web-программирования. Как правило, это люди, занимающиеся web-дизайном непрофессионально, время от времени, ибо HTML для крупных Intenet-проектов в “Блокноте” не пишется. Ну, разве что, изощренными мазохистами.

“Редакция советует…”

Из HTML-редакторов особо выбирать не приходится: Allaire HomeSite – лучший выбор. В нем есть все необходимое для профессиональной работы, плюс еще столько же. Я уже десятки раз разочаровывался в нем, жалея об отсутствии той или иной функции, и столько же раз был вне себя от счастья, находя ее буквально у себя перед носом.

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

Для счастливых обладателей ОС Linux могу также посоветовать поглубже изучить графический редактор GIMP с технологией Script-Fu. Он предоставляет невероятные возможности по созданию собственных графических фильтров и комбинированию имеющихся. Если вы хотите создать тысячу разных картинок с заданными параметрами (например, графических кнопок или заголовков) – этот редактор для вас.

Оптимизаторы

Из программ-оптимизаторов изображений могу порекомендовать два продукта: Ulead SmartSaver Pro и Adobe ImageReady, поставляющийся в комплекте с PhotoShop v5.5. Обе программы прекрасно интегрируются с PhotoShop и предоставляют все необходимое для работы.

PNG (Portable Network Graphics) был (и есть) одним из величайших событий, когда либо произошедших в мире веб-графики, но и это не помешало ему стать забытым и почти не используемым графическим форматом.

Посмотрим, почему так случилось, и вы поймете, почему погибают некоторые очень перспективные технологии.

Когда был создан графический формат GIF, его сразу стали использовать везде, где это только было возможно. Да это и не удивительно, ведь новый формат для того времени был действительно отличный; он использовал алгоритм сжатия графической информации, разработанный когда-то фирмой Unisys. Но когда внезапно стали без счета появляться веб-странички с использованием картинок в GIF, Unisys’овцы решили поскорее лицензировать свой графический формат. Все заговорили о том, каким образом придется платить этой фирме за использование GIF. Придется ли платить каждый раз, как вы помещаете изображение на сервер? Или каждый раз, когда пользователь увидит это изображение? При этом большинство все же продолжало использовать GIF в ожидании, пока все немного поутихнет.

Но не все люди привыкли ждать, пока что-то произойдет само собой. Так, группа профессионалов в области графических компьютерных изображений решила найти достойную замену GIF’у. Надо было создать формат, который бы не являлся чьей-то собственностью, который мог бы бесплатно использовать каждый. Кроме того к тому времени в GIF’е нашлись недостатки. Например, палитра из 255 цветов уже явно устарела, хотелось использовать все доступные 24 бита. Да и компрессия могла бы быть значительно лучше.

Их решение проблемы было следующим: они достаточно быстро разработали формат с открытым кодом (open source), т.е. каждый мог использовать его как и где хотел. Они разработали спецификацию формата, который генерировал файлы меньшего чем GIF размера, которые могли содержать 24- или 8-битное изображение. Кроме того, PNG “умел” много такого, что GIF’у и не снилось.

Но многие вспомнили происшествие с GIFом, испугались высокого налога на использование формата. Все это время PNG существовал и поддерживался браузерами но… никто его не использовал.

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

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

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

Ну что же, хотите рассказов о юзабилити? Их есть у меня!

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

Интересно, что заголовок является частью интерфейса не только страницы, но и собственно программы-браузера. Более того, это, если не ошибаюсь, единственный элемент окна браузера, который можно совершенно законно изменять с помощью стандартных тегов HTML. Конечно, средствами JavaScript можно вывести текст в статусную строку или создать всплывающее (popup) окно без панели инструментов браузера, но при этом всплывающие окна нужно применять очень осторожно и десять раз подумав, а эксперименты со статусной строкой вообще относятся к области дурного вкуса.

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

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

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

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

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

Кстати, именно из-за этого нужно стараться, чтобы на сайте не было двух страниц с одинаковым заголовком. А то, например, я недавно читал статью на сайте Hi-Fi.RU, разбитую на 10 отдельных страниц, попутно сохраняя их на диск. В заголовках всех страниц было указано только название статьи, и мне пришлось в браузере в окне «Сохранить как» вручную дописывать к имени файла слова «Часть 1», «Часть 2», «Часть 3» и т.п. О какой такой юзабилити тут вообще можно говорить?

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

Очень часто текст заголовка страницы составляют так: сначала пишут название сайта, затем — названия подразделов (если они предусмотрены, конечно), и в последнюю очередь — название страницы. То есть получается, например, так, как сделано в каталоге List.ru (этот снимок экрана уже был приведен выше):

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

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

Зачем это нужно? Представьте себе довольно распространенную ситуацию: во время работы в интернете человек открыл несколько окон браузера с разными веб-страницами одного и того же сайта. Ну, не одного, а пары (для сравнения) — например, «Рамблера» и моих «Субъективных заметок». Тогда панель задач Windows его компьютера примет вот такой вид:

Единственный способ узнать, какое из окон «Рамблера» содержит нужную страницу (например, рейтинг Top100 в категории «Дизайн») — это последовательно ткнуть в каждую из кнопок с надписью «Rambler» (по закону Мерфи нужная страница окажется как раз за последней нажатой кнопкой).

А вот если бы заголовки страниц на «Рамблере» начинались с названия текущей страницы, то слово «Дизайн» было бы видно на одной из кнопок, и пользователь не тратил бы время на поиск нужного окна браузера. Что наглядно демонстрируют две кнопки справа, представляющие материалы «Субъективных заметок»: узнать, за какой из них скрываются статьи «Делаем скриншот» и «Грамотный дизайн», не сложно.

Если вы думаете, что такой способ организации многодокументного интерфейса является чем-то новым и непривычным для пользователя, то это не так. Например, заголовки окон русского народного текстового процессора Microsoft Word версии 9.0 (да и вообще всех программ из пакета Office 2000), организованы точно так же: сначала указывается название документа, а только после него — название программы.

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

Идеалы юзабилити — в жизнь!