M S Man Machine Interface: Introduction E I D I S P L A Y

Blankenbach / Pforzheim Univ. / www.displaylabor.de / IT / GUI / March 2013

D I S P L A Y L A BPFORZHEIM UNIVERSITY


Man Machine Interface: Introduction M S E I

1

• Introduction

• Fundamentals of GUIs

Overview

• Screen Design : Navigation, Windows, Controls, Text, …

• Evaluating GUI Performance

- Some basics

- Vision and ergonomics

- Displays and readability





2

Basic Requirements for GUIs

• Actions steps (“Does the user know what to do?”)

• User Parameters

- Vision (resolution, character size, use of color, …)

- Displays (resolution, size, requirements, ...)

• Knowledge about users (see §Fundamentals of GUI)

• Hard- and software for GUI (see §Fundamentals of GUI and §Screen design)

HMI vs. GUI

• HMI is more dedicated to the whole system incl. I/O and e.g. real time

• GUI is a subset of HMI which concentrates on screen design and evaluation





7 Action Steps acc. Donald Norman

Human Action Cycle

Forming a goal

Translate goal to task(s)

Planning the action (sequence)

Executing the action (sequence)

Perceiving what happened

Interpreting the outcome

What happened what was intended

Adapted from D. Norman :

"The Design of Everyday

Things”, Basic Books,1988

3





7 Action Steps : Gulf of Execution

Insufficient idea of concept

To little idea of action

Insufficient way to function(s)

Human Action Cycle

Forming a goal

Translate goal to task(s)

Planning the action (sequence)


4





Human Action Cycle

7 Action Steps : Gulf of Evaluation

Change not shown

or not readable

Visualisation unclear

No relationship to goal

Perceiving what happened

Interpreting the outcome

What happened what was intended


5





GUI Overkill

(Example from M. Dahm: Basics of Man - Computer – Interaction, PEARSON)

6





Some Consequences

• Should modern GUI devices be so complicated ?

- Long term and exhausting adaptation training

- Even technical freaks use often only a few functions

- No incentive to buy a new product if the features

of the old one aren‟t fully used

- Aging society incl. workers

No !

• 2 Types of GUIs – Definition by Frequency of Use

- Frequent: Trained users like operator, PC standard SW users,

- Rare: „Untrained‟ using web pages, public information systems, ...

consequences of bad GUI design: system is not used

critical for commercial applications incl. websites

(easy-to-use GUI will become favourite)

7





8

Basics Consequences for GUIs

• Workplace or environment sets ergonomics

• Vision sets GUI objects (size, color, …)

• Display resolution sets number etc. of GUI objects

• Display has to show the GUI in an adequate quality (CR, ambient light, …)

• How many different GUIs can be handled ?

How many do you use frequently? 10s, 100s, 1,000s … ?

• Different GUIs at home and office

• Some GUIs are more safety critical (power plant, aircraft, …)

as others (advertisement in web – but checkboxes for legal aspects)

See next

sections





9

• Introduction


Overview



- Some basics


- Displays and readability

Basics

see MM 2

The basic ergonomic rules are also

great for presentations (PPT)!





10

Ergonomics

Other unit in use: Pixel per Inch (ppi) (1“ = 25.4 mm)

Eye resolution: 0.15 mm / m for pixels

170 ppi for 1 m viewing distance

Useful ppi is about 50% … 67% of this value: 100 ppi 1‟ 0,25 mm / m

e.g. APPLE retina display IPHONE : 326 ppi (78 µm) ; IPAD 3: 264 ppi

Viewing

Distance

/m

~ PPI from

Eye

Resolution

Eye Res.

Pixel Size

/mm

Useful

PPI

Useful

Pixel Size

/mm

Typical

Examples

0,3 510 0.08 300 0.08 Smartphone

0,5 340 0.13 200 0.13 Tablet, PC monitor

1 170 0.15 100 0.25 “Reference”

2 85 0.5 50 0.50 TV > 50”

10 17 3 10 2.50 E-Signage

Pixel size





11

Pixel Size & Pixel Pitch

Source: WIKIPEDIA

Typical observer distance

Reasonable resolution (cost & feasibility):

100 ppi per meter observer distance

0.3 m (300 ppi)

Recommended FHD-distance:

1.5 … 2x diagonal size (3D < 1.5x)

0.6 m (170 ppi)

2 m (50 ppi) TV, e-signage





12

Font Size (Pixel) vs. PPI

Higher resolution (here dots per inch [dpi = ppi] like printing)

and font resolution increase readability. Font resolution

1 2 3 4

1 2 3 4 5 6

Reasonable:

- Font resolution > 7 x 5

- > 100 ppi for monitor use

Font height:

9 pixel

interpolated

Monitor @ 0.5m





Character Height Number of Colours

12 mm / m

5 mm / m

0 1 2 3 4 5

40

30

20

10

0 Number of colours

Minimum Character Height / „ (arc)

Numerical examples for 1 m observer distance

Reasonable: 22‟ for one color 6.5 mm per meter observer distance.





14

Color Combinations

Recommended color combinations = Good recognition

Background

Color

Foreground Color

Black White Ma-

genta

Blue Cyan Green Yellow Red

Black + + + + +

White + + + +

Magenta + +

Blue + + +

Cyan + +

Green + +

Yellow + + + +

Red + +

Many GUI recommendations are as

well good for presentations!





15

Summary : Vision & Ergonomics

• Vision resolution ~ 1‟

• Recommended pixels per inch: 100 ppi for 1 m observer distance

1‟ 0,25 mm / m

•Recommended character height: 22‟ @ 1 color: 6.5 mm / m

• Character height should increase with colors used

• Character font resolution > 7 x 5 pixel

• Take care of recommended fore- and background color combinations

• Colored text readability depends on positive or negative contrast





- GUI for consumer devices like smartphone, PC software, internet pages

- GUI for kiosk applications like vending machines

- GUI for dedicated devices like in cars, measurement devices (e.g. osci)

- GUI for date mining (IT applications)

- GUI for automation

Topics:

- Determine typical observer distance

- Determine number of text colors used for GUI

- Calculate font size height (mm)

- Calculate pixel pitch from font size height for 12 x 6 pixel font

16

x groups

Group Work : Case Study





17

• Introduction


Overview



- Some basics


- Displays and readability Basics

see MM 2





Ergonomic (Display) Factors and Their Interaction

Viewing distance

User

Environment

Display

Input devices

18

Contrast

GUI element size

Colour

Reflections





19

Input Devices

• Pushbuttons & Knobs Size needed*

- 1 ... some ~ 1 cm² per button

- Softkeys ~ 1 cm² per button

• Numeric Keypad ~ 4 cm x 5 cm

• Keyboard ~ 35 cm x 15 cm

• Graphical devices

- Mouse ~ 20 cm x 20 cm (pad)

- Graphic tablet ~ 15 cm x 15 cm

- Touch screen screen size

(~ 1 cm x 1 cm per touch field)

*: typical values, higher for vehicles etc.

Inputs tasks (and GUI design) define input devices





20

User - Display - Input Devices Geometry

• Requirements

- Must be ergonomic

- Differ in time of use

ATMs (minutes) vs. database input (hours)

• Geometries

- Mobile device (e.g. smartphone) orientation set by user

- Fixed devices orientation set by engineer

• Other topics

- Distance of user to screen and input device

- Ambient light

- Privacy





21

User - Display - Input Devices Geometry Examples





22

User - Display - Input Devices Geometry Examples

Office (long time use) Operator (short use)





23

Typical Design Flow of System with Display

Product specification, idea

Data to be displayed

Display resolution

Screen size

Display technology

Price, supply chain, …

Graphics controller,

µC, software, OS, …

Redesign, optimization

Start of design

User input

Viewing conditions

Environment

(T, illuminance, …),

application

Mechanics;

production, …





Mechanics;

production, …

24

Topics for Graphical User Interface

Product specification, idea

Data to be displayed

User input

Display resolution

Screen size

Display technology

Viewing conditions

Environment

(T, illuminance, …),

application

Price, supply chain, …

Graphics controller,

µC, software, OS, …

Size,

readability

“Readability”

Elements

(widgets,

common

dialogs, …)

Redesign, optimization

Keyboard

mouse

touch





25

GUI Ergonomic Design Rules

Here: Viewing distance = 1 m distance 0.25 mm (resolution, pixel size)

C OK

Heading

0123456789

ABCDEFGH

IJKLMNOP

?

T

10

0 10 30 t

25

Recommendations & rules basing on vision (1‟ 0,25 mm / m):

• Character height: 16‟ … 40‟ (more text colors larger height)

with e.g. 9 x 7 or 10 x 7 font pixel resolution + spacing

• Separation: ~ height/2 (8‟ … 20‟) ; ~ width/4 (6‟ … 15‟)

• Icons: ~ 40‟ (> 32 x 32 pixel), spacing ~ size/2

• Graphics: ~ 10x character height; width height;

recommended 16:9 ; resolution 240 x 135 pixel

• Touch input pad > 10 x 10 mm² (height “fixed”, width depending on text)

Spacing: ~ 5 mm Save as





26

GUI Ergonomic Design Strategy

?

26

1. Draw basic GUI design with respect to display aspect ratio 16:9 or 4:3

(4:3 is fading out, other ratios only for high volume mass production)

2. Calculate height and width of each GUI element (incl. spacing) acc. to

“GUI Ergonomic Design Rules” (see slide) incl. viewing distance

3. Calculate pixels for GUI elements acc. to

“GUI Ergonomic Design Rules” (see slide)

4. Make table or plot for summing up all elements in terms of pixels;

horizontal and vertical sum may vary due to GUI elements

adapt e.g. to maximum (recommended) or mean value

5. Calculate display resolution and adapt to main stream:

QVGA, WQVGA, VGA, WVGA, …. HDTV

6. Redesign and play with GUI arrangement for main stream resolutions





27

Graphical User Interface Screen Design(I)

Rule: Golden Cut

- Used by famous photographers and artists

- Area partitions and proportions (~ 1/3 : 2/3) are felt as very harmonious !

- Also many things in nature follow a Golden Cut strategy e.g. snail‟s shell





28

Graphical User Interface Screen Design (II)

Golden Cut

arrangement

recommended

This is not a

“hard” rule,

you may use

e.g.

- 40 : 60

- 1/3 : 2/3





29

Design Rules Example I

Observer distance : 0.5m 0.13 mm 1‟ ( pixel size)

C OK

Text 0123456789

ABCDEFGH

IJKLMNOP

?

T

10

0 10 30 t

Graphics: 240‟ x 135‟

32 x 18 mm²

Touch input pad

> 10 x 10 mm²

Icons 40‟: 5 mm

Character height:

25‟ 3.3 mm

29

1. Draw basic GUI design with respect to display aspect ratio 16:9 or 4:3

(4:3 is fading out, other ratios only for high volume mass production)

2. Calculate height and width of each GUI element acc. to

“GUI Ergonomic Design Rules” (see slide) incl. viewing distance

Character height:

20‟ 2.5 mm

Spacing:

10‟ 2.5 mm

Spacing between all elements: 2.5 mm

40 : 60

1/3 : 2/3





30

Design Rules Example II

C OK

Text 0123456789

ABCDEFGH

IJKLMNOP

?

T

10

0 10 30 t

Graphics: 240‟ x 135‟

32 x 18 mm² 240 x 135 pixel

Touch input pad:

10 x 10 mm²

80 x 80 pixel

Icons 40‟: 5 mm 40 x 40 pixel

Character height: 25‟ 3.3 mm 25 pixel,

width 10 x 7 + spacing 17 + 6 pixel

8 characters 180 pixel

30

Character height: 20‟

2.5 mm 20 pixel

width = 14 + 4 pixel

10 characters 180 pixel

Line spacing: 10‟

2.5 mm 20 pixel

3 lines + 2 spacings

height = 80 pixel

Spacing: 2.5 mm = 20 pixel

3. Calculate pixels for GUI elements acc. to

“GUI Ergonomic Design Rules” (see slide)

Observer distance : 0.5 m 0.13 mm pixel size for 1‟

Rule of thumb:

- 1‟ = 1 pixel

- Left and right character

spacing can be neglected





31

Design Rules Example III

C OK

Text 0123456789

ABCDEFGH

IJKLMNOP

?

T

10

0 10 30 t

31

4.Make table or plot for summing up all elements in terms of pixels; horizontal and vertical sum

may vary due to GUI elements adapt e.g. to maximum (recommended) or mean value

5.Calculate display resolution and adapt to main stream: QVGA, WQVGA, VGA, ... HDTV

Horizontal pixel top elements incl. 20 pixel spacing:

20 + 180 + 20 + 240 + 20 = 480 pixel

Vertical pixel left elements

incl. 20 pixel spacing:

20 + 25 + 20 + 80

+ 20 + 40 + 20

= 225 pixel

Vertical pixel right ele.

incl. 20 pixel spacing:

20 + 135 + 20

+ 80 + 20

= 275 pixel

Horizontal pixel bottom elements incl. 20 pixel spacing:

20 + 40 + 20 + 40 + 20 + 40 + 20 + 40 + 20 + 40 + 20 = 320 pixel

Using maximum values:

480 x 275 pixel

Perform search for display:

Resolution: 480 x 272 @ 4.3”

is available from many companies!





32

Design Rules Example IV

C OK

Text 0123456789

ABCDEFGH

IJKLMNOP

?

T

10

0 10 30 t

32


Horizontal: 480 pixel

Vertical:

225 pixel

- Top and right resolution OK for GUI elements

- Adapt left (+ 50 pixel) and bottom (+ 160 pixel)

Display: 480 x 272 @ 4.3”

Vertical:

272 pixel


Calculations:





33

Design Rules Example V

Cancel OK

Text 0123456789

ABCDEFGH

IJKLMNOP

QRSTUVXYZ

Help

T

10

0 10 30 t

33



Vertical:

increase vertical

line spacing

or add 4th line

“Play around” with various arrangements and sizes

of GUI elements until GUI “looks and feels great”.

Display: 480 x 272 @ 4.3”

Vertical:

272 pixel

Horizontal: e.g. increase touch button size or add button

Adaptation to display:










Topics: Perform GUI Ergonomic Design Strategy

- Make quick drawing of one or the main screen of your GUI example

- Select a typical user distance; elaborate ppi and pixel size

- Calculate the size of the GUI elements on the screen

- Determine display resolution

- Calculate display size and select industrial display

34

x groups

Case Study III





35

1. Luminance is adequate

to eye adaptation

(see below)

Readability CR

Not readable < 2

Text readable 2 … 4

Color > 4

Grey levels > 10

2. Contrast Ratio CR is sufficient

(also depending on displayed content)

(see below)

Typical recommended values:

• Indoor industrial 300 cd/m²

• Daylight readable 1,000 cd/m²

• Outdoor readable 2,000 cd/m²

• Sunlight readable > 5,000 cd/m²

What Means Readability (I) ?





36

3. Grey levels and color

Reproduction is reduced by reflections

Low grey levels (low luminance) cannot distinguished

Color will be washed out (gamut reduced)

4. Readability strongly depends on image

- Use mainly black text on white background

(will force Burn-In for emissive displays !)

- Do not use dark grey levels

- Use highly saturated colors like first and secondary primaries

Optimum via luminance, content and reflections !

What Means Readability (II) ?





Optimization:

- Increase display luminance

- Reduce reflections (AR, AG [matte], …)

- Reduce illuminance E if possible)

- Adapt GUI to black / white, …

37

Black

White

RL

LC

LReflected > LBlack (0 lx)

LReflected (white) = LReflected (black)

flectedReBlack

flectedReWhite

R

lightambientL)lx0(L

L)lx0(LC

1L

)lx0(L

flectedRe

White

• Reflections of ambient light are measured as reflected luminance Lreflected

• Those reflections are added to the luminance output of the display

Details and measurement

techniques: ED lecture WS

Contrast Ratio & Ambient Light





38

Ambient Light & Grey Scale / Color

Ambient light reduces

• The number of distinguishable grey levels

use only black and white, avoid low grey levels

• The number of distinguishable colors

use saturated colors like R(255/0/0), G (0/255/0), M (255/0/255), …

Many GUI recom-

mendations are

as well good for

presentations!

Simulation Indoor Outdoor Sunlight

Grey

levels

Color

K K K





39

‚Original without anything„

Anti-Reflex Anti-Glare Anti-Glare + Anti-Reflex

(specular diffuse) (specular reduced) („best‟ + most expensive)

Reflection Reduction Methods





“Bright background” reduces noticeable reflections (and lifetime) !

40

Reflections are „enhanced‟

on dark areas and „invisible‟

for „bright areas‟

Same display,

geometry,

illumination etc.

Light Reflections vs. Grey Level & Visibility





41 41

Improving Readability by Software

• Image enhancement

algorithms as known

from HDR

• Applications: Better

readability at bright light

e.g. automotive

• Can be applied as well

for GUI

• Most simple solution is to design GUI (if applicable) to outdoor performance:

White background, now low grey levels, saturated colors, …

100% software





42

Consequences for Display Technologies

Emissive Reflective Power vs.

“no color”

Emissive Reflective

Examples AMLCD, OLED, PDP, … E-paper, b/w LCD

Improvem. • Rise e-o efficiency

• Optimize subassemblies

• Rise reflectance

• Add front-/backlight

Merits Multimedia, mass production Bistable lowest power

Issues Bright light, power consumption Multimedia, industrial

Benefit Multimedia @ reasonable power B/W @ lowest power





Office Displays & Ambient Light

43





44

Readability - one of the Most Important Factors of GUIs

• Information on the screen must be readable

• Luminance must be adapted to illuminance

• Ambient light reflections reduce readability

• Contrast ratio reasonable for GUI content (color: CR > 10:1)

• Avoid low grey levels as they will appear very similar

• Use saturated colors, others will bleach

• Avoid static content due to (emissive) Burn-In and LCD Image-Sticking

• Other topics: Detection speed (see below)










Topics: Define display requirements and GUI grey level and colors

- Make quick drawing of one or the main screen of your GUI example

- Select a typical display technology

- Check for lifetime issues

- Optimize grey levels and colors for best outdoor performance

45

x groups

Case Study IV





46

Other Factors Influencing Readability

Detection speed

How fast is a character or a change in information recognized ?

10 100 1,000 10,000

Illuminance /lx

Mean Detection Speed / 1/s

0.06

0.04

0.02

0.00





47


Preference of Illuminance

How bright should be the workplace ?

10 100 1,000 10,000

Illuminance /lx

Preference

500 lx recom-

mended for office

25 characters

per second





48


Automotive : Glance

„Visually displayed

information should

be such that the

driver can assimilate

it with a few glances

which are brief

enough not to

adversely affect

driving.‟

How long does it need to

get the displayed information?





49


Automotive : Glance

Documents

M S Man Machine Interface: Introduction E I D I S P L A Y