создание сайтов: 5 шагов улучшить Ваш сайт

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

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

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

Страницы с ясной визуальной иерархией обладают тремя чертами:

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

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

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

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

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

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

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

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

Обычаи и условности - ваши друзья

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

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

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

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

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

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

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

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

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

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

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

Разбейте страницы на четко разделенные области

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

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

Покажите ясно, по чему можно щелкать мышью

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

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

Уменьшите визуальный шум

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

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

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

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

Стив Круг, Веб дизайн