Graphical User

Interfaces
Graphical
User
Interfaces
Enterprise Application Development

Enterprise Application Development

Unit Code 425

Agenda
Graphical User Interfaces
History of the GUIs
Designing GUIs
Swing Architecture
GUI Elements Guidelines
User Interaction Changes in other domains
HCI Human Computer Interaction
Latest Developments

The GUI
GUI is the bridge between the interactive program
and its user.
Enterprise / Business applications (ex: SAP)
Office applications (ex: Word, Excel)
Scientific applications (ex: Matlab)

Productivity of the user attained through working

with the
application greatly depends its GUI
A proper GUI design directly improves usability of
the
application, hence improves productivity and
GUI design is essential and critical for
throughput.A good
a successful Interactive Application.

HISTORY OF THE GUIS

Evolution
In the oldest days (1950s) Batch Processing
Systems
Input through punch cards
Output through printouts and lights
Taken hours / days to process

Command line interfaces

Entering text lines on a terminal with keyboard
Terminals connected to mainframe through Telnet
Long learning curve, Possible tasks are narrow in scope

Graphical User Interfaces

WIMP:

Windows, Icons, Menus and a Pointing device paradigm

Windowing System:
Handles hardware: graphics, pointing device and other input
devices
Window Manager: Facilitates interaction between Applications,
Widows and the Windowing System
7
Modern PCs follow this paradigm (Vista, Unix X-Windows)

History of GUIs
Vannevar Bush
Memex

An Imaginary device (1930s)

2 touch- screen graphical displays
A keyboard
Scanner

History of GUIs
Vannevar Bush
World War II

Designed to calculate artillery firing tables

ENIAC (Electronic Numerical Integrator and Computer)

History of GUIs
Douglas Englebart (father of GUI)
Paper: Augmenting the Human Intellect
Augmentation Research Center
NLS (oNLine System) Creation of digital libraries;
storage/retrieval of electronic documents using hypertext

10

History of GUIs
The Mother of All Demos
90 minute multimedia presentation at

Fall Joint Computer Conference, at the Convention Center

in San Francisco, 1968 December 09
Introduced:
Mouse
Interactive Text (Concept of present day hyperlinks)
Videoconferencing
Teleconferencing
The first GUI
Live video conference with staff members 30 miles away.
Way ahead of time, many did not recognize, some didnt
even believe!
Even entering text on a terminal was considered
revolutionary back then.
11

History of GUIs
Xerox Alto computer (1973)
First GUI in a commercial computer
Introduced Windows-Icons-Menus and Pointer device
(WIMP) paradigm
First commercial Mouse

12

DESIGNING GUIS

13

Designing GUIs
The golden rule is that there are no golden
rules.
George Bernard Shaw
This is the first rule

14

Designing GUIs
Rule 1: Know the user
Design for what the user
knows, not what you
know.
Do not get carried away
trying to keep up with the
competition by mimicking
trendy design styles or
adding new features.
By focusing on your user
first, you will be able to
create an interface that
lets them achieve their
goals.
15

Designing GUIs
Rule 2: Let user take control
Application may have so many input
combinations.
Prohibit only logically invalid combinations.
Thinking of and testing all logically valid
combinations can be tedious. But prohibiting
such restricts users freedom
This damages usability and desirability

16

Designing GUIs
Rule 3: Adhere to common Patterns
Too many bright ideas end up being good
features
Too many good features can turn out being bad!
Facebook, Gmail, Twitter

17

Designing GUIs
Rule 4: Exploit users intuition whenever
possible
Depending on what user already knows, he may
be able to make a decision easily and accurately.
If user can guess a symbol, you dont have to tell
him aloud!
Ex: Think of the following buttons in Microsoft
Word:

18

Designing GUIs
Rule 5: Let user recognize instead of
recall
People can recognize far way easily than
recalling.
Whenever the choices are limited in
number, provide them in a combo box
instead of letting him to type in a text field.
This would eliminate both the risk of
typographic errors and the reluctance (fear)
of it.

19

Designing GUIs
Rule 6: Minimize vocabulary and be
consistent on words
We interact with the user in words, be it the
data itself, or the text on the labels, the text on
the buttons, information messages, etc.
Do not use two synonyms to indicate the
same thing in different places
Try to minimize the vocabulary
Use consistent patterns in information /
warning / error messages
Using different words in different places to
identify the same thing reduces consistency.
This leads to confusion and ultimately
frustration for the users.
20

Designing GUIs
Rule 7: Make application behavior as
consistent as possible.
Try to exploit similarities in different operations
in your application.
Whenever they are similar, implement their
behavior similarly so that user can reuse his
knowledge
Also increases user confidence since he can
predict the next step and succeed.
Ex: Changing customer address on a
Purchase Order and a Shop Order.

21

Designing GUIs
Rule 8: Dont keep the user waiting without
letting know
Never keep the user waiting till a long operation is
complete without letting him know that we are
aware of his patience.
If it takes only a couple of seconds, display the
Hourglass Cursor during the wait.
If it takes longer, display a Progress Bar with a
message describing what is being done at the
moment.
Never ever keep a button pressed till an intensive
operation is complete after the user has released it.
Use multithreading!
22

Designing GUIs
Rule 9: Be very short and very clear on
text
Writing longer messages or descriptions
makes users give up reading half way.
Be short-and-sweet when writing text,
especially when it comes to description labels
and messages.

23

Designing GUIs
Rule 10: Provide traceable paths
A user may come across numerous windows
and suddenly say where am I now? How did I
get here?.
Provide suitable, descriptive titles to windows
and dialog boxes. It helps users follow the
paths when they go across them.
Use the case of the words consistently.

24

Designing GUIs
Rule 11: Dont forget the keyboard
Advanced users use keyboard than they use
the mouse.
So make sure
tab orders are correct and
proper keyboard - accelerated GUI elements
(mnemonics) are used.

Try to provide complete and equal level of

keyboard and mouse support.

25

Designing GUIs
Rule 12: Be consistent with Presentational
Model
Make sure the look and feel of your application
is consistent throughout all windows / dialog
boxes in your application.
Consistency helps preserve the identity of the
application.

26

80/20 Rule

80% of softwares usage involves 20% of its features.

Minimize or remove less important functions.
Optimize 20% of the features.
Toolbar, icons, etc.
27

3 Click Rule
A user of a website should be able to find any
information with no more than three mouse clicks.

28

SWING ARCHITECTURE

29

Java GUI Libraries

Java came with AWT Abstract Windowing
Toolkit a set of classes to build GUIs
A subsequent addition was Swing class library
built on top of AWT providing features necessary
to develop sophisticated user interfaces.
GUI components labels, buttons, checkboxes,, dialog
boxes, windows
Java 2D API Graphics, images, animations, effects
Pluggable Look and Feel Dynamically change look and
feel
Data transfer Clipboard, drag & drop
Internationalization culture specific GUI elements &
layouts
Accessibility support for software for people with
disabilities
Undo support built in support for undo & redo operations
Flexible deployment Applets, Java Web Start

30

Events
GUIs are inherently event driven.
Java does not provide language level support for
events
Event behavior is attained
through Observer
EventListener
eventListeners
* void eventOccurred(EventObject);
design pattern
EventSource
void addListener(EventListener){}
void removeListener(EventListener){}
void fireEvent(){
for each registered event listener do:
call eventOccurred(eventObject).
}

MyListener
void eventOccurred (EventObject){
// handle the event
}

31

Swing Threads
A GUI needs multithreading in order to make GUIspecific operations independent of the application
logic in their execution.
Enables implementing GUIs that never freeze.
3 thread types:
Initial threads
Event dispatching thread
Worker threads (a.k.a. Background threads)

32

Swing Threads
Initial threads
Every program has a set of threads where the application logic
begins
In a standalone application, only one such thread: main
thread
In applets the initial threads are the ones that construct the
applet object (threads that started init() and start()).
When a Window / JWindow / Frame / JFrame was shown first,
the Event Dispatching Thread will start and listening to
event dispatch requests.
After making the call, the initial thread (s) may exit

Event Dispatch Thread

Responsible of dispatching events and updating the GUI.

Not safe to do GUI changes from other threads
These events are primarily update events that cause user
interfacecomponentsto redraw themselves, or input events
frominput devicessuch as the mouse or keyboard

33

Swing Threads
Worker Threads (a.k.a. Background Threads)

Introduced from Java SE 6

Used to execute tasks that require longer durations
Implemented by subclassing the javax.swing.SwingWorker

It enables the application to have the long tasks executed on a

different thread. The application handles small tasks, such as button
clicks, by one thread and the long taking tasks by another thread. 34

GUI ELEMENTS - GUIDELINES

35

GUI Elements - Guidelines

Discussing some guidelines to follow in a good
design
Adopted from the proposed guidelines for
Windows Vista.

36

GUI Elements - Guidelines

Control Labels
Labels are used to label user controls
Always align labels with the associated control.

Keep labels brief !

Prefer specific label over generic ones.
Idea is, user shouldnt have to read anything else to
understand
Bad
Good
the label
37

GUI Elements - Guidelines

Control Labels
Omit instructional verbs common with the control
type
Bad

Good

38

GUI Elements - Guidelines

Buttons

A button represents an action. By pressing a button, user performs

the action.
Indicate the action as briefly as possible. Do not mention already
known information.
Bad
Good

Use ellipses if additional data is required to perform the action

- Will display a dialog box to gather more data

before printing
settings

- Prints a single copy of the document using default

Use a minimum width and a standard height. For a given window,

make buttons the same width. If this is not possible, minimize the
number of different widths.
If a dialog box has multiple command buttons, stack them at the 39
right side or on a single row at the bottom

GUI Elements - Guidelines

Buttons
If a button has a particular functional relationship with another
control, place it in a position to reflect the relationship.

40

GUI Elements - Guidelines

Dialog Boxes

Use the standard dialog boxes whenever possible, instead of creating your own
ones.

Dont use OK/Cancel to a Yes/No question

If saying either Yes or No ends up in a different place, provide Cancel to cancel
the whole thing.
Use icons to emphasize the purpose of the message.
Indicates you are giving user an information. Use OK button with it.
Indicates you are asking a question the user should make a choice.
Either you provide an information regarding some serious situation (mostly, application
errors), or you are asking a question where a wrong decision can be damaging.
A critical error (system error) or (very rarely) a question where a wrong decision can be
catastrophic (ex: dropping a database / formatting a hard disk)

41

GUI Elements - Guidelines

Messages
Prefer positive phrasing: use do instead of dont

However, it is ok to use dont if the scenario is

the user is commanding us (ex: Dont show this message
again)
42

GUI Elements - Guidelines

Menus
A menu is a list of commands or options available to the user in the current
context

Drop down menus are menus displayed on-demand on mouse click or

hover. Efficient way to save screen space.
A submenu is a secondary menu displayed on-demand from within a menu.
A menu item is an individual command or option within a menu.
A menu bar is where menus are categorized. Typically located at the top of
the body of the window
A popup menu drops down when user right-clicks on the object or the
window area where a context menu is available
43

GUI Elements - Guidelines

Menus
When to use a Menu Bar?

The window is the primary window

There are many operations
There are multiple categories of operations
The majority of the menu items apply to the entire
program and primary window
Menu Bars Usage
Dont introduce a menu if it has only 3 or less number of
categories.
Consider alternative light weight solutions such as
introducing buttons or a toolbar.
Dont introduce more than 10 menu categories.

44

GUI Elements - Guidelines

Menus
When to use a Popup Menu?
The set of commands apply only to the particular group of
objects or area
The menus are redundant
Target users are familiar with popup menus

Menu Categories
Use simple word names for menu categories
For programs that create/edit documents, use standard menu
categories
(ex: File, Edit, View, Tools, Help..)
For other types of programs, try to categorize menus by their natural
categories based on the programs purpose and the way users think
of their tasks and goals.
Within the menu, put the groups in their logical order / order of
importance.
Use task-oriented menu categories over generic ones. They are easier
to find.
45

GUI Elements - Guidelines

Menus
Disable menu items / submenu items if they dont
apply in the current context, instead of removing
them.
You may use Icons, Check Boxes and Radio Buttons
as menu items.

46

USER INTERACTION
CHANGES
47

User Interaction Changes in other

domains
Desktop Applications
Discussed

Web Applications
Based on a page container called Web Browser
Fewer user operations
Navigating through hyperlinks and address bar
Back and forward buttons

Web page designing very different from Desktop GUI

designing
Heavy emphasis on Graphics and Images
Recent developments
Diverging from page-for-request model since the arrival of
Ajax
Convergence towards desktop applications with
sophisticated web applications
(ex: Facebook, Yahoo mail, Gmail)
48

User Interaction Changes in other

domains
Mobile Applications
Constrained programming environment
Limited CPU / Limited memory
Small screen size / Small or no keyboard
Pointing device stylus with a touch screen

Constrained user environment

Used by mobile users

No conditions to concentrate as much as can be done in
front of a PC
Used in short durations

GUI aspects

Program constructs provide cut-down user controls

(Java ME) Ex: Text Boxes, Commands, Labels, Displays

Special controls

(Java ME) Ex: LCD UI, Game canvas

GUI is task oriented and tend to become wizards

Each task involves small number of screens (steps), each
with small number of GUI elements
49

HCI - HUMAN COMPUTER

INTERACTION
50

H C I Human Computer Interaction

Human-computer interaction is a discipline
concerned with the design, evaluation and
implementation of interactive computing
systems for human use and with the study of
major phenomena surrounding them.

Computer Science
Cognitive Psychology
Social & Organizational Psychology
Ergonomics
Artificial Intelligence
Linguistics
Philosophy, Sociology, Anthropology
51

LATEST DEVELOPMENTS

52

Latest Developments - Interaction

Better understanding of user behavior more
elaborate GUI components
Ex: Vista / Windows 7
Ribbons
Prompts and Search Boxes
Enhanced progress bars and Meters

53

Latest Developments - Interaction

Better understanding of user behavior more elaborate GUI
components
Advanced User Interaction
Microsoft Surface
Communicate by touch-only
Wii Remote
Capturing complex hand movements with high precision

Check out MITs sixthsense Project @ http://www.pranavmistry.com/projects/sixthsense/

54

Latest Developments - Interaction

Microsoft Surface Demo Video

http://www.youtube.com/watch?v=m-D2lQxsafk&feature=related

55

Latest Developments Touch Devices

Microsoft Kinect
A motion sensor for Xbox 360 gaming console
Natural User Interface (NUI)
Interact without any intermediary controller
Recognizes motion and voice
Motion is sensed by projecting large number of IR beams &
reflection
In addition to gaming, it has been used for digital signage,
virtual shopping, education and in health sector.

56

Latest Developments Touch Devices

Latest devices such as iPhone, iPad, Android based
devices extend interaction capabilities:
Touch screen
Multi touch : interaction by gestures
Gyroscope and accelerometer:
pitch roll yaw / shake gestures

More intimate user experience

More direct user experience
i.e. user directly controls content
but not the controls that intern
control the content
Higher efficiency / throughput
57

Latest Developments Touch Devices

Very high resolution screen
Ability to provide more content (i.e. information) on screen
Eases up limitation of screen real estate

Panning screens
More natural way to navigate through multiple steps of a process
More natural way to browse information
Process

Process:
Step 1

Process:
Step 2

Process:
Step 2

Process:
Step 2

Ex:
Viewing a slide
show
Reading an eBook
Viewing a photo
album
Entering a
purchase
requisition
58

Latest Developments Touch Devices

Panning Screens
More natural way to present content in a spatially distributed fashion
More natural way to consume content

59

Latest Developments Touch Devices

Augmented Reality
Bind information right onto the objects you see and feel!
Camera video stream is
captured & directed to
screen real time
GPS / gyroscope is used
to get current location
and direction
Information has been
stored against locations
Available information of
locations covering
current view is shown

60