7. Проектирование интерфейса пользователя Содержание темы: 7.

7. Проектирование интерфейса пользователя Содержание темы: 7. 1. Группы пользователей. 7. 2. Основные правила создания интерфейса пользователя. 7. 3. Принципы разработки интерфейса пользователя. 7. 4. Способы взаимодействия между пользователем и компьютером. 7. 5. Размещение информации на экране. 7. 6. Предотвращение, обнаружение и исправление ошибок. 7. 7. Общие требования к графическому интерфейсу пользователя.

7. 1. Группы пользователей: 1) Новички. Им необходимы помощь в освоении новой для них системы и контроль за их действиями. 2) Опытные. Им необходимы высокая эффективность выполнения часто требующихся действий и возможность гибкого управления системой. 3) Средние. Подавляющее большинство пользователей. Знают больше, чем новички, и не делают столько ошибок, но еще не приобрели автоматизма при выполнении большинства операций и иногда путаются в интерфейсе. Им нужны достаточно высокие эффективность и гибкость вместе с возможностью быстро получать адекватную помощь по возникающим время от времени вопросам.

7. 2. Основные правила создания интерфейса пользователя: 1) Правило доступности. Система должна быть настолько понятной, чтобы пользователь, никогда раньше не видевший ее, но хорошо разбирающийся в предметной области, мог безо всякого обучения начать ее использовать. Это правило служит некоторым идеалом, к которому надо стремиться, т. к. на практике достичь такой степени доступности почти никогда не удается. 2) Правило непрерывного развития. Система должна способствовать непрерывному росту знаний, умений и навыков пользователя и приспосабливаться к его меняющемуся опыту. Плохие результаты приносит предоставление только базовых возможностей или оставление начинающего пользователя наедине со сложным интерфейсом, которым уверенно пользуются опытные пользователи. 3) Правило соблюдения контекста. Система должна быть работоспособной в том контексте, в котором ей предстоит работать. В контекст могут входить специфика и объемы входных и выходных данных, уровень пользователей и т. д.

7. 3. Принципы разработки интерфейса пользователя: 1) Принцип структуризации. Пользовательский интерфейс должен быть целесообразно структурирован. Близкие по смыслу его части должны быть связаны видимым образом, а независимые – разделены; похожие по смыслу элементы должны выглядеть похоже, а непохожие – различаться.

7. 3. Принципы разработки интерфейса пользователя (продолжение): 2) Принцип простоты. Наиболее распространенные операции должны выполняться максимально просто. При этом должны быть видимые ссылки на более сложные процедуры. горячие клавиши Alt+О

7. 3. Принципы разработки интерфейса пользователя (продолжение): 3) Принцип видимости. Все функции и данные, необходимые для решения определенной задачи, должны быть видны, когда пользователь пытается ее решить. 4) Принцип обратной связи. Пользователь должен получать сообщения о действиях системы и о важных событиях внутри нее. Сообщения должны быть информативными, краткими, однозначными и написанными на языке, понятном пользователю.

7. 3. Принципы разработки интерфейса пользователя (продолжение): 5) Принцип толерантности. Интерфейс должен быть гибким и терпимым к ошибкам пользователя. Ущерб от ошибок должен снижаться за счет возможности отмены и повтора действий.

7. 4. Способы взаимодействия между пользователем и компьютером: 1) Вопрос и ответ – диалог, где компьютер задает вопросы, а пользователь отвечает ему (или наоборот). 2) Формы – пользователь заполняет экранные формы или поля диалога. 3) Меню – пользователь обеспечен рядом опций и управляет системой, выбирая необходимые пункты. 4) Прямое манипулирование – пользователь управляет объектами на экране посредством устройства манипулирования (мыши).

7. 5. Размещение информации на экране Цель создания эргономичного интерфейса состоит в том, чтобы отобразить информацию максимально эффективно для человеческого восприятия и структурировать отображение на дисплее таким образом, чтобы привлечь внимание к наиболее важным единицам информации. Для этого следует минимизировать общую информацию на экране и представить только то, что является необходимым для пользователя. Экранная плотность – это количество информации, отображаемой на экране. Исследования показали, что чем меньше экранная плотность, тем отображаемая информация более доступна и понятна для пользователя. Если экранная плотность большая, это может вызвать затруднения в усвоении информации и ее ясном понимании. Однако опытные пользователи могут предпочитать интерфейсы с большой экранной плотностью.

7. 5. Размещение информации на экране (продолжение) Способы выделения элементов интерфейса: n движение (мигание или изменение позиции); n яркость (выделение каких-либо элементов большей яркостью); n цвет; n различные шрифты; n различные размеры символов; n подчеркивание, рамки.

7. 5. Размещение информации на экране (продолжение) Принципы использования цвета при проектировании эргономичного интерфейса: n необходимо ограничить число цветов до 4 -х на одном экране и до 7 -и – для последовательности экранов; n важно учитывать представления пользователя о значении цвета (например, для картографа зеленый цвет означает лес, желтый – пустыню, синий – воду; для химика красный цвет означает горячее, синий – холодное и т. д. ); n при отображении состояния, как правило, красный цвет означает опасность, зеленый – продолжение работы, желтый – предупреждение; n для привлечения внимания наиболее эффективны белый, желтый и красный цвета; n около 9% людей не различают цвета; однако эти люди могут отличать черно-белые оттенки, поэтому следует проверять, не нарушает ли использование различных цветов в интерфейсах восприятия пользователей этой категории;

7. 5. Размещение информации на экране (продолжение) Принципы использования цвета при проектировании эргономичного интерфейса (продолжение): n для неактивных элементов лучше использовать бледные цвета; пока поле «Полугодие» не заполнено, остальные незаполненные поля неактивны

7. 5. Размещение информации на экране (продолжение) Принципы использования цвета при проектировании эргономичного интерфейса (продолжение): n при необходимости упорядочения данных можно использовать спектр 7 -и цветов (радуга);

7. 5. Размещение информации на экране (продолжение) Принципы использования цвета при проектировании эргономичного интерфейса (продолжение): n если нужно разделить данные, то цвета выбирают из различных частей спектра: красный – зеленый, синий – желтый, любой цвет – белый;

7. 5. Размещение информации на экране (продолжение) Принципы использования цвета при проектировании эргономичного интерфейса (продолжение): n для группировки данных, объединения и подобия нужно использовать соседние цвета спектра: оранжевые – желтые, синие – фиолетовые.

7. 5. Размещение информации на экране (продолжение) Данные на экране следует располагать таким образом, чтобы пользователь знал, где найти и где ожидать вывода необходимой информации. Примеры: n Информация, на которую следует немедленно обратить внимание, должна всегда отображаться на видном месте, чтобы захватить внимание пользователя (например, предупреждающие сообщения и сообщения об ошибках). n Не очень часто востребуемая информация (например, справка) не должна отображаться, но должна быть доступна по необходимости. Кнопка справки или соответствующая опция меню должна быть всегда доступна.

7. 5. Размещение информации на экране (продолжение) Некоторые принципы создания текстовых диалогов и отображений: n Текст в нижнем регистре (набранный маленькими буквами) читается приблизительно на 13% быстрее, чем текст, набранный полностью в верхнем регистре (большими буквами). n Символы верхнего регистра наиболее эффективны для передачи информации, которая должна привлечь внимание. Не следует использовать верхний регистр, если не нужно выделять какую-либо информацию. n Выровненный по правому краю текст труднее читать, чем текст с невыровненным правым полем. n Оптимальный интервал между строками равен высоте символов или немного больше нее.

7. 5. Размещение информации на экране (продолжение) Основные принципы создания меню: n структура меню должна соответствовать структуре задачи, решаемой системой; n организация меню должна отразить наиболее эффективную последовательность шагов, ведущих к решению задачи; n пункты меню должны быть краткими и соответствовать своему заголовку; n порядок пунктов меню выбирается в соответствии с частотой и порядком их использования; n выбор пунктов меню должен быть обеспечен несколькими способами: с помощью клавиатуры, мыши и кнопок на панели инструментов; n следует зафиксировать легко запоминаемые сочетания клавиш для более быстрого доступа к пунктам меню, т. к. это очень экономит время.

7. 5. Размещение информации на экране (продолжение) Основные принципы проектирования форм: n Передвижение по смежным полям не должно вызывать затруднений у пользователя. n Размещение информационных единиц на форме должно соответствовать логике ее использования: это зависит от необходимой последовательности доступа к информационным единицам, частоты их использования, а также от относительной важности элементов.

7. 5. Размещение информации на экране (продолжение) Основные принципы проектирования форм (продолжение): n Следует использовать всё пространство и создавать симметрию среди информационных элементов формы. n Логические группы элементов необходимо отделять линиями, рамками, цветовыми или другими визуальными средствами. n Взаимозависимые или связанные элементы должны отображаться на одной форме.

7. 5. Размещение информации на экране (продолжение) Основные принципы проектирования форм (продолжение): n Необходимо стремиться к использованию ограниченного набора цветов и уделять внимание их правильному сочетанию. Для фона формы выбираются нейтральные цвета (светло-серые). n Недопустимо перегружать окно большим числом элементов управления. n Недопустимо, чтобы сходные по функциям органы управления в разных окнах назывались по-разному или размещались в разных местах окон.

7. 5. Размещение информации на экране (продолжение) Дизайн заголовков и полей: n для отдельных полей заголовки должны быть выровнены по левому краю; n для полей списков заголовок должен быть выше и левее по отношению к заголовкам полей.

7. 5. Размещение информации на экране (продолжение) Форматы ввода n Следует обеспечить ввод значений по умолчанию во все поля, которые это допускают. n Нельзя требовать от пользователя ввода незначимых цифр (например, вместо 00000010 пользователь должен ввести только 10), а также информации, которая была предварительно введена или которая может быть получена автоматически (например, текущую дату).

7. 6. Предотвращение, обнаружение и исправление ошибок Аспекты техники защиты от ошибок пользователя: n принудительные действия в системе, которые предотвращают или затрудняют появление ошибок; После выбора дисциплины поле «Группа» заполняется автоматически Выбрать другую группу пользователь не может

7. 6. Предотвращение, обнаружение и исправление ошибок Аспекты техники защиты от ошибок пользователя (продолжение): n обеспечение нормальной диагностики системы, в процессе которой пользователю объясняется, в чем суть ошибки, и указываются пути ее исправления.

7. 6. Предотвращение, обнаружение и исправление ошибок (продолжение) Основные принципы обработки ошибок в формах ввода: n если ошибка обнаружена системой, желательно вернуть курсор в поле с ошибочными данными и каким-либо образом выделить это поле (например, цветом); n выводить сообщения об ошибках, использующие понятную пользователю терминологию; n выводить сообщения, которые предлагают пути устранения ошибок.

7. 7. Общие требования к графическому интерфейсу пользователя Под графическим интерфейсом пользователя подразумевается тип экранного представления, при котором пользователь может выбирать команды, запускать задачи и просматривать в списке файлы, указывая на пиктограммы или пункты меню. Графический интерфейс пользователя любой программы должен включать в себя: n главное меню; n инструментальную панель кнопок, дублирующих основные разделы меню; n контекстное меню, всплывающее при щелчке пользователя правой кнопкой мыши на том или ином компоненте; n продуманную последовательность переключения фокуса управляющих элементов; n клавиши быстрого доступа ко всем разделам меню и всем управляющим элементам, горячие клавиши для доступа к основным командам;

7. 7. Общие требования к графическому интерфейсу пользователя (продолжение) Графический интерфейс пользователя любой программы должен включать в себя (продолжение): n подсказки, всплывающие при перемещении указателя мыши над кнопками и иными компонентами; n полосу состояния в нижней части окна, используемую для развернутых подсказок и выдачи различной информации пользователю; n файл справки, темы которого отображаются при нажатии клавиши F 1 или при выборе пользователем соответствующего раздела меню; n информацию о версии приложения; n возможность настройки приложения и запоминания настроек, чтобы при очередном сеансе работы восстанавливались настройки, установленные в предыдущем сеансе; n средства установки и удаления приложения.

Литература (имеется в библиотеке КТИ) 1. Технология разработки программных продуктов. Практикум: учеб. пособие для студентов учреждений сред. проф. образования / А. В. Рудаков, Г. Н. Федорова. – М. : Издательский центр «Академия» , 2010. – 192 с.