Как сделать свой сайт лучше? Принципы юзабилити веб-интерфейсов в примерах Олеся Чумаченко системный аналитик Olesya.Chumachenko@softline.ru. - презентация

1 Как сделать свой сайт лучше? Принципы юзабилити веб-интерфейсов в примерах Олеся Чумаченко системный аналитик

2 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Что такое юзабилити и почему это важно? Термин «юзабилити» вошел в употребление как синоним понятий «эргономичность», «удобство использования», «дружественность». Почему это так важно? «Ясность и простота веб-страницы – как хорошее освещение для витрины магазина, при них все кажется лучше» С. Круг. Как мы в действительности ведем себя в интернете? Мы не читаем веб-страницы, мы их просматриваем Наш выбор не всегда правильный Мы не задумываемся над тем, каким образом что-то работает (сайт, система)

3 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Принципы юзабилити веб-интерфейсов 1-й принцип: Создайте ясную визуальную иерархию на каждой странице Чем важнее элемент, тем более он заметен на странице Элементы, логически связанные между собой должны быть связаны и визуально Элементы представляются в виде вложений, если являются частями друг друга

4 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Принципы юзабилити веб-интерфейсов 2-й принцип: Используйте веб-условности, к которым привыкли пользователи Условности часто помогают понять хоть что-то из страницы, даже если вы ни слова не понимаете. Итальянский интернет- магазин бытовой и компьютерной техники Логотип Авторизация через Facebook Скидки Корзина Меню Телефон и часы и работы

5 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Принципы юзабилити веб-интерфейсов 3-й принцип: Покажите ясно то, по чему можно щелкать мышью, или проблема невидимых ссылок Пользователь должен знать, где он сейчас, где он был и куда он может пойти дальше. Попытайтесь определить, какие цифры обозначают ссылки, а какие нет? 1, 3, 4, 6, 7 и 11 ссылки, а 2, 5, 8, 9 и 10 нет.

6 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Принципы юзабилити веб-интерфейсов 4-й принцип: Уменьшите визуальный шум Визуальный шум отвлекает от того, ради чего посетитель пришел на ваш сайт. Можно выделить два типа визуального шума: Перегруженность Фоновый шум

7 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Принципы юзабилити веб-интерфейсов 5-й принцип: Опустите лишние слова «Избавьтесь от половины слов на каждой странице, затем уберите еще половину из того, что осталось» С. Круг Как это сделать? Устраните как можно больше общей болтологии Никаких «инструкций». Их никто не собирается читать Как следствие: Это снижает уровень шума на страницах Это выделяет то содержание страниц, которое действительно полезно Это позволяет укоротить страницы для просмотра без прокрутки

8 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Принципы юзабилити веб-интерфейсов 6-й принцип: Обеспечьте пользователя удобной навигацией по сайту Используйте постоянную навигацию Указывайте текущее местоположение пользователя на сайте Например,

9 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Принципы юзабилити веб-интерфейсов 6-й принцип: Обеспечьте пользователя удобной навигацией по сайту (продолжение) Хлебные крошки - путь до текущего местонахождения Вкладки – удобное средство навигации для больших сайтов Формула хорошего поиска: окно, кнопка и слово «Поиск»

10 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Принципы юзабилити веб-интерфейсов 7-й принцип: Главная страница – лицо сайта Главная страница должна содержать: Цель и назначение сайта Иерархия сайта Поиск Обзор содержания Обзор сервисов Периодически обновляемое содержание Реклама Ярлыки Регистрация/Вход

11 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Принципы юзабилити веб-интерфейсов 7-й принцип: Главная страница – лицо сайта (продолжение) Главная страница должна отвечать на следующие вопросы: Чем является сайт? Что в нем содержится? Что на нем можно делать? Почему мы должны быть здесь, а не на другом сайте? Как быстро передать основную идею сайта? Слоган – емкий и запоминающийся Текст приветствия – краткий и на видном месте (без прокручивания)

12 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Принципы юзабилити веб-интерфейсов Пример главной страницы с хорошим юзабилити - Росбанк

13 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Материалы, используемые при подготовке презентации Литература и статьи: С. Круг «Не заставляйте меня думать» Алан Купер «Об интерфейсе» Интернет-ресурсы, приводимые в качестве примеров: и т.д.

14 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Спасибо за внимание! Спасибо, что выдержали эти полчаса! Вопросы?