Visual Design Visual Design Objectives Gestalt Principles Creating - PowerPoint PPT Presentation

Visual Design Visual Design Objectives Gestalt Principles Creating Organization and Structure Typography

UI Visual Design Objectives What are the goals of an effective interface? Information communication 1. - enforce desired relationships between UI elements - make all valid actions discoverable and clear - provide consistent, meaningful, timely feedback Aesthetics 2. - well designed, complete, well ordered, professional, attractive - appealing and pleasant to use “Brand” 3. - recognizable as being part of your organization Visual Design 2

UI Visual Design Problem § Goal: present elements of your interface to your users § Those users need to know: - What can I do in this interface? - Where is ________ ? - How can I do ________ ? - What is related to what? § Want to impose as little thinking as possible on your users - Let them concentrate on their task, not the interface. - Ideally, they should unconsciously see patterns and relationships that help them navigate the interface. Visual Design 3

Visual Design 4

Organization and Structure § Structure doesn’t usually occur naturally, it must be designed § People will look for structure, even if none was intended § Use Gestalt principles to create the desired organization and structure - Impose your structure on users, instead of making them figure it out (or worse, having them guess incorrectly) Visual Design 5

Gestalt Principles § Theories of visual perception that Proximity describe how people tend to organize Similarity visual elements into groups or unified Continuity wholes, when certain principles are applied. Closure § Clues about how the brain groups raw Connectedness visual input. § By designing these principles, we can build structures that align with people’s expectations – easier for them to work with. (pronunciation: http://www.howjsay.com/index.php?word=gestalt) Visual Design 6

Proximity § Individual elements are associated more strongly with nearby elements than with those further away Visual Design 7

Visual Design 8

Similarity § Elements associated more strongly when they share basic visual characteristics, such as: - Shape, Size, Color, Texture, Orientation colour > size > type Visual Design 9

Visual Design 10

Continuity § Elements arranged in a straight line or a smooth curve are perceived as being more related - bias to continuous forms rather than disconnected segments Visual Design 11

Visual Design 12

Closure § The visual system perceives a set of individual elements as a single, recognizable pattern, rather than individual elements. Visual Design 13

Visual Design 14

Connectedness § Elements connected to one another by uniform visual properties are perceived to be more related than elements that are not connected § Two typical strategies: - connecting lines - connecting regions Visual Design 15

Visual Design 16

Creating Organization and Structure We can define visual design principles that leverage these gestalt principles: Grouping 1. Hierarchy 2. Relationship 3. Balance 4. Simplicity 5. Clarity 6. Visual Design 17

Grouping (uses Similarity, Closure, Connectedness) § Group elements into higher order units - e.g. Newspapers have paragraphs, columns, sections, pages § Use the Gestalt principles to create groups § Reserve powerful techniques such as similarity (e.g. colour) and connectedness for explicitly telling the user something Visual Design 18

Hierarchy (uses Proximity, Connectedness, Continuity) § Visual hierarchy guides and allows information scanning § create the hierarchy to support intended reading sequence § Useful techniques for creating hierarchy: - Proximity (e.g. position, white space) - Similiarity (e.g. size, spacing, colour) Visual Design 20

Relationship (uses Similarity, Proximity, Connectedness, Continuity) § Establish relationships between elements by using position, size, value (colour, shape, etc.) § Use position, size, value (colour, shape, etc.) § Alignment and similarity effective for creating relationships Visual Design 21

Balance (uses Similarity? Continuity?) § Try to create a stable composition by balancing elements (similar to physical balance) § Stability achieved by manipulating properties such as: - Position, Size, Hue, Form § Symmetric layouts naturally achieve balance Visual Design 22

Visual Design 23

Visual Design 24

Simplicity § Present the minimum amount of information to achieve maximum effect § Functions are quickly recognized and understood - Less information means less time to process - Can more quickly produce correct mental models § Simplicity also aids recall - Less to remember, easier to recall Visual Design 26

What are the Essential Features? Visual Design 28

How to achieve simplicity? § Reduce, reduce, reduce § Reduce some more § Reduce until it hurts Visual Design 29

Visual Design 30

Clarity: Typography § The practice of arranging written subject matter. § Difference between “Typeface” and “Font” The quick brown fox The quick brown fox The quick brown fox The quick brown fox The quick brown fox The quick brown fox The quick brown fox The quick brown fox The quick brown fox The quick brown The quick brown fox The quick brown fox The quick brown fox The quick brown fox The quick brown fox The quick brown fox https://www.aiga.org/theyre-not-fonts/ Visual Design 31

Type Styles and Anatomy § Style (Sans-Serif, Serif, Display, etc) A A A face body § Weight (e.g. bold) § Emphasis (e.g. italic) § Point: 0.351mm = 1/72” (mostly) - original Mac was 72 DPI point size http://en.wikipedia.org/wiki/Image:Metal_type.svg Visual Design 32

Terminology kerning Visual Design 33

Comic Sans Comic Sans was developed by Microsoft in the 90s for informal, display text (meant to mimic speaking “bubbles” from comic strips). It’s universally hated. Why?! Comic Sans is weighted in a way that • looks uneven. Look at the knee of the letter n, compared to Helvetica. It also skews characters, which makes • them look unbalanced. Finally, kerning is • inconsistent. https://designforhackers.com/blog/comic-sans-hate/ Visual Design 35

Should you use Comic Sans? Will your document be viewed in public? no yes Don’t use Comic Sans Visual Design 36

Rules of Thumb § Avoid using display typefaces in print § Avoid comic sans § Don’t use many typefaces § Avoid underlining (use bold and italics for emphasis) § Avoid fully justified text Visual Design 37

Why Visual Design? Impact § Good visual design can reduce human processing time § Tullis redesigned lodging information screens (1984) - 5.5 vs. 3.2 sec avg search times Visual Design 38

Recommended Books Beth Tondreau, Layout Essentials: 100 Design Principles for Using Grids (2011) more print layout than interfaces, but excellent description of core layout and - typography concepts Kevin Mullet and Darrell Sano, Designing Visual Interfaces: Communication Oriented Techniques (1994) dated examples but concepts hold true; out of print, used copies can be cheap - Robert Bringhurst, The Elements of Typographic Style (2004) classic text on typography - William Lidwell, Kritina Holden, and Jill Butler, Universal Principles of Design (2010) high level overview of visual design concepts - Visual Design 40