Что нужно хорошей Web-странице?

Введение

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

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

Домашняя страница

В этом месте многие люди склонны думать "давайте начнем с первой страницы, которую собираются посетить многие пользователи - c домашней страницы. Это логично, не правда ли?"

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

В качестве примера того, что я имею в виду, посетите домашнюю страницу MSN (http://www.msn.com/, см. также рис 7.1). Нечто необыкновенное по части перегруженности ссылками и контентом. Сеть сайтов MSN огромна — от путешествий до ТВ, от службы свиданий до поиска маршрута, от гаджетов до информации защитников окружающей среды. Все они соперничают за ваше внимание.

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

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

Однако более вероятно, что посетители окажутся на сайте в результате поиска. Если они осуществляют поиск по названию группы, то вполне возможно (хотя и не гарантировано), что они получат домашнюю страницу сайта в качестве основного результата. Предположим однако, например, что кто-то ищет вместо этого "Beatles tribute gig" — то он вполне может получить страницу "Tour Dates" в качестве первого результата. Или если поиск происходит по словам "band Moose Jaw", то первым результатом может быть страница "About TDB", так как там упоминается, что группа находится в Moose Jaw, в то время как домашняя страница ничего об этом не говорит.

В статье о своем решении отменить плату за доступ к старому контенту (http://www.nytimes.com/2007/09/18/business/media/18times.html), газета New York Times отмечает, что поведение посетителей изменилось — Изменилось то, говорится в Times, что

Что это значит для нашего сайта?

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

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

Давайте теперь пойдем немного глубже, и познакомимся с этими вещами …

Средства навигации

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

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

Следуя общей структуре IA, основная навигация сайта TDB должна содержать ссылки на страницы/разделы "Store", "About", Contact, "The Music" и "Band News", а также ссылку назад на страницу Home. В действительности не нужно соединяться со страницами ниже этих, такими как страницы "Tour Dates" и "Lyrics". Ссылки на эти страницы должны находиться только в этой области — если кому-то понадобиться перейти со страницы лирики определенной песни прямо на страницу "Tour Dates", то он сможет перейти на страницу "Band News" и, следовательно, оттуда на "Tour Dates".

Одним из наиболее критических аспектов успешного перемещения по сайту является согласованность. Посмотрите на закладки вверху следующей страницы (такие ссылки как "Home", "Articles", "Forums" и т.д.). Когда вы перемещаетесь по сайту http://dev.opera.com, эта панель навигации сохраняется. Она будет изменяться, чтобы показать, где вы находитесь в текущий момент на сайте и предоставлять дополнительные ссылки, чтобы углубиться в некоторую область. Например, щелчок на закладке "Articles" позволяет перейти в основную область статей, которая содержит затем ссылки на некоторые из самых свежих публикаций и совокупность ссылок на подобласти по таким темам, как "Accessibility", "CSS" и "Mobile".

Другие часто используемые элементы сайта

Кроме средств навигации, как правило, существуют другие элементы сайта, которые повторяются на страницах. Большинство сайтов будет использовать некоторую форму брендинга, логотипа или титульных данных, чтобы продемонстрировать право собственности. Например, почти каждая страница на сайте Yahoo! будет иметь логотип в верхнем правом углу, и этот логотип должен содержать часть сети Yahoo!, в которой вы находитесь (такую как "Travel", "Movies", "Autos", и т.д.).

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

Нижний колонтитул (последняя область страницы) должен содержать дополнительную информацию, такую как указание на авторские права и ссылки на полезные вспомогательные страницы на сайте, если они имеются, такие как "About This Site", "Terms Conditions", "Contact Us" и т.д.).

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

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

Контекст определяет все

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

Значимый контент

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

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

Заголовки

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

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

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

Юзабилити

Юзабилити является всеобъемлющим термином, определяющим создание сайта, поведение которого организовано рациональным и ожидаемым образом.

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

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

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

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

Доступность

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

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

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

Кроме людей, которым требуются вспомогательные технологии, существуют также другие люди, для которых это также будет справедливо, такие как мобильные пользователи. Технология Flash еще недостаточно развита, чтобы она даже появилась на мобильных телефонах — Apple iPhone не имеет и возможно никогда не будет ее иметь, но во всем остальном может просматривать Web почти как настольная версия браузера Safari на компьютере Mac (Opera Mobile поддерживает Flash). Такие технологии как Opera Mini, которые позволяют маломощным мобильным телефонам получить доступ к Web, будут переписывать Web-страницы, чтобы сделать их легче и более эффективными, а изображения на страницах могут выводиться значительно меньшего размера для большинства пользователей — означая, что любые требования на точность деталей могут быть опущены.

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

Заключение

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

Контрольные вопросы

Для ответа на контрольные вопросы этой лекции выполните просто небольшой просмотр Web — посетите некоторые из своих любимых сайтов и взгляните на них в новом свете. Дайте несколько ответов на следующие вопросы:

Об авторе