Ксения Хоменко "СТОП: распространенные ошибки в...
TRANSCRIPT
СТОП: распространенные ошибки в usability сайтов
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
СОДЕРЖАНИЕ
WTF?
Введение
Usability
Распространенные ошибки
Как анализировать сайты – правило «4U»
Рекомендованная литература
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
ВВЕДЕНИЕ
Что такое usability и с чем его едят?
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
ВВЕДЕНИЕ
USABILITY – это удобство использования
(от англ. usability — дословно «возможность использования», «способность быть
использованным», «полезность»):
1.понятие в микроэргономике, эргономическая характеристика, т.е. степени удобности
предмета для применения пользователями при достижении определённых целей в
некотором контексте.
2.научно-прикладная дисциплина, занимающаяся повышением эффективности,
продуктивности и удобства пользования инструментами деятельности.
3.Термин, рожденный в стенах SEO-Studio “Usability – это гармония между
удобством и простотой”.
Wiki
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
ВИДЫ САЙТОВ
Условно сайты можно поделить на такие категории:
•Сайт-визитка, корпоративный сайт
•Offline-каталог
•Интернет-магазин, портал, сайт турагентства
Визитка Каталог iShop
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. Распространенные ошибки
Детская школа изучения английского языка
• В шапке сайта отсутствуют контактные номера телефонов. • Не представлены услуги центра раннего развития «лицом» через изображения, фотографии, видео. • Отсутствует призыв к действию (“Contact Us”, “Read more about staff”, “Starting a program” etc.) и специальные рекламные
блоки.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Медицинский центр
• В шапке сайта отсутствует графический логотип.• Изображения услуг не кликабельны, действия пользователей никак не
мотивируются.
USABILITY. Распространенные ошибки
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
IТ интернет журнал
• Статьи содержат длинные тексты, при этом отсутствует видимая возможность для быстрого перехода из нижней части страницы, наверх. «Простыня» нечитабельного текста отпугивает посетителей, скорее всего они просто скролят страницу, не читая ее.
USABILITY. Распространенные ошибки
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Интернет-магазин матрасов и мягкой мебели
• Текущее местонахождение пользователя можно определить только, с помощью навигации «хлебные крошки».
USABILITY. Распространенные ошибки
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
• Нет названия компании и ее адреса,
размещен e-mail, но он не кликабельный (1).
• Указаны средства альтернативной связи ICQ и Skype (2), при этом нет самого номера ICQ и логина Skype.
• В блоке «Доставка» указано время (3), но не понятно, что это за время (график работы службы доставки или время доставки товаров покупателям, в какие дни недели действует это время).
• Указана информация о форме оплаты (4), но не ясно назначение данного блока на этой странице.
• В форме обратной связи никак не обозначена разница между необходимыми и опциальными полями.
• Информация об ошибке выдается вверху страницы (5).
Интернет-магазин канцтоваров
USABILITY. Распространенные ошибки
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. 1-е правило «4U»
1.1. Главная страница должна:
a) Показать пользователю, что предлагается на данном сайте
b) Прорекламировать основные услуги компании
c) Создать благоприятное впечатление
1.2. Шапка сайта должна содержать:
• Заголовок (тег <title>)
• Слоган
•Фавикон (сокр. от англ. FAVorites ICON — «значок для избранного»,
от названия папки с закладками в IE)
• Контактный номер телефонаWiki
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. Пример главной страницы
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. 2-е правило «4U»
2.1. Навигационная структура
Пользователь должен понимать, где он находится
2.2. Основные требования к карточке товара:
a)Четкая иерархическая структура всех элементов контента
b)Описание, характеристики, отзыв
c)Наличие изображений продукции в различных ракурсах
d)Цена, кнопка призыва к действию «Купить», раздел «Оплата и
доставка» должны быть в видимой части экрана
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. Пример карточки товара
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. 3-е правило «4U»
Процесс оформления заказа:
Легкость, простота и удобство!
a)Форма быстрой покупки
a)Регистрация + преимущества
a)Страница благодарности
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. Форма быстрой покупки
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. Регистрация + преимущества
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. Страница благодарности
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. 4-е правило «4U»
Страница «Контакты»
a)Название компании
b)Телефон, e-mail + альтернативные средства связи
c)График работы
d)Адрес
e)Масштабируемая карта проезда
f)Форма обратной связи
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. Страница «Контакты»
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
USABILITY. Хочу узнать больше!
Стив Круг «Веб-дизайн или не заставляйте меня думать», 2е издание
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
--THE END--