Note 8: Visual Interface Design

Size: px

Start display at page:

Download "Note 8: Visual Interface Design"

Madison Henderson
6 years ago
Views:

1 Computer Science and Software Engineering University of Wisconsin - Platteville Note 8: Visual Interface Design Yan Shi Lecture Notes for SE 3330 UW-Platteville Based on About Face 3: Chapter 14

Visual Interface Design It is NOT: putting lipstick on a pig skinning the interface visual art/graphical design It is: concerned with the treatment and arrangement of visual elements to communicate

2 Visual Interface Design It is NOT: putting lipstick on a pig skinning the interface visual art/graphical design It is: concerned with the treatment and arrangement of visual elements to communicate behavior and information. placing aesthetic concerns within a functional framework matching the visual structure of the interface to the logical structure of users mental models and program s behaviors

3 The Building Blocks S hap e Size Value Hue Orien ation Texture Position

4 Shape What is this? Shape is the primary way we recognize something. However: takes a higher level of attention not the best way to capture users attention

5 Size Which one is the most apparent word? Size is a quantitative and ordered variable. We assume relative importance increase by size. useful property in conveying information hierarchies. good for drawing users attentions quickly. MS Word: what to set up first in page layout?

6 Value Light? Light? Light? lightness/darkness is meaningful only in the context of values of the background. Value contrast: quickly perceived good tool for drawing attention to an element Is ordered Darker typically means more deeper water, higher population, more severe storm

7 Hue Differences in hue draw our attention quickly. Hue may have specific meaning: accountant: negative, positive trader: buy, sell Colors also have social meanings: U.S. v.s. China

8 Hue Use hue judiciously: Visual Excise! Be especially cautious for international products Color blindness is quite common, can't depend on people being able to differentiate, especially red/green and blue/green

9 Orientation Up, down, in, out? Useful for directional information Often difficult to perceive Use as a secondary communication vector. e.g., stock market going down

10 Texture Rough or smooth? Regular or uneven? Rarely useful for conveying differences or calling attention Takes a lot of pixels to implement Can be an important affordance cue: ridge/bump: dragable drop-shadow: more clickable The new flat design concept: almost no texture is used!

11 Position An ordered and quantitative variable. useful for representing hierarchy.

12 Grouping and Hierarchy Use visual properties to group elements and create a clear hierarchy Groups: Based on stories: spatial grouping set by position, hue, create a pattern Minimize differences within groups, maximize between groups Visual hierarchy: often to distinguish between primary, secondary controls Hue, saturation, value, size, position give hierarchy Important elements One of larger, greater contrast, more saturated The Squint Test!

Visual Structure and Flow at Each Level Provide visual structure and flow at each level of organization Basic tool: grid & alignment atomic grid unit Align labels, controls in groups Align across

13 Visual Structure and Flow at Each Level Provide visual structure and flow at each level of organization Basic tool: grid & alignment atomic grid unit Align labels, controls in groups Align across groups Grid structure for large elements, too (panels, screens) A good layout grid is modular and simple if two areas are of about the size space, use the exact same space. use symmetry and balanced layout. too small atomic grid unit is not good because slight differences can feel unstable to users.

618 Claim: used in Parthenon see here Common ratio

14 Spatial harmony Harmony: pleasing ratios Golden Ratio: phi = (sqrt(5) + 1) / 2 or about Claim: used in Parthenon see here Common ratio in nature as well Interesting Reading: Apply Mathematics to Web Design

15 Flow Eye should flow naturally across the form In general, minimize the eye movement.

16 Icon Image Cultural differences & images Red: not a warning in China Dangerous body language abroad Pigs: inappropriate in middle east Guidelines Combine action & objects Verb alone ambiguous (e.g., scissors for cut ) Show results: e.g. print icon w/ page coming out Keep it simple Reuse when possible: reduce users memory load!

17 Avoid Visual Noise, Clutter Visual noise: superfluous visual elements distracting user from goals This box illustrates why you should not try to use lots of different colors at the same time. Clutter: try to make everything available at once

18 Avoid Visual Noise, Clutter Key: keep it simple, stupid simple geometric forms, minimal contours, lesssaturated colors not too many font variations one or two typefaces at a few different sizes spacing: variation can be distracting efficiency: try to remove elements and see if still accomplish goals

19 Visual Interface Design Principles Summary Use visual properties to group elements and create a clear hierarchy Hue, saturation, value, size, layering: create hierarchy Squint to check Provide visual structure and flow at each level of organization Use grid, natural eye flow, symmetry, balance Use cohesive, consistent, and contextually appropriate imagery Culturally sensitive icons; commands = verb + object Are photo realistic icons useful? Avoid visual noise and clutter Keep design simple Use color, but thoughtfully Keep text easy-to-read

7.0 INTERACTION DESIGN USER INTERFACE

7.0 INTERACTION DESIGN USER INTERFACE PRINCIPLES OF INTERACTION DESIGN SUMMER 2014 DESIGNISM #18 A PICTURE IS WORTH A THOUSAND WORDS. AN INTERFACE IS WORTH A THOUSAND PICTURES. BEN SHNEIDERMAN USER INTERFACE