Своебразный гайд как сделать ваш сайт удобным для пользователя и в то же время оптимизированным для поисковых систем

1. Как сделать сайт удобным
Наука usability
Парёха Анастасия

2. Что такое Usability?
Юзабилити – дословно означает “возможность использования”,
“способность быть использованным”, “полезность”.
При разработке пользовательских интерфейсов слово юзабилити означает
общую концепцию их удобства при использовании программного обеспечения,
логичность и простоту в расположении элементов управления.
Юзабилити - удобство пользования сайтом
Улучшение юзабилити - это комплекс мер,
направленных на повышение доступности сайта,
удобства навигации по сайту, улучшения подачи
информации и соответствия сайта общим
стандартам дизайна разработки.

3. Зачем нам нужно юзабилити
Веб стандарты Больше трафик
+
Юзабилити
= +
Больше продаж

4. Что влияет на юзабилити сайта?
1
Зашел
2
Оценил
3
Нашел
4
Перешел
на сайт сайт инфо по ссылке
– Доступность – Сайт по теме – Контент
– Дизайн сайта – Взаимодействие
с аудиторией
– Навигация
– Верстка / разработка

5. Разработка
сайта Доступность
Взаимодействие сайта
с аудиторией
Юзабилити
Identity
- кто вы такие
Контент
Дизайн
Информационная сайта
архитектура

6. Доступность
– Время загрузки сайта в разумных пределах
– На сайте нет горизонтального скрола
– На сайте нет битых ссылок
– На сайте есть кастомная 404 страница
– Текстовые области не заверстаны как картинками
– Все графические ссылки доступны как текстовые
– Лого пролинковано на главную страницу
– Файлы предназначенные для загрузки можно загрузить
– Формы не выдают ошибок и показывают статус события
Флеш и реклама используются умеренно.
У картинок прописаны Alt и Title теги.
На сайте есть Sitemap (для пользователей и поисковых систем).

7. Identity - кто вы такие
– Лого компании расположено на видном месте
– Слоган позволяет понять цель и сущность вашего сайта
– Главную страницу можно осознать за 5 секунд
– На сайте есть фавикон
– На сайте есть страницы “О нас” и “Контакты”
У вас есть не более 5-7 секунд, чтобы убедить
пользователя, что ваш сайт, это именно то, что ему
нужно. Люди принимают решение остаться на сайте
или уйти основываясь на внешнем виде сайта, и уже
потом решают доверять сайту или нет.

8. Информационная архитектура
– Главную навигацию легко найти и распознать
– Названия меню четкие и понятные
– Количество кнопок/ссылок в меню не более 7
– Ссылки выполнены в одном стиле и их легко распознать
– Поиск на сайте легко найти
– Навигация без излишних уровней вложенности
– Урлы четкие и понятные. Урлы структурированы. Нет
черзмерно-динамических урлов

9. Дизайн
– Дизайн разработан для сканирования, а не чтения
– Самая важная информация находится в первом скроле
– Хороший контраст текста и фона
– Используются правильные цвета (не раздражают зрение,
сочетаются с тематикой, призывы к действию выделены)
– Стилистика сайта соответствует тематике сайта
– Структура сайта сохраняется от страницы к странице
– Используется черный шрифт на белом фоне
– Для иконок используются знакомые формы
Люди считают, что близко расположенные вещи относятся друг
к другу - визуально разделяйте Информационные блоки. Не
нагружайте страницу, на сайте должно быть свободное
пространство, где глаз сможет отдохнуть.

10. Контент - содержание и оформление
– Заголовки понятны и содержательны
– Основной контент четкий, простой, поясняющий
– Ссылки в тексте не “нажмите здесь” а описательные
– Стили и цвета оформления постоянны
– Выделение текста <strong> используется в разумных пределах
– Для подачи больших объемов информации используется форматирование:
категоризация, списки, таблицы
Размер шрифта должен быть
НЕ ИСПОЛЬЗУЕТСЯ CAPS удобным для чтения Не использовать justify
В одном предложении не используются жирный и наклонный текст рядом
Разные размеры и типы шрифтов в одной строке - fail
Параграфы должны быть короткими, текст не ставится по всей ширине сайта

11. Взаимодействие с аудиторией
– Заметные призывы к действию – хотя бы один на видимую область экрана
– Различные типы призывов к действию
– Наличие на сайте контактной формы
– На сайте есть предупреждения, подтверждения, подсказки, полоса
загрузки – сигналы, которые помогают пользователю понимать,
что происходит
– Есть возможность отменить все действия

12. Разработка сайта (код + скрипты)
– Кросс-браузерность верстки
– Правильная кодировка
– Спец символы сделаны кодом
– Код страниц и CSS валидный
– В коде нет ненужных закоменченных элементов/скриптов
– Скрипты вынесены отдельными файлами /расположены внизу страницы
– Таблицы используются только для верстки страниц

13. Спасибо за внимание :)
Парёха Анастасия
Mail: nastena@nastena.in.ua
Skype: adzyasan