Graphical Design1Ben Bederson / Saul GreenbergGraphical Screen DesignGrids are an essential tool for graphical designImportant graphical design concepts includevisual consistency visual relationshipsvisual organization legibility and readabilitynavigational cues appropriate imageryfamiliar idiomsEvan Golub / Ben Bederson / Saul GreenbergGraphical DesignMust account for:• a comprehensible mental image- metaphor• appropriate organization of data, functions, tasks and roles- cognitive model• quality appearance characteristics- the “look”• effective interaction sequencing- the “feel”Sources:- Principle of Effective Visual Communication for GUI designMarcus in Baecker, Grudin, Buxton and Greenberg- Designing Visual InterfacesMullet & Sano, Prentice HallGraphical Design2Evan Golub / Ben Bederson / Saul GreenbergComponents of Visible LanguageLayout• formats, proportions, and gridsTypography• typefaces and typesettingImagery• signs, icons, symbols; concrete to abstractSequencing• how the interface unfoldsVisual identity• unique appearanceAnimation• dynamics of displayColor and Texture• convey complex information and pictorial realityscarves: 10.75hats: 5.43bold serif fixeditalic sans-serif variableEvan Golub / Ben Bederson / Saul GreenbergGridsHorizontal and vertical lines to locate window components• aligns related componentsOrganization• contrast to bring out dominant elements• grouping of elements by proximity• show organizational structure• alignmentConsistency• location•format• repetition• organizationWindow towidgetspacingWidget towidgetspacingNo OkMessage text inArial 14, leftadjustedStandard icon setFixedcomponentsFormat ofvariablecontentsGraphical Design3Evan Golub / Ben Bederson / Saul GreenbergGridsNo OkMessage text inArial 14, leftadjustedStandard icon setà ApplyCancelThe file wasdestroyedNo OkDo you really wantto delete the file“myfile.doc” fromthe folder “junk”?"á OkCannot move thefile “myfile.doc” tothe folder “junk”because the disc isfull.Evan Golub / Ben Bederson / Saul GreenbergAnother gridTwo-level Hierarchy•indentation•contrastGroupingby whitespaceAlignment connectsvisual elements in asequenceLogic of organizationalflowGraphical Design4Evan Golub / Ben Bederson / Saul GreenbergThe importance of negative spacefrom mullet & sanoEvan Golub / Ben Bederson / Saul GreenbergVisual Consistency• internal consistency- same conventions and rules for all elements of the GUI unless strong reason- set of application-specific grids enforce this• external consistency- follow platform and interface style conventions- use platform and widget-specific grids- deviate from conventions only when it provides a clear benefit to userHelpmmmm mmmmmm mmm Okay?Warningmmmm mmmmmmOkay!á Tip of the day: Monday, Mar 12mmmm mmmmmmDismissàGraphical Design5Evan Golub / Ben Bederson / Saul GreenbergRelationships between screen elements (Grouping)Link related elements, disassociate unrelated elements• proxemic clusters• white (negative) space• alignment• explicit structureMmmm:Mmmm:Mmmm:Mmmm:Mmmm:á Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:à Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Evan Golub / Ben Bederson / Saul GreenbergUsing explicit structure as a crutchfrom mullet & sanoGraphical Design6Evan Golub / Ben Bederson / Saul GreenbergNavigational cues• provide initial focus• direct attention to important, secondary, or peripheral items as appropriate• assist in navigation through material• order should follow a user’s conceptual model of sequencesá à Evan Golub / Ben Bederson / Saul GreenbergEconomy of visual elements (I)• General philosophy: “Make simple things simple, and hard things hard.”• minimize number of controls• include only those that are necessary- eliminate, or relegate others to secondary windows• minimize clutter- so information is not hiddenNNNNMMMMxxx: ____xxx: ____xxx: ____xxx: ____xxx: ____xxx: ____xxx: ____xxx: ____xxx: ____xxx: ____xxx: ____xxx: ____xxx: ____xxx: ____xxx: ____MMMMNNNNá àGraphical Design7Evan Golub / Ben Bederson / Saul GreenbergEconomy of visual elements (II)Evan Golub / Ben Bederson / Saul GreenbergEconomy of visual elements (III)Tabs• excellent means for factoring related items• but can be overdone or not taken far enoughGraphical Design8Evan Golub / Ben Bederson / Saul GreenbergEconomy of visual elements (IV)Tree Views• another excellent means for factoring related items• but can be difficult to know how to useEvan Golub / Ben Bederson / Saul GreenbergLegibility and readability (I)• Characters, symbols, graphical elements should be easily noticable anddistinguishableText set in BraggadocioText set in HelveticaText set in CourierTEXT SET INCAPITOLSá à Text set in Times RomanGraphical Design9Evan Golub / Ben Bederson / Saul GreenbergLegibility and readability (II)Proper use of typography• 1-2 typefaces (3 max)• normal, italics, bold• 1-3 sizes maxLargeMediumSmallLargeMediumSmallá à ReadableDesign components to be inviting and attractiveDesign components to be inviting and attractiveUnreadableDesign components to be inviting and attractiveDesign components to be inviting and attractiveEvan Golub / Ben Bederson / Saul GreenbergLegibility and readability (III)• typesetting-point size- word and line spacing- line length-indentationReadableDesign components to be inviting and attractiveDesign components to be inviting and attractiveá à Unreadable: Design components to be easy to interpret andunderstand. Design components to be inviting and attractiveGraphical Design10Evan Golub / Ben Bederson / Saul GreenbergImagerySigns, icons, symbols• right choice within spectrum from concrete to abstractIcon design very hard• except for most familiar, always label themImage position and type should be related• image “family”• don’t mix metaphorsConsistent and relevant image use• not gratuitous• identifies situations, offerings...Partial icon familyEvan Golub / Ben Bederson / Saul GreenbergWhat you now knowGrids are an essential tool for graphical designImportant visual concepts include• visual consistency- repetition• visual organization- contrast, alignment and navigational cues• visual relationships- proximity and white space• familiar idioms• legibility and readability- typography• appropriate