240 likes | 271 Views
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
E N D
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
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