1 Проведение пользовательского аудита юзабилити (тест из 5 пользователей)
1.1 Определить цель или цели для аудита (заказ товара, найти информацию, итп)
1.2 Составление задания для аудита
1.3 Установить на компьютер Camtasia Studio или любую другую программу для записи видео и речи
1.4 Проведение теста (не подсказывать ничего пользователю!!!)
1.5 Анализ видеозаписей и анкет
1.6 Формулирование списка ошибок
1.7 ТЗ на внедрение и исправление ошибок
2 Критерии и требования с точки зрения юзабилити
2.1 Общие требования к веб-сайту
2.1.1 Время загрузки
Не более 10 секунд при скорости 26400 кб/с (модем, 2G, 3G, GPRS). Размер файла страницы не более 30-70 килобайт
2.1.2 Браузеры (кросс-браузерность)
Сайт должен одинаково просматриваться во всех браузерах 2-х годичной давности. Для проверки используем сервис: http://browsershots.org/
2.1.3 Разрешение монитора
Сайт должен хорошо просматриваться при разрешении от 800х600 пикселей.
2.1.4 Обработка ошибки 404
Страница-заглушка, сообщающая о том, что данного документа не существует и рекомендующая воспользоваться поиском или перейти на главную страницу сайта
2.1.5 Реклама
Указание на то, что область является рекламой.
2.1.6 Технические проблемы
Страницы сообщения о технических проблемах с указанием контактной информации и времени устранения проблем и неполадок
2.1.7 Авторизация пользователей
Должна быть расположена в заметном месте (без прокрутки html экрана при разрешении 800х600 пикселей).
2.2 Структура сайта
2.2.1 Ширина страницы
Оптимизированная для отображения в окне шириной 770 пикселей, с гибкой структурой страницы, которая подходит для любого окна размером от 620 до 1024 пикселей. 768-774 пикселя
2.2.2 Структура страницы
Гибкая, автоматически приспосабливается под конкретный размер окна пользователя. Резиновый дизайн страницы.
2.2.3 Длина страницы
1-2 ХТМЛ экрана. Желательно не более 3 ХТМЛ экранов (от 1000 до 1600 пикселей). Необходимо, чтобы на 1 экране уместились все главные элементы страницы
2.2.4 Использование фреймов
нет
2.2.5 Иерархия разделов
Принцип «трех кликов». Трехуровневая структура сайта, чтобы пользователь мог попасть в любой раздел сайта за 3 клика»
2.2.6 Горизонтальная прокрутка
Ни в коем случае
2.2.7 Вертикальная прокрутка
Стараться избегать, по возможности
2.2.8 раскрывающиеся окна (popup)
Не использовать
2.3 Требования по навигации веб-сайта
2.3.1 Меню
2.3.1.1 Основное меню
Слева и сверху, должно быть в заметном месте. Ссылки должны быть текстовыми, а не графическими
2.3.1.2 Дополнительное меню
Дублирование ссылок на разделы сайта внизу, в случае если страница имеет более 1 ХТМЛ экрана.
2.3.1.3 Карта сайта
Обязательно, со ссылками на все разделы сайта.
Для сайтов, где количество страниц невелико можно не использовать.
Для больших сайтов, делать карту сайта в виде иерархического дерева
2.3.1.4 Иерархическое меню / «хлебные крошки»
Допускается наличие дополнительной навигационной строки, показывающей иерархию разделов и местоположение человека
В качестве разделителя желательно использовать знак «>»
Пример: Главная > Отели Турции > Отель Wow Topkappi
2.3.2 Поиск
2.3.2.1 Наличие поиска
Очень желательно
2.3.2.2 Расположение
Вверху сайта. Оптимально — правый верхний угол. Или левый верхний угол
2.3.2.3 Поле поиска
Цвет поля — белый. Ширина — примерно 30 символов
2.3.2.4 Название кнопки поиска
Найти
2.3.2.5 Расширенный поиск
При необходимости. Должен быть вынесен на отдельную страницу. Должна быть ссылка с основного поиска
2.3.2.6 Область поиска
По умолчанию ищет только по сайту
2.3.2.7 Если ничего не найдено
Предложение расширенного поиска или сообщение о том, что по запросу ничего не найдено с предложением переформулировать запрос или обратиться в офис компании
2.3.2.8 Быстрый поиск / Фильтры
Наличие фильтров для быстрого поиска товара/услуги. Например, по цене, размеру, этажности. В том числе фильтры с несколькими параметрами.
2.3.3 Ссылки
2.3.3.1 Self-ссылки
Не должно быть ссылок с текущей страницы на саму себя
2.3.3.2 Названия ссылок
Логичные и понятные, отличные друг от друга
2.3.3.3 Цвета ссылок
Обязательно должны различаться цвета просмотренных и не просмотренных ссылок.
Не просмотренные ссылки выделяются голубым, просмотренные — иным контрастным цветом (или по усмотрению дизайнера)
2.3.3.4 Функциональные ссылки
Если идет ссылка на скачивание файла/анимации/музыки, то должно быть указание на это в виде объема данных и типа носителя (файл, музыка, видео). В отдельных случаях можно указывать время скачивания, которое потребуется при заданной пропускной способности канала.
2.3.3.5 вид ссылок
ссылки должны быть подчеркнуты (за исключением ссылок в панели навигации)
2.3.3.6 тип ссылок
текстовые ссылки, не графические
2.4 Требования по информационному наполнению веб-сайта
2.4.1 уникальность
по возможности, на сайте должен располагаться уникальный контент (информация)
2.4.2 объем информации на страницу
страница не должна быть перегружена информацией, максимум 1-2 ХТМЛ экрана при разрешении 1024х768 пикселов, по объему контента 2-3 тысячи знаков
2.4.3 цены
должны быть размещены цены на продукцию/услуги
2.4.4 актуальность
информация должна быть актуальной и постоянно обновляться
2.4.5 преимущества
должны быть размещены преимущества продукции над продукцией конкурентов
2.4.6 описание услуг
должны быть размещены как можно более подробные описания товаров/услуг
2.4.7 адаптированность под веб-среду
Контент должен удовлетворять следующим условиям:
2.4.8 контактная информация
Обязательно размещение телефона и адреса компании вверху каждой страницы сайта. Также полезно дублировать контакты внизу и делать отдельную страницу под контактную информацию.
2.4.9 информация о компании
Ссылка «О компании»
2.4.10 правовая информация
Ссылка «Правовая информация» (по желанию)
2.4.11 объявления о работе
Ссылка «Вакансии» в разделе «О компании» (если есть необходимость)
2.4.12 справочная система
По необходимости
2.4.13 грамматика
Информация на сайте не должна содержать грамматических и стилистических ошибок
2.5 Требования по графическому и шрифтовому оформлению веб-сайта
2.5.1 объем графики
не перегружать страницу графикой. Графика не должна превышать 30-50 килобайт на страницу.
Исключение: страницы, специально предназначенные для демонстрации графики: фотоальбом итп.
2.5.2 подписи рисунков (alt)
все рисунки должны быть понятно подписаны (тэг alt), чтобы с выключенной графикой сайт нормально отображался и понимался пользователем
В тэгах обязательно задавать атрибуты height и width
2.5.3 флэш-анимация
должна быть использована по-минимуму, либо по ссылке на отдельной странице
2.5.4 файлы мультимедиа
В случае размещения на сайте аудио, видео и иной мультимедийной информации должны быть учтены следующие требования:
2.5.5 фон и текст (шрифт)
1. Фон и текст страницы должны быть оформлены контрастными цветами. Наилучшее сочетание: черный текст на белом фоне. (белый текст на черном фоне)
2.5.6 размер шрифта
Желательно 12 пунктов*
2.5.7 вид шрифта
Желательно шрифт без засечек Verdana или Arial*
2.5.8 основной текст
Желательно черный*
2.5.9 фон
Желательно белый*
2.5.10 Расположение логотипа
Верхний левый угол страницы
2.5.11 Размер логотипа
От 58х58 до 111х111 пикселей (Оптимально 80х68 пикселей)*
2.5.12 Ссылка с логотипа
Обязательно на главную страницу
2.5.13 заставка при загрузке сайта
использование нежелательно
* — по усмотрению дизайнера
2.6 Требования по обработке форм заказа с сайта
2.6.1 Регистрация для оформления заказа
Предусмотреть возможность совершения заказа без регистрации
2.6.2 Количество полей в форме
Чем меньше, тем лучше. Оптимально 1-3 поля.
2.6.3 Обработка полей в форме
Должен быть указан образец заполнения каждого поля и сразу же, корректно заполнено поле или нет (валидация полей)
2.6.4 Капча в форме
Должна быть четко распознаваемой!
2.6.5 Кнопка «спасибо»
После заполнения формы пользователь должен четко понимать, что форма им заполнена. Нужно выдавать сообщение пользователю.
2.6.6
Письмо на электронный ящик клиента после заполнения формы
На почту Клиента должна прийти информация с номером заказа, контактными данными отдела продаж.
2.6.7 Количество шагов для заказа
Оптимально заказ в 1 шаг. Не более 2-3 шагов.
2.7 Маркетинговые составляющие юзабилити
2.7.1 Акции и спецпредложения
Должны быть четко выделены: баннер с акцией, ссылка. Акция располагается на отдельной странице.
2.7.2 Отзывы Клиентов
Видео отзывы + отзывы текстом
2.7.3 Сертификаты, дипломы, награды
Сканы. Можно в отдельном разделе сайта.
2.7.4 Истории успеха
1-2 страницы: обязательно графики, можно в формате видео отзыва клиента
2.7.5 Опыт работы и портфолио
В отдельном разделе сайта
2.7.6 Видео
На сайте должно быть видео о продукции, а также видео отзывы клиентов.
2.7.7 Фото продавцов
Фото продавцов-консультантов на страницах сайта. Блок «Ваш консультант»
2.7.8 Онлайн консультант
Наличие онлайн консультанта (например Livetex)
2.7.9 Ссылки на социальные сети
Наличие кнопок «поделиться» со ссылками на соцсети.
2.7.10 Преимущества на сайте
Наличие блока «Наши преимущества» с 3-5 отличиями от конкурентов.
2.7.11 Все возможные способы оплаты
Интеграция всех возможных способов оплаты услуг на сайт втч через сервисы типа «робокасса»
2.7.12 Презентация о компании на сайте
Размещение презентации о компании в раздел «О компании»
2.7.13 Несколько тарифов
Создание 3-4 тарифов по каждой услуге.
2.7.14 Убойные гарантии
Размещение супер гарантий на продукцию.
2.7.15 Версии договоров на сайте
Интеграция pdf версий договоров для скачивания с сайта
2.7.16 Кнопка «Заказать»
Должна быть четко выделена и видна покупателю.
1 Проведение пользовательского аудита юзабилити (тест из 5 пользователей)
1.1 Определить цель или цели для аудита (заказ товара, найти информацию, итп)
1.2 Составление задания для аудита
1.3 Установить на компьютер Camtasia Studio или любую другую программу для записи видео и речи
1.4 Проведение теста (не подсказывать ничего пользователю!!!)
1.5 Анализ видеозаписей и анкет
1.6 Формулирование списка ошибок
1.7 ТЗ на внедрение и исправление ошибок
2 Критерии и требования с точки зрения юзабилити
2.1 Общие требования к веб-сайту
2.1.1 Время загрузки
Не более 10 секунд при скорости 26400 кб/с (модем, 2G, 3G, GPRS). Размер файла страницы не более 30-70 килобайт
2.1.2 Браузеры (кросс-браузерность)
Сайт должен одинаково просматриваться во всех браузерах 2-х годичной давности. Для проверки используем сервис: http://browsershots.org/
2.1.3 Разрешение монитора
Сайт должен хорошо просматриваться при разрешении от 800х600 пикселей.
2.1.4 Обработка ошибки 404
Страница-заглушка, сообщающая о том, что данного документа не существует и рекомендующая воспользоваться поиском или перейти на главную страницу сайта
2.1.5 Реклама
Указание на то, что область является рекламой.
2.1.6 Технические проблемы
Страницы сообщения о технических проблемах с указанием контактной информации и времени устранения проблем и неполадок
2.1.7 Авторизация пользователей
Должна быть расположена в заметном месте (без прокрутки html экрана при разрешении 800х600 пикселей).
2.2 Структура сайта
2.2.1 Ширина страницы
Оптимизированная для отображения в окне шириной 770 пикселей, с гибкой структурой страницы, которая подходит для любого окна размером от 620 до 1024 пикселей. 768-774 пикселя
2.2.2 Структура страницы
Гибкая, автоматически приспосабливается под конкретный размер окна пользователя. Резиновый дизайн страницы.
2.2.3 Длина страницы
1-2 ХТМЛ экрана. Желательно не более 3 ХТМЛ экранов (от 1000 до 1600 пикселей). Необходимо, чтобы на 1 экране уместились все главные элементы страницы
2.2.4 Использование фреймов
нет
2.2.5 Иерархия разделов
Принцип «трех кликов». Трехуровневая структура сайта, чтобы пользователь мог попасть в любой раздел сайта за 3 клика»
2.2.6 Горизонтальная прокрутка
Ни в коем случае
2.2.7 Вертикальная прокрутка
Стараться избегать, по возможности
2.2.8 раскрывающиеся окна (popup)
Не использовать
2.3 Требования по навигации веб-сайта
2.3.1 Меню
2.3.1.1 Основное меню
Слева и сверху, должно быть в заметном месте. Ссылки должны быть текстовыми, а не графическими
2.3.1.2 Дополнительное меню
Дублирование ссылок на разделы сайта внизу, в случае если страница имеет более 1 ХТМЛ экрана.
2.3.1.3 Карта сайта
Обязательно, со ссылками на все разделы сайта.
Для сайтов, где количество страниц невелико можно не использовать.
Для больших сайтов, делать карту сайта в виде иерархического дерева
2.3.1.4 Иерархическое меню / «хлебные крошки»
Допускается наличие дополнительной навигационной строки, показывающей иерархию разделов и местоположение человека
В качестве разделителя желательно использовать знак «>»
Пример: Главная > Отели Турции > Отель Wow Topkappi
2.3.2 Поиск
2.3.2.1 Наличие поиска
Очень желательно
2.3.2.2 Расположение
Вверху сайта. Оптимально — правый верхний угол. Или левый верхний угол
2.3.2.3 Поле поиска
Цвет поля — белый. Ширина — примерно 30 символов
2.3.2.4 Название кнопки поиска
Найти
2.3.2.5 Расширенный поиск
При необходимости. Должен быть вынесен на отдельную страницу. Должна быть ссылка с основного поиска
2.3.2.6 Область поиска
По умолчанию ищет только по сайту
2.3.2.7 Если ничего не найдено
Предложение расширенного поиска или сообщение о том, что по запросу ничего не найдено с предложением переформулировать запрос или обратиться в офис компании
2.3.2.8 Быстрый поиск / Фильтры
Наличие фильтров для быстрого поиска товара/услуги. Например, по цене, размеру, этажности. В том числе фильтры с несколькими параметрами.
2.3.3 Ссылки
2.3.3.1 Self-ссылки
Не должно быть ссылок с текущей страницы на саму себя
2.3.3.2 Названия ссылок
Логичные и понятные, отличные друг от друга
2.3.3.3 Цвета ссылок
Обязательно должны различаться цвета просмотренных и не просмотренных ссылок.
Не просмотренные ссылки выделяются голубым, просмотренные — иным контрастным цветом (или по усмотрению дизайнера)
2.3.3.4 Функциональные ссылки
Если идет ссылка на скачивание файла/анимации/музыки, то должно быть указание на это в виде объема данных и типа носителя (файл, музыка, видео). В отдельных случаях можно указывать время скачивания, которое потребуется при заданной пропускной способности канала.
2.3.3.5 вид ссылок
ссылки должны быть подчеркнуты (за исключением ссылок в панели навигации)
2.3.3.6 тип ссылок
текстовые ссылки, не графические
2.4 Требования по информационному наполнению веб-сайта
2.4.1 уникальность
по возможности, на сайте должен располагаться уникальный контент (информация)
2.4.2 объем информации на страницу
страница не должна быть перегружена информацией, максимум 1-2 ХТМЛ экрана при разрешении 1024х768 пикселов, по объему контента 2-3 тысячи знаков
2.4.3 цены
должны быть размещены цены на продукцию/услуги
2.4.4 актуальность
информация должна быть актуальной и постоянно обновляться
2.4.5 преимущества
должны быть размещены преимущества продукции над продукцией конкурентов
2.4.6 описание услуг
должны быть размещены как можно более подробные описания товаров/услуг
2.4.7 адаптированность под веб-среду
Контент должен удовлетворять следующим условиям:
2.4.8 контактная информация
Обязательно размещение телефона и адреса компании вверху каждой страницы сайта. Также полезно дублировать контакты внизу и делать отдельную страницу под контактную информацию.
2.4.9 информация о компании
Ссылка «О компании»
2.4.10 правовая информация
Ссылка «Правовая информация» (по желанию)
2.4.11 объявления о работе
Ссылка «Вакансии» в разделе «О компании» (если есть необходимость)
2.4.12 справочная система
По необходимости
2.4.13 грамматика
Информация на сайте не должна содержать грамматических и стилистических ошибок
2.5 Требования по графическому и шрифтовому оформлению веб-сайта
2.5.1 объем графики
не перегружать страницу графикой. Графика не должна превышать 30-50 килобайт на страницу.
Исключение: страницы, специально предназначенные для демонстрации графики: фотоальбом итп.
2.5.2 подписи рисунков (alt)
все рисунки должны быть понятно подписаны (тэг alt), чтобы с выключенной графикой сайт нормально отображался и понимался пользователем
В тэгах обязательно задавать атрибуты height и width
2.5.3 флэш-анимация
должна быть использована по-минимуму, либо по ссылке на отдельной странице
2.5.4 файлы мультимедиа
В случае размещения на сайте аудио, видео и иной мультимедийной информации должны быть учтены следующие требования:
2.5.5 фон и текст (шрифт)
1. Фон и текст страницы должны быть оформлены контрастными цветами. Наилучшее сочетание: черный текст на белом фоне. (белый текст на черном фоне)
2.5.6 размер шрифта
Желательно 12 пунктов*
2.5.7 вид шрифта
Желательно шрифт без засечек Verdana или Arial*
2.5.8 основной текст
Желательно черный*
2.5.9 фон
Желательно белый*
2.5.10 Расположение логотипа
Верхний левый угол страницы
2.5.11 Размер логотипа
От 58х58 до 111х111 пикселей (Оптимально 80х68 пикселей)*
2.5.12 Ссылка с логотипа
Обязательно на главную страницу
2.5.13 заставка при загрузке сайта
использование нежелательно
* — по усмотрению дизайнера
2.6 Требования по обработке форм заказа с сайта
2.6.1 Регистрация для оформления заказа
Предусмотреть возможность совершения заказа без регистрации
2.6.2 Количество полей в форме
Чем меньше, тем лучше. Оптимально 1-3 поля.
2.6.3 Обработка полей в форме
Должен быть указан образец заполнения каждого поля и сразу же, корректно заполнено поле или нет (валидация полей)
2.6.4 Капча в форме
Должна быть четко распознаваемой!
2.6.5 Кнопка «спасибо»
После заполнения формы пользователь должен четко понимать, что форма им заполнена. Нужно выдавать сообщение пользователю.
2.6.6
Письмо на электронный ящик клиента после заполнения формы
На почту Клиента должна прийти информация с номером заказа, контактными данными отдела продаж.
2.6.7 Количество шагов для заказа
Оптимально заказ в 1 шаг. Не более 2-3 шагов.
2.7 Маркетинговые составляющие юзабилити
2.7.1 Акции и спецпредложения
Должны быть четко выделены: баннер с акцией, ссылка. Акция располагается на отдельной странице.
2.7.2 Отзывы Клиентов
Видео отзывы + отзывы текстом
2.7.3 Сертификаты, дипломы, награды
Сканы. Можно в отдельном разделе сайта.
2.7.4 Истории успеха
1-2 страницы: обязательно графики, можно в формате видео отзыва клиента
2.7.5 Опыт работы и портфолио
В отдельном разделе сайта
2.7.6 Видео
На сайте должно быть видео о продукции, а также видео отзывы клиентов.
2.7.7 Фото продавцов
Фото продавцов-консультантов на страницах сайта. Блок «Ваш консультант»
2.7.8 Онлайн консультант
Наличие онлайн консультанта (например Livetex)
2.7.9 Ссылки на социальные сети
Наличие кнопок «поделиться» со ссылками на соцсети.
2.7.10 Преимущества на сайте
Наличие блока «Наши преимущества» с 3-5 отличиями от конкурентов.
2.7.11 Все возможные способы оплаты
Интеграция всех возможных способов оплаты услуг на сайт втч через сервисы типа «робокасса»
2.7.12 Презентация о компании на сайте
Размещение презентации о компании в раздел «О компании»
2.7.13 Несколько тарифов
Создание 3-4 тарифов по каждой услуге.
2.7.14 Убойные гарантии
Размещение супер гарантий на продукцию.
2.7.15 Версии договоров на сайте
Интеграция pdf версий договоров для скачивания с сайта
2.7.16 Кнопка «Заказать»
Должна быть четко выделена и видна покупателю.
