CHAPTER 9
SCREEN DESIGN
OBJECTIVES
To describe the difference between presenting info on
paper and on screen
To understand screen layout issue
SCREEN DESIGN
LECTURE TOPICS
1.
2.
3.
4.
5.
Screen vs. Paper
Screen Components
Design Issue
Screen Layout Basic
Navigation
SCREEN DESIGN: SCREEN VS. PAPER
Paper
Screen
Problem
Char of
Media
Printed Illuminated –
may reflect like
mirror
Glare & visual
distraction
Focus
Down
Horizontal
Room
light
needed
High
Low
More visual
interference –
increased muscle
work
Continual
Readjustment
SCREEN DESIGN: SCREEN VS. PAPER


1.
2.
3.
4.
Information visualization in HCI
Must account for:
A comprehensible mental image
(metaphor)
Appropriate organization of data,
functions, tasks and roles (cognitive
models)
Quality appearance characteristics
(the ‘look’)
Effective interaction sequencing (the
‘feel’)
SCREEN DESIGN: SCREEN COMPONENTS






Layout
Format, proportions and grids
Text
Typefaces and typesetting
Imagery
 signs, icons, symbols,
concrete to abstract
Visual identity
unique appearance
Animation
dynamics of display
Color and Texture
Convey complex information and pictorial reality
SCREEN DESIGN: DESIGN ISSUES






Content
Polarity
Text
Color
Images
Layout
SCREEN DESIGN: DESIGN ISSUES
Content




Overall density
(how much
information on the
screen)
Local Density
(how tightly
packed the
information on the
screen)
Grouping (number
of separate
groups and size of
groups).
Layout complexity
SCREEN DESIGN: DESIGN ISSUES
Polarity




Paper is dark type
on light
background
If screen is light
on dark, eye
readjustment is
necessary
Amount of
simulation must
be examined may be
Layout complexity
SCREEN DESIGN: DESIGN ISSUES
Text

Character size & type
 use appropriate
character height
 poorly defined font is
harder to see



Font type : HCI HCI
HCI
Bold is often more
visible from a
distance
The best combinations
is the Title case
SCREEN DESIGN: DESIGN ISSUES
Legibility and readability
Legibility

1-2 typefaces (3 max), 1-3 size variations max

Careful use of normal, italics, bold.

Typesetting: word and line spacing, text
orientation, line length, indentation, colour.
Readability

In the US there is public law that said public
information should use words that a student of
Grade 8 will understand.

Also need to consider people with communication,
learning and memory difficulties
SCREEN DESIGN: DESIGN ISSUES
Text Colour



Black n white – most
visual comfort (but
problems for people with
dyslexia)
Generally – end of
spectrum harder to see
(red, blue, violets)
Preferred – middle of
spectrum easier on eye
(green, yellow, orange)
SCREEN DESIGN: DESIGN ISSUES
Colour - Background



Black n white – most visual
comfort (but problems for
people with dyslexia)
Generally – end of
spectrum harder to see
(red, blue, violets)
Preferred – middle of
spectrum easier on eye
(green, yellow, orange)
SCREEN DESIGN: DESIGN ISSUES
Colour combination: Good Legibility
Good
Better
Best
white on red
white on blue
black on yellow
white on green
Yellow on black
Black on white
white on black
Green on white
Red on yellow
Red on white
SCREEN DESIGN: DESIGN ISSUES
Colour combination: Bad Legibility
Blue on yellow
or orange
Green on red
or orange
Yellow or
orange on
blue
Red or orange
on green
SCREEN DESIGN: DESIGN ISSUES
Some question to ask;




Does color add something that cannot be provided
by black and white?
Is the chosen color appropriate for the text or
object?
Does the color provide cues to improve
understanding or memory?
Are there are any visual problems that may make
the information less legible?
SCREEN DESIGN: DESIGN ISSUES
Images

Signs, icons, symbols
 right choice within spectrum from concrete to abstract

Icon design very hard
 except for most familiar, always label them

Image position and type should be related
 image ‘ family’
 don’t mix metaphors

Consistent and relevant image use
 not gratuitous
 identifies situations, actions
SCREEN DESIGN: SCREEN LAYOUT BASICS
1.
2.
3.
4.
The display functions as a grid with some areas having
greater impact than others
The display acts as a set of many planes, each one on a
layer closer to the user than the one behind it
White space is design element
Text and ideas must be chunked in order to be
comprehended
SCREEN DESIGN: SCREEN LAYOUT BASICS
5.
6.
7.
8.
Cultural reading patterns impact design:
 western style: horizontal, L to R, Top to
Bottom
 other cultural patterns differ
Graphics have greater impact than text
Animation has greater attention getting
impact than graphics
Sound has an impact equivalent to
animation
SCREEN DESIGN: SCREEN LAYOUT BASICS
Grids

Horizontal and vertical lines to locate window components
 aligns related components

Organizations
 contrast to bring out dominant elements
 grouping of elements by proximity
 show organizational structure
 alignment

Consistency
location
Format
Repetition
 organization
SCREEN DESIGN: SCREEN LAYOUT BASICS
Screen Real Estate
Areas of the screen that automatically add emphasis to material,
graphic or text paced here
Tend to minimize whatever located
there
Ideal for navigational devices such
as button bars, pull down menus, or
status information
SCREEN DESIGN: SCREEN LAYOUT BASICS
Screen Real Estate
Neutral impact on whatever is
located there
Good for summation text or
summary graphics
Tend to add minimal impact to any
graphics or text located there
SCREEN DESIGN: DESIGN ISSUES
Economy of visual elements


Minimise number of controls
Include only those that are necessary
 eliminate or relegate others to secondary windows

Minimize clutter (e.g use tab folders, but don’t
overdo it)
so information is not hidden
SCREEN DESIGN: NAVIGATION


Not really screen design, more design of a set of
screens.
Depth vs. breadth
 it is generally advisable to avoid deep structure
Rainbow - colours in the eye and on the screen
who I am
Alan Dix
part-time Professor at Lancaster
part-time entrepreneur at aQtive and vfridge
email:
alan@hcibook.com
http://www.hiraeth.com/alan/
http://www.hcibook.com/
http://www.aqtive.com/
Rainbow - colours in the eye and on the
screen





play with colours
use of colour
'physics' of colour
how we see colour
how computers do colour
see also
www.colormatters.com
play with colours



colour is surprisingly complex
 physics, aesthetics, psychology
using colour can be fun
 experiment , play with it!
context matters
 we all see colours differently
 perception of colour depends on surroundings
 different at midday or night
the eye of the beholder
context matters
good use of colour
using conventions (red for alarms etc.)
 ‘branding’ parts of an interface
 occasional emphasis
 redundant coding
 i.e. in addition to other means
 e.g. web link colours - also underlined
 for diagrams, etc.

yucky clip art,
but was all I
could find
bad use of colour
over use - without very good reason (e.g. kids’ site)
 colour blindness
 poor use of contrast
 do adjust your set!
 adjust your monitor to greys only
 can you still read your screen?

'physics' of colour


‘colour’ is the wavelength of light
 like pitch is the wavelength of sound
spectrum
4x10-7m
7x10-7m
 from red - longest
 to violet - shortest
 and beyond …
 red  infra red (heat)  microwaves  radio
 violet  ultraviolet  ... nasty radiation
mixing colour

mixing paint
blue + yellow = green
(really cyan)

mixing lights
red + green = yellow

called additive and subtractive colour
additive colour - mixing light
physically both colours in the mixed light
 like a chord in music
 light is really red + green
 we see yellow

subtractive - mixing paint
cyan paint absorbs a lot of red
 yellow paint absorbs a lot of blue
 cyan + yellow absorbs most of the red and blue
leaving mainly green light reflected
 so we see green

primary colours
in music we hear chords and harmony
C+G  E
 there are no primary ‘notes’ in music

so why three primary colours?
not physics … but the eye
in the eye
two types of sensory cells:

rods
see black and white and grey
 best in low light
 good at seeing movement
 cones
 see colours
 best in bright light

how we see colour
... three types of cones:
 red,
green and blue!

well nearly ...
… like 3 radios tuned to different stations




each type sensitive to a range of light frequencies
eye compares ‘response’ of each kind
each mix has same response as some pure colour
3 receptors => 3 dimensions of colour
rods and cones

how many

more in the centre (fovea) than the edges
=> better central vision

where they are


cones towards centre, rods towards edge
=> peripheral vision
low-light, good at movement, black and white
how fast

black and white faster (in brain) than colour
how computers do colour




lots of spots of red, blue and green
eye merges them to form colours
like pointillist painting
colours described using RGB
 amount of each colour they have
 e.g. #ff00ff = purple
variations


different colour models:
 HSI, CMYK, CIE
 used for different purposes
screen depth
 number of bits used per pixel
 24 = 8 bits per colour (RGB) = 16 million colours
 32 as above, also ‘alpha channel’ (transparency)
 16 = 5 bits per colour = ‘thousands of colours’
 8 too few to split, need designed palettes
palettes


mapping:
256 colours (8 bits)  selection of full (24 bit) RGB
options:
 application palettes (why funny things happen!)
 system palette (slightly different between platforms)
 web colours



6 colour levels for each RGB channel 6x6x6 = 216
combinations of hex 00,33,66,99,cc,ff
e.g. #cc3300, #0000ff, #999999
who it was
Alan Dix
alan@hcibook.com
http://www.hcibook.com/
http://www.hiraeth.com/alan/teaching/bigui/
http://www.aqtive.com/
see also
www.colormatters.com
Putting them together
screen layout and design




basic principles
grouping, structure, order
alignment
use of white space
basic principles
 ask

what is the user doing?

what information, comparisons, order
 think
 design

form follows function
available tools
 grouping of items
 order of items
 decoration - fonts, boxes etc.
 alignment of items
 white space between items
grouping and structure
logically together  physically together
Billing details:
Name
Address: …
Credit card no
Delivery details:
Name
Address: …
Delivery time
Order details:
item
quantity cost/item cost
size 10 screws (boxes)
……
7
…
3.71
…
25.97
…
order of groups and items
 think! - what is natural order
 should match screen order!
use boxes, space etc.
 set up tabbing right!

 instructions

beware the cake recipie syndrome!
decoration
use boxes to group logical items
 use fonts for emphasis, headings
 but not too many!!

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
alignment - text

you read from left to right (English and European)
 align left hand side
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
fine for special effects
but hard to scan
boring but
readable!
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
alignment - names

Usually scanning for surnames
make it easy!

Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Alan
Janet
Gregory
Russell

Dix
Finlay
Abowd
Beale


Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
alignment - numbers
think purpose!
which is biggest?
532.56
179.3
256.317
15
73.948
1035
3.142
497.6256
alignment - numbers
visually:
long number = big number
align decimal points
or right align integers
627.865
1.005763
382.583
2502.56
432.935
2.0175
652.87
56.34
multiple columns

scanning across gaps hard:
(often hard to avoid with large data base fields)
sherbert
toffee
chocolate
fruit gums
coconut dreams
75
120
35
27
85
multiple columns - 2

use leaders
sherbert
toffee
chocolate
fruit gums
coconut dreams
75
120
35
27
85
multiple columns - 3

or greying (vertical too)
sherbert
toffee
chocolate
fruit gums
coconut dreams
75
120
35
27
85
multiple columns - 4

or even (with care!) ‘bad’ alignment
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
white space - the counter
WHAT YOU SEE
white space - the counter
WHAT YOU SEE
THE GAPS BETWEEN
space to separate
space to structure
space to highlight
who it was
Alan Dix
alan@hcibook.com
http://www.hcibook.com/
http://www.hiraeth.com/alan/teaching/bigui/
http://www.aqtive.com/
one-by-one – WIMPish Elements

widgets - the bits that make the GUI

what do they do, what are they good for

little things matter
widgets?
individual items on a GUI screen ...
 checkboxes, menus, toolbars, buttons etc.
 three aspects:
 appearance
- what they look like
 interaction
- how they behave
 semantics
- what they mean

appearance
appearance includes words
verbs - action words
 quit, exit, embolden, italicise
 adjectives - description/state words
 bold, italic
 nouns - usually as a form of description
 Times New Roman, US Letter
 beware of mixes …
 embolden + italic !!?!

behaviour
behaviour … ctd.
some bits the toolkit does for you
 but is it right?
 some you control
 e.g. drawing, interactions between widgets
 beware timing issues
 e.g. large selections under Windows apps.

semantics

menus, buttons, etc.

do things …
… lets make it bold italic
YOU say what it means

semantics usually up to you
 although widgets may link direct to database
 even then, you say what links

think separately:
 meaning first
 then appearance

- what you want it to do
- how you do it
choose the widget for the job
what do you want?



actions
 usually menu, buttons, or toolbar
setting state/options
 usually checkbox, radio button, combi-box
but …
 menus can be used to set state etc. ...
how many?



one of several options
 radio buttons, selection menu
zero, one or more options
 checkbox, multi-choice menu
free choice
 offer recent/typical shortcuts
 one line text boxes often terrible!
and more ...



number
 fixed
e.g. bold, italic, underline
 variable
e.g. font list
 scolling through telephone list …
liveness
 grey out inactive options
dynamic interactions
 some choices dependent on others
design is difficult
little things matter
a design story ...






documentation browser
numbered scroll bar
page-up/down buttons
… on screen only …
no-one used the buttons
… why?
a design story … ctd.


text jump scrolled
eye focus on buttons
 disorientating

… can we put it right?
a design story ... ctd.



section head at top
scroll buttons at top
opposite section head
difference?
… amazing!
still looks wrong
why?
hands across the screen?
guidance
 appearance
 instinct



behaviour
analysis
why questions
let’s look at scroll bars
scroll bars are simple ...
Scrollbars may look different,
but are basically the same.
They just sit on the right hand
side of the screen. You press
the up button and the screen
goes down, you press the down
button and the screen goes up
... hey wait a minute
always on the right?

well usually …

but is it right?

or should it be left?
watch the birdie
a little history

Xerox Palo Alto Labs




Apple



hotbed of computing research
programming environments (Lisp, Smalltalk)
Xerox Star (late 1970s) - 1st office GUI
Lisa - technology from Star, but too expensive
Macintosh - birth of popular windows interfaces
Microsoft

may get there someday ...
Star and scrollbars




pre-Star (Smalltalk etc.) on the left
Star - scrollbar on the right
 to avoid visual clutter and ease text reading
Star scrolling
 page at a time
- not continuous
 very different model
what is right - left or right
… just hands across the screen?
up or down


Option 1 - normal today
 arrow up = screen down & scroll handle up
Option 2
 arrow up = screen up & scroll handle down
which is right?
no easy answer
do an experiment!
Star team did it




Option 2 - won
 so we have the wrong kind of scroll bar!
why?
two versions of Star interface
 before and after experiments
Xerox passed designs to Apple …
… but gave the wrong one
who it was
Alan Dix
alan@hcibook.com
http://www.hcibook.com/
http://www.hiraeth.com/alan/teaching/bigui
http://www.hiraeth.com/alan/topics/widget
http://www.aqtive.com/
the systems
info and help
management
goal
start
add user
the BIG picture
navigation and dialogue
main
screen
remove
user
add user
confirm
remove user
messages
recap - levels
widget choice
 menus, buttons etc.
 screen design
 application
 environment
 other apps, O/S

recap - levels
widget choice
 menus, buttons etc.
 screen design
 application
 environment
 other apps, O/S

the web too

widget choice
• elements and tags
– <a href=“...”>
screen design
 application
 environment

• page design
• site navigation
• the web
– external links
think about structure




within a screen
 previous lecture ...
local
 looking from this screen out
global
 structure of site, movement between screens
wider still
 relationship with other applications
think about use

who is going to use the application?

how do they think about it?

what will they do with it?
…. games?
local
from one screen looking out
four golden rules
knowing where you’ve been
 or what you’ve done
 knowing where you are
 knowing what you can do
 knowing where you are going
 or what will happen

goal seeking
goal
start
goal seeking
goal
start
progress with local knowledge only ...
goal seeking
goal
start
… but can get to the goal
goal seeking
goal
start
… try to avoid these bits!
beware the big button trap
things
other things
more things
the thing from
outer space
global
between screens
within the application
hierarchical diagrams
the system
info and help
management
add user
remove user
messages
hierarchical diagrams ctd.

parts of application
 screens or groups of screens

typically functional separation
the systems
info and help
management
add user
remove user
messages
think about dialogue
what does it mean in UI design?
think about dialogue
Minister: do you name take this woman …
Man: I do
Minister: do you name take this man …
Woman: I do
Minister: I now pronounce you man and wife
network diagrams
main
screen
remove
user
add user
confirm
network diagrams ctd.
what leads to what
 what happens when
 including branches


more task oriented
main
screen
remove
user
add user
confirm
return to scenarios
user presses ‘on’ button
 login prompt appears
 user enters user name and password
 top level menu page appears
 user selects ‘maze’
… …

scenarios ctd.
Pros:
easy to understand
 concrete (errors less likely)
Cons:
 one route through the system
 no branches, no special conditions
 So:
 use several scenarios
 use several methods

wider still
between applications
and
the world wide web ...
between applications
style issues:
 platform standards, consistency
 functional issues
 cut and paste
 navigation issues
 embedded applications
 links to other apps … the web

web structure

knowing what is there
 3 million web sites!
 countless pages

so much to see and so little time
… but when did you last search the
entire Library of Congress?
the geometry of the web
links
 extrinsic geometry (inxight)
 content
 intrinsic geometry (alexia)
 searching and finding
 people
 recommendation

who it was
Alan Dix
alan@hcibook.com
http://www.hcibook.com/
http://www.hiraeth.com/alan/teaching/bigui/
http://www.aqtive.com/