Введение в разработку графического интерфейса. Проектирование графического интерфейса пользователя

Правило 2: уменьшить нагрузку на пользователя

Правило 3: сделать интерфейс совместимым

Руководящие принципы

Программа "Tidy Start Menu"

Заключение

Литература

Введение

"Золотое правило проектировщика гласит: "Никогда не делай другим того, что они сделали тебе". Вспомните, что вам не нравится в программном обеспечении, которым вы пользуетесь. И не делайте того же самого в программе, над которой работаете."

Трэйси Леонард

Почему надо следовать принципам построения пользовательского интерфейса?

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

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

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

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

Три принципа разработки пользовательского интерфейса формулируются так:

1)контроль пользователем интерфейса;

2)уменьшение загрузки памяти пользователя;

3)последовательность пользовательского интерфейса.

Где найти принципы разработки пользовательского интерфейса

Хансен представил первый список принципов проектирования. Принципы таковы:

1)знать пользователя;

2)сократить запоминание;

3)оптимизировать операции;

4)устранить ошибки.

Многие крупные производители операционных систем, выпусти на рынок свои новые продукты, публикуют соответствующие руководства и инструкции. В этих изданиях раскрываются принципы подхода к проектированию интерфейса. Руководства выпускали Apple Computer, Inc. (1992), IBM Corporation (1992), Microsoft Corporation (1995) и UNIX OSF/Motif (1993).

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

Важность соблюдения принципов

"Несовместимость интерфейса может стоить большой компании миллионов долларов убытка из-за потери продуктивности и увеличения стоимости технической поддержки." - Джесси Брист.

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

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

Трактовка этих принципов будет зависеть от аппаратного обеспечения, операционной системы, составляющих пользовательского интерфейса и его задач. Зачастую деловое решение довлеет над использованием принципов проектировщиками. Пользовательские модели и модели проектировщика также различны и влияют на то, как будут применяться принципы. На некоторых важных этапах разработки проекта может встать вопрос: "Что произойдет далее?". Ответ должен быть таким: "Что захочет пользователь!".

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

Правила проектирования пользовательского интерфейса

"Делай это проще, но не примитивнее."

Альберт Эйнштейн

Правило 1: дать контроль пользователю

Опытные проектировщики позволяют пользователям решать некоторые задачи по собственному усмотрению. Архитекторы по завершении строительства сложного комплекса зданий должны проложить между ними дорожки для пешеходов. Пока они не знают, в каком именно месте люди будут пересекать площадки. Поэтому дорожки никогда не прокладывают одновременно с возведением зданий. На площадках между домами помещаются таблички с надписью: "Пожалуйста ходите по траве". Через некоторое время строители возвращаются и только теперь, согласно "волеизъявлению" населения, заливают протоптанные дорожки асфальтом.

Принципы, которые дают пользователю контроль над системой:

1)использовать режимы благоразумно;

2)предоставить пользователю возможность выбирать: работать либо мышью, либо клавиатурой, либо их комбинацией;

3)позволить пользователю сфокусировать внимание;

4)демонстрировать сообщения, которые помогут ему в работе;

5)создать условия для немедленных и обратимых действий, а также обратной связи;

6)обеспечить соответствующие пути и выходы;

7)приспосабливайте систему к пользователям с различным уровнем подготовки;

8)сделать пользовательский интерфейс более понятным;

9)дать пользователю возможность настраивать интерфейс по своему вкусу;

10)разрешить пользователю напрямую манипулировать объектами интерфейса;

Использовать режимы благоразумно

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

Позволить человеку использовать мышь и клавиатуру

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

Позволить пользователю переключить внимание

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

Показывать поясняющие сообщения и тексты

Во всем интерфейсе использовать понятные для пользователя термины. Они не обязаны знать о битах и байтах!

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

Обеспечить немедленные и обратимые действия и обратную связь

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

Предоставлять понятные пути и выходы

Пользователи должны получать удовольствие при работе с интерфейсом любого программного продукта. Даже интерфейсы, применяемые в индустрии, не должны пугать пользователя, он не должен боятся нажиматься нажимать кнопки или переходить на другой экран. Вторжение Internet показало, что навигация - основная интерактивная техника в Internet. Если пользователь понимает, как зайти на нужную страницу в WWW, то существует 80-процентная вероятность, что он разберется в интерфейсе. Люди осваивают методы работы с браузером очень быстро.

Приспосабливаться к пользователям с разными уровнями навыков

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

Сделать пользовательский интерфейс "прозрачным"

Пользовательский интерфейс - "мифическая" часть программного продукта. При хорошем проекте пользователи даже не ощущают его "присутствия". Если он разработан неудачно, пользователям придется приложить даже немало усилий для эффективного использования программного продукта. Задача интерфейса - помочь людям почувствовать себя находящимся как бы "внутри" компьютера, свободно манипулировать и работать с объектами. Это и называется "прозрачным" интерфейсом!

yadobr 14 января 2014 в 09:10

Проектирование графического интерфейса пользователя

• Интерфейсы

Введение

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

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

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

Общие принципы

Какие ЭИ создать?

Какой должен быть дизайн ЭИ?

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

Как правильно расположить ЭИ на экране?

Как ЭИ должны себя вести?

В заключении

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

Литература

Джеф Раскин , «Интерфейс: новые направления в проектировании компьютерных систем»
Алан Купер , «Об интерфейсе. Основы проектирования взаимодействия»
Алан Купер , «Психбольница в руках пациентов»

Разработка графического интерфейса

Ключевым средством взаимодействия пользователя с программой является графический пользовательский интерфейс (Graphical User Interface, GUI). GUI любого программного продукта является одним из ключевых факторов его популярности.

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

На практике программирование Windows-приложений предполагает экстенсивное использование различных инструментальных средств и мастеров. Таким образом, учитывая стандарты выбранной операционной системы, программное средство будет иметь оконный интерфейс. Это обусловлено, прежде всего, тем, что окна являются основными элементами графического интерфейса в операционных системах (ОС) семейства «Windows». Они представляют собой прямоугольные области, которые имеют свои настройки, свойства и типы .

Графическая часть обучающего блока включает в себя окна четырех типов:

Главное окно -- содержит все элементы навигации по программе, а также дополнительную информацию, необходимую для удобства работы с ПС;

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

Окна работы с программными возможностями -- обеспечивают работу с основными функциями обучающего блока, такими как прохождение тестов и изучение лекций;

Окна вывода информации и статистики -- служат для вывода информации различного вида, а также статистики и графиков.

Главное окно программы будет содержать следующие элементы управления и вывода информации:

Заголовок окна, который содержит название программы и назначение окна;

Кнопки системного меню, которые отвечают за изменение размера, минимизацию и закрытие программы;

Область названия окна, которая носит исключительно функцию украшения и необходима для соответствия общему дизайн-решению;

Область приветствия;

Область вывода дня недели, текущей даты и времени;

Пользовательская панель инструментов, содержащая кнопки для доступа к основным функциям программы;

Административная панель, включает в себя кнопку для доступа к административным элементам управления ПС;

Строка состояния, отображающая информацию обо всех режимах работы программы.

Схема главного окна графического интерфейса (вид окна для административной учетной записи) представлена на рисунке 3.2

Рисунок 3.2 -- Схема главного окна графического интерфейса: 1 -- заголовок окна; 2 -- кнопки системного меню; 3 -- область названия окна; 4 -- строка состояния; 5 -- область приветствия; 6 -- область вывода дня недели, даты и времени; 7 -- административная панель; 8 -- пользовательская панель; 9 -- кнопка для доступа к стадии обучения; 10 -- кнопка для доступа к стадии тестирования; 11 -- кнопка для вывода статистики и графиков; 12 -- выход; 13 -- кнопка для доступа в административную часть приложения

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

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

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

Статистика пользователя реализована в виде графиков, которые выстраивается в зависимости от полученных им результатов. Для каждого теста выстраивается своя динамика. Графики содержат все необходимые подписи, реализованы с помощью компонента TChart, в связи с чем имеют массу элементов управления, которые встроены в компонент по умолчанию и как следствие реализованы в приложении.

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

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

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

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

1. Одно или несколько окон для вывода графических результатов расчета.

2. Несколько редактируемых окон, с помощью которых задаются и/или изменяются значения параметров задачи.

3. Управляющие кнопки, которые позволяют запускать и останавливать процесс расчета, перерисовывать результаты, выходить из задачи.

4. Поясняющие надписи (статический текст).

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

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

Рис. 8. Простейщий графический интерфейс пользователя для решения задачи “Биения”

9.1. Создание внешнего вида интерфейса

В этом параграфе мы рассмотрим использование MATLAB для разработки внешнего вида графического интерфейса (GUI -GraphicsUserInterface) с использованием средств графического (визуального) программирования. Для вызова визуального редактора необходимо в командном окнеMATLAB набрать командуguide . По истечении определенного времени, определяемого быстродействием вашего компьютера, появятся два новых окна, показанные на рис.9 . Одно из них – панель управления (Control Panel , на рисунке слева) и форма или область рисования (Figure , на рисунке справа). Эти окна могут перекрываться, но мы для ясности изложения расположили их рядом. Показанная выше картинка появится на экране в том случае, если перед вызовомguide отсутствует какой-либо открытый рисунок. В случае же если функцияguide вызывается после отрисовки какого-либо рисунка, то он открывается вместо пустого. Мы же рассмотрим создание графического интерфейса с самого начала.

Перед созданием графического интерфейса желательно “разработать проект” того, что вы хотите иметь в качестве интерфейса. Мы рассмотрим пример вывода трех разных сигналов в трех подокнах, что в терминах графики высокого уровня определялось бы операторами subplot(3,1,k), где k - номер графика. Кроме того,

Рис. 9. Общий вид визуального графического редактора и окна редактирования
справа от собственно подокон с графиками мы хотим иметь три редактируемых по-
ля, в которых можно осуществлять ввод/редактирование числовых значений трех
переменных. Пусть эти переменные принимают произвольные значения.
В данном изложении мы не будем оснащать наши редактируемые окна провер-
кой, удовлетворяют ли введенные значения каким-либо условиям, хотя такое воз-
можно. Назовем эти переменные N, R, C. В данном примере имеется в виду расчет
тока в RC-цепи при подаче на зажимы сигнала с номером N, а R и C - сопротив-
ление и емкость в цепи (подробное описание задачи см. в параграфе 10 основного
текста пособия).
Наш интерфейс должен позволить менять зна-
чения N, R, и C, получая в трех расположенных
друг над другом подокнах сигнал (напряжение,
подаваемое на зажимы), производную от сигна-
ла и напряжение на сопротивлении U r . Помимо
окон для вывода графиков и редактируемых окон	R u n E x i t
ввода необходимо поместить на панель интерфей-
са еще две кнопки - RUN - запуск программы на	Рис. 10. Вид интерфейса
счет и EXIT - прекращение работы и удаление
графического окна.
На первом этапе необходимо разработать внешний вид интерфейса. Пусть по
нашему предварительному экскизу интерфейс должен выглядеть приблизительно
следующим образом (рис. 10 ). Элементами этого интерфейса являются три окна

вывода графиков (axes в терминах панели управления), три статических надписи N,R,C (text ), три окна ввода/редактирования данных (edit ) и две кнопки (push ).

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

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

Для создания редактируемых окон ввода используется кнопка edit , показанная справа. Используется она так же, как при создании подокон с осями. Сначала появляется мышь, нагруженная крестиком, с помощью которой строится прямоугольник ввода.

Надписи на панели рисунка создаются с помощью кнопки text , которая переносится и выравнивается аналогично вышеописанному. Для того чтобы внутри области статического текста появилась какая-либо

надпись, необходима работа с редактором свойств, который вызывается либо при помощи кнопки Property editor , либо с помощью двойного нажатия левой кнопкой мыши на соответствующем объекте на панели рисунка.

Для создания и размещения кнопок используется панель с надписью Push . Способ размещения кнопки и выбора ее размера полностью совпадает с методом, описанным выше для окна редактирования и окна статического текста.

Построенные таким образом окна вывода и редактирования, окна статического текста и кнопки, а также другие объекты можно выровнять и установить определенные промежутки между ними с помощью панели выравнивания (Alignment Tools ).

Для этого необходимо на панели управления щелкнуть по соответствующей кнопке, и появится панель выравнивания. Для задания ряда объектов, с которыми будут выполняться какие-либо действия, необходимо их выделить, щелкая по каждому из них при нажатой клавишеShift . Выделенные объекты отмечаются

черными точками вокруг соответствующих объектов. При необходимости изменить размер какого-либо объекта (кнопки, окна и т.д.) необходимо щелкнуть по этому объекту с помощью левой кнопки мыши и с помощью мыши изменить требуемый размер так же, как и размер любого окна Windows.

При работе с графическими объектами на панели рисунка желательно раскрыть (с помощью соответствующей кнопки окна Windows) панель рисунка на весь экран и выбрать размер всех объектов на панели рисунка.

Поскольку по умолчанию размеры всех объектов задаются в пикселях, это может привести к тому, что при изменении размера окна вывода кнопки и/или окна могут наехать друг на друга. Для избежания такого нежелательного явления необходимо задать единицы размера всех объектов в безразмерных переменных – долях размера окна. Этот размер называется normalized . Для этого необходимо вызвать редактор свойст щелкнув на панели управления на кнопке с над-

писью Property editor . Выделив в верхнем окне редактора свойств все введенные нами объекты (с помощью удерживаемой клавишиCtrl и выделения объектов левой кнопкой мыши), в нижнем окне редактора свойств находим свойствоUnits (единицы измерения) и выбираем его щелчком левой кнопки мыши. После этого в средней части редактора в специальном окне слева появится свойствоUnits , а справа - окно выбора значений, в котором имеется раскрывающийся список с допустимыми значениями свойства. Для свойстваUnits необходимо выбрать значениеnormalized . Анологично надо задать значение свойстваFontUnits – единицы измерения размера шрифтов. Это обеспечивает изменение размера шрифта при изменении размера окна.

Для размещения надписей на кнопках и в области статического текста необходимо выделить соответствующий объект (либо двойным щелчком прямо в области рисунка, либо в верхнем окне редактора свойств) и в нижнем окне редактора свойств найти свойство String , и после его выделения вписать между кавычками требуемый текст (например, ’Пуск’ на соответствующей кнопке). Для задания надписей над каждым из окон вывода необходимо выделить соответствующее окно и вызвать редактор свойств8 , в нижнем окне которого надо найти свойствоTitle .

8 Редактор свойств можно вызвать не только с помощью кнопки на панели управления, но

и двойным щелчком на соответствующем объекте.