Internet rakenduste architektuur ja realiseerimine

1. Usability.1 Internet rakenduste architektuur ja realiseerimine

2. Типы сайтов и критерии оценки • Коммерческие • Некоммерческие • Контент-сайты -------------- • Представление • Содержание • Удобство

3. Сеть и пользователь • Конкурирующие сайты • Быстрая оценка • Удобство • Скорость получения желаемого • Мнение пользователя и его общая оценка

4. Частые ошибки • Копирование бумажной модели • Традиционная структура информации • Избыточное оформление • Отсутствие ссылок на другие ресурсы

5. Usability.2006 Когда стоит нарушать правила? • Только тогда, когда их знаешь.

6. Якоб Нильсен: «Каждый потраченный на usability доллар возвращает от 10 до 100 долларов прибыли или сэкономленных средств».

7. Понятие юзабилити • - Usability is all about how easy a product, service or system is to use. • - The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. (ISO 9241-11:1998). • - The capability of the software product to be understood learned, used and attractive to the user, when used under specified conditions (ISO/IEC 9126-1:2000).

8. Понятие юзабилити(2) • - The ease with which a user can learn to operate, prepare inputs for, and interpret outputs of a system or component (IEEE Std.610.12-1990). • - Usability of a software product is the extent to which the product is convenient and practical to use (Barry Boehm, 1978). • - The probability that the operator of a system will not experience a user interface problem during a given period of operation under a given operational profile (Fenton, 1998).

9. ISO 9126 • определяет Юзабилити в терминах пяти субхарактеристик: • Understandability (возможность понимания), Learnability (возможность обучения), Operability (возможность использования), Attractiveness (привлекательность), и Usability Compliance (соответствие стандартам юзабилити).

10. Компоненты юзабилити • Обучаемость • Эффективность • Запоминаемость • Восстановление от ошибок • Удовлетворение пользователя

11. Страница • Пространство • Полезное пространство • Разделители • Реклама • Разрешение страницы • «Резиновый» дизайн

12. Страница (2)

13. Экраны различных размеров • Графические станции и смартфоны • Листы стилей • Различимые кнопки и значки • Глубина цветности

14. http://www.fortress-design.com/display-resolution/

15. Страницы для печати • Принтер «обрезает» страницу • Разрыв страницы • Специальные форматы для печати

16. Различные виды браузеров http://www.w3schools.com/browsers/browsers_stats.asp

17. Разделение представления и содержания • SGML • Голосовые браузеры • Интеллектуальные браузеры • Анализаторы контента • Листы стилей

18. Время ответа • Самый важный показатель • Статистика • Предсказуемость загрузки • Четверть пользователей отмечают скорость загрузки, как преимущество сайта • На больших страницах до 10% пользователей не дожидаются полной загрузки страницы

19. Время ответа (2) • 0,1 секунды – предельное значение для того, чтобы ответ системы, полученный пользователем за это время, воспринимался, как мгновенный, т.е. не требующий никакой обратной связи для вывода результатов на экран. • 1,0 секунда – предельная длина промежутка времени, в течение которого ход мысли пользователя не прерывается, даже если он и замечает задержку. • 10,0 секунд – предел, в течение которого пользователь сфокусирован на диалоге. • 20,0 секунд – интервал, в течение которого пользователь еще переходит по ссылкам на сайте.

20. Как удержать пользователя на странице? • Обработка форм и сценариев должна быть оптимизирована. • Проверку данных осуществляйте на стороне клиента. • Предсказуемое время ответа – удержит пользователя на сайте даже если оно превышает оптимальные значения. • Стабилизация времени ответа . • Пометка рядом со ссылкой. • Предупреждение для любого большого файла или необычного формата данных

21. Оптимизация загрузки • Минимум графики. • Повторяющиеся изображения. • Использование слеша в конце адреса (http://www.grani.ru/)

22. Количество информации, получаемое пользователями с различными вариантами соединений

23. Оптимизация отдельной страницы • Данные вверху страницы должны иметь смысл, даже если она полностью не загрузилась. • Атрибуты alt для всех изображений. Изображения, не несущие никакой информационной нагрузки помечаются, как alt=””. • height и width для всех колонок, столбцов и изображений.

24. Ссылки • Щелкнуть или кликнуть? • Подчеркивание ссылок и традиционные цвета ссылок • Одинаковые УРЛ • Всплывающие подсказки • Mailto и другие протоколы

25. Ссылки (2) • Новые окна • Кнопки Назад и Вперед

26. Немного о контенте • Лаконичность. На странице должно использоваться не более 50% текста, который мог бы быть размещен в печатном издании. Чтение с монитора медленнее на 25%, чем с бумажного листа. • Текст должен быть удобен для быстрого ознакомления. (пользователи не читают страницы целиком). • Необходимо использовать короткие абзацы, подзаголовки, списки. • Большую информацию необходимо разбивать на несколько страниц. • Информация на странице должна иметь структуру перевернутой пирамиды. • Информативное начало страницы. Только 10% пользователей прибегают к прокрутке страницы! • Гиперссылки внутри одной страницы на более подробную информацию.

27. Текст • Профессиональная редактура • Заголовки и структура • Личностный фактор • Осторожнее с юмором!

28. Названия страниц • Закладки • Страница - Раздел - Сайт

29. Удобочитаемость • Фон и текст оформляются контрастными цветами. • Фон - однотонный или малоконтрастный рисунок. • Используйте достаточно крупный шрифт. • Текст должен быть статичным. Бегущая строка или мигающая надпись раздражают большинство пользователей. • Лучше всего воспринимается текст, выровненный по левому краю. • Мелкие шрифты следует выбирать рубленые, крупные - с засечками. • Не следует набирать текст прописными буквами

30. Сочетания цветов

32. Мультимедиа • Рассчитывайте и регулируйте время ответа. • Указывайте размеры файлов. • Уменьшайте размер изображений. • Ограничивайте анимацию. • Дублируйте видео и аудиоинформацию. • Не используйте без необходимости 3D изображения.

33. Навигация • Менее половины пользователей добираются до нужной странице на сайте

34. Главная страница • Основные вопросы пользователя: • Где я нахожусь? • Что делает этот сайт? • Куда я могу пойти с этой страницы? • Необходима информация, привлекающая читателей - новости, специальные предложения. • Логически разделенные меню • Возможность поиска

35. Главная страница (2) • Название компании или логотип фирмы, желательно в левой верхней части, который на внутренних страницах может служить ссылкой для возврата к начальной странице. • Название, размещенное на главной странице, должно присутствовать на всех внутренних страницах.

36. Метафоры • Привычные метафоры • Отчетливые значки

37. Навигация • Где я нахожусь? • Где я уже побывал? • Куда я могу пойти?

38. Где я? • Местонахождение относительно интернета в целом. • Расположение пользователя относительно данного сайта. • Технология "хлебных крошек".

39. Где я был? • Постоянные цвета ссылок. • Отличие посещенных ссылок от не посещенных.

40. Куда я могу пойти? • Встроенные ссылки • Структурные ссылки • Ассоциативные ссылки

41. Упорядочение навигации • Агрегация (концентрация материала вокруг главного) • Суммирование (соединение родственного материала) • Фильтрация (отбрасывание второстепенного материала) • Усечение (сокращение предлагаемого материала) • Представления, основанные на примерах

42. Возможность поиска • На каждой странице. • По статистике 89% пользователей используют поиск. • Указывайте пределы поиска. • Дайте возможность расширенный поиск • Создавайте описания страниц и ключевые слова (150-200 символов) • Дайте примеры запросов.

43. Дизайн УРЛ • Как можно более короткий адрес. • Уникальное, запоминающееся имя, наиболее четко характеризующее вашу деятельность. • Использование общепринятых слов. • Использование только нижнего регистра. • Создавайте архивы. Поддерживайте архивные ссылки. • Преобразовывайте динамические адреса в статические.

44. Разработка Интрасетей • Интрасети, экстрасети. • Способствуют повышению производительности труда. • Позволяют отказаться от электронной почты. • Должны включать в себя каталог, поисковую систему, страницу новостей. • Каждая страница должна соответствовать стандарту для интрасети. • Устанавливайте параметры браузера по умолчанию для одинакового отображения страниц.

45. Доступ для пользователей с ограниченными возможностями • До 65 лет - 14% населения имеет функциональные нарушения. • После 65 - 50%.

46. Меры • Необходима проверка страницы с разными размерами шрифтов. • Проверка страницы с отключенными листами стилей. • Атрибуты ALT для всех изображений. • Дублировать текстом всю голосовую информацию. • Удобство при позиционировании мыши.

47. Интернационализация • Не использовать пальцы, жесты и т.д. • Не использовать каламбуры и символы. • Четко указывать часовые пояса. • Уточнять даты, явно писать месяцы (5.10.03 – пятое октября или десятое мая?) • Чаще использовать переводы на различные языки. • Названия языков или значки при переключении языков.

48. Метрики юзабилити • ISO 9126-4: Разработка Программного обеспечения, Качество Программного продукта, часть 4: Качество в используемых метриках; • ISO 9241-11: Эргономические требования к офисной работе с визуальными дисплейными терминалами (VDTs), часть 11: Руководство по юзабилити.

49. Метрики юзабилити (2) • Effectiveness (ISO 9126-4, ISO 9241-11) • Productivity (ISO 9126-4), Efficiency(ISO 9241-11) • Safety (ISO 9126-4) • Satisfaction (ISO 9126-4, ISO 9241-11)