Пользовательский интерфейс Основные принципы проектирования 15 марта 2007 г. 4 курс Технологии программирования

2 Пользовательский интерфейс (def) Интерфейс - система правил и средств, регламентирующая и обеспечивающая взаимодействие нескольких процессов или объектов. Пользовательский интерфейс (ПИ) - система правил и средств, регламентирующая и обеспечивающая взаимодействие программы с пользователем.

3 Эргономика и usability (def) Эргономика (от греч. ergon работа и nomos закон) научно-прикладная дисциплина, занимающаяся изучением и созданием эффективных систем, управляемых человеком. Юзабилити (usability) степень, в которой продукт может быть использован определенными пользователями для достижения поставленных целей эффективно, экономично и с удовольствием. (Пункт 3.1 стандарта ISO )

4 На мировом рынке ПО ПИ составляет от 47 до 60 процентов кода программы; на разработку ПИ уходит как минимум 29 процентов проектного бюджета и в среднем 40 процентов всех усилий разработчиков по созданию системы.

5 Типы программ (5 миров) 1.Встроенное программное обеспечение 2.Внутреннее корпоративное ПО 3.Массовое (коробочное) ПО 4.Игры 5.Одноразовые программы

6 Встроенное ПО Прочно связано с железом Редко обновляется – «второго шанса не будет» Требует оптимизации кода Средства ввода-вывода ограничены Нет общепризнанного стандарта элементов интерфейса

7 Внутреннее корпоративное ПО Ограниченный круг пользователей Высокие требования к срокам разработки Однородное программное окружение Вне зависимости от качества ПИ, пользователям придется к нему привыкнуть

8 Массовое (коробочное) ПО Очень большое количество пользователей Высокая конкуренция Множество вариаций программного окружения Интерфейс должен быть максимально простым Много версий («в следующей версии сделаем лучше»)

9 Игры Только одна версия! Второго шанса не будет! Рынок ориентирован на хиты Дизайн имеет решающее значение Массовая аудитория очень похожих пользователей Можно ограничивать требования к аппаратному и программному окружению

10 Одноразовое ПО Создается временно для решения конкретной небольшой задачи Обычно используется всего один раз Интерфейс не имеет значения Примеры: Скрипты Макросы

11 Преимущества хорошего ПИ 1.Повышение конкурентоспособности. 2.Снижение стоимости разработки. 3.Увеличение аудитории продукта. 4.Уменьшение затрат на обучение и поддержку пользователей. 5.Уменьшение потерь продуктивности работников при внедрении системы и более быстрое восстановление утраченной продуктивности. 6.Доступность функциональности системы для максимального количества пользователей. 7.Снижение риска ошибок.

12 Типы ПИ 1.Пакетный интерфейс. 2.Интерфейс командной строки. 3.Графический интерфейс a.Простой графический интерфейс. b.WIMP интерфейс. 4.Речевой интерфейс. 5.Биометрический (Мимический) интерфейс. 6.Семантический интерфейс.

13 WIMP Windows Icons Menus Pointers (Окна) (Иконки) (Меню) (Курсоры) Принцип Point-and-Click.

14 Основная аксиома ПИ Хороший дизайн пользовательского интерфейса подразумевает, что программа соответствует ожиданиям пользователей о том, как она должна себя вести. (Все остальное – следствия.)

15 Понятность интерфейса Ментальная модель – представление пользователя о том, как работает программа. Метафора – пользователь использует модель аналогичной привычной ему деятельности. Приглашение (аффорданс) – объект подсказывает способ своего использования своим видом. Стандарт – постоянство в дизайне увеличивает понятность.

16 Ментальная модель Модель пользователя – представление о том, для чего и как программа будет работать. Модель программы – как на самом деле программа работает. Модель программы должна соответствовать модели пользователя.

17 Метафора интерфейса Иногда у пользователей просто нет конкретного представления о том, как работает программа и для чего она предназначена. В таком случае вам придется найти способ подсказать им, как функционирует ваша программа. В графических интерфейсах используется метод метафор. Самая известная метафора GUI – «рабочий стол»

18 Пример метафоры

19 Приглашение Объект своим внешним видом намекает пользователю на свою функцию. Например: Кнопки - выпуклые, приглашают нажать. Стрелки. Пиктограммы.

20 Пример приглашения КнопкаТоже кнопка Как ни удивительно, но это тоже кнопки. А это – не кнопка!

21 Стандарт Постоянство в дизайне – фундаментальный принцип хорошего UI дизайна. Дизайн элементов управления, выдержанный в едином ключе для различных программ, помогает пользователю обучиться работать с новой программой. До появления графических интерфейсов, каждому разработчику новой программы приходилось придумывать сами основы ее пользовательского интерфейса.

22 Что нужно знать о пользователях Пользователи ничего не читают. Пользователи плохо видят. Пользователи не умеют работать с мышью. Пользователи ничего не помнят.

23 Пользователи не читают 1.У пользователей нет документации, а если бы она и была, они бы ее не читали. 2.На самом деле, пользователи не умеют читать, а если бы и умели, то не стали бы. Чем больше слов в диалоговом окне, тем меньшее число пользователей их читают.

24 Много слов в диалоговом окне

25 Пользователи плохо видят Удобство использования важнее «стильности» и элегантности.

26 Пользователи не умеют работать с мышью 1.Иногда приходится пользоваться не самыми оптимальными манипуляторами. 2.Иногда приходится пользоваться мышью не в самых благоприятных условиях. 3.Иногда человек, сидящий за компьютером, - новичок, не имеющий опыта работы с мышью. 4.Некоторые люди никогда не смогут развить навыки работы с мышью – по медицинским показаниям. 5.Некоторые люди считают, что постоянное применение мыши замедляет работу.

27 Пример: выпадающий список Выпадающий список нужно сделать таким длинным, чтобы он вмещал все элементы. Автоматическая прокрутка. Чтобы открыть список, можно щелкнуть в любом месте списка, а не только на стрелочке.

28 Пользователи ничего не помнят Пользователь не должен запоминать то, что может запомнить компьютер. Меню команд. Списки значений. «Интеллектуальное завершение ввода» (auto completion).

29 Пример: выбор файла с картинкой Неудобный вариант:

30 Пример: выбор файла с картинкой

31 Пример: интеллектуальное завершение ввода

32 Как создать интерфейс Планирование Деятельности. Нужно: предугадать те виды деятельности, которые будет осуществлять пользователь с вашей программой, и сконцентрироваться на том, чтобы сделать выполнение деятельности простым и удобным.

33 Воображаемые пользователи Перед тем как разрабатывать дизайн интерфейса, нужно придумать и описать воображаемых пользователей. Когда вы придумали своих пользователей, понимание того, является ли ваш дизайн соответствующим, приходит почти автоматически.

34 Итог: алгоритм разработки GUI 1.Придумать воображаемых пользователей. 2.Продумать виды деятельности пользователей. 3.Узнать модель пользователя – как он будет выполнять деятельность, основываясь на своем опыте. 4.Сделать первый набросок дизайна. 5.Изменять дизайн, все больше и больше делая его простым в использовании, до тех пор, пока продукт не окажется в рамках способностей воображаемых пользователей. 6.Наблюдать за тем, как реальные пользователи работают с вашим продуктом. Отметить области, в которых они испытывают трудности. Эти области, скорее всего, и демонстрируют несоответствия модели программы модели пользователя.

35 ISO 9241Эргономические требования к офисной работы с визуальными терминалами (VDTs): Часть 11 - Руководство по юзабилити ISO 9126Качество программного продукта: Характеристики и подхарактеристики качества. Модель качества. Показатели Качества в использовании. CIF Формат описания юзабилити характеристик продукта и результатов юзабилити тестов. Нормативные документы

36 Спасибо за внимание Конец лекции. Следующая лекция 12 апреля 2007 г.: Элементы графического интерфейса.