This document discusses principles of screen design and user interface design. It covers topics such as typography, color, menus, forms, and touch-based user interfaces. It also discusses theories of human-computer interaction such as different levels of interaction from goals to inputs/outputs. Visual attention and perception are discussed in relation to design factors like contrast, color, grouping, alignment and proximity. Examples of designs from Apple and other companies are provided.

1. EPFL, spring 2012 - week 10!
screen design

2. overview
➝ Deductive vs. inductive interfaces
➝ Typography & colour
➝ Menus, forms, touch-based UIs

3. theory!
levels of human–computer Interaction
user’s/organisation’s goals
output in the real world
GOAL LEVEL
user’s knowledge
computer’s representation TASK
of task domain
of task domain
LEVEL
user’s knowledge
computer command DIALOGUE
of language
language
LEVEL
user’s hands, eyes
computer keyboard, INPUT/
display
OUTPUT
LEVEL
human structures
system structures

4. theory!
levels of HCI
"
"
user’s/organisation’s goals! output in the real world! GOAL LEVEL! gmail example:
user’s knowledge ! computer’s representation TASK !
of task domain! of task domain! LEVEL!
“understanding of how
Email applications work”
"
user’s knowledge ! computer command DIALOGUE “understanding the
of language! language! LEVEL! meaning and usage of
the various interaction
alternatives”
user’s hands, eyes! computer keyboard, INPUT/
display! OUTPUT “ability to perceive and
LEVEL! interact with the various
human structures! system structures!
functions”

5. theory!
user experience design [Jesse James Garrett]
The process of user experience design is about “ensuring
that no aspect of the user’s experience with your [system]
happens without your conscious, explicit intent. This
means taking into account every possibility of every action
the user is likely to take and understanding the user’s
expectations at every step of the way through that
process.”
✱See: Garrett, J.J. (2003). The Elements of User Experience. New Riders Press

6. theory!
user experience design [Jesse James Garrett]
web as software interface | web as hypertext system
concrete
surface
VISUAL DESIGN
INTERFACE NAVIGATION
DESIGN
DESIGN
skeleton
INFORMATION DESIGN
structure
INTERACTION INFORMATION
DESIGN
DESIGN
FUNCTIONAL CONTENT
scope
SPECIFI- REQUIRE-
CATIONS
MENTS
USER NEEDS
strategy
SITE OBJECTIVES
abstract
✱See: http://www.jjg.net/elements/pdf/elements_ch02.pdf

7. theory!
a framework for design thinking [John Cato]
➝ based on gathered knowledge and understanding move
on to the actual crafting of the design:
➝ areas- decide on how to group together areas of
information and activity, understand the basic building
blocks of your system. Understand mood and feel,
decide what kind of user experience you want.
➝ what are the pages for? Create a design storyboard to
represent when and how users want to obtain
information and carry out processes and actions.
✱See: Cato, J. (2001). User-Centered Web Design. Addison-Wesley.

8. theory!
a framework for design thinking [John Cato]
➝ what is on a page? detailing what are the contents of
each page in an area."
➝ interaction design - decide on what can be done and
design the way the user will interact on each page and
carry out useful activity."
➝ visual design - design the details of what it all looks like
and how the presentation should be to reach out to the
user and satisfy the business.
✱See: Cato, J. (2001). User-Centered Web Design. Addison-Wesley.

9. theory!
the iterative process of design
“The process of design is one of creativity in problem
solving. It is a process which explores facts and feelings,
identifies design objectives and goals, generates possible
solutions, chooses a solution, creates a design, evaluates
the design and repeats. And so, to ‚repeat‘.“ [Cato]
 the design cycle often repeats 6-10 times.

10. theory!
visual attention
➝ designing pages/screens needs to consider
limited visual bandwidth
➝ not everything is „seen“
➝ selecting things to look "
at is a serial process
➝ Bandwidth/attention is "
devoted sequentially to "
different locations on a "
screen

11. theory !
vision as a serial process: “visual search”
✱ gaze paths
visualize "
visual search
processes

12. Rectangular arch?
or…
three columns?
✱find more examples of perceptual illusions on:
http://psychology.sampson.cc.nc.us/Perceptill.htm

13. theory !
visual perception influences visual search
processes
➝ What we visually perceive is only partly caused by the
stimulus (on the interface, or out in the environment)
➝ Prior knowledge has a lot of influence on"
our perception, shaping our expectations"
about how something is perceived
 In a first visual glance at something, "
the brain analyses low level "
characteristics of a stimulus (colour, "
contrast, shape, context, …) and "
guesses what we are most likely "
looking at…

14. theory !
visual perception influences visual search
through bottom-up and top-down processes
influence
processing
origin
factors
display
bottom up
current interface
contrast
color
motion
grouping
layout
labeling
expectation
top down
memories of contrast
past interfaces color
and target motion
representation
grouping
layout
labeling

15. theory!
bottom-up processes
➝ Low level visual features can attract attention
➝ Colour / Contrast
➝ Orientation / Alignment
➝ Motion
Visual design is a process of guiding the user’s perception
- uses bottom-up processes to guide and influence a
user’s vision/focus, but has to take into account top-down
expectations as well.
(e.g. flashy adverts on the Web do not work, because
people know they are there and ignore them)

16. design factors!
contrast ...guides visual attention
➝ Contrast is what pulls you in, in other words, it draws your
eyes to the page. It allows you to move around the page
and find things
➝ Contrast must be strong. “If two elements, such as type,
rules, graphics, colour, texture, etc. are not the same,
make them very different- don’t make them almost the
same”
➝ Contrast creates a focal point, a dominating force, the
place your eyes go to when first looking the page (web or
print)

17. design factors!
colour contrasts
bad examples
good examples
People with cognitive or sight People with cognitive or sight
problems may have difficulty problems may have difficulty
reading and distinguishing text reading and distinguishing text from
from a background colour
a background colour
People with cognitive or sight People with cognitive or sight
problems may have difficulty problems may have difficulty
reading and distinguishing text reading and distinguishing text from
from a background colour
a background colour

18. design factors !
contrast ... creates a hierarchy of information!
➝ Allows you to skim more easily to pick out needed
information
➝ Adds interest to the page
➝ Provides a means of emphasizing what is important
➝ Directs the reader’s "
eye
➝ On a page without "
contrast, the reader "
does not know where "
to look first or what is "
important

19. design factors!
similarity / dissimilarity
➝ similarity occurs when objects "
look similar to one another. "
People often perceive them as a "
group or pattern
➝ dissimilarity occurring in "
a group of similar elements "
is called anomaly

20. design factors!
continuation / closure
➝ continuation occurs when the eye is "
compelled to move through one "
object and continue to another object.
➝ closure occurs when an object is "
incomplete or a space is not "
completely enclosed.
➝ If enough of the shape is indicated, "
people percieve the whole by filling "
in the missing infomation.

21. design factors!
alignment
➝ It is always best to pick one alignment and "
to stay with it. It is not a wise idea to mix "
alignments.
➝ Hints for better alignment " bad example:
(for text documents):
➝ Move text away from left edge
➝ Keep text out of the right edge
➝ Use the same alignment throughout the entire document (right
justify, left justify or centre align)
➝ Do not place anything on the page arbitrarily
➝ Do not centre align everything. Centre aligning should be done
consciously, not because you cannot think of anything else to do

22. design factors!
repetition
➝ Theidea of continuing and repeating certain visual
elements of a page. The goal is add to the
organizational strength and sense of unity.

23. design factors!
proximity
➝ proximity refers to the relationship that items develop
when they are close together
➝ two items that are close, appear to have a belonging to
each other
➝ related/similar items, get grouped together
➝ when items are physically far from each other, they do not
appear to have a relationship with each other
➝ elements become visually disconnected from each other
➝ do not orphan items / objects

24. design factors!
proximity
➝ groups related items together
➝ makes page look smaller
➝ increases organisation
➝ organizes information
➝ defines a beginning and ending

25. design factors!
proximity / grouping
➝ proximity occurs when elements "
are placed close together. They "
tend to be perceived as a group
When the squares are given close proximity, "
unity occurs. While they continue to be separate "
shapes, they are now perceived as one group.

26. design factors!
balance
➝ visual balance comes from arranging elements on the
page so that no one section is „heavier“ than the other
➝ a designer may intentionally throw "
elements out of balance to create "
tension or a certain mood

27. design factors!
asymmetrical balance
this page uses a 3 column
format to create a neatly
organized asymmetrical
layout.
the two columns of text are
balanced by the blocks of
colour in the lower left
topped by a large block of
with space.

28. design factors!
practical example of how human vision is
guided by colour, contrast, grouping,
alignment, ...
http://www.webstyleguide.com/page/hierarchy.html

29. examples !
apple OSX dialog boxes

33. grouping with separators

34. grouping with white space

35. grouping with group boxes

36. Apple‘s changeable panes

38. example: relevance of design
attractiveness bias
“The first presidential debate between
Richard Nixon and Robert Kennedy (1960)
is a classic demonstration of the
attractiveness bias.
"
Nixon was ill and running a fever. He wore
light colors and no makeup, further
whitening his already pale compexion and
contrasting his five-o’clock shadow.
"
Kennedy wore dark colors, makeup, and
practiced his delivery in a studio prior to
the debate. People who listened to the
debate by radio believed Nixon to be the
winner. However, people who watched the
debate on TV came to a very different
conclusion.”

39. !
task-related organization!
"The primary goal for menu,
form-fillin, and dialog-box
designers is to create a
sensible, comprehensible,
memorable, and convenient
organization relevant to the
user's task."

40. typography - design for readability
Size
➝ Provide alternatives (e.g. for different age
groups)
➝ Consider resolution of screen (e.g. mobile
devices with higher res.)
Typeface (Fonts)
➝ For digital displays rather use "
sans serif: "
"
"
"
than serif fonts:

41. typography - design for readability
Contrast
➝ High contrast, avoid textured backgrounds
Text Blocks
➝ Keep lines to 10 to 12 words (35 to 60 characters)
Spacing
➝ Vertical and horizontal spacing can enhance readibility especially
when using small font sizes (or having long texts)

42. large fonts
➝ improve readability
➝ simplify selection
➝ very large fonts become a
graphical element in the UI

43. !
custom fonts…for a unique style!
✱ sources for free fonts:
http://www.webpagepublicity.com/free-fonts.html
www.fontsmack.com
http://www.smashingmagazine.com/2007/11/08/40-
excellent-freefontsfor-professional-design

44. colours
➝ need be used in consistent manner
➝ a clearly defined colour scheme is an "
important tool in design process
➝ Colour schemes help to organise and "
structure
➝ The rigid application of a good colour
scheme can to some extend conceal a
faulty layout
➝ they transfer mood and meaning "
http://www.color-wheel-pro.com/color-meaning.html
➝ colour blindness can be an issue!

45. colour schemes

46. colours ...for the web 2.0

47. ✱http://colorschemedesigner.com/
http://colorschemedesigner.com/

48. ✱http://www.colourlovers.com

49. aesthetic web applications!
flickr – online photo management

50. menus!
single menus
➝ Binary Menus "
(e.g. Radio Buttons)
➝ Multiple-item Menus
➝ Multiple-selection menus
(e.g. Check Boxes)
➝ Pull-down, pop-up and
toolbar menus

51. menus!
embedded menus and hotlinks
➝ Embedded menus are an alternative to explicit menus
➝ It is natural to allow users reading about people, events, and
places to retrieve detailed information by selecting menus in
context

52. novel menu types (using direct manipulation)!
pie menus

53. novel menu types !
menu for small displays
entertainment, communication services (mobiles,
PDA’s, MP3 players, …)
➝ learnability is a key issue
➝ e.g. consistency of “Cancel” and “Ok” buttons
➝ hardware buttons
➝ navigation, select
➝ expect interactions
➝ tap interface

54. touch-based menus!
e.g. for mobile interfaces
➝ Intuitive touchscreen"
(e.g. unlock mechanism)
➝ Big menu items
Windows Mobile vs Mac OSX

55. touch-based menus!
iPhone gestures
GESTURE
ACTION
tap
To press or select a control or link (analogous to a single mouse click).
You receive the onclick event for this gesture.
double tap
To zoom in and center a block of content or an image.
To zoom out (if already zoomed in).
flick
To scroll or pan quickly.
drag
To move the viewport or pan.
pinch open
To zoom in.
pinch close
To zoom out.
touch and hold
To display an information bubble, magnify content under the finger, or
perform specific actions in built-in iPhone applications and featres.
two-finger scroll
To scroll up or down within a text area, an inline frame, or an element with
overflow capability, depending on the direction of the movement.
You can receive a mousewheel event for this gesture

56. references
➝ Gestalt principles
➝ www.usask.ca/education/coursework/skaalid/theory/"
gestalt/gestalt.htm
➝ http://graphicdesign.spokanefalls.edu/tutorials/process/ gestaltprinciples/
gestaltprinc.htm
➝ User-Centred Web Design, John Cato, Addison Wesley,
2001
➝ Apple Human Interface Guidelines
➝ http://developer.apple.com/documentation/UserExperience/Conceptual/
OSXHIGuidelines/index.html
➝ Universal Principles of Design, William Lidwell, Kritina
Holden, Jill Buttler, Rockport Press 2003

59. http://deviceatlas.com/explorer#_/
properties/19/20

62. Reference design
adaptation adaptation