Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential tool for graphical design Other visual design concepts consistency relationships organization legibility and readability navigational cues appropriate imagery familiar idioms Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known. Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press Saul Greenberg CRAP Contrast –make different things different –brings out dominant elements –mutes lesser elements –creates dynamism Repetition Alignment Proximity Robin Williams Non-Designers Design Book, Peachpit Press 1 2 3 4 5 Saul Greenberg CRAP Contrast Repetition –repeat design throughout the interface –consistency –creates unity Alignment Proximity Robin Williams Non-Designers Design Book, Peachpit Press 1 2 3 4 Saul Greenberg CRAP Contrast Repetition Alignment –visually connects elements –creates a visual flow Proximity Robin Williams Non-Designers Design Book, Peachpit Press 1 2 3 4 Saul Greenberg CRAP Contrast Repetition Alignment Proximity –groups related elements –separates unrelated ones Robin Williams Non-Designers Design Book, Peachpit Press 1 2 3 Saul Greenberg Where is a view focused ? CRAP combines all aspects with the goal to provide guidelines for reading a graphics Robin Williams Non-Designers Design Book, Peachpit Press title subtext three points main point sub point Original CRAP example Proximity Alignment Contrast Repetition Saul Greenberg CRAP summary Contrast –make different things different –brings out dominant elements –mutes lesser elements –creates dynamism Repetition –repeat design throughout the interface –consistency –creates unity Alignment –visually connects elements –creates a visual flow Proximity –groups related elements –separates unrelated ones Robin Williams Non-Designers Design Book, Peachpit Press Saul Greenberg Contrast using visual weight Create a point attracting attention and then you guide user’s eye on the screen Example of visual flow: –image –heading –date –logo –text User’s view steps from one item to other following weights C:\Vyuka\PV182\Prednasky.Cz\ScreenDesign\C.R.A.P. Principles of Graphic Design_soubory\b9571be2faae000ccdd37b22926c7699.png Saul Greenberg Contrast using font C:\Vyuka\PV182\Prednasky.Cz\ScreenDesign\C.R.A.P. Principles of Graphic Design_soubory\59604272aa38be4809251c3a91d7022d.png Saul Greenberg Contrast – serif/sans serif font C:\Vyuka\PV182\Prednasky.Cz\ScreenDesign\C.R.A.P. Principles of Graphic Design_soubory\5663a230998cc5e88a4751b11e7b0eed.png for longer texts, serifs guide reader letter by letter good choice for on-line texts, serifs may lower readability (blurred pixels) Saul Greenberg Contrast – simple modifications C:\Vyuka\PV182\A_CRAP_way_to_improve_usability_soubory\Fig1CRAP.png which button is more important ? C:\Vyuka\PV182\A_CRAP_way_to_improve_usability_soubory\Fig2CRAP.png no „depth“ „Bold“ canceled button replaced by link Saul Greenberg Repetition unifies design C:\Vyuka\PV182\Prednasky.Cz\ScreenDesign\C.R.A.P. Principles of Graphic Design_soubory\4a72afb9c5fe536fd32a3073b38e516e.png Saul Greenberg Color pallete unifies design kuler.adobe.com Saul Greenberg Text alignment helps to categorize C:\Vyuka\PV182\Prednasky.Cz\ScreenDesign\C.R.A.P. Principles of Graphic Design_soubory\d9648ea4c33171b615facf49f6204512.png Saul Greenberg Proximity and alignment C:\Vyuka\PV182\A_CRAP_way_to_improve_usability_soubory\Fig7CRAP.gif C:\Vyuka\PV182\A_CRAP_way_to_improve_usability_soubory\Fig7CRAP.gif alphabetic list groups with heading Saul Greenberg C:\Vyuka\PV182\A_CRAP_way_to_improve_usability_soubory\Fig5CRAP.png Alignment – grid analysis original design revised design Saul Greenberg Grids Horizontal and vertical lines to locate window components –aligns related components Organization –contrast for dominant elements –element groupings by proximity –organizational structure –alignment Consistency –location –format –element repetition –organization window to widget spacing Widget to widget spacing No Ok Message text in Arial 14, left adjusted Standard icon set Fixed components Format of variable contents Two-level Hierarchy •indentation •contrast Grouping by white space Alignment connects visual elements in a sequence Logic of organizational flow Saul Greenberg Repetition brings visual consistency internal consistency –elements follow same conventions and rules –set of application-specific grids enforce this external consistency –follow platform and interface style conventions –use platform and widget-specific grids deviate only when it provides a clear benefit to user • Warning mmmm mmm mmm Okay ! Help mmmm mmm mmm mmm Okay ? Tip of the day: Monday, Mar 12 mmmm mmm mmm Dismiss ü û Saul Greenberg Grid design Graphical redesign Create a grid emphasizing: –visual consistency –relationships between screen elements –navigational cues –economy –legibility and readability –imagery redesign_1b redesign_1a redesign_2 Constructing a grid – an easy (amateurish) approach 1.Maintain consistency with GUI style •locate standard components - title bar, window controls, … 2.Decide navigational layout + white space + legibility + typography •annotated grid shows location of generic components •these generic components may have their own grids. Using the grid 3.Determine relationships, navigational structure •map navigational structure onto the grid 4.Economize •collapse two windows into one • trim sound dialog redesign_3 Using the grid 5.Evaluate by displaying actual examples 6.Economize further •decide which we prefer redesign_5 redesign_4 vs Saul Greenberg Relate related screen elements proximal clusters alignment white (negative) space explicit structure Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: ü Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: û Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: ? left – alignment only, no relation visible center – alignment and explicit structure right – proximity, alignment, white space Saul Greenberg Guide focus using navigational cues provide initial focus direct attention as appropriate to important 2ndary, or peripheral items as appropriate order should follow a user’s conceptual model of sequences ü û Saul Greenberg The importance of negative space and alignment Mullet & Sano Saul Greenberg Economy of visual elements minimize number of controls include only those that are necessary –eliminate, or relegate others to secondary windows minimize clutter –so the information is not hidden NNNN MMMM xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ MMMM NNNN ü û Tabs –excellent means for factoring related items –but can be overdone Saul Greenberg Imagery Signs, icons, symbols –right choice within spectrum from concrete to abstract Icon design is very hard –except for most familiar, always label them Image position and type should be related –image “family” Consistent and relevant image use –identifies situations, offerings... Saul Greenberg Icons easy ? Not at all ! 7 Principles of Effective Icon Design Holistic approach Make sure that each icon differs from surrounding icons, while still working together as a whole Approach Icon Design Holistically https://design.tutsplus.com/articles/7-principles-of-effective-icon-design--psd-147 Saul Greenberg Idioms E.g.: Familiar ways of using GUI components –appropriate for casual to expert users –builds upon computer literacy –must be applied carefully in walk up and use systems Pulldown menus Cascading menu Dialog box item Toolbars and tooltips Window manipulation Standard typographic controls Files Microsoft Powerpoint Saul Greenberg How to choose between widgets What components must be in the display? –necessary visual affordances –frequent actions •direct manipulation for core activities •buttons/forms/toolbar/special tools for frequent/immediate actions •menus/property window for less frequent actions •secondary windows for rare actions How are components related? –organize related items as “chunks” What are familiar and expected idioms? –cross application look and feel Saul Greenberg There is also a professional grid design {title} Saul Greenberg Grid design and morning headache We are not professional typography designers, at least most of us, … So let the professionals to do the job … Saul Greenberg What you now know CRAP principles Grids help … (an essential tool for graphical design) Other visual concepts include –visual consistency •repetition –visual organization •contrast, alignment and navigational cues –visual relationships •proximity and white space –familiar idioms (may help or result in negative transfer effect) –legibility and readability •typography –appropriate imagery Saul Greenberg Some reliable guidelines available ? Jenifer Tidwell Designing Interfaces: Patterns for Effective Interaction Design O´Reilly, 2006 Organizing content Getting Around Organizing Page Doing Things Showing Complex Data Getting Input From Users Builders and Editors Making It Look Good Saul Greenberg Some guidelines on WWW ? http://www.welie.com/patterns/ User needs Navigation around Basic interactions Searching Dealing with data Personalizing Shopping Making choices Giving input Miscelleaneous Application needs Drawing attention Feedback Simplifying interaction Context of design Site types Experiences Page types Martijn van Welie, Philips Design Saul Greenberg Example of a Welie’s pattern Directory Navigation Problem: Users need to select an item out of a set Solution: Sum up level 1 and 2 Structure of patterns: Use when, How, More Examples Articulate: •who users are •their key tasks User and task descriptions Goals: Methods: Products: Brainstorm designs Task centered system design Participatory design User-centered design Evaluate tasks Psychology of everyday things User involvement Representation & metaphors low fidelity prototyping methods Throw-away paper prototypes Participatory interaction Task scenario walk- through Refined designs Graphical screen design Interface guidelines Style guides high fidelity prototyping methods Testable prototypes Usability testing Heuristic evaluation Completed designs Alpha/beta systems or complete specification Field testing Interface Design and Usability Engineering