Тема 4. Юзабилити сайта

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

Юзабилити рассматривает следующие факторы.

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

Эффективность использования: после того, как пользователь научился пользоваться системой, насколько быстро он сможет выполнять задачи?

Запоминаемость: если пользователь работал ранее с системой, сколько он смог запомнить и не придется ли ему изучать систему снова?

Количество и серьезность ошибок: как часто пользователь ошибается при работе с системой, насколько серьезны эти ошибки и как их исправить?

Субъективное удовлетворение: в какой мере пользователю нравится работать с системой?

Вспомните, сколько раз вы не смогли найти нужную информацию в Сети? Даже если нашли то, что нужно, сколько потратили на это времени и сколько испытали трудностей! Так вот, по статистике, 60 % пользователей не могут быстро и без затруднений найти необходимые данные в Интернете! Одной из причин этого является несоблюдение правил юзабилити. Это все ведет к потере времени и снижению производительности труда.

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

4.1. Разметка страницы

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

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

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

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

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

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

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

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

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

4.2. Навигация

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

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

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

Нет ощущения масштаба.

Нет ощущения направления.

Нет ощущения местоположения.

4.3. Главная страница

Начальная страница должна содержать следующие разделы:

Цель и назначение сайта.

Иерархия сайта.

Поиск.

Анонсы содержания сайта.

Обзор содержания.

Обзор сервисов.

Периодически обновляемое содержание.

Реклама.

Ярлыки.

Регистрация.

Кроме того, начальная страница должна служить нескольким общим целям:

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

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

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

4.4. Изложение информационного материала

Исследование пяти наиболее популярных стилей письма (исследование лаборатории Sun Microsystems; полный отчет об экспериментах см. на http://www.useit.com) показало, что средний веб-сайт становится на 53 % удобней для восприятия пользователя, если текст написан сжато и кратко, на 47 % удобней, если текст легко просматривается, и на 27 % удобней, если текст написан в информативном, а не в "рекламном" стиле, который столь популярен сейчас на корпоративных сайтах.

Результаты эксперимента:

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

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

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

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

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

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

5.1. Проектирование сайта

5.1.1. Формулирование замысла

Созданию веб-сайта всегда предшествует идея. Научиться создавать сайт, не зная, какая на нем будет размещена информация, трудно, долго и бессмысленно. Проектирование интернет-ресурса начинается с выбора темы работы или вопроса: О ЧЕМ САЙТ? Именно на этот вопрос вам необходимо дать ответ в первую очередь. Не пытайтесь ответить одним словом: насколько емким и точным будет ответ, настолько меньшим будет количество ошибок, которые возникнут в процессе вашей работы.

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

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

После выбора темы важно определить назначение создаваемого ресурса: ДЛЯ ЧЕГО вы делаете сайт. Например, создавая веб-ресурс по истории, вы можете преследовать различные цели: учить и просвещать (для этой цели служат учебники, тесты, пособия), сообщать новости (предоставлять информацию об исторических открытиях, событиях в научном мире), общаться (здесь помогут форумы и чаты по исторической тематике, развлекать (исторические анекдоты), зарабатывать деньги (продавать литературу по истории).

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

5.1.2. Обзор существующих сайтов

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

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

5.1.3. Определение содержания, оформления, структуры

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

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

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

По степени сложности дизайн может быть простым или сложным в плане использования объектов мультимедиа (графика, анимация, клипы, звук). От степени сложности дизайна зависит скорость загрузки каждой новой страницы сайта: чем больше помещено на ней "громоздких" графических объектов, тем медленнее она загружается браузером. Для увеличения скорости загрузки рекомендуется использовать "текстовый" дизайн – предельно простое оформление с минимальным использованием графических элементов. Такой вариант часто используется там, где важна именно текстовая информация и параметр скорости является значимым (например, поисковые машины yandex.ru, rambler.ru). Но это не значит, что такие сайты остаются без оформления. Привлекательность их достигается с помощью определенных дизайнерских стратегий: экспериментов с разметкой страницы, цветовым оформлением шрифтов, общего фона и отдельных ячеек.

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

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

5.1.4. Выбор инструментария

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

5.1.5. Советы и рекомендации

Итак, при проектировании сайта вы последовательно должны:

Сформулировать замысел веб-проекта:

Определить тему сайта.

Определить функциональное назначение сайта.

Определить целевую аудиторию сайта (для кого?).

Провести обзор существующих по вашей теме сайтов, который позволяет вам:

Обозначить актуальность нашего проекта.

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

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

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

Определить содержание, структуру и оформление сайта:

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

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

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

5.2. Изготовление веб-сайта

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

Веб-редакторы значительно упрощают разработку сайтов. Для приобретения навыков работы в них требуется относительно немного времени. Наиболее распространены среди начинающих разработчиков редакторы FrontPage и DreamWeaver. Microsoft FrontPage (FP) – весьма сложная система, для которой создание веб-страниц – лишь вспомогательная функция. FP "думает" масштабами предприятия. В нем масса мастеров и шаблонов, более 60 готовых схем форматирования страниц. Интерфейс FP аналогичен интерфейсу других программ Microsoft Office. Macromedia DreamWeaver (DW) принадлежит к тому же классу веб-редакторов, что и FrontPage – WYSIWYG-редакторы. Глобальное отличие DW от FP – в философии. FP полагает, что пользователь абсолютно не способен породить код HTML самостоятельно, поэтому программа должна сделать все за него. DW считает, что пользователь все может сделать сам, а программа должна создать максимальные условия для творчества. К недостаткам FP также можно отнести следующие:

сайты не отличаются разнообразием, получаются безликими и скучными;

в дизайн сайта трудно вставить что-либо свое, кроме заготовок редактора;

программа склонна редактировать по-своему, даже удалять непонятные для нее теги, менять форматирование страниц;

страницы плохо индексируются поисковыми системами;

страницы имеют больший размер.

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

5.2.1. Интерфейс Macromedia DreamWeaver

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

Начнем изучение интерфейса программы с панели Палитра объектов, при помощи которой мы помещаем на страницу всю внешнюю информацию (кроме текста).

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

По умолчанию открыта палитра Common objects (Основные объекты). На ней размещены практически все инструменты, которые вам понадобятся (смотрим слева – направо, сверху – вниз):

Image – вставка графического объекта.

Rollover Image – вставка конструкции, которая имитирует анимированную кнопку (кнопку, изменяющую свой вид при наведении на нее).

Table – вставка таблицы и т.п.

Tabular data (табличные данные) – вставка готовой таблицы с данными (например, из Excel).

Draw Layer (нарисовать слой) – вставка слоя (как в PhotoShop).

Navifgation Bar – вставляет навигационную панель, состоящую из нескольких кнопок.

Horizontal Rule (линейка) – вставляет декоративный элемент – линейку (обычно используется как разделитель абзацев).

E-mail Link (ссылка на электронную почту) – вставляет ссылку на электронный адрес.

Date (дата) – вставка в документ текущей даты (можно с автообновлением).

Включение стороны сервера (рассматривать не будем).

Вставка объекта Fireworks (рассматривать не будем).

Flash – вставляет флеш-анимацию.

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

5.2.2. Создание нового сайта. Настройка параметров

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

Прежде чем начинать работу над сайтом, нужно четко представить себе его структуру и размещение основных материалов по каталогам. Например, в корневом каталоге (назовем его site) мы разместим наши веб-страницы (html-файлы), в каталоге images – графические объекты (фотографии, элементы дизайна).

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

После определения структуры сайта на жестком диске начинаем настраивать наш сайт в DW. Начало работы с гипертекстовыми документами в программе DW немногим отличается от текстовых редакторов. Выполните команду "File" → "New" ("Файл" → "Создать") в окне документа.

Далее в главном меню "Файлы сайта" выбираем команду "Новый сайт".

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