User Interface Design

(1)

20. Februar 06 IfGi Universität Münster User Interface Design A. Krüger 1

User Interface Design

Winter term 2005/2006

Thursdays, 14-16 c.t., Raum 228

Prof. Dr. Antonio Krüger

Institut für Geoinformatik

Universität Münster

(2)

Screen design: individual

screen design



Draw user attention to salient point, e.g. colour,

motion, boxing



Animation is very powerful but can be

distracting



Good organization helps:

grouping, physical proximity



Trade off between sparse

population and overcrowding

(3)

Summary



Different kinds of prototyping are used for different

purposes and at different stages



Prototypes answer questions, so prototype appropriately



Construction: the final product must be engineered

appropriately



Conceptual design (the first step of design)



Physical design: e.g. menus, icons, screen design,

information display

(4)

(5)

Initial Idea



Build a TUI with built-in display

• Orientation sensitive

• Direct feedback

• Standalone operation



Technical problems

• No square OLED displays



Cognitive issues

• Different ways to any side

• Action history?

(6)

Conceptual design of TUISTER

sensors for orientation:

3x 1D magnetic

2x 2D gravity

1x relative rotation

primary display

secondary displays

(7)

(8)

E

D

A

B

C

C3

C2

C7

C8

C1

+

-dominant hand:

choose menu entry

metaphor: choice dial

non-dominant hand:

go up/down one level

metaphor: (un)fasten a screw

(9)

Sketch of functionality

(10)

(11)

Paper Prototype



Useful for discussing the

concept



No technical restrictions ;-)



Close to the intended size

(12)

(13)

First Functional Prototype

printed circuit boards

bluetooth connection

XML hierarchy descriptions

mechanics very bulky

(14)

Abstraction of conceptual design

Also includes display on front side

Also includes non-coaxial designs

German Patent in 2003

(15)

Tuister: Current

prototype

(16)

Application Scenarios



Audio remote control



Actual form factor for

MP3-player



Control device for smart

homes



Control of industrial plants

• Dirty environments

• Manipulation with gloves

(17)

Some more explicit

rules and strategies

…in addition to last week’s “heuristics” and “golden

rules”, and mostly for screen design

(18)

Some Dialogue Techniques



Handshaking

• Provide prompts if action is expected

• Wait for acknowledgement by the user

• Give feedback to user actions



Watchdogs

• Provide users with a sense that something is still going on

(progress bar, progress messages)

• Timeout if no user action occured in a while (online banking,

login screen)



Oracles

• Try to anticipate/guess/avoid input

• Use sensible defaults

(19)

Nonanthropomorphic Design



Concerns

• attributions of intelligence, autonomy, free will, etc can deceive,

confuse, and mislead users

• important to clarify differences between people and computers



Guidelines

• Avoid presenting computers as people.

• Design comprehensible, predictable, and controllable

interfaces.

• Provide user-centered overviews for orientation and closure.

• Do not use 'I' pronouns when the computer responds to human

actions.

(20)

Fitts’ Law (1954)



A systematic

relationship between

speed and accuracy.



Relationship is between

the amplitude of the

movement (A) and the

target width (W) and the

resultant average

(21)

Fitts’ Law:



ID = Log

₂

2A/W (Index of Difficulty)



MT = c + f*ID (Movement Time)

• MT is linearly related to the ID

Movement Time = O(log Distance)

Movement Time = O(log (1/Size))

(22)

Implications of Fitts‘ Law:



Adjust size according to distance

• Small targets should be near

• Far targets should be large



Avoid long distances

• Where is the mouse/pen most often?



Avoid small targets

• Active areas as big as possible

OK

(23)

Examples from

(24)

Display Design Principles



Elegance and Simplicity:

• unity, refinement and fitness



Scale, Contrast, and Proportion:

• clarity, harmony, activity, and restraint



Organization and Visual Structure:

• grouping, hierarchy, relationship, and balance



Module and Program:

• focus, flexibility, and consistent application



Image and Representation:

• immediacy, generality, cohesiveness, and characterization



Style:

(25)

Global (screen) layout



Grid layout



Hierarchical layout



Balance of visual weight



Expected/Standard layouts



ABC

Where am I?

What

Else

Is

There

To

see?

What

information

is here?

Input field Lines that are too short or too long disrupt the reading process. As the eye travels along overly long lines, negotiating the next line becomes difficult. Reading overly short lines creates choppy eye movements that tire

(26)

Local (dialog box) layout



Logical, chronological or alphabetical order



alignment of dates, choices etc.



Labels are helpful for all but frequent users.



Distinguish labels from data with case, boldfacing, etc.



Logical hierarchy



Spatial grouping

(27)

The upper left corner principle

ABCD



Most common light direction in

paintings, typography and UIs



Appears “right” because we

are used to it

(28)

Some typography rules



Choose classical, time-tested typefaces.

• consistency among characters, highly legible proportions.

• Examples: Arial,

Franklin Gothic,

Garamond,

Palatino,

Times New

Roman,

Univers.



Serif fonts for long texts, no Serifs in headings



Don‘t use too many different typefaces at a time.

• Only to create emphasis…

• or to separate one part of the text from another.

• When too many different typefaces are used, the reader is

unable to determine what is and what is not important.

(29)

Some typography rules



For text type use most legible sizes.

• generally range from 8 to 12 points for text that is

read from an average distance of 12 to 14 inches

(30-35cm).



Don‘t use too many different type sizes and

weights at the same time.

• Some experts recommend using no more than two

sizes, one for display titles and one for text type.

(30)

Some typography rules



Use typefaces of medium width.

• Avoid typefaces that appear extremely wide or

narrow in width.

• Rather than distorting text by stretching or squeezing the

text width, use type families that include condensed and

extended faces that fall within accepted proportional norms.



Use appropriate line lengths.

• Lines that are too short or too long disrupt the

reading process. As the eye travels along overly

long lines, negotiating the next line becomes

difficult. Reading overly short lines creates

choppy eye movements that tire and annoy the

reader. When working with text type, a maximum

of about 70 charters (10 to 12 words) per line is

thought to be most acceptable.

Lines that are too

short or too long

disrupt the

reading process.

As the eye travels

along overly long

lines, negotiating

the next line

becomes difficult.

Reading overly

short lines creates

choppy eye

movements that

tire and annoy the

reader. When

working with text

type, a maximum

of about 70

charters (10 to 12

words) per line is

thought to be

most acceptable.

(31)

Some typography rules



Use a flush left, ragged right type alignment.

• Although in special situations, other type alignments (flush right,

ragged left; centered, and justified) are acceptable, the tradeoff

is always a loss, however slight, in readability.



Strive for consistent, rhythmic rags.

• The purpose of effective rags is not only to achieve aesthetic

beauty, but to enable readers to move gently and effortlessly

down a text column. Effective rags consist of lines establishing

an informal but consistent pattern of line endings.



Clearly indicate paragraphs

• Don‘t upset the integrity and visual consistency of the text.

• The two most common ways of indicating paragraphs are by

(32)

Some typography rules



Avoid widows and orphans

• A single word or very short line

at the beginning or end of a

paragraph.



When working with type and color, ensure that sufficient

contrast exists between type and its background.

• Use quiet backgrounds

• Too little contrast in hue, value or saturation, or a combination of

these factors, can result in type that is difficult, if not impossible,

to read.

(33)

Effects of Color



Soothe or strike the eye



Add accents to an uninteresting display



Facilitate subtle discriminations in complex displays



Emphasize the logical organization of information



Draw attention to warnings

(34)

Color Systems



RGB, HSV, CMYK, …

(35)

Color Circle according to Johannes

Itten (1961)

(36)

Cold and warm colors

bright

dark

(37)

(38)

Color

Sphere

according to

Philipp Otto

Runge

(1810)

(39)

Constructing color chords



Regular or balanced

shapes in the color

circle



Also as regular

shapes within the

color sphere

(40)

(41)

Color Contrasts (1-5)

Color-by-itself-

contrast

Bright-

dark-

Contrast

Cold-warm-contrast

Complementary contrast

(42)

Color Contrasts (6-7)

(43)

(44)

(45)

(46)

Color Guidelines



Use color conservatively



Limit the number and amount of colors



Recognize the power of color to speed or slow

tasks



Design for monochrome first



Color can help in formatting



Be consistent in color coding



Be alert to common expectations about color codes



Use color changes to indicate status changes



Use color in graphic displays for greater information

density