界面chapter 6.pptVIP

User-Centered Design and Testing Chapter 6 Graphic Design Contents 6.1 Coordinate Systems and Object Placement 6.2 Guidelines for Good Graphic Design 6.3 Words or Icons? 6.4 ExamplesMicrosoft IE 6.5 ExamplesMicrosoft Office 6.6 ExamplesGoogle 6.1 Coordinate Systems and Object Placement Coordinate Systems and Object Placement Controls are placed at positions on the screen based on their Top and Left properties.? Left property : the position of the left edge of the control or the x coordinate . Top property : the position of the top edge of the control or the y coordinate.? Coordinate Systems and Object Placement Coordinate Systems and Object Placement 6.2 Guidelines for Good Graphic Design Guidelines for Good Graphic Design Simplicity Contrast White space Alignment Grouping and Structure Simplicity “Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.” “Simplicity does not mean the absence of any décor… It only means that the décor should belong intimately to the design proper, and that anything foreign to it should be taken away.” “Keep it simple, stupid.” “Less is more.” “When in doubt, leave it out.” Techniques for Simplicity: Reduction Remove inessential elements Techniques for Simplicity: Regularity Techniques for Simplicity: Double-Duty Combine elements for leverage Find a way for one element to play multiple roles Contrast Visual Variables Highlight differences Visual variablesBertin 1967 Contrast Visual Variables temperature Characteristics of Visual Variables Quantitative is there a numerical reading obtainable from changes in this variable? Characteristics of Visual Variables Order are changes in this variable perceived as ordered? Characteristics of Visual Variables Length across how many changes in this variable are distinctions perceptible? Attention Recall the spotlight metaphor Attention spotlight moves serially from one input channel to another All stimuli within spotlighted channel are proces