close

Вход

Забыли?

вход по аккаунту

?

РГР Щербаков

код для вставкиСкачать
МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ
БРЯНСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
Кафедра "Информатика и программное обеспечение"
Расчетно-графическая работа по дисциплине "Человеко-машинное взаимодействие"
Руководитель к.т.н, доц. Дергачев К. В. _________________
"___"____________2012 г.
Студент гр. 08-ПО2 Щербаков. Д.В.
___________________
"___"____________2012 г.
БРЯНСК 2013
Оглавление
Введение3
1.Аналитическая часть4
1.1.Основные принципы создания интерфейсов4
1.2.Эргономика интерфейса4
1.2.1.Скорость работы пользователей5
1.2.2.Человеческие ошибки5
1.2.3.Обучение работе пользователей6
1.2.4.Субъективная удовлетворенность пользователей6
1.3.Оформление сайтов7
1.4.Обзор программ-аналогов8
1.4.1.Веб-сайт "СиАКОД"8
1.4.2.Веб-сайт "patanagma.ru"10
1.5.Выводы11
2.Конструкторская часть13
Заключение17
Список литературы18
Введение
Создание современных средств вычислительной техники связано с задачей объединения в один комплекс устройств хранения и отображения информации, аппаратуры данных и непосредственно ЭВМ. Эта задача возлагается на системы сопряжения - интерфейсы. Под интерфейсом понимают совокупность схемотехнических средств, обеспечивающих непосредственное взаимодействие составных элементов вычислительной системы с человеком (пользователем). Взаимодействие между пользователями и компьютерами происходит на уровне пользовательского интерфейса (или просто интерфейса), который включает в себя программное и аппаратное обеспечение. Например, образы или объекты, отображаемые на экранах дисплеев, данные, полученные от пользователя посредством аппаратных устройств ввода (таких как клавиатуры и мыши) и другие взаимодействия пользователя с крупными автоматизированными системами, такими как воздушное судно и электростанция.
Важным критерием является внимание к человеко-компьютерному взаимодействию, так как плохо разработанные интерфейсы могут стать причиной многих непредвиденных проблем.
В данной работе необходимо разработать удобный и понятный интерфейс для работы на сайте.
1. Аналитическая часть
1.1. Основные принципы создания интерфейсов
При создании интерфейсов выделяют следующие основные принципы.
1. Естественность (интуитивность). Данный принцип подразумевает то, что работа с системой не должна вызывать у пользователей трудностей в поиске элементов управления, директив и т.д. для управления решением задач.
2. Непротиворечивость. Данный принцип предполагает отсутствие противоречий в то числе с операционной системой и программами аналогами, а также отсутствие противоречий внутри разрабатываемой системы.
3. Неизбыточность. Данный принцип говорит о том, что пользователю необходимо предоставлять возможность ввода минимально необходимой информации.
4. Непосредственный доступ к системе помощи. Данный принцип подразумевает, что система в процессе работы обеспечивает пользователя всеми необходимыми инструкциями. Гибкость интерфейса. Она характеризует интерфейс с точки зрения возможности работы с ним пользователями с различными уровнями подготовки.
1.2. Эргономика интерфейса
Под эргономикой подразумевают научную дисциплину, изучающую взаимодействие человека и других элементов системы, а также сферу деятельности по применению теории, принципов, данных и методов этой науки для обеспечения благополучия человека и оптимизации производительности системы.
Существует четыре основных критерия качества любого интерфейса, а именно:
* скорость работы пользователей;
* количество человеческих ошибок;
* скорость обучения;
* субъективное удовлетворенность пользователей.
1.2.1. Скорость работы пользователей
Длительность выполнения работы пользователем состоит из длительности восприятия исходной информации, длительности интеллектуальной работы, длительности физических действий пользователя и длительности реакции системы. Как правило, длительность реакции системы является наименее значимым фактором. Скорость работы пользователей должна быть по возможности максимально увеличена (за счет уменьшения влияния факторов, замедляющих и усложняющих процесс мышления, слежения за фокусом внимания, избавления от лишней информации, визуального выделения наиболее вероятных вариантов, и так далее).
1.2.2. Человеческие ошибки
Важным критерием эффективности интерфейса является количество человеческих ошибок. В некоторых случаях одна или две человеческих ошибки погоды не делают, но только тогда, когда эти ошибки легко исправляются. Однако часто минимальная ошибка приводит к совершенно катастрофическим последствия.
Наибольшее количество человеческих ошибок при пользовании ПО раскладывается на четыре типа:
* ошибки, вызванные недостаточным знанием предметной области;
* опечатки;
* несчитывание показаний системы;
* моторные ошибки.
При борьбе с ошибками нужно направлять усилия на:
* плавное обучение пользователей в процессе работы
* снижение требований к бдительности
* повышение разборчивости и заметности индикаторов.
Дополнительно к этим трём направлениям, есть и четвертое: снижение чувствительности системы к ошибкам. Для этого есть три основных способа, а именно:
* блокировка потенциально опасных действий пользователя до получения подтверждения правильности действия;
* проверка системой всех действий пользователя перед их принятием;
самостоятельный выбор системой необходимых команд или параметров, при котором от пользователя требуется только проверка.
1.2.3. Обучение работе пользователей
Данный критерий необходимо максимизировать: при высокой скорости обучения пользователей, они способны приступить к работе с системой раньше. Для обучения пользователей используют два типа средств обучения. Во-первых, средства обеспечения общей "понятности" системы (ментальная модель, метафора, наглядность, стандарт). Во-вторых, обучающие материалы (базовая справка, обзорная справка, справка предметной области, процедурная и контекстная справки, справка состояния).
Обеспечение пользователей своевременной информацией позволяет увеличить скорость их обучения, сократить количество ошибок, а также повысить общую субъективную удовлетворенность системой.
1.2.4. Субъективная удовлетворенность пользователей
Субъективная удовлетворенность пользователей складывается из различных показателей. Во-первых, из эстетики интерфейса. Интерфейс программной системы не должен ощущаться:
* необходимо избегать развязности в визуальном дизайне,
* необходимо избегать ярких цветов, * необходимо избегать острых углов, * дизайн должен быть максимально легким и воздушным, * необходимо добиться контрастности (путем расположения пустот между элементами). Интерфейс не должен быть красивым, так как красота - понятие относительное. Интерфейс должен быть максимально насыщен визуальными закономерностями, необходимо использовать модульные сетки, а также стараться привязывать элементы к параметрам золотого сечения. Во-вторых, из субъективного восприятия скорости работы. Субъективная продолжительность действия напрямую зависит от уровня активности пользователя: чем выше активность, тем меньше субъективное время работы. Основная стратегия уменьшения субъективного восприятия времени - пользователи должны быть постоянно заняты. В-третьих, немаловажную роль здесь играет уменьшение вероятности стрессовых ситуаций, а также информирование пользователей об ошибках. Программа должна в вежливой форме указывать пользователя, на совершенные им ошибочные действия, запрашивать подтверждения, а также иметь механизм отмены действий. Также, немаловажным является скрытие от пользователя опасные места интерфейса: функции удалении, автозамены, масштабного редактирования, а также глобальные настройки.
1.3. Оформление сайтов
Графическое оформление сайта характеризуется следующими критериями:
1. Цветовое оформление графики и иллюстрирования должно обеспечивать хорошую читабельность текстов. Причём, максимальный контраст (например, чёрный текст на белом фоне) далеко не всегда является наилучшим решением; кроме того, при оформлении цветовой гаммы сетевого ресурса не рекомендуется применение более чем трёх цветовых оттенков. 2. Все изображения должны соответствовать тематике. В некоторых случаях, где основным контентом ресурса являются иллюстрации (художественные галереи, сайты знакомств, фото-сайты и пр.), количество графики может быть каким угодно; во всех других случаях, на веб-странице не рекомендуется размещать больше двух изображений.
3. Для текстовых массивов, на веб-проекте рекомендуется использовать стандартные шрифты. 4. Такие текстовые модули, как заголовки, наименования отдельных разделов и т. д., могут отображаться шрифтом, отличным от основного. Цвет заголовков обычно выполняется цветом, отличным от цвета основного текста.
5. Все пункты навигационного меню должны быть собраны в единый блок и оформлены по стандартной технологии, так как пользователь не будет разбираться в хитросплетениях иллюстрирования и навигации, внешний вид которой ему не знаком. При открытии веб-страницы сайта, все основные кнопки меню навигации должны быть на виду.
1.4. Обзор программ-аналогов
В рамках расчетно-графической работы необходимо разработать интерфейс программы, опираясь на обзор программ-аналогов. При проектировании интерфейса необходимо учесть положительные стороны программ-аналогов и постараться избежать их недостатков.
Рассмотрим особенности двух программ-аналогов.
1.4.1. Веб-сайт "СиАКОД"
Веб-сайт по предмету "Структуры и алгоритмы обработки данных". Веб-интерфейс представлен на рис.1. Рассмотрим достоинства и недостатки интерфейса данного сайта.
Достоинства:
* Простая и удобная навигация по сайту.
* Приятное цветовое оформление, которое позволяет легко считывать информацию.
* Наличие карты сайта.
* Хорошо оформленный лекционный материал, все в одном тоне , нет ярких картинок, выделений в тексте, которые бы отвлекали от чтения. * Нет необходимости обучения пользователей.
Недостатки:
* На главной странице очень много лишней информации (реклама), которая занимает большую часть экрана, тем самым не дает сосредоточиться на необходимой информации. * Навигационная панель не как не выделена, это затрудняет ее поиск при первом открытие сайта.
* Ссылки на навигационной панели, после их нажатия меняются на цвет, который сливается с фоном, что затрудняет повторный выбор этого пункта меню.
* Отсутствие единого стиля сайта, при переходе по ссылкам тестирование, отображается другой интерфейс.
* Некоторые страницы перегружены информацией.
Рисунок 1. Веб-интерфейс СиАКОД.
1.4.2. Веб-сайт "patanagma.ru"
Сайт кафедры патологической анатомии Астраханской государственной академии.
Достоинства:
* Достаточно удобная и простая навигация по сайту.
* Простое и информативное цветовое решение сайта.
* Удобный поиск по сайту.
* Грамотно спроектированный и интуитивно понятный переход по разделам сайта, благодаря чему не требуется карта сайта. Верхнее меню доступно из любого раздела сайта, что упрощает навигацию и повышает скорость работы пользователя с сайтом.
* Нет необходимости обучения пользователей.
Недостатки:
* Плохое оформление ссылок, их цвет не как не сочетается с общим стилем.
* Новости оформлены не лучшем образом, два одинаковых заголовка информирующие нас, что мы находимся в новостях.
* Дата размещение новости расположена на месте, где должен быть заголовок, а заголовок вследствие чего не заметен. Рисунок 2. Интерфейс сайта "patanagma.ru"
1.5. Выводы
Проведем оценку по основным критериям эргономики интерфейса, а также некоторым другим параметрам. Результаты сравнения представлены в таблице (Error! Reference source not found.).
Оценка производится по 10-балльной шкале следующим образом:
* 1 балл соответствует низкому уровню;
* 10 баллов соответствует высокому уровню;
* 5 баллов соответствует среднему уровню;
* промежуточные баллы соответствуют понятиям "постольку, поскольку", "более или менее", "выше среднего" и т.д.
Таблица 1.
Сравнение программ-аналогов по основным критериям эргономики
КритерийСиАКОДPatanagma.ruСкорость работы пользователей 89Эстетика68Цветовое оформление89Субъективная удовлетворённость пользователей88Простота пользования810 Анализ программ-аналогов указывает на то, что предоставляемые аналоги различны по качеству реализации интерфейса. Имеются как аналоги с плохой реализацией интерфейса, так и с хорошей, однако тоже не лишены недостатков.
В качестве ключевых направлений, способствующих созданию удобного интерфейса, были выбраны следующие:
* необходимо грамотно подобрать цветовую схему сайта, сделать ее единой для всех страниц;
* реализовать легко читаемый на различных размерах экрана и контрастностях интерфейс;
* избежать перегруженных информацией страниц, несвязанных блоков в дизайне, разнородности всех видов меню;
* особое внимание уделить простоте и понятности навигации по сайту, скорости работы, удобству расположения и грамотной группировке элементов меню.
2. Конструкторская часть
Заданием на разработку было проектирование интерфейса сайта по предмету "Структура и алгоритмы данных". Проектирование удобного, простого, легко читаемого интерфейса является основной задачей при проектировании сайта. При этом следует учитывать следующие факторы: * удобная работа при вводе данных;
* эргономичный дизайн; * информативность.
Структура пользовательского интерфейса представлена на рис.3.
Ниже представлен интерфейс главной страницы рис.4.
Данный макет использует оттенки теплого цвета, которые отделяют основную часть от дополнительной информации. Так же имеются заголовки разных уровней, единый стиль оформление основного текста, даты, ссылок.
Интерфейс меню является единым для всех страниц сайта, что упростит навигацию и повысит скорость работы. Рисунок 4 Главная страница сайта
Далее представлен интерфейс демонстрации алгоритма поиска в глубину и ширину рис. 5.
Рисунок 5 Демонстрация поиска в глубину и ширину
После открытия данного макета, все поля уже будут заполнены, что сокращает время на их ввод. Имеются такие поля как:
* Количество узлов.
* Какой узел необходимо найти.
* Метод.
* Скорость показа.
Все данные кроме метода вводятся в ручную, если же данное некорректно, будет выведено сообщение о том что нужно исправить рис. 6.
Рисунок 6 Информация об ошибки
Поля метод можно выбрать из списка доступных (в ширину\глубину), так как метода всего два, то это одно из лучших решений - использование выпадающего списка.
Оформление процесса демонстрации поиска сделано на белом фоне, также оно выделено в рамку, это отделяет его и показывает границы работы. Использованы понятные отображения состояний:
* желтым цветом означает, что объект не обработан (в процессе).
* зеленый цвет - объект уже пройден.
* красный - объект найден.
Далее представлен интерфейс работы визуализации кода рис. 7.
Рисунок 7 Интерфейс визуализации кода
Данный шаблон очень похож на предыдущий, что позволяет быстро понять работу. Так как в данном шаблоне необходимо водить код, ниже будет приведена подробная справка по всем командам. Все строчки номеруются. Строчка, которая выполняется в данный момент, подсвечивается в поле справа, что дает большую информативность.
Здесь так же используется понятные отображения состояний:
* желтым цветом показывает, над каким объектов выполняется действия.
* зеленый цвет - условия выполнено успешно.
* красный - условия не выполнено.
В проекте использованы следующие принципы и подходы к написанию:
* Основными компонентами Web-документа, формирующих его пользовательский интерфейс использовал:
- пассивные элементы страницы (текст, графика, таблицы);
- интерактивные элементы (меню);
- элементы эстетического оформления (фоновые изображения);
* Цвета удачно подобраны и более приятны для глаз. В результате они дают пользователю возможность полностью сосредоточиться именно на взаимодействии с сайтом. * Для навигации по сайту используется панель сверху, это даёт легко и просто пользователю перемещаться по страницам сайта.
Элегантность и простота интерфейса достигается тем, что он не перегружен не нужными элементами и "рекламой", которой просто не может быть в локальной версии сайта.
Заключение В рамках данной работы были проанализированы интерфейсы подобных сайтов, сделаны сравнительные характеристики и отчеты о достоинствах/недостатках интерфейса. Выявление недостатков и достоинств сайтов-аналогов позволило избежать множества ошибок проектирования, а также реализовать новые компоненты для модуля сайта, которые повысят скорость работы и упростят пользователю работу.
С учетом требований к элементам интерфейса, цветовой схеме, навигации, были сделаны макеты страниц сайта. Также удалось избежать разнородности и излишней информации в меню навигации, с помощью дополнительного меню.
Данный макет не является конечным, он будет дорабатываться в ходе дальнейшего развития сайта.
Список литературы
1. Веб-сайт СиАКОД. Режим доступа: https://sites.google.com/site/siakoddan/
2. Сайт кафедры патологической анатомии Астраханской государственной академии . Режим доступа: http://patanagma.ru/
3. Разработка пользовательских интерфейсов. Дж. Тидвелл, Питер, 2008 - 416 с.
4. Лещев, Д. Создание интерактивного Web-сайта: учебный курс / Д. Лещев - СПб.: Питер, 2007. - 544 с.
5. Головач, В. Дизайн пользовательского интерфейса. / В. Головач - М.: Рада, 2003.
18
Документ
Категория
Разное
Просмотров
248
Размер файла
1 146 Кб
Теги
ргр, щербаков
1/--страниц
Пожаловаться на содержимое документа