1. CHAPTER 9 SCREEN DESIGN OBJECTIVES
To describe the difference between presenting info on paper and on screen
To understand screen layout issue

2. LECTURE TOPICS Screen vs. Paper Screen Components Design Issue
SCREEN DESIGN
LECTURE TOPICS
Screen vs. Paper
Screen Components
Design Issue
Screen Layout Basic
Navigation

3. SCREEN DESIGN: SCREEN VS. PAPER
Problem
Char of Media
Printed
Illuminated – may reflect like mirror
Glare & visual distraction
Focus
Down
Horizontal
More visual interference – increased muscle work
Room light needed
High
Low
Continual
Readjustment

5. SCREEN DESIGN: SCREEN VS. PAPER
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’)

6. 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

7. SCREEN DESIGN: DESIGN ISSUES
Content
Polarity
Text
Color
Images
Layout

8. 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

9. 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

10. 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

11. 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

12. 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)

13. 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)

14. 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

15. 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

16. 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?

17. 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

18. SCREEN DESIGN: SCREEN LAYOUT BASICS
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

19. SCREEN DESIGN: SCREEN LAYOUT BASICS
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

20. 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

22. 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

23. 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

25. 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

26. 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

28. 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

29. 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

30. 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

31. the eye of the beholder context matters

32. 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

33. 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?

34. 'physics' of colour ‘colour’ is the wavelength of light
like pitch is the wavelength of sound
spectrum
from red - longest
to violet - shortest
and beyond …
red  infra red (heat)  microwaves  radio
violet  ultraviolet  ... nasty radiation
7x10-7m
4x10-7m

35. mixing colour mixing paint blue + yellow = green (really cyan)
mixing lights red + green = yellow
called additive and subtractive colour

36. additive colour - mixing light
physically both colours in the mixed light
like a chord in music
light is really red + green
we see yellow

37. 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

38. 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

39. in the eye rods see black and white and grey best in low light
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

40. 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

41. rods and cones how many where they are how fast
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

42. 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

43. 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

44. 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

45. who it was Alan Dix alan@hcibook.com see also http://www.hcibook.com/
see also

46. Putting them together screen layout and design
basic principles
grouping, structure, order
alignment
use of white space

47. basic principles ask think design what is the user doing?
what information, comparisons, order
design
form follows function

48. available tools grouping of items order of items
decoration - fonts, boxes etc.
alignment of items
white space between items

49. 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)
…… … … …

50. 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!

51. decoration use boxes to group logical items
use fonts for emphasis, headings
but not too many!!
ABCDEFGHIJKLM
NOPQRSTUVWXYZ

52. alignment - text you read from left to right (English and European)
 align left hand side
boring but
readable!
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
fine for special effects but hard to scan

53.    alignment - names Usually scanning for surnames  make it easy!
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell 
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale

54. alignment - numbers
think purpose!
which is biggest?

55. alignment - numbers visually:
long number = big number
align decimal points
or right align integers

56. multiple columns
scanning across gaps hard: (often hard to avoid with large data base fields)
sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

57. multiple columns - 2 use leaders
sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

58. multiple columns - 3 or greying (vertical too)
sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

59. multiple columns - 4 or even (with care!) ‘bad’ alignment
sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

60. white space - the counter
WHAT YOU SEE

61. white space - the counter
WHAT YOU SEE
THE GAPS BETWEEN

62. space to separate

63. space to structure

64. space to highlight

65. who it was Alan Dix alan@hcibook.com http://www.hcibook.com/

66. one-by-one – WIMPish Elements
widgets - the bits that make the GUI
what do they do, what are they good for
little things matter

67. 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

68. appearance

69. 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 !!?!

70. behaviour

71. 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.

72. semantics
menus, buttons, etc.
do things …
… lets make it bold italic

73. 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 - what you want it to do
then appearance - how you do it
choose the widget for the job

74. 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. ...

75. 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!

76. 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

77. design is difficult
little things matter

78. a design story ... documentation browser numbered scroll bar
page-up/down buttons
… on screen only …
no-one used the buttons
… why?

79. a design story … ctd. text jump scrolled eye focus on buttons
 disorientating
… can we put it right?

80. a design story ... ctd. section head at top scroll buttons at top
opposite section head
difference?
… amazing!

81. still looks wrong why?

82. hands across the screen?
guidance
appearance
instinct
behaviour
analysis
why questions

83. let’s look at scroll bars

84. 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

85. always on the right? well usually … but is it right?
or should it be left?

86. watch the birdie

87. a little history Xerox Palo Alto Labs Apple Microsoft
hotbed of computing research
programming environments (Lisp, Smalltalk)
Xerox Star (late 1970s) - 1st office GUI
Apple
Lisa - technology from Star, but too expensive
Macintosh - birth of popular windows interfaces
Microsoft
may get there someday ...

88. 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?

89. 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!

90. 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

91. who it was Alan Dix alan@hcibook.com http://www.hcibook.com/

92. the BIG picture navigation and dialogue
the systems
info and help
management
messages
add user
remove user
goal
start
the BIG picture navigation and dialogue
main
screen
remove
user
confirm
add user

93. recap - levels widget choice menus, buttons etc. screen design
application
environment
other apps, O/S

94. recap - levels widget choice menus, buttons etc. screen design
application
environment
other apps, O/S

95. the web too widget choice screen design application environment
elements and tags
<a href=“...”>
page design
site navigation
the web
external links

96. 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

97. think about use who is going to use the application?
how do they think about it?
what will they do with it?
…. games?

98. from one screen looking out
local
from one screen looking out

99. 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

100. goal seeking
goal
start

101. goal seeking
goal
start
progress with local knowledge only ...

102. goal seeking
goal
start
… but can get to the goal

103. goal seeking
goal
start
… try to avoid these bits!

104. beware the big button trap
things
the thing from
outer space
more things
other things

105. between screens within the application
global
between screens
within the application

106. hierarchical diagrams
the system
info and help
management
messages
add user
remove user

107. hierarchical diagrams ctd.
parts of application
screens or groups of screens
typically functional separation
the systems
info and help
management
messages
add user
remove user

108. what does it mean in UI design?
think about dialogue
what does it mean in UI design?

109. 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

110. network diagrams
main
screen
remove
user
confirm
add user

111. network diagrams ctd. what leads to what what happens when
including branches
more task oriented
main
screen
remove
user
confirm
add user

112. return to scenarios user presses ‘on’ button login prompt appears
user enters user name and password
top level menu page appears
user selects ‘maze’
… …

113. 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

114. between applications and the world wide web ...
wider still
between applications
and
the world wide web ...

115. between applications style issues: platform standards, consistency
functional issues
cut and paste
navigation issues
embedded applications
links to other apps … the web

116. 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?

117. the geometry of the web links extrinsic geometry (inxight) content
intrinsic geometry (alexia)
searching and finding
people
recommendation

118. who it was Alan Dix alan@hcibook.com http://www.hcibook.com/