1 / 24

Visual Design

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

bmiley
Download Presentation

Visual Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related