Наука Usability - как сделать сайт удобным

Наука usabilityПарёха Анастасия

Как сделать сайт удобным

Что такое Usability?

Улучшение юзабилити - это комплекс мер,

направленных на повышение доступности сайта,

удобства навигации по сайту, улучшения подачи

информации и соответствия сайта общим

стандартам дизайна разработки.

Юзабилити – дословно означает “возможность использования”,

“способность быть использованным”, “полезность”.

При разработке пользовательских интерфейсов слово юзабилити означает

общую концепцию их удобства при использовании программного обеспечения,

логичность и простоту в расположении элементов управления.

Юзабилити - удобство пользования сайтом

Зачем нам нужно юзабилити

Веб стандарты

+

Юзабилити

Больше трафик

+

Больше продаж=

Что влияет на юзабилити сайта?

Зашел

на сайт

Перешел

по ссылке

Оценил

сайт

Нашел

инфо

– Доступность – Сайт по теме

– Дизайн сайта

– Навигация

– Контент

– Взаимодействие с аудиторией

– Верстка / разработка

1 2 3 4

Юзабилити

Разработка

сайта

Взаимодействие

с аудиторией

Доступность

сайта

Identity

- кто вы такие

Дизайн

сайтаИнформационная

архитектура

Контент

Доступность

– Время загрузки сайта в разумных пределах

– На сайте нет горизонтального скрола

– На сайте нет битых ссылок

– На сайте есть кастомная 404 страница

– Текстовые области не заверстаны как картинками

– Все графические ссылки доступны как текстовые

– Лого пролинковано на главную страницу

– Файлы предназначенные для загрузки можно загрузить

– Формы не выдают ошибок и показывают статус события

Флеш и реклама используются умеренно.

У картинок прописаны Alt и Title теги.

На сайте есть Sitemap (для пользователей и поисковых систем).

Identity - кто вы такие

– Лого компании расположено на видном месте

– Слоган позволяет понять цель и сущность вашего сайта

– Главную страницу можно осознать за 5 секунд

– На сайте есть фавикон

– На сайте есть страницы “О нас” и “Контакты”

У вас есть не более 5-7 секунд, чтобы убедить

пользователя, что ваш сайт, это именно то, что ему

нужно. Люди принимают решение остаться на сайте

или уйти основываясь на внешнем виде сайта, и уже

потом решают доверять сайту или нет.

Информационная архитектура

– Ссылки выполнены в одном стиле и их легко распознать

– Поиск на сайте легко найти

– Навигация без излишних уровней вложенности

– Урлы четкие и понятные. Урлы структурированы. Нет

черзмерно-динамических урлов

– Главную навигацию легко найти и распознать

– Названия меню четкие и понятные

– Количество кнопок/ссылок в меню не более 7

Дизайн

– Дизайн разработан для сканирования, а не чтения

– Самая важная информация находится в первом скроле

– Хороший контраст текста и фона

– Используются правильные цвета (не раздражают зрение,

сочетаются с тематикой, призывы к действию выделены)

– Стилистика сайта соответствует тематике сайта

– Структура сайта сохраняется от страницы к странице

– Используется черный шрифт на белом фоне

– Для иконок используются знакомые формы

Люди считают, что близко расположенные вещи относятся друг

к другу - визуально разделяйте Информационные блоки. Не

нагружайте страницу, на сайте должно быть свободное

пространство, где глаз сможет отдохнуть.

Контент - содержание и оформление

– Заголовки понятны и содержательны

– Основной контент четкий, простой, поясняющий

– Ссылки в тексте не “нажмите здесь” а описательные

– Стили и цвета оформления постоянны

– Выделение текста <strong> используется в разумных пределах

– Для подачи больших объемов информации используется форматирование:

категоризация, списки, таблицы

НЕ ИСПОЛЬЗУЕТСЯ CAPSРазмер шрифта должен быть

удобным для чтения

В одном предложении не используются жирный и наклонный текст рядом

Разные размеры и типы шрифтов в одной строке - fail

Не использовать justify

Параграфы должны быть короткими, текст не ставится по всей ширине сайта

Взаимодействие с аудиторией

– Заметные призывы к действию – хотя бы один на видимую область экрана

– Различные типы призывов к действию

– Наличие на сайте контактной формы

– На сайте есть предупреждения, подтверждения, подсказки, полоса загрузки – сигналы, которые помогают пользователю понимать, что происходит

– Есть возможность отменить все действия

Разработка сайта (код + скрипты)

– Кросс-браузерность верстки

– Правильная кодировка

– Спец символы сделаны кодом

– Код страниц и CSS валидный

– В коде нет ненужных закоменченных элементов/скриптов

– Скрипты вынесены отдельными файлами /расположены внизу страницы

– Таблицы используются только для верстки страниц

Спасибо за внимание :)Парёха Анастасия

Mail: nastena@nastena.in.ua

Skype: adzyasan