Примеры устоявшихся правил дизайна

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

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

  !!!   Синий текст в Web означает "щелкай здесь", поэтому оставляя непосещенные ссылки синими, вы не ставите перед пользователем никаких        сомнений в том, что куда они могут пойти дальше. Гораздо больше времени экономится из-за того, что посетители быстро догадываются, куда они могут пойти на со страницы, чем теряется из-за того, что несколько слов на странице оформлены цветом, замедляющим чтение на несколько миллисекунд

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

Левая полоса навигации

Первым "Желтую Лихорадку" в веб-дизайне подхватил веб-сайт CNET (где-то в 1996 году), и с тех пор эта болезнь заразила такое количество сайтов, что превратилась практически в незыблемое правило: у каждого сайта теперь вдоль левого края страницы тянется сверху вниз цветная полоска, на которой располагаются главные ссылки навигации.

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

Самое интересное, что сам сайт CNET оправился от Желтой Лихорадки в 1999 году, и теперь использует дизайн, в котором ссылки навигации сконцентрированы вверху страницы. Благодаря этому все оставшееся пространство на экране отдано под материалы сайта. Их новый дизайн мне нравится гораздо больше.

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

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

  !!!   Закон Фиттса гласит, что чем меньше приходится двигать мышкой, тем лучше: щелкнуть получается гораздо быстрее, если между целью и текущим положением мыши короткое расстояние. Таким образом, располагая линейку навигации рядом с линейкой прокрутки вы убережете пользователя от метания по экрану из стороны в сторону между двумя наиболее используемыми областями.
  !!!   Когда перед пользователем возникает новая страница , он всегда смотрит сначала на содержимое страницы, поэтому лучше всего было бы, если бы контент начинался с левого края окна (это привычно для тех, кто привык читать слева направо). После того, как пользователь покончит с контентом, его взгляд естественным образом переместится вправо, чтобы решить, куда следует идти дальше. И наоборот, если слева на странице будет полоса навигации, пользователю требуется перескочить через нее взглядом, прежде чем он начнет просматривать контент страницы.

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

Ссылки-цепочки

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

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

Пока не существует стандарта относительно того, как обозначать переход от одного уровня иерархии к другому в ссылках-цепочках. На своем сайте я уже четыре года пользуюсь стрелками. А до этого я пользовался двоеточиями, так, как это сейчас делает CNET. Yahoo и ZDNet используют символ >, а другие сайты используют косую черту "/". Стандарта пока нет, и пока нет никаких причин считать, что один символ чем-то лучше другого.

Если какой-либо из этих символов получит наибольшую популярность хотя бы на 60% сайтов, тогда я порекомендую и вам его использовать. Сегодня же, я бы сказал, что все символы хороши - ":", ">". "/" и стрелки. Но только не пытайтесь придумать еще какой-нибудь другой символ. Например, символом "вертикальная черта" ("|") принято обозначать два равных варианта выбора, и он не может использоваться для обозначения перемещения

Вот такие вот существуют стандарты для сайтов ...