Visual Design

1. Visual Design Teppo Räisänen http://www.oamk.fi/~teraisan/ Teppo.raisanen@oamk.fi

2. 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

3. 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

4. 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

5. 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

6. Example • This slide uses a bit differend visual design template • Since the visual composition has changed, some viewer’s could find this slide distracting

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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. Example

17. 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

18. Use of Text And Images • Some images are universal • Flame => ’fire’ • Water drop => ’water’ • Some symbols have gradually become universal

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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