1. Corritore, MCIT Working Connections, June 2004 1 Introduction to Visual Design Dr. Cindy Corritore Creighton University ITM 734 Fall 2005

2. Corritore, MCIT Working Connections, June 2004 2 What’s important? Elegance –cuts to the heart of the matter –simple –other characteristics approachable – invites exploration recognizable (vs. elaborate design) – Normans’ Affordance immediacy – you just get it right off usability – can make it work easily

3. Corritore, MCIT Working Connections, June 2004 3 how achieved? reduction through success refinement remove unnecessary clutter –pg. 31 Figure 30 – rethink the organization –excessive prompting/help gets in the way

4. Corritore, MCIT Working Connections, June 2004 4 how achieved? reduction: reduce design to its essence –remove detail that is not pertinent to the goal/task/message – ask ‘is this necessary to the message?’ Remove it and see what happens. –eg. road signs –Mullet pg. 25 – Figure 23 – binder spirals unnecessary – don’t need this degree of replication of real world (eg. faces)

5. Corritore, MCIT Working Connections, June 2004 5 how achieved? regularize elements of the design that are left –use repetitive elements, realign, standardize size, etc. –encourages gestalt and drill-down behaviors combine elements for maximum leverage – that is, an element plays multiple roles –see in logos a lot when first letter may be used for two things –often based on knowing users goals –avoid redundancy

6. Corritore, MCIT Working Connections, June 2004 6 relationships of elements scale - relative size of an element in given context - forcefulness contrast – visual differences - excitment –used to differentiate proportion – relationship between scale and contrast - rhythm –provide emphasis –draw attention (direct it) –add interest

7. Corritore, MCIT Working Connections, June 2004 7 visual automaticity perceive Bertin’s shapes without further processing (base elements) –associative style of perception – ignore variation on one visual dimension in perceiving others recognise an object from different directions –selective perception – pick out salient items and ignore rest of elements see pictures inside of pictures – has to be easy –ordered perception – determine a relative ordering big to small – how you refer to things – –quantitative perception – identify amount of difference twice as big

8. Corritore, MCIT Working Connections, June 2004 8 how to do squint test – see what is still visible - this is test of gestalt layers – zones created by scale and contrast –detailed maps, colors of paths in subway systems –side-by-side views in NextStep filesystem sharpen visual distinctions – max contrast match qualities of background and figures –pg. 84 question mark –squint – neither dark nor light areas dominate

9. Corritore, MCIT Working Connections, June 2004 9 keep in mind don’t overuse scale, contrast, proportion – should clearly provide a message make differences clear –sharp contrast but not too much (too bold) font names in their actual fonts – helpful but cognitively problematic

10. Corritore, MCIT Working Connections, June 2004 10 structure provides –unity of elements – seen as related –integrity – fits together (not a jumble of unrelated parts) – allows for scanning –readability – can attend to chunks individually –control – can direct attention to different chunks, know where to place attention depending on goal

11. Corritore, MCIT Working Connections, June 2004 11 structure our friends – the ______ principles that guide natural grouping –proximity –similarity –continuity –symmetry left alignment vs. centering with multiple boundries

12. Corritore, MCIT Working Connections, June 2004 12 how to for structure grouping –can be processed automatically if done well –forms and tables in webpages –white space can direct attention (negative space) hierarchies of groups - big square with small squares inside it balance – global arrangement of elements –eg. ppt headings are in different places –visual wt of elements – must be balanced, symmetrical alignment – also makes deviations more apparent

13. Corritore, MCIT Working Connections, June 2004 13 next time – Ch 5 – module and program