Visual Design Teppo Räisänen

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 interestinginteresting 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