Visual Design

Teppo Räisänen
http://www.oamk.fi/~teraisan/
Teppo.raisanen@oamk.fi
Visual Design And Usability
 Visual design is an essential part of
usability of an application
 Not only software applications’ usability
is affected by the visual appearance
 Industrial design is closely connected to
usability
Visual Design And Usability
 Orderliness is very important in visual
design
 Especially uniformity should be
considered
 It should be also remembered that
visual design is just one aspect of
usability
Visual Design And Usability
 Usability is also affected by, for
example, application’s functional
structure
 It is often possible to use the same
functional structure when building
different kinds of UI solutions
 Like in any other design, testing is an
integral part of visual design
Visual Composition
 Placing of components under one
element (usually computer display)
 People of western countries read from
top-left to bottom-right
 One’s attention does not automatically
follow this path
 Strong stimuli can distract the usual
flow of attention points
Example
 This slide uses a bit differend visual
design template
 Since the visual composition has
changed, some viewer’s could find this
slide distracting
Visual Composition
 Usually visual clues should follow the
natural path of user’s attention
 When designing products for global
market, it must be remembered that
top-left – bottom-right reading is not an
universal phenomenon
Visual Composition
 One of the most common compositional
problems is the picture ratio
 1:1 (square)
 1:1,414 A4 (A4)
 1:1,1618 (’Golden section’ )
 Human’s visual field has more width
than height
Visual Composition
 Modern TVs use even wider (16:9) ratio
 16:9 is good ratio for attention demanding
UIs
 Ultimately hardware display presents
limitations of ratio used
Attention Guidance
 Sometimes user’s attention needs to be
guided to a spesific area of UI
 important message
 Errors in input field
 Inside textual context a bold font may
be useful for attention guidance
 CAPITAL LETTERS should usually not be
used
Attention Guidance
 Movement is an effective tool for
guiding attention
 Flickering UI components are often
found distracting by users
 Strong flickering can even cause an
epileptic fit
 Many Web users have learned not to
pay any attention to flickering ads
Attention Guidance
 Colours are often used
 A colour, that is out of line with basic UI
colours is very attention demanding
 Normally UIs should utilize subdued
colours
 Overly use of bright colours tends to
numb user’s senses
Attention Guidance
 Empty space can be used as a guidance
 Components that are surrounded by
empty space are found attention
demanding
 Often there is not enough room in the
display to effectively use empty space
Attention Guidance
 Pictures are effective when used within
textual context
 Especially pictures that are somehow scary
or interesting
 User’s state of mind has an effect on what
is intepreted as interesting
 Attention guidance should be used with
restraint
Visual Balcance
 Balance has a strong effect in UI’s
enjoyability
 An unbalanced UI sends a message of
leaning in some direction
 Display components should be placed
so, that UI seems balanced
Example
Use of Text And Images
 Both text and images have their good
and bad points as UI components
 Text is more unambiguous
 Images are quicker to recognize
 Images used (e.g. icons) often are
based on user’s conceptual model
 Intepretation of a picture may vary
according to user’s cultural background
Use of Text And Images
 Some images are universal
 Flame => ’fire’
 Water drop => ’water’
 Some symbols have gradually
become universal
Use of Text And Images
 Textual contents must be, of course,
localized
 Ratio of text/images used in
communications is also dependent of
culture
 E.g. traffic signs in USA use more text,
whereas in Europe graphical symbols
are preferred
Use of Text And Images
 Symbols can be used to signal
 an entity (recycle bin)
 an action (diskette)
 a property (a turtle)
 Many modern UIs use both textual
information and symbols, to achieve a
maximal effect
Use of Colours
 Use of colours should be consistent
troughout the application
 It is often recommended, that amount
of colours used should be no more than
five
 Especially if user is required to
recognize meanings behind colours,
restrictions of human memory must be
considered
Use of Colours
 Especially font colours must be chosen
conservatively
 Good choices of font colour /
background are for example
 white text, black background
 white text, dark blue background
 Use of strong complementary colours
should be avoided
Use of Colours
 Interpretation of colours depends on
user’s cultural background
 E.g. in western countries
 red = hot/danger
 green = safe
 blue = cold
 Often product’s of a same kind share
some conventional use of colours
Use of Colours
 Colours can send very strong signals
and transmit emotions
 Correct use of colours demands lots of
practice
 Therefore usually the best choice is to
confine oneself to use of conventional
colours