Goal:

1
(Select the application structure) Build the
navigation model and evaluate Design the
screens Build the menus, evaluate Select the
command buttons Select the metaphors Select
representations Create the fields, labels and
other controls Create the layout Add the
shortcuts and icons, evaluate Check the colours,
visibility, restrictions, conceptual model,
mappings, symbol language, exits, and feedback
Build the dialog boxes accordingly Build the
helps Evaluate

• Goal
• Effective Visual Communication

2
Select the representations
Representation matters
3
Please, dont
Sometimes designers invent something that they
think is very sexy
Original Saul Greenberg
4
or
Just unpleasant and difficult to interact
From Mullet and Sano
5
Symbols and symbol language

• Can work (depending on users skills) as
• symbols
• signs
• signals

in reasoning how to act
to find proper rules
to control the automated acting
Note Cultural Associations -Groups of people
learn idioms red danger, green go
6
..writing symbol language
7
symbol language
8
Layout design in windows

• Amount of data
• too little is not enough to múch is too much
• Order
• locig and serial
• rhytmic, guiding the eyes of the user
• natural sequences
• Navigating (inside window)

• Control
• from top left corner to bottom right corner
• Aestetics
• leave empty space
• balance, grouping
• What is the most important

9
Screen design elements (Mandel 1997)
Every line, every control, box piece of
text, colour, and graphic on the screen impacts
user not only singly, but also in
combination with everything else on the screen
T Mandel 1997
10
Visual aestetics

• balace
• regularity
• symmetry
• predictability
• serial
• economy
• grouping
• simplicity

In anything at all, perfection is finally
attained not when there is no longer anything to
add, but when there is no longer anything to
take away - Antoine de Saint Exupery
11
Layout

• Organization
• contrast to bring out dominant elements
• grouping of elements by proximity
• show organizational structure
• alignment

12
Layout
Logic of organisationalflow
Two level hierarchy -indentation depth M-letter
Semantic grouping to show relationships between
screen elements
13
Mapping hierarchy and order in layout
Not like this like this
14
Use of grid
15
use of grid
Do not use vertical grids, they are
too restricting gt ladders
16
Example
IBM's Aptiva Communication Center
No organisation, no order
17
Navigating in window

• Provide initial focus
• direct attention to important, secondary, or
  peripheral items as appropriate
• assist in navigation through material
• Alignment to left
• order of elements
• grouping of elements
• large initials
• lines
• order should follow a users conceptual model of
  sequences
• from top left corner to bottom right one

Form rivers
18
navigating example
19
A better layout
Label
Label
20
BUT the right navigation depends on the work
21
BUT ...
(Layout design for efficiency)
22
Semantic grouping
23
X-test
Xxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx
x xxxxxxxx xxxxxxxxxx
Xxxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxxx xxxxxx
xx xxxxxxxxxx
xxxxxx
xxxxxx
xxxxxx
xxxxxx
Others Squint-test
24
Small differencies are difficult to notice
hfhffgfgfghj
ghjjhghjhghg
hhghg
From To Subject
Ghjjhghjhghg yiuyiuyiyuyiiu
khjkhjjjjh
ghjjhghjhghg
Attachments
1 files
25
Empty space
26
Example
This field is difficult to notice. If it is in a
wrong place, it is more conspicuous
27
Meaningfulness(for a user!)
is an important prerequisite of learning