Screen Design

1
Screen Design Evaluation
2
Introduction

• Evaluation Methods
• Principles of screen design
• Nielsens heuristics
• Design elements

3
Principles of Screen Design

• Contrast
• Alignment
• Repetition
• Proximity

4
Contrast

• Contrast make different things different
• It brings out dominant elements
• Lesser elements are muted
• It creates dynamism

Principles of Screen Design
5
Contrast
Principles of Screen Design
6
Alignment

• Alignment visually connects elements
• It creates a visual flow
• Main aspects of alignment
• Symmetry
• Simplicity
• Balance
• Sequentiality

Principles of Screen Design
7
Alignment

• Symmetry /Simplicity /Balance /Sequentiality

Principles of Screen Design
8
Repetition

• Repeat design throughout the interface
• Repetition promotes consistency
• Repetition creates unity
• Main aspects of repetition
• Unity
• Consistency
• Predictability

Principles of Screen Design
9
Repetition

• Unity/ Consistency /Predictability

Principles of Screen Design
10
Proximity

• Groups related elements
• Separates unrelated ones
• Main aspects of proximity
• Grouping

Principles of Screen Design
11
Proximity
Principles of Screen Design
12
Other Considerations of Screen Design

• Economy
• Regularity
• Proportion

Principles of Screen Design
13
Other Considerations of Screen Design
Principles of Screen Design
14
What is wrong with this screen?
Principles of Screen Design
15
What is wrong with this screen?

• Bad alignment
• no flow
• Poor contrast
• cannot distinguish colored labels from editable
  fields
• Poor repetition
• buttons do not look like buttons

Principles of Screen Design
16
What is wrong with this screen?
Alignment Organization
IBM's Aptiva Communication Center
Principles of Screen Design
17
What is wrong with this screen?
Haphazard layout
Principles of Screen Design
18
What is wrong with this screen?
Repairing the layout
Principles of Screen Design
19
Design Elements in HCI

• Design elements in HCI
• Font colour
• Design of graphic elements
• Arrangement of text

Design Elements
20
Font Colour

• Font Colours
• When do you use upper / mixed fonts?
• Uses of Colour
• Problems with Colour
• Guidelines for Colour

Design Elements
21
Font Colour

• Upper / Mixed Fonts
• Use mixed case for text, message, action/menu bar
  actions, button descriptions, screen ID
• Use upper case for title and section headings

Design Elements
22
Font Colour

• Uses of Colour
• Colour can be used for a number of purposes
• Formatting aid
• Visual code
• Other uses

Design Elements
23
Font Colour
Design Elements
24
Font Colour

• Problems with Colour
• Colour has an extremely high attention getting
  capacity
• Varying sensitivity of the eye

Design Elements
25
Font Colour

• Problems with Colour
• Varying sensitivity of the eye

• Brightness determined mainly by RG
• Hard to deal with blue edges blue shapes
• Blue not suitable for text or small objects

Design Elements
26
Font Colour

• Problems with Colour
• Colour viewing deficiencies
• 8 males, .4 females are colour-blind
• red - green most common
• red - orange confused with green - yellow
• Cross-disciplinary/cultural differences
• colours have different meanings across
  situations/cultures
• blue
• Financial managers - corporate qualities or
  reliability
• Health care professionals - death
• Nuclear reactor monitors - coolness or water

Design Elements
27
Font Colour

• Problems with Colour

Design Elements
28
Design of Graphic Elements

• Primary Graphic Elements in a GUI
• Windows
• Menus
• Icons

Design Elements
29
Design of Graphic Elements

• Windows
• Users need to consult multiple sources rapidly
• Need to offer users sufficient information and
  flexibility to accomplish task, while reducing
  window housekeeping actions
• opening, closing, moving, changing size
• time spent manipulating windows instead of on
  task

Design Elements
30
Design of Graphic Elements

• Menus
• When designing menus some questions to be asked
  are
• How long is the menu to be?
• In what order will the items appear?
• How is the menu to be structured, e.g. when to
  use sub-menus, dialog boxes?
• What categories will be used to group menu items?
• How will division into groups be denoted, e.g.
  different colors, dividing lines?
• How many menus will there be?
• What terminology to use? (results of requirements
  activities will indicate this)
• How will any physical constraints be
  accommodated, e.g. mobile phone?

Design Elements
31
Design of Graphic Elements

• Icons
• Good icon design is difficult
• Meaning of icons is cultural and context
  sensitive
• Some tips
• always draw on existing traditions or standards
• concrete objects or things are easier to
  represent than actions
• From clip art, what do these mean to you?

Design Elements
32
Design of Graphic Elements
Design Elements
33
Information Display

• Words
• Words displayed on screens should be easily
  comprehended, with minimum ambiguity and
  confusion
• Some ways to achieve this are as follows
• Do not use jargon
• Use standard alphabetic characters
• Use short familiar words
• Use complete words
• Use positive terms
• Use simple action words
• Use the more dimension when comparing
• Do not stack words

Arrangement of Text
34
Information Display

• Sentences
• Use brief, simple sentences
• Provide immediately usable sentences
• Use affirmative statements
• Use active voice
• Be non-authoritarian
• Be non-threatening
• Be non-anthropomorphic
• Be non-patronising
• Order words chronologically
• Avoid humour and punishment

Arrangement of Text