Внедрение ИС Практическая работа №16-17

Тема: Разработка моделей интерфейсов пользователей

Цель: Познакомиться с основными элементами управления (виджетами) и приобрести навыки проектирования графического интерфейса пользователя.

Перечень учебных материалов, технических средств, оборудования: персональный компьютер, интернет, текстовый редактор, специализированное ПО.

Графический интерфейс пользователя (GUI) — разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), пред- ставленные пользователю на дисплее, исполнены в виде графических изображений.

В GUI пользователь имеет произвольный доступ (с помощью устройств ввода — клавиатуры, мыши, джойстика и т. п.) ко всем видимым экранным объектам (элементам интерфейса) и осуществляет непосредственное манипулирование ими.

Графический интерфейс пользователя является частью пользовательского интер- фейса и определяет взаимодействие с пользователем на уровне визуализированной ин- формации.

Можновыделитьследующиевидыграфическогоинтерфейсапользователя:

• простой: типовые экранные формы и стандартные элементы интерфейса, обеспечи- ваемые самой подсистемой GUI;

• истинно-графический, двухмерный: нестандартные элементы интерфейса и ориги- нальные метафоры, реализованные собственными средствами приложения или сто- ронней библиотекой;

• трёхмерный.

Проектирование графического интерфейса пользователя представляет собой меж- дисциплинарную деятельность. Оно требует усилий многофункциональной бригады — один человек, как правило, не обладает знаниями, необходимыми для реализации много- аспектного подхода к проектированию GUI-интерфейса. Надлежащее проектирование GUI интерфейса требует объединения навыков художника-графика, специалиста по анализу требований, системного проектировщика, программиста, эксперта по технологии, спе- циалиста в области социальной психологии, а также, возможно, некоторых других специ- алистов, в зависимости от характера системы.

В современном мире миллиарды вычислительных устройств. Еще больше про- грамм для них. И у каждой свой интерфейс, являющийся «рычагами» взаимодействия между пользователем и машинным кодом. Неудивительно, что чем лучше интерфейс, тем эффективнее взаимодействие.

Однако далеко не все разработчики и даже дизайнеры, задумываются о создании удобного и понятного графического интерфейса пользователя.

Какиеэлементыинтерфейса(ЭИ) создавать?

1. Разработка интерфейса обычно начинается с определения задачи или набора задач, для которых продукт предназначен.

2. Простое должно оставаться простым. Не стоит усложнять интерфейсы. Нужно постоянно думать о том, как сделать интерфейс проще и понятнее.

3. Пользователи не задумываются над тем, как устроена программа. Все, что они видят — это интерфейс. Поэтому, с точки зрения потребителя именно интерфейс яв- ляется конечным продуктом.

4. Интерфейс должен быть ориентированным на человека, т.е. отвечать нуж- дам человека и учитывать его слабости. Нужно постоянно думать о том, с какими трудно- стями может столкнуться пользователь.

1. Необходимо думать о поведении и привычках пользователей. Не менять хо- рошо известные всем ЭИ на неожиданные, а новые делать интуитивно понятными.

2. Разрабатывать интерфейс необходимо исходя из принципа наименьшего возможного количества действий со стороны пользователя.

Какой должен быть дизайн элементов интерфейса?

В дизайне ЭИ нужно учитывать все: начиная от цвета, формы, пропорций, заканчи- вая когнитивной психологией. Однако, несколько принципов все же стоит отметить:

1. Цвет. Цвета делятся на теплые (желтый, оранжевый, красный), холодные (синий, зеленый), нейтральные (серый). Обычно для ЭИ используют теплые цвета. Этокак раз связано с психологией восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.

2. Форма. В большинстве случаев — прямоугольник со скругленными углами. Или круг. Опять же, форма как и цвет достаточно субъективна.

3. Основные ЭИ (часто используемые) должны быть выделены. Например, размером или цветом.

4. Иконки в программе должны быть очевидными. Или подписанными. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.

Как правильно расположить элементы интерфейса на экране?

1. Есть утверждение, что визуальная привлекательность основана на пропор- циях. Помните известное число 1.62? Это так называемый принцип Золотого сечения.Суть в том, что весь отрезок относится к большей его части так, как большая часть, отно- ситсякменьшей.Например,общаяширинасайта900px,делим900на1.62,получаем

~555px, это ширина блока с контентом. Теперь от 900 отнимаем 555 и получаем 345px.Это ширина меньшей части.

1. Перед расположением, ЭИ следует упорядочить (сгруппировать) по значи- мости. Т.е. определить, какие наиболее важны, а какие — менее.

2. Обычно (но не обязательно), элементы размещаются в следующей градации: слева направо, сверху вниз. Слева вверху самые значимые элементы, справа внизу — ме- нее. Это связано с порядком чтения текста. В случае с сенсорными экранами, самые важ- ные элементы, располагаются в области действия больших пальцев рук.

3. Необходимо учитывать привычки пользователя. Например, если в Windows кнопка закрыть находится в правом верхнем углу, то программе аналогичную кнопку необходимо расположить там же. Т.е. интерфейс должен иметь как можно больше анало- гий, с известными пользователю вещами.

4. Размещать ЭИ стоит поближе там, где большую часть времени находится курсор пользователя. Что бы ему не пришлось перемещать курсор, например, от одного конца экрана к другому.

5. Элемент интерфейса можно считать видимым, если он либо в данный мо- мент доступен для органов восприятия человека, либо он был настолько недавно воспри- нят, что еще не успел выйти из кратковременной памяти. Для нормальной работы интер- фейса, должны быть видимы только необходимые вещи — те, что идентифицируют части работающих систем, и те, что отображают способ, которым пользователь может взаимо- действовать с устройством.

6. Отступы между ЭИ лучше делать равными или кратными друг-другу. Как элементы интерфейса должны себя вести?

1. Пользователи привыкают. Например, при удалении файла, появляется окнос подтверждением: «Да» или «Нет». Со временем, пользователь перестает читать преду- преждение и по привычке нажимает «Да». Поэтому диалоговое окно, которое было при- звано обеспечить безопасность, абсолютно не выполняет своей роли. Следовательно, необходимо дать пользователю возможность отменять, сделанные им действия.

2. Если пользователю дают информацию, которую он должен куда-то ввести или как-то обработать, то информация должна оставаться на экране до того момента, пока человек ее не обработает. Иначе он может просто забыть.

3. Нужноизбегатьдвусмысленности.Например,нафонарикеестьоднакнопка. По нажатию фонарик включается, нажали еще раз — выключился. Если в фонарике пере- горела лампочка, то при нажатии на кнопку не понятно, включаем мы его или нет. Поэто- му, вместо одной кнопки выключателя, лучше использовать переключатель (например, checkbox с двумя позициями: «вкл.» и «выкл.»). За исключением случаев, когда состояние задачи, очевидно.

4. Имеет смысл делать монотонные интерфейсы. Монотонный интерфейс — это интерфейс, в котором какое-то действие, можно сделать только одним способом. Та- кой подход обеспечит быструю привыкаемость к программе и автоматизацию действий.

5. Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Так как для выполнения какой-то задачи, лучше изучать только один интерфейс, а не не- сколько. Пример — стартовая страница браузера Chrome.

6. Если задержки в процессе выполнения программы неизбежны или действие производимое пользователем очень значимо, важно, чтобы в интерфейсе была предусмот- рена сообщающая о них обратная связь. Например, можно использовать индикатор хода выполнения задачи (statusbar).

7. ЭИ должны отвечать. Если пользователь произвел клик, то ЭИ должен как- то отозваться, чтобы человек понял, что клик произошел.

Карта навигации — информация на карте навигации аналогична разделу «Содер- жание» обычной книги. В карте представлен полный перечень разделов и/или всех стра- ниц, имеющихся на сайте. Нередко, заголовки страниц в списке служат ссылками на эти страницы. Примеры:

1. Создайте карту навигации для выбранной системы. На карте в зависимости от специфики системы выделите разделы, доступные различным пользователям в зависи- мости от роли, опишите условия перехода из различных разделов (при необходимости)

Используя графический редактор на выбор, создайте макеты графического интерфейса пользователя (от каждого члена бригады – не менее 3 макетов). Предлагаемые системы:

- графический редактор

1. Для разработанных макетов подготовьте их текстовое описание в следующем виде:

1. Титульный лист

2. Цель работы

3. Навигационная схема (карта навигации)

4. Макеты графического интерфейса пользователя

5. Описание элементов управления по таблице

6. Выводы

ВАРИАНТЫ ЗАДАНИЙ:

1. Прокат автомобилей

2. Библиотечный фонд города

3. Спортивный клуб

4. Управление складом

5. Автошкола

6. Химчистка

7. Автомастерская

8. Компания по продаже мед.техники

9. Страховая компания

10. Гостиница

11. Ломбард

12. Оптовая база

13. Завод по производству металлоизделий

14. Ювелирная мастерская

15. Предприятие по организации свадебных торжеств

16. Бюро по трудоустройству

17. Нотариальная контора

18. Производство мебели

19. Производство детских игрушек

20. Поликлиника

21. Магазин розничной торговли

22. Спортивный клуб

23. Аэропорт

24. Магазин по ремонту и продаже компьютеров и комплектующих

25. Строительная организация

26. Игровая комната

27. Строительная организация

28. Фотоцентр

29. Городской зоопарк.

1. Что такое графический интерфейс пользователя?

2. Какие бывают виды графического интерфейса?

3. Что такое карта навигации?