Embed Size (px)
DESCRIPTION
Своебразный гайд как сделать ваш сайт удобным для пользователя и в то же время оптимизированным для поисковых систем
Citation preview
Наука usabilityПарёха Анастасия
Как сделать сайт удобным
Что такое Usability?
Улучшение юзабилити - это комплекс мер,
направленных на повышение доступности сайта,
удобства навигации по сайту, улучшения подачи
информации и соответствия сайта общим
стандартам дизайна разработки.
Юзабилити – дословно означает “возможность использования”,
“способность быть использованным”, “полезность”.
При разработке пользовательских интерфейсов слово юзабилити означает
общую концепцию их удобства при использовании программного обеспечения,
логичность и простоту в расположении элементов управления.
Юзабилити - удобство пользования сайтом
Зачем нам нужно юзабилити
Веб стандарты
+
Юзабилити
Больше трафик
+
Больше продаж=
Что влияет на юзабилити сайта?
Зашел
на сайт
Перешел
по ссылке
Оценил
сайт
Нашел
инфо
– Доступность – Сайт по теме
– Дизайн сайта
– Навигация
– Контент
– Взаимодействие с аудиторией
– Верстка / разработка
1 2 3 4
Юзабилити
Разработка
сайта
Взаимодействие
с аудиторией
Доступность
сайта
Identity
- кто вы такие
Дизайн
сайтаИнформационная
архитектура
Контент
Доступность
– Время загрузки сайта в разумных пределах
– На сайте нет горизонтального скрола
– На сайте нет битых ссылок
– На сайте есть кастомная 404 страница
– Текстовые области не заверстаны как картинками
– Все графические ссылки доступны как текстовые
– Лого пролинковано на главную страницу
– Файлы предназначенные для загрузки можно загрузить
– Формы не выдают ошибок и показывают статус события
Флеш и реклама используются умеренно.
У картинок прописаны Alt и Title теги.
На сайте есть Sitemap (для пользователей и поисковых систем).
Identity - кто вы такие
– Лого компании расположено на видном месте
– Слоган позволяет понять цель и сущность вашего сайта
– Главную страницу можно осознать за 5 секунд
– На сайте есть фавикон
– На сайте есть страницы “О нас” и “Контакты”
У вас есть не более 5-7 секунд, чтобы убедить
пользователя, что ваш сайт, это именно то, что ему
нужно. Люди принимают решение остаться на сайте
или уйти основываясь на внешнем виде сайта, и уже
потом решают доверять сайту или нет.
Информационная архитектура
– Ссылки выполнены в одном стиле и их легко распознать
– Поиск на сайте легко найти
– Навигация без излишних уровней вложенности
– Урлы четкие и понятные. Урлы структурированы. Нет
черзмерно-динамических урлов
– Главную навигацию легко найти и распознать
– Названия меню четкие и понятные
– Количество кнопок/ссылок в меню не более 7
Дизайн
– Дизайн разработан для сканирования, а не чтения
– Самая важная информация находится в первом скроле
– Хороший контраст текста и фона
– Используются правильные цвета (не раздражают зрение,
сочетаются с тематикой, призывы к действию выделены)
– Стилистика сайта соответствует тематике сайта
– Структура сайта сохраняется от страницы к странице
– Используется черный шрифт на белом фоне
– Для иконок используются знакомые формы
Люди считают, что близко расположенные вещи относятся друг
к другу - визуально разделяйте Информационные блоки. Не
нагружайте страницу, на сайте должно быть свободное
пространство, где глаз сможет отдохнуть.
Контент - содержание и оформление
– Заголовки понятны и содержательны
– Основной контент четкий, простой, поясняющий
– Ссылки в тексте не “нажмите здесь” а описательные
– Стили и цвета оформления постоянны
– Выделение текста <strong> используется в разумных пределах
– Для подачи больших объемов информации используется форматирование:
категоризация, списки, таблицы
НЕ ИСПОЛЬЗУЕТСЯ CAPSРазмер шрифта должен быть
удобным для чтения
В одном предложении не используются жирный и наклонный текст рядом
Разные размеры и типы шрифтов в одной строке - fail
Не использовать justify
Параграфы должны быть короткими, текст не ставится по всей ширине сайта
Взаимодействие с аудиторией
– Заметные призывы к действию – хотя бы один на видимую область экрана
– Различные типы призывов к действию
– Наличие на сайте контактной формы
– На сайте есть предупреждения, подтверждения, подсказки, полоса загрузки – сигналы, которые помогают пользователю понимать, что происходит
– Есть возможность отменить все действия
Разработка сайта (код + скрипты)
– Кросс-браузерность верстки
– Правильная кодировка
– Спец символы сделаны кодом
– Код страниц и CSS валидный
– В коде нет ненужных закоменченных элементов/скриптов
– Скрипты вынесены отдельными файлами /расположены внизу страницы
– Таблицы используются только для верстки страниц
