introduction fundamentals of guis - fh...
TRANSCRIPT
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
1
• Introduction
• Fundamentals of GUIs
Overview
• Screen Design : Navigation, Windows, Controls, Text, …
• Evaluating GUI Performance - Features
- Use
- Master: Calculations
Size, color, …
Except for a few slides (), this
chapter is intended for group
work while designing the
GUI project.
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
2
GUI History 11-12 Example: Car Rental
• … 1980 : Keyboard based
• > 1990
mixed keyboard and mouse
graphic elements need more screen
space and high resolution displays
• > 2000 : like 1990 + color
and different OS, internet
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
3
Interaction 15/16
Advantages Disadvantages
Powerful Commands must be memorized
Flexible Requires learning
Appeals to experts Intolerant to typing errors
Conserves screen space Difficult for casual users
• Command Line
Advantages Disadvantages
Familiar format Consumes screen space
Simplifies information entry Requires careful and efficient design
Requires minimal training Does nit prevent typing errors
• Form Fill-in See 1990
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
4
Interaction 15/16
Advantages Disadvantages
Utilizes recognition memory May slow experienced users
Reduces interaction complexity Consumes screen space
Aids decision making process May create complex menu hierarchies
Minimizes typing
Aids casual users
• Menu selection
Advantages Disadvantages
Natural Difficult to implement
• Antromophic Man-man-like interface incl. language dialogue,
touch, eye movements, …
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
5
Interaction 15/16
Advantages Disadvantages
Faster learning Greater design complexity
Easier remembering Window manipulation requirements
Exploits visual cues Requires icon recognition
Easy error recovery Inefficient for touch typists
(using keyboard without looking on it)
Provides context Increased chance for screen clutter
Immediate feedback
• Direct Manipulation
Replacement of keyed entry by pointing devices
such as mouse, touch screen, joystick, graphics tablet
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
6
Graphic Systems : Advantages 19 - 23
• Symbols are recognized faster than text
see e.g. toolbars, message boxes with information and warning icons
• Fast learning
• Faster use
• Easier remembering (images can be easier remembered than text)
• Exploits visual cues (visual thinking is faster than verbal expressions)
• Provides context
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
7
Graphic Systems : Advantages 19 - 23
• Fewer errors (incl. error boxes, UNDO should be implemented)
• Increased feeling of control
• Less anxiety („Sorgen‟) concerning use mainly for inexperienced users
• More attractive (relevant for skeptical users)
• May consume less screen space
• Replaces national languages
• Easily augmented with text information (Tool-tip-text)
• Low typing requirements (eliminate the need for typing skills)
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
8
Graphic Systems : Disadvantages 19 - 23
• Greater design complexity (symbol and screen design is very important)
• Inconsistency in technique and terminology
e.g. many different symbols etc. exist for the same task
• Not always familiar (as people are trained to numbers and words)
• Number of symbols are more limited by human comprehension than text
• Inefficient for “heavy” keyboard users
• May be inefficient for experienced users
• Not always the preferred style of interaction (not all users prefer graphics)
• May consume more screen space
• Hardware limitations like processing speed and graphic capabilities
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
9
Graphic Systems : Large vs. Small Screen
• Since smartphone and tablets become widespread, GUI design has to
be adapted to smaller screens, less keyboard input and finger touch.
• Many SW has dedicated versions for each device incl. PC
• In consequence, GUI look & feel is more challenging.
5” / 16:9 / 0.4 m
10” / 16:9 or 4:3 / 0.5 m
20” / 16:9 / 0.6 m
Typical screen size / aspect ratio / viewing distance
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
10
Graphic Systems : Same Task vs. Screen Size
Example: Office Application
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
11
Example: Office Application
Graphic Systems : Same Task vs. Screen Size
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
12
Example: Office Application
Graphic Systems : Same Task vs. Screen Size
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
13
Example: Smart Home
Graphic Systems : Same Task vs. Screen Size
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
14
Example: Smart Home
Graphic Systems : Same Task vs. Screen Size
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
15
Example: Smart Home
Graphic Systems : Same Task vs. Screen Size
Example for
commissioning
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
16
Graphic Systems : Same Task vs. Screen Size
• Modern GUIs can run on very different devices:
- Smartphone
- Tablet / Netbook
- Notebook
- PC Monitor
- TVs (some)
• Large variety of screen size: 5” … 55+”
• Portrait (smartphone, tablet) vs. landscape (tablet, notebook, monitor, TV)
• Touch vs. keyboard & mouse input
Challenge: Look & feel the same for “one” product”:
Adapt style guide & different GUIs with same icons, …
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
20
Fundamental Principles (I) 45 - 58
• Accessibility
Systems should be designed to be usable without modification by many users
• Aesthetically pleasing
Visual appeal by grouping and alignment, use of color and graphics
• Availability
Makes all objects available all the time (only good for large sized screens,
not recommended for smartphone and tablets)
• Clarity
An Interface should be easy to understand in terms of elements, text, functions
• Compatibility
Provide compatibility for tasks, similar products, adopt user‟s perspective
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
21
Fundamental Principles (II) 45 - 58
• Configurability
Permit easy personalization of configuration (OPTIONS)
• Consistency
The GUI should look, act and operate the same throughout all tasks:
- Same action should always have the same result
- The function of elements should not change
- The position of standard elements should not change
• Control
- Actions should result form user requests and performed quickly
- Permit users to customize GUI
• Directness
Available alternatives should be visible
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
22
Fundamental Principles (III) 45 - 58
• Efficiency
Minimize hand and eye movements (mouse keyboard, touch: )
• Familiarity
Use familiar concepts and language (real-world metaphors)
• Flexibility
A system must be sensitive to different needs of users:
Experience, knowledge, skills, personal preferences, …
• Forgiveness
- Tolerate common and unavoidable human errors
- Provide constructive messages when an errors does occur
• Operability
Ensure that the system can be used by everybody
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
23
Fundamental Principles (IV) 45 - 58
• Obviousness
A system should be easily learned and understood:
- What to look at
- What and when to do
- Why and how to do it
• Predictability
The user should be able to follow the progression of a task
(Do not bundle or combine action)
• Recovery
- A system should permit command to reverse or undo the action
- Ensure that work is never lost due to an error
• Responsiveness
The system must rapidly respond to an action including acknowledgement
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
24
Fundamental Principles (V) 45 - 58
• Safety
Protect the user form making mistakes, e.g. by reminders, list of choices, …
• Simplicity
Provide an interface as simple as possible:
- Present common and necessary functions first
- Hide things until they are needed
- Provide visual hierarchy
- Provide defaults
- Provide uniformity and consistency
• Trade-Offs
- User requirements have priority over technical requirements
- Final design is based on balancing often-conflicting design principles
(compare Fundamental Principles)
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
25
User Characteristics (I) 95 - 102
• Motivation
- Is the users attitude towards the system positive, neutral or negative?
- Is the motivation high, moderate or low?
• Stress level etc.
- Is the user patient or impatient?
- Shows the user some kind of stress?
- What are the users expectations – are they satisfied?
• User‟s physical characteristics
- Age distribution (classification) and gender
- Education (degrees, …)
- Handedness (87% right-handed)
- Disabilities
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
26
Speed of Interaction 100
Typical values for keyboard Words per minute
Reading
Prose text > 200
Listening 150
Speaking 100
Typewriting
Fast typist > 150
Average typist 60
Two finger typist 40
Handwriting 30
Computer Transcription 30
Copying text 20
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
27
Good Interface & Screen Designs … 127
• Reflect the capabilities, needs and tasks of the users
• Are adapted to hardware
• Achieve business objectives for which it is designed
Good interface design goals: Reduction of
• Visual work
• Intellectual work
• Memory work
• Motor work (mouse, keyboard)
• Minimize burdens imposed by the technology used
Summary of slides
“Fundamental Principles”
Take care of them for
your case studies.
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
28
How to Discourage the User 128
• Unclear caption, wording, …
• Improper objects and graphics
• Misleading headings
• Unnecessary or irrelevant information
• Requests that require backtrack or thinking about previous stuff
• Poor layout of screen objects incl. their placement
• Poor legibility
Summary of slides
“Fundamental Principles”
Take care of them for
your case studies.
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
29
Interaction Starting Area & Arrangements 135
• Provide the starting point in the screen‟s upper-left corner
• Focus user attention on the most important parts of the screen
• Divide information (elements) into units that are meaningful (grouping)
• Provide an ordering of elements including prioritization
• Possible ordering schemes:
Conventional, sequence of use, frequency of use, function, importance
• Form groups that cover all possibilities
• All information that must be compared is visible at the same time
• Only information which is relevant to the user‟s tasks is presented
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
30
Examples of GUIs : Balance & Symmetry 142 - 150
• Balance / Symmetry
• Instability / Asymmetry
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
31
Examples of GUIs : Sequentiality 142 - 150
• Sequentiality
• Randomness
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
32
Examples of GUIs : Simplicity 142 - 150
• Simplicity
• Complexity
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
33
Examples of GUIs : Predictability 142 - 150
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
34
Screen / Windows
• Arrange all necessary object, elements etc. on one screen (if possible) 181
• Prevent scrolling 178
• If more than one screen is used the user should not have to remember
things from one screen to the next 181
• Arrange object in a way that user interaction including reading) starts
in the top left corner
• Windows should always have a title which is descriptive and unique 186
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
35
Screen / Windows : Arrangement of Screen Tasks 298
Sequential : no
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
36
Screen / Windows : Arrangement of Screen Tasks 296
Sequential : yes
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
37
Screen / Windows : Arrangement of Screen Tasks 296
Sequential : yes – optimized by grouping and rearrangement of checkbox
Main Files
Update with changes
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
38
Arranging Windows 397/8
• Overlapping
No window should ever completely hidden !
• Cascading
• Tiled
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
39
Components of Windows 391
Frame
Title bar*
Menu bar
Status bar
Toolbar
Window state
There are (per definition) primary and secondary windows:
- Primary: see above
- Secondary: Common dialogs, message boxes, pop-up windows, …
User area
*: Customization
possible
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
40
Primary Window 400
• Proper usage
- Used to represent an independent application
- Menu, toolbar, status, …
- Divide independent functions into separate primary windows
- Arrange unrelated functions in one window
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
41
Secondary Windows 401
• Proper usage
- For performing supplemental actions
- For presenting frequently or occasionally used windows
- Use objects of operating systems which are well known to the user
• Important Guidelines
- Should typically not appear in the toolbar
- A secondary window should not be as large as the primary window
Common dialogs, message boxes, pop-up windows, …
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
42
Secondary Windows : Common Dialogs 416
open save
color
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
43
Secondary Windows : Message Boxes 411
• Proper usage
- Use for presenting brief messages
- Use for requesting specific actions
- Use for tasks that take are easy to be done
• Important Guidelines
- Should typically contain text which can be understood
- Should have icons for emphasizing
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
44
Secondary Windows : Input Boxes 402
• Proper usage
- Use for input of numbers or text
- Use rarely
- Default input can be set in order to minimize user input
• Important Guidelines
- Should typically contain text which can be understood
- Input data should be verified before processing
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
45
Sizing and Placing Windows 415/6
• Number of windows
- Minimize number of windows needed
- Too many windows can be confusing
• Sizing windows
- Windows should be large enough to present all information
- If a window is too large, determine if all information is needed
and/or related or use other objects which are smaller
- Optimum windows size about 12 lines for text
- Avoid scrolling
- Main windows can/should be maximized (full screen)
• Placing windows
- Don‟t hide other windows completely
- Cascading is recommended
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
46
Elements of GUIs : Menus 308 ff
Hierarchical/sequential structure recommended, additional toolbar 312
Level 0
Level 1
File
Open
Save
Options
O1
O2 >> Text
Number
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
47
Elements of GUIs : Menus 308 ff
- Language and consistency acc. user expectations
- Display all or only relevant alternatives
- Cascade menus if necessary
- Delete or grey out inactive items
- Mark active selections
- Maximum of 6 without grouping or up to 20 with grouping (line separators)
- Order acc. importance or alphabetically
- Use keyboard accelerators (F1 for help, CRTL + C for copy, …)
- Order menu items in a useful order (important first, alphabetically, …)
Organisation & Proper use
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
48
Elements of GUIs : Data Field (Text Boxes) 461
• Description: Rectangular shape, single or multi-line
• Purpose: Text to enter (proposal can be displayed)
• Advantages: Flexibility, familiar, little space, rapid reading
• Disadvantage: Requires keyboard, input must be remembered,
not fail save e.g. for databases
• Proper usage: Data that can‟t be categorized or selection is not possible,
text height and font appropriate, black text on light background
can be structured to requested input, e.g. phone number:
466 / - Phone (area / line – direct)
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
49
Elements of GUIs : Command Button (Toolbar similar) 445
• Description: Rectangular shape, label as text or graphics
• Purpose: Start action
• Advantages: Always visible, faster than menu, can be logically ordered
• Disadvantage: Consumes screen space, requires often pointing device
• Proper usage: Size as large as reasonable, use not more than 6 buttons
on a window, arrange buttons logically, use enable and
disable, use descriptive text
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
50
Elements of GUIs : Checkboxes 478
• Description: Small circles filled if selected and label, only one can be chosen
• Purpose: Selection of only one items (compare to Check Box)
• Advantages: Easy to access, easy to compare, preferred by users
• Disadvantage: Consumes screen space, limited number of choices
• Proper usage: For settings or attributes, non-exclusive choices, good for
choices that are discrete, small and fixed in number, choices
which are not easy to remember, choices that never chance
in content
Vertical and horizontal arrangement
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
51
Elements of GUIs : Radio Buttons 468
Vertical and horizontal arrangement
• Description: Small circles filled if selected and label, only one can be chosen
• Purpose: Selection of only one item
• Advantages: Easy to access, easy to compare, preferred by users
• Disadvantage: Consumes screen space, limited number of choices
• Proper usage: For settings or attributes, non-exclusive choices, good for
choices that are discrete, small and fixed in number, choices
which are not easy to remember, choices that never chance
in content
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
52
Elements of GUIs : Combo Box (Drop down) 504
• Description: Rectangular box offering a list of choices
• Purpose: Selection of one (or more) item when space is limited
• Advantages: „Unlimited‟ number of choices, save screen space, shows all
• Disadvantage: Requires action to display list, long lists require scrolling
• Proper usage: Use when screen space is limited, text can also be typed,
highlight selected choice
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
53
Elements of GUIs : List Boxes 493
• Description: Permanently displayed box with a list of attributes,
selection by mouse possible, no text entry
• Purpose: Displays a collections of items
• Advantages: „Unlimited‟ number of choices, elements can be added
• Disadvantage: Requires action to display list, long lists require scrolling
• Proper usage: Items which are not frequently used, items large in number,
highlight selected choice
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
54
Elements of GUIs : Data Input Examples
Things to evaluate: - User input load
- Screen space
- Data to remember
- Database consistent input (no typing errors, …)
Manual registration of attendees at conference etc. by staff
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
55
Elements of GUIs : Data Input Examples
Type Description Good Issue
A Text Box only
B Radio Buttons
and Text Boxes
C List Boxes and
Text Boxes
D
Drop Combo
Boxes and
Text Boxes
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
56
Elements of GUIs : Scroll Bar, Slider 517
• Description: Bar as scale with buttons, optional text boxes, selected by
mouse, drag or click slider, horizontal and vertical arrangement
• Purpose: Setting of a numerical value without keyboard
• Advantages: Visualization of setting, easy to use, better than keyboard input
• Disadvantage: Consumes more screen space than text input, mouse needed,
can be less precise than text (e.g. 15.6789)
• Proper usage: To set an attribute, limited range of possible values
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
57
Elements of GUIs : Progress Indicator
• Description: Rectangular bar that visualizes the progress performed
• Purpose: Provides feedback of processing of a lengthy operation
• Advantages: Better than hour glass
• Disadvantage: Needs some screen space
• Proper usage: Portion of process completed, can be combined with numbers,
can be used in an extra frame to save screen space or
in status bar
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
58
Elements of GUIs : Tabs 521
• Description: Window containing tabbed dividers, navigation between pages
• Purpose: Presentation of information that can be logically organized
into pages or sections
• Advantages: Resembles sheets of paper, effective organization
• Disadvantage: Visually complex
• Proper usage: To present discrete, logically structured information, tab name
should be short & descriptive, do not use for sequential steps
user is familiar with tabs as options settings
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
59
Elements of GUIs : Icons, Index, Symbol 653
• Description: Square graphics, 16 x 16, 32 x 32, 48 x 48, 256 colors
• Purpose: Visualization and icon to click
• Advantages: Saves screen space, graphics more intuitive for users
• Disadvantage: Often not easy to design
• Proper usage: Use common icons, consider cultural and social aspects as
cross, body, …
Now: Draw icon for “save” on paper
Drawings will be clustered and discusses.
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
60
Elements of GUIs : Tool Bar 614
• Description: Icons that can be selected
• Purpose: User interaction by clicking on icon, additional to menu
• Advantages: Speeds up user interaction
• Disadvantage: Only effective with proper icons, consume screen space
• Proper usage: Excerpt of most often used menu items, icons must be
easy to understand and to remember
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
61
Elements of GUIs : Status Bar 614
• Description: Context sensitive messages related to object with focus or
processing tasks
• Purpose: Provides explanatory information, describes use of objects
• Advantages: Easies user information, saves screen space compared
to labels, …
• Disadvantage: Only effective with user training
• Proper usage: Do not use for essential information
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
62
Elements of GUIs : Common Dialogues
• Description: Series of standardized windows provided by OS
• Purpose: User interaction for open, save, print, …
• Advantages: Users are trained to common dialogues, no SW development
• Disadvantage: In some cases not very effective
• Proper usage: Use meaningful adaptation like extension filters for files
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
63
Elements of GUIs : Palette 488
• Description: Series of graphical elements
• Purpose: Selection of one option
• Advantages: Picture aid, easy to compare
choices, consumes less screen
space than text
• Disadvantage: Limited number of choices or use „>>‟, difficult to organize
for scanning efficiency, requires meaningful graphical
representation
• Proper usage: Setting of attributes, properties or values, exclusive choice,
good for discrete elements which are limited and variable in
number, not easy to remember, do not use when text is
clearer than icons
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
64
Elements of GUIs : Controls Selection 549
Choosing the best control for certain tasks and screen space conditions:
Task Best control Limited space
Exclusive choice Radio buttons Drop down list box
Not exclusive choice Check boxes Multiple selection list
box
Setting a value within
a range Bar Text box
Executing an action Command button
or icon Menu
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
65
Elements of GUIs : Data Presentation 227
• Display information always with labels or headings, use also units
• Display information in a useable format e.g. phone numbers, …
+49 7231 28 - 5
• Format information as commonly used, support format in input box
Time: 10:32:15, credit card: 1234 5678 8901 2345
• Break long strings into 3 or 4 digits with blanks in between
see credit card, phone number, …
• Align data into columns
• Organize for top-to-bottom scanning
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
66
Elements of GUIs : Data Justification 228
• Left justify text formats Name: John Doe Name: John Doe
City: Munich City: Munich
• Right justify numeric data Charge: 102.99 Charge: 102.99
Tax: 1.45 Tax: 1.45
• Create a data „ladder‟ Animal: Cat Animal: Cat
Age: 8 Age: 8
Number: 1234 Number: 1234
State: Ge State: Ge
• Create „data statements‟ Cats: 12 12 cats
Dogs: 8 8 dogs
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
67
Elements of GUIs : Data Justification 228
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
68
Example for Numerical Information
Temperature ‚+„ or ‚-„ ?
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
69
Elements of GUIs : Data Representation 424
GUI proper
made but
issue on color
for select and
non-selected
choices
What is
really
selected ?
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
70
Elements of GUIs : Graphical Data Presentation (I) 263
• Graphs are suitable for fast and easy comparison of data
• When charts & graphs? < 3 numbers: words ; 3 – 10: table ; > 5 graph
• Line graph - not more than 5 curves
- use adjacent labels, at least legend
- use solid lines for actual data, dotted for projected
• Bar charts - horizontal or vertical
- vertical typically over time
- horizontal: top information more relevant
• Pie charts - data must add to 100%
- use less than 5 segments, no segment less than 5%
Major types of charts and graphs (see MS EXCEL)
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
71
Elements of GUIs : Graphical Data Presentation (II) 263
• Graphs emphasize data
• Show data not design variation
• Provide proper context for data interpretation (see example)
• Use of axis, scale, labels, legends, units in a proper way
• Fill entire area of graph with data
• Use the appropriate graph (scatter, line, pie chart, …)
• Do not overload graphs with multiple data, a maximum of 5 is recommended
• Use easy to distinguish line coding
• Data lines etc. should be the most visible, use thinner lines for axis and grid
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
72
Elements of GUIs : Graphical Data Presentation (III) 263
Example for proper context for data interpretation
Turn over /B$
2
1
0
2005 2006
Before, after ???
Turn over /B$
2
1
0
2003 2004 2005 2006 2007
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
74
Elements of GUIs : Words and Text 565, 628
• Choosing proper words
- Use short & familiar words in simple language,
- Use only complete words and positive terms
- Use plain and simple proportional fonts with point size of 12 - 14
- Do not use jargon, abbreviations, …
• Sentences and messages
- Must be brief and simple, limited to about 20 words per sentence,
- Must be understandable for all users (education, qualification, …)
- Line length 75 – 100 characters, use proper line spacing
- Emphasize text by position, boxes, bold font, capital letters, …
• Message Boxes
- Title bar must clearly provide the source of the message
- Text must be clear (s.a.) and limited to about 2 to 3 lines
- Icon is often helpful
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
75
Elements of GUIs : Summary
• GUI design is most important to MMI
• Proper GUI saves (less user time, acceptance) money
• User should never „lost‟, HELP is strongly recommended
HELP (or information) via Status Bar, Tool Tip Text, Help file, …
• Response time is mission critical
• If applicable refer to corresponding cultures
• System limitations have to be „compensated‟ by GUI
• Evaluation (see next chapter) is necessary
D I S P L A Y L A BPFORZHEIM UNIVERSITY
D I S P L A Y L A BPFORZHEIM UNIVERSITY
Graphical User Interface: Screen Design
Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / Nov 2016
Bachelor IT
76
Group Work : Case Study V (Bachelor)
Topics for presentation, GUI prototyping and final documentation
- Check your GUI for consistency and recommendations of
“good screen design”.
- Update your GUI and prepare 2 slides: “before after”
- Next lecture: Presentation of
- 1 slide for introduction of case study
- Case Studies IV (~3 slides)
- Case Studies V (~2 slides)
- Updated prototype of your GUI (~ 3 slides)