Visual Design. Anastasia Kuzminykh

Transcription

1 Visual Design Anastasia Kuzminykh

2 Why discuss visual design? You need to present the elements of your interface to the user! User needs to know: What can I do in this interface? Where is? What is expected of me? What is related to what? Want to impose as little thinking as possible on the user. Allow them to concentrate on their task, not the interface.

3 Objectives Highest level goals: Create desired relationships and avoid undesired relationships Or to create a presentation that... has an attractive look is easy to understand at a glance has a distinctive look, across many windows, and to avoid a presentation that... is cluttered and hard to organize is hard to perceive clearly contains excessive idiosyncrasy makes the user stop and think to avoid errors

4 How? Shneiderman (1987) strive for consistency cater for universal usability offer informative feedback design task flows to yield closure prevent errors permit easy reversal of actions make users feel they are in control minimize short-term memory load Nielsen and Molich (1990) consistency and standards visibility of system status match between system and real world user control and freedom error prevention recognition rather than recall flexibility and efficiency of use aesthetic and minimalist design help users recognize, diagnose and recover from errors provide online documentation and help

5 Designing with Mind in Mind

6 How? Design with the human brain s conscious and unconscious capabilities in mind: Keep things simple People have limited cognitive processing power. Leverage pre-attentive processes. Pre-attentive processes Happen at a lower-level than conscious thought. Do a huge amount of work out of sight, and give your conscious mind the results. Rest of the Discussion: Simplicity Organization and Structure

7 Simplicity In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away. -- Antoine de Saint Exupery

8 Simplicity Present the minimum amount of information to achieve maximum effect Simplicity leads to quickly recognized and understood functionality Less information means less time to process Can more quickly produce correct mental models Simplicity also aids recall Less to remember, so easier to recall

9 Simplicity

10 Simplicity

11

12

13 Only Absolute Essentials

14 How to achieve simplicity? Reduce, reduce, reduce Reduce some more Reduce until it hurts

15 Organization and Structure Gestalt Principles

16 Creating organization and structure Structure doesn t occur naturally, it must be explicitly created, designed. People will find order and structure, even if none was intended. Don t just throw elements into a UI! You need to explicitly create the structure. Consciously consider what placement and arrangement communicates to the user. The Gestalt principles can help with this.

17 Gestalt Principles Theories of visual perception that describe how people tend to organize visual elements into groups or unified wholes, when certain principles are applied. Proximity Similarity Continuity Closure Figure/Ground Symmetry Clues about how the brain groups raw visual input Uniform Connectedness Alignment (pronunciation:

18 Proximity Individual elements are associated more strongly with nearby elements than with those further away. Spacing stars more closely vertically gives an impression of columns; spacing more closely horizontally gives an impression of rows.

19 Proximity Individual elements are associated more strongly with nearby elements than with those further away Big Bend National Park (US)

20 Real Life Example (from two CS349 students)

21 Proximity Individual elements are associated more strongly with nearby elements than with those further away

22 Similarity Elements associated more strongly when they share basic visual characteristics, such as: Shape Size Color Texture Orientatio n

23 Similarity Elements associated more strongly when they share basic visual characteristics, such as: Shape Size Color Texture Orientatio n

24 Grouping vs. Ambiguity Proximity and Similarity describe how we group objects. The next set of Gestalt Principles describe how we deal with ambiguity and fill in missing data.

25 Continuity Our visual system is biased to perceive continuous forms rather than disconnected segments. Elements arranged in a straight line or a smooth curve are perceived as being more related than elements not on the line or curve.

26 Continuity

27 Continuity

28 Closure The principle of closure applies when we tend to see a complete figure even when part of the information is missing. We tend to perceive a set of individual elements as a single, recognizable pattern, rather than multiple individual elements.

29 Closure

30 Figure/Ground (aka Area) Our mind separates the visual field into the figure (or foreground) and the ground (or background). Figure is the visual element that is interpreted as being the object of interest. Ground is the area on which it rests (and everything else). Examples: This slide UI window with widgets Watermarked backgrounds

31 Figure/Ground (aka Area) Popping additional information over the existing background helps the user remain oriented within the interaction. Ambiguity

32 Symmetry Symmetrical, unconnected elements are integrated into one coherent object The greater the symmetry, the more we ascribe meaning and relationships in a composition Separately, symmetry has long been associated with beauty This principle is here for completeness; doesn t seem that relevant to user interfaces.

33 Gestalt Principles Proximity Similarity Closure Continuity Symmetry Area

34 Uniform 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

35 Uniform Connectedness Uniform Connectedness Proximity, Similarity

36 Alignment? Is alignment a Gestalt principle? It s a powerful organizing tool Some folks in the design community include it (search the web) Doesn t appear to be in the original literature, but many rules were added over a span of time Could be an application of Similarity Personal opinion: It should be

37 Ursus Wehrli tidies up art

38 Creating Organization and Structure We can use insights from the Gestalt principles to organize and structure user interfaces Three techniques: Grouping Hierarchy Relationship

39 Grouping Group elements into higher-order units. Use the Gestalt principles to create groups Proximity Similarity Alignment Uniform Connectedness Reserve powerful techniques such as colour and uniform connectedness for explicitly telling the user something.

40 Hierarchy A visual hierarchy guides and allows information scanning. Create the hierarchy to support intended reading sequence. Useful techniques: size, position, spacing, white space, color Build on usual reading direction for the culture

41 Hierarchy: Structure Data Structure Data with separators Easy Hard Phone: x Credit Card: Date: 10/08/ Data-specific controls

42 Relationship Establish relationships between elements to communicate that they are connected. Alignment is very effective at creating relationships. Similarity (size, color, shape, etc.) is also very effective. Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Maecenas suscipit sem rutrum leo elementum non vestibulum lectus pellentesque. Maecenas consequat risus dui. Sed id nisl sed est egestas blandit mattis ut sem. Suspendisse pretium vestibulum ipsum, eu pulvinar lacus posuere non. Sed eu mi orci, vitae malesuada erat. Vestibulum mi nisl, varius a molestie eget, sodales at elit. Nullam ligula turpis, hendrerit in condimentum et, cursus ut ante. Vestibulum nibh massa, venenatis sed ultricies et, aliquam ac metus. Mauris eu orci ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pretium aliquet tempor. Aliquam pretium dolor et dolor dictum non convallis libero dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu libero ac augue fringilla suscipit. Pellentesque volutpat gravida nunc, ut adipiscing dolor iaculis sit amet. Donec auctor sodales tortor, vel condimentum nisi eleifend lacinia. Pellentesque posuere, risus eget auctor ullamcorper, eros nisi venenatis leo, quis fringilla urna mi quis sapien. Nulla lacinia elementum libero vitae mattis. In enim mi, suscipit in sagittis in, hendrerit non nunc. Ut fringilla congue lacus porta lobortis.

43 Balance Try to create a stable composition by balancing elements (similar to physical balance). Stability can be achieved by manipulating properties such as position, size, hue, form. Symmetric layouts naturally achieve balance.

44 CS349 - Visual Design

45 Human Visual System How it should influence design

46 Pleasing Layout Principles of Aesthetics

47 Pleasing Layouts Lots in common with graphic design Easy reference: The Non-Designer s Design Book: Design and Typographic Principles for the Visual Novice by Robin Williams Four Principles: Contrast Repetition Alignment Proximity

48 Proximity Items relating to each other should be grouped close together. When several items are in close proximity to eah other, they become one visual unit rather than several separate units. This helps organize information and reduces clutter. (Williams, p. 14)

49 Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look. (Williams, p. 14) Edge alignment Centre alignment

50 Repetition Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc. This helps develp the organization and strengthens the unity. (Williams, p. 14)

51 Contrast The idea behind contrast is to avoid elements on the page that are mearly similar. If the elements (type, color, size, line thickness, shape, space, etc) are not the same, then make them very different. Contrast is often the most important visual attraction on the page. (Williams, p. 14)

52 Closing Final Comments

53 Common Mistakes Haphazard layout (no explicit design) Aligning labels, not controls Bounding boxes create clutter and compete for attention (use white space instead)

54 Testing it Out Show it to someone else Don t ask if they like it (why?) Try to get first impressions Use the squint test Mimics early portion of visual recognition system

55

56

57

58

59 Impact Good visual design can reduce human processing time Tullis redesigned lodging information screens (1984) 5.5 vs. 3.2 sec avg search times

60 Summary Strive for simplicity! The Gestalt principles provide insights into the pre-attentive processes in the brain. Use the principles to structure a visual design by: Grouping visual information into higher-level units. Creating a hierarchy to guide the user s viewing. Establishing relationships between related elements. Don t leave visual design up to chance! Think about your design, and test it out.