Обеспечение трехкликовой структуры сайта
Материал из Практическое руководство по продвижению сайта в интернете
Принцип «трех кликов» гласит: любой документ с сайта должен быть доступен за три щелчка.
Преимущества данной структуры:
- удобна для пользователей (высокий уровень юзабилити сайта);
- позволяет поисковым роботам быстро и полно индексировать сайт.
По возможности необходимо приводить к такой структуре любой оптимизируемый сайт. Однако на практике такое не всегда возможно. Особенно для больших сайтов, где структура может быть четырех- или пятикликовой.
Анализ удобства (юзабилити) сайта
Коммерческий интернет-сайт должен быть эффективным биз¬нес-инструментом, а не визитной карточкой фирмы. Сайт, который создан для того, чтобы продавать, должен именно эффективно продавать товары или услуги фирмы, а значит, быть максимально удобным в использовании. Сайт должен быть сделан именно для пользователя, а не для сотрудников фирмы и генерального директора.
На тему создания эффективных и удобных сайтов написано много хороших книг и статей, основанных на опыте тестирования юзабилити. Но книги, видимо, читают мало, и большинство сайтов не отличается удобством.
Что такое юзабилити и зачем оно нам?
Юзабилити — это удобство использования чего-либо. В нашем случае под этим термином подразумевается удобство использования сайта. Повторюсь, интернет-сайт создается все-таки для пользователя, а не для директора и персонала фирмы. Следовательно, сайт должен быть максимально удобным и удовлетворять определенным общепринятым стандартам и нормам юзабилити, которые выработаны сообществом пользователей.
Вопросы юзабилити очень хорошо изложены в книгах и статьях Якоба Нильсена и Стива Круга. Рекомендую прочесть их, так как юзабилити — тема для отдельной книги.
Некоторые стандарты юзабилити, которые могут быть применимы для большинства коммерческих сайтов, я позволю себе привести в сжатой табличной форме (табл. 1.4-1.7). Однако стоит учесть, что приведенные ниже данные — это «средняя температура по больнице». Каждый сайт стоит рассматривать индивидуально.
| № | Параметр | Значение |
| 1 | Время загрузки | Не более 10 секунд при скорости 26 400 Кбит/с (модем). Размер файла страницы не более 30-70 Кбайт |
| 2 | Браузеры | Сайт должен одинаково просматриваться в браузерах Internet Ехрlогег (IЕ) и Mozila, Opera двухгодичной давности. Сайт также должен отображаться без грубых погрешностей в других браузерах: Safari, Netscape и т.п. |
| 3 | Разрешение монитора | Сайт должен хорошо просматриваться при разрешении от 800 х 600 пикселов |
| 4 | Обработка ошибки 404 | Страница-заглушка, сообщающая о том, что данного документа не существует, и рекомендующая воспользоваться поиском или перейти на главную страницу сайт |
| 5 | Реклама | Указание на то, что область является рекламой |
| 6 | Технические проблемы | Страницы сообщения о технических проблемах с указанием контактной информации и времени устранения проблем и неполадок |
| 7 | Авторизация пользователей | Область авторизации должна быть расположена в заметном месте (без прокрутки страницы при разрешении 800 х 600 пикселов) |
| № | Параметр | Значение |
| 1 | Ширина страницы | Оптимизированная для отображения в окне шириной 770 пикселов, с гибкой структурой страницы, которая подходит для любого окна размером от 620 до 1024 пикселов |
| 2 | Структура страницы | Гибкая, автоматически приспосабливает¬ся под конкретный размер окна пользователя |
| 3 | Длина страницы | 1-2 НТМL-экрана. Не более трех НТМL-экранов (от 1000 до 1600 пикселов). Необходимо, чтобы на одном экране уместились все главные элементы страницы |
| 4 | Использование фреймов | Нет |
| 5 | Реклама | Указание на то, что область является рекламой |
| 6 | Иерархия разделов | Страницы сообщения о технических проблемах с указанием контактной информации и времени устранения проблем и неполадок |
| 7 | Вертикальная прокрутка | Стараться избегать |
| 8 | Раскрывающиеся окна (рорuр) | Не использовать |
| № | Параметр | Значение |
| Меню | ||
| 1 | Основное меню | Слева и сверху, должно быть в заметном месте. Ссылки должны быть текстовыми, а не графическими |
| 2 | Дополнительное меню | Дублирование ссылок на разделы сайта внизу, если страница имеет более одного НТМL-экрана |
| 3 | Карта сайта | Обязательно, со ссылками на все разделы сайта. Для сайтов, где количество страниц невелико, можно не использовать. Для больших сайтов делать карту в виде иерархического дерева. |
| 4 | Иерархическое меню /«хлебные крошки» | Допускается наличие дополнительной навигационной строки, показывающей иерархию разделов и местоположение человека. В качестве разделителя же-лательно использовать знак «>». Пример: Главная > Отели Турции > Отель Wow Тор |
| Поиск | ||
| 1 | Наличие поиска | Очень желательно |
| 2 | Расположение | Вверху сайта. Оптимиально - правый верхний угол. Или левый верхний угол. |
| 3 | Поле поиска | Цвет поля - белый. Ширина - примерно 30 символов. |
| 4 | Название кнопки поиска | Найти |
| 5 | Расширенный поиск | При необходимости. Должен быть вы¬несен на отдельную страницу. Должна быть ссылка с основного поиска |
| 6 | Область поиска | По умолчанию ищет только по сайту |
| 7 | Если ничего не найдено | Предложение расширенного поиска или сообщение о том, что по запросу ничего не найдено, с предложением переформулировать запрос или обратиться в тп. |
| Ссылки | ||
| 1 | Self-ссылки | Не должно быть ссылок с текущей страницы на саму себя |
| 2 | Названия ссылок | Логичные и понятные, отличные друг от друга |
| 3 | Цвета ссылок | Обязательно должны различаться цвета просмотренных и непросмотренных ссылок. Непросмотренные ссылки выделяются голубым, просмотренные — иным контрастным цветом (или по усмотрению дизайнера) |
| 4 | Функциональные ссылки | Если идет ссылка на скачивание файла/анимации/музыки, то должно быть указание на это в виде объема данных и типа носителя (файл, музыка, видео). В отдельных случаях можно указывать время скачивания, которое потребуется при заданной пропускной способности канала |
| 5 | Вид ссылок | Ссылки должны быть подчеркнуты (за исключением ссылок на панели навигации) |
| 6 | Тип ссылок | Текстовые ссылки, не графические |
| № | Параметр | Значение |
| 1 | Объем графики | Не перегружать страницу графикой. Графика не должна превышать 30-50 Кбайт на страницу.
Исключение: страницы, специально предназначенные для демонстрации графики: фотоальбом и т. п. |
| 2 | Подписи рисунков (alt) | Все рисунки должны быть понятно подписаны (тег alt), чтобы с выключенной графикой сайт нормально отображался и понимался пользователем. В тегах <img /> обязательно задавать атрибуты height и width |
| 3 | Флеш-анимация | Должна быть использована по минимуму либо по ссылке на отдельной странице |
| 4 | Файлы мультимедиа | При размещении на сайте аудио-, видео- и иной мультимедийной информации должны быть учтены следующие требования: 1. Указаны формат и объем мультимедийного файла. |
| 5 | Фон и текст (шрифт) | Существуют следующие требования. 1. Фон и текст страницы должны быть оформлены контрастными цветами. Наилучшее сочетание: черный текст на белом фоне (белый текст на черном фоне). |
| 6 | Размер шрифта | Желательно 12 пунктов |
| 7 | Вид шрифта | Желательно шрифт без засечек Verdana или Arial |
| 8 | Основной текст | Желательно черный |
| 9 | Фон | Желательно белый |
| 10 | Расположение логотипа | Верхний левый угол страницы |
| 11 | Размер логотипа | От 58 х 58 до 111 х 111 пикселов (оптимально 80 х 68 пикселов) |
| 12 | Ссылка с логотипа | Обязательно на главную страницу |
| 13 | Заставка при загрузке сайта | Использование нежелательно |
Более подробно о стандартах и нормах юзабилити можно прочитать в книге Нильсена и Тахир «Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов».
Аудит юзабилити
Аудит юзабилити направлен на то, чтобы, с одной стороны, оценить текущее состояние удобства сайта, а с другой стороны, путем анализа выявить недостатки юзабилити и улучшить удобство сайта.
При этом аудит юзабилити можно разделить на три вида:
- тот, который производится специалистом организации по стандартам и исходя из собственного опыта и знаний;
- тот, который выполняется сторонними пользователями (пользовательский аудит юзабилити);
- так называемый айтрекинг (eyetracking).
Аудит юзабилити специалистом организации. В процессе анализа сайта должны быть оценены определенные части сайта и по каждой части выполнен анализ ошибок и выданы подробные рекомендации. Анализируются:
- главная страница сайта;
- навигация по сайту;
- структура сайта;
- графическое и шрифтовое оформление сайта;
- информационное наполнение сайта.
Целесообразность проведения аудита других частей сайта определяется специалистом самостоятельно исходя из специфики задачи и самого сайта.
Кроме того, может производиться аудит юзабилити следующих частей сайта:
- отдельных значимых разделов сайта (каталога товаров и услуг, форума, базы данных и т. п.);
- тематических рассылок, которые осуществляются с сайта;
- администраторской системы сайта;
- форм обратной связи (анкеты, форумы, гостевые книги).
Аудит юзабилити пользователями. Преимущества аудита пользователями состоят в том, что вы видите, как с вашим сайтом работают живые люди, с какими трудностями они сталкиваются, что у них получается, а что не очень. Кроме того, такой аудит довольно легко проводить и без привлечения сторонних подрядчиков. Достаточно сформулировать цели, задачи (список вопросов), принести видеокамеру и по¬добрать от трех до пяти «подопытных кроликов». Мы очень часто проводим такие «экспресс-аудиты» сайтов наших кли¬ентов. Очень помогает.
В пользовательском аудите возможны три варианта.
- Вариант 1.
Анкетирование.
Пользовательский аудит юзабилити производится путем анкетирования.
Для сайта разрабатывается специальная анкета, содержащая вопросы по сайту и предлагающая пользователям решение конкретных задач на сайте. В анкете фиксируются мысли и мнения пользователей. Пример анкеты смотрите в приложении 3.
Пользовательский аудит может проходить поэтапно (три этапа) либо в один этап.
Для аудита достаточно привлечь 4-5 пользователей, причем не обязательно из целевой аудитории. Очень желательно, чтобы пользователи, привлекаемые для аудита сайта, имели различный опыт использования Интернета. В ряде случаев могут быть определены и иные ограничения для участников тестирования.
Специалист, осуществляющий аудит сайта, разрабатывает анкету и рассылает ее участникам тестов. После заполнения анкет специалист анализирует выводы и мнения пользователей и составляет подробные рекомендации по улучшению сайта, основываясь на выводах пользователей и личном опыте.
- Вариант 2.
Тестирование «вживую».
Аудит юзабилити может проводиться непосредственно пользователями, при этом применяются средства наблюдения (видеокамера, специальные программы, позволяющие отслеживать перемещение взгляда пользователя). Наиболее доступным является следующий вариант аудита: пользователь располагается перед монитором и выполняет различные задания, комментируя свои действия. Все происходящее фиксируется на видео (можно также параллельно записывать мысли пользователя на бумагу). Затем собранная информация обрабатывается и формируется отчет об ошибках.
Очень подробно тестирование юзабилити пользователями описано в книге Стива Круга «Веб-дизайн: книга Стива Круга, или Не заставляйте меня думать!». Я также рекомендую ее к приобретению и прочтению.
- Вариант 3.
Айтрекинг.
Это фактически разновидность тестирования «вживую», только с использованием специального программного обеспечения, которое позволяет следить за взглядом пользователя и строить так называемую «тепловую карту» (рис. 1.6). Эта карта отражает участки сайта, на которые обращают внимание тестируемые.
Данная технология используется при тестировании как юзабилити сайтов, так и печатной рекламы.
Этапы аудита юзабилити. В зависимости от постановки задачи и важности проекта аудит юзабилити может носить однократный или многократный характер. Наиболее эффективен многоэтапный аудит юзабилити, когда после выдачи начальных рекомендаций и их внедрения выполняется повторный анализ сайта и устраняются оставшиеся ошибки. Если бюджет на аудит ограничен, то можно обойтись одним тестом с участием пяти пользователей. Это позволит выявить 80 % всех ошибок.