Gleanings Ch 5, 6, 7. Design Naviga3on Organiza3on and layout

Transcription

1 Gleanings Ch 5, 6, 7 Design Naviga3on Organiza3on and layout

2 Issues in itera3ve design and prototyping Warning about itera3ve design design iner3a early bad decisions stay bad diagnosing real usability problems in prototypes.. and not just the symptoms Width vs Depth Ice cream choice at something like Brewster s Automobile choice Prototypes simulate or animate some features of intended system different types of prototypes

3 Itera3ve design and prototyping Warning about itera3ve design (Hill climbing problem) design iner3a early bad decisions stay bad diagnosing real usability problems in prototypes.. and not just the symptoms Prototypes simulate or animate some features of intended system different types of prototypes throw- away incremental Evolu3onary

4 Itera3ve design and prototyping Forma3ve design/evalua3on trying to find a good hill to climb Summa3ve design/evalua3on trying to climb the hill how do you know if you have gowen to the top Consistency internal external

5 Techniques for prototyping Storyboards need not be computer- based can be animated Limited func3onality simula3ons some part of system func3onality provided by designers tools like powerpoint are common for these Wizard of Oz technique

6 Four rules of naviga3on Harder for deep rather than wide problems knowing where you are knowing what you can do knowing where you are going or what will happen knowing where you ve been or what you ve done

7 Available tools for design grouping of items order of items decora3on - fonts, boxes etc. alignment of items white space between items

8 Grouping and structure logically together physically together Billing details: Name Address: Credit card no Delivery details: Name Address: Delivery time Order details: item quantity cost/item cost size 10 screws (boxes)

9 Decora3on use boxes to group logical items use fonts for emphasis, headings but not too many!! ABCDEFGHIJKLM NOPQRSTUVWXYZ

10 Alignment - text you read from le] to right like you read Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess fine for special effects but hard to scan boring but readable! Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess

11 Alignment: Names If surnames are important Alan Dix Janet Finlay Gregory Abowd Russell Beale Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix, Alan Finlay, Janet Abowd, Gregory Beale, Russell

12 Alignment: Numbers If finding the largest is important " "

13 Mul3ple columns? sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 scanning across gaps hard: Move it closer together Use leaders Use grey bars

14 Use space to separate

15 Use space to structure

16 Use space to highlight

17 An example

18 Group by usage/func3on defrost settings type of food time to cook

19 Group by order of use 1) type of heating 2) temperature 3) time to cook 4) start

20 Use decora3on to separate different colors for different functions put lines around related buttons (temp up/down)

21 Use white space gaps to aid grouping

22 Guidelines more sugges3ve and general many textbooks and reports full of guidelines abstract guidelines (principles) applicable during early life cycle ac3vi3es detailed guidelines (style guides) applicable during later life cycle ac3vi3es understanding jus3fica3on for guidelines aids in resolving conflicts

23 Golden rules and heuris3cs Broad brush design rules Useful check list for good design BeWer design using these than using nothing! Different collec3ons e.g. Nielsen s 10 Heuris3cs (see Chapter 9) Shneiderman s 8 Golden Rules Norman s 7 Principles

24 Nielson s Usability Heuris3cs Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose and recover from errors Help and documentation

25 Shneiderman s 8 Golden Rules 1. Strive for consistency 2. Enable frequent users to use shortcuts 3. Offer informa<ve feedback 4. Design dialogs to yield closure 5. Offer error preven<on and simple error handling 6. Permit easy reversal of ac<ons 7. Support internal locus of control 8. Reduce short- term memory load

26 Norman s 7 Principles 1. Use both knowledge in the world and knowledge in the head. 2. Simplify the structure of tasks. 3. Make things visible: bridge the gulfs of Execu<on and Evalua<on. 4. Get the mappings right. 5. Exploit the power of constraints, both natural and ar<ficial. 6. Design for error. 7. When all else fails, standardize.

27 So Given all this stuff Why is GGC.com so frustra3ng?