Вы находитесь на странице: 1из 25

Юзабилити

Аксессибилити
UX/UI в сайтостроении
основные принципы и ошибки
Понятие Юзабилити

Юзабилити (usability) –
дословно с английского
означает: возможность использования или полезность.

Юзабилити —
удобство использования сата для
достижения определенных целей.

Задача —
коммерческий успех (продажи) = конверсии с интернет-
ресурса

Результат:
➢ Продажи (заявки, покупки, регистрация и пр.)
➢ Позиции в органической выдаче
Понятие Юзабилити

Юзабилити определяется:

✓ время на сайте
✓ % конверсии Поведенческие
✓ % отказов факторы
✓ глубина просмотра
Понятие Юзабилити

Элементы, которые определяют юзабилити сайта:

1. наполнение текстом
2. формаирование текста
3. функциональные элементы
4. (их наличие и логика работы)
5. расположение функциональных элементов
6. упрощение работы пользователя с функциональными
7. элементами
8. навигация
9. дизайн ресурса
Понятие Юзабилити
Когда начинаем работать с юзабилити сайта?
1. При разработке макета сайта.
2. После анализа работающего сайта.

Основа юзабилити:
1. Психология
2. Привычки

Основные ошибки в юзабилити:


1. Технические
2. Дизайн
3. Контент
Анализ юзабилити сайта

1. Анализ статистики
1. Яндекс Метрика
2. Google Analitics
3. статистика Bitrix и пр.
(наиболее доступные способы аналитики, т. к. установка и
использование счетчиков бесплатно)

2. Отзывы пользователей:
1. формы голосования
2. анкеты
3. формы обратной связи
✓ Высказывают в основном негатив (если есть)
✓ Анкеты заполнять ленятся (делать короткие)
✓ Избегать открытых вопросов (да-нет или оценка)
✓ «Тест на дурака» (как видит 5-летний ребенок)
Анализ юзабилити сайта
3. Тестирование
1. Оптимизатор web-сайтов от Google
2. Фокус-группы

Работа с фокус-группами
✓ Отобрать группу людей из своей ЦА (несколько групп)
✓ Поставить конкретные задачи (цель на сайте)
✓ Если несколько вариантов сайта, для каждого своя группа
✓ Вести наблюдение (непосредственно или Вебвизор)

Результат: выбор варианта сайта или список


правок согласно реальной статистике.

Минусы:
Время и расходы на формирование фокус-групп
Получаем список «затыков», но не рекомендаций к действию
Анализ юзабилити сайта
4. Наблюдение за фокус-группами
• Ставим разные задачи
• Собираем разные группы из конкретных ЦА
1. Получаем большой объем данных для анализа
2. Делаем много разных выводов

Минус — не всегда видно, что мешает пользователю достигать целей.

5. Экспертиза
1. заказать у экспертов — платная, но профессиональная
2. самостоятельно — бесплатная, но не точная

✓ Определить список задач для сайта


✓ Определить все группы ЦА
✓ Пройти на сайте по пути для каждой группы
✓ Зафиксировать все ошибки и «затыки»
Технические ошибки
1. Кроссбраузерность
Корректное отображение всеми браузерами

2. Кроссплатформенность
Корректное отображение всеми ОС и устройствами

3. Размеры экранов
Адаптивный дизайн

4. Динамическая навигация
Меню изменяется в зависимости от страницы
(сохраняется единообразие на всем сайте)

5. Выпадающее меню
Основная ошибки:
✓ сразу исчезает без задержки, как только уходит курсор
✓ слишком длинный выпадающий список
✓ (не длиннее одного разворота экрана)
Технические ошибки
6. Хлебные крошки
• Обязательно основные пункты меню в системе навигации,
• возможность перейти с нижнего уровня сайта на верхний,
• указать принадлежность страницы к пункту меню
7. Логотип
Всегда кликабельный и ведет на главную страницу.
8. Всплывающие окна
Открываются по тригеру (клик или другие)

9. Главная страница
• Не несет информационную нагрузку
• Выбивается из общего дизайна
• Сразу дает понять о чем сайт, основной список услуг
• Страница входа (выбор языка, страны, пол, увлечения и пр.)
должна быть оправдана
Технические ошибки
10. траница ошибки 404
• Сразу понятно, что попал на несуществующую страницу
• Возможность вернуться на основной ресурс
• Визуализировать лого
11. Слишком много опций
• В формах только необходимые элементы
• Фильтры товаров и пр.

12. Технические элементы


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

Тест технических ошибок

1. Обозначить путь к цели на сайте


2. Пройти по этому пути:
➢ Разными способами
➢ На разных устройствах
Ошибки в дизайне
Художественное оформление сайта + Визуальное оформление элементов

Требования к дизайну:
1. Побуждает к действию
2. Обращает внимание
3. Удобство

1. Привычные элементы сайта


1. Кнопка «купить» (оформлена понятно)
2. Кнопка «наверх» (внизу справа)
3. Контакты (вверху справа)
4. Меню (вверху или слева)
5. Кнопки «главная», «написать», «карта сайта»
(вверху справа)
6. «Вход», «Регистрация» (вверху слева или справа)

Размещать там, где их привыкли искать


Ошибки в дизайне
Художественное оформление сайта + Визуальное оформление элементов

2. Отступы
1. Удобство восприятия текста
2. Отступы между блоками
3. Отступы, чтобы сайт не сливался с окном браузера
4. Отделять меню и кнопки

При верстке:
✓ Отступ от предыдущего элемента к следующему
✓ (margin-top, pding-top)
✓ У последнего элемента группы, отступ обнуляется
(всегда)
✓ Отступы на всем сайте одинаковые
✓ Текст должен «дышать» - межстрочный отступ
✓ Отступ между блоками min — 30px, max — 120px
Ошибки в дизайне
Художественное оформление сайта + Визуальное оформление элементов

3. Использование пространства
Избегать пустого места на экране

4. Визуальный шум
✓ Слишком много навигационных элементов
✓ Неструктурированные картинки
✓ Горизонтальная прокрутка
✓ Теряются важные элементы
✓ Лишняя анимация
✓ Избыток шрифтов

➢ Сбалансированный дизайн
➢ Тест на разной ширине экрана
Ошибки в дизайне
Художественное оформление сайта + Визуальное оформление элементов

5. Шрифты
✓ Контраст, цвет
✓ Размер
✓ Читабельный (без засечек, декора)

Рекомендации:
1. Шрифт Arial, Verdana, Helvetika
2. Строка = 7-9 слов
3. Абзац < 5-7 строк
4. Отступы между абзацами
5. Выделять основные слова (чтение-сканирование)
6. Разделять на списки, тезисы, таблицы
7. Инфографика
Ошибки в дизайне
Художественное оформление сайта + Визуальное оформление элементов

6. Формы
✓ Подсказки в полях формы
✓ Подсказки исчезают при клике мышкой
✓ Подсказка о некорректном заполнении
✓ Оповещение о успешном заполнении
✓ Thankyou-page

7. Ссылки для навигации по сайту


✓ Выделять цветом
✓ Подчеркивание
✓ Юзаная ссылка меняет цвет
✓ Не использовать ссылочный стиль для обычного
текста
Ошибки в дизайне
Художественное оформление сайта + Визуальное оформление элементов

8. Изображения
✓ Заполнять alt и title в <img>
✓ Текст на фоне изображения — читабельный
✓ Если в моб. браузере отключена загрузка изображений,
текст должен читаться и без него на чистом экране
✓ Размер изображения = скорость загрузки
✓ Визуализация в картинках
✓ Картинки по теме
✓ Вписываются в цветовую схему
Ошибки в контенте
1. Содержание
✓ Неестественные фразы (например, когда нагло генерируют SEO-текст)
✓ Не соответствует тематике сайта
✓ Нет полезной информации - % воды
✓ Избегать «уникальный», «инновационный» и пр.

2. Структурировать текст
✓ Разбить на смысловые блоки с подзаголовками
✓ Списки
✓ Таблицы
✓ Выделение цветом
✓ Иллюстрации
✓ Иконки

• Монотонный
• Длинный
• Неструктурированный
Ошибки в контенте
3. Контактная информация
✓ Отсутствие = нет доверия
✓ Номер телефона — страховка от перезвона
✓ На всех страницы одинаковые контакты
✓ Если есть локация, интегрировать карту

4. Слишком много информации


✓ Только суть предложения
✓ Однозначность
✓ Разнообразие оформления

5. Анкоры внутренних ссылок


✓ Только по делу
✓ НЕТ «кликни тут», «перейди сюда» и т.д.
✓ ДА «рассчитать стоимость», «заказать звонок» и т.д.
Ошибки в контенте
6. Слишком много опций
✓ Много шагов — очень вероятно, что не дойдут к цели
✓ Понятные команды и фильтры

7. Призыв к действию
✓ Описание товара → «купить»
✓ На длинной странице призыв в конце каждого разворота
✓ Информативная страница тоже содержит призыв («связаться с
продавцом», «вызвать замерщика», «заказать расчет» и пр.)

8. Грамматика и пунктуация
✓ Ошибки = нет доверия
✓ Проверить на сервисах
✓ Внимательно вычитать
✓ Отправить на проверку
Понятие аксессибилити сайта

Аксессибилити (accessibility) в web — доступность сайта.

Чаще употребляется в смысле доступности сайта для пользователей с


ограниченными возможностями.

Не стоит игнорировать людей с ограниченными особенностями.


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

Пожилые, слепые
✓ Крупные шрифты
✓ Управление размером шрифта
✓ Доступность зума
✓ Версия сайта для слабовидящих (например, интернет-магазин
оптики)
✓ Возможность чтения скан-ридером
Аксессибилити сайта
Слабослышащие, глухие
✓ Достаточно зрительной информации
✓ Субтитры
✓ Дублировать аудио текстом

Двигательные нарушения
✓ Крупная навигация — легко попасть курсором
✓ Возможность навигации клавиатурой: стрелки, tab

Интеллектуальные нарушения
✓ Учесть медлительность
✓ Тут больше, чем юзабилити

Эпилептики
✓ Никаких миганий и мерцаний
Аксессибилити сайта

Для корректной работы скрин-ридера


✓ Правильно выделять тегами текст и заголовки (h1, h2, h3, p и пр.)
✓ Alt для изображений (кроме лого и «невидимых»)
✓ Разрешить веб-парсинг
✓ Разрешение на копирование текста
✓ Гиперссылки с анкорами и title
✓ Информативные названия страниц и заголовки

Вам также может понравиться