CooperU VisD DayOne May 2013

8/10/2019 CooperU VisD DayOne May 2013

1/190

VISUAL DESIGN 2013 1

!

Day 1

VisualInterface

Design2013


2/190


Twitter: @cooper

Email: [email protected]

Facebook: www.facebook.com/cooperdesign

Vimeo: vimeo.com/cooperdesign

Instructors:

Nick Myers @nickmyer5 [email protected]

Jason Csizmadi @jcsizmadi [email protected]

A bit about us


3/190



4/190


E X E R C I S E 1 0 M I N U T E S

Pulled from Gamestorming: A Playbook for Innovators, Rulebreakers, and Changemakers by Dave Gray

Lets learn a bit about each other.

Design your trading card


5/190



Design your trading card1

2

A

B

c

D

5 min: design your trading card:

Self-portrait

NicknameSuper power

What you hope to learn from this class

30 seconds each: introduce yourself and tell us one thing you

wrote on your trading card.


6/190

A brief overview of Visual Interface Design at Cooper.


7/190VISUAL DESIGN 2013 7

Graphicand information design for

the screen

Control-level interface design

Visual Interface Design is


8/190VISUAL DESIGN 2013 8"#$#%& ()*+ +,** - ./&01"2&.3/ 40%.$/ - 5+,** - 6VISUAL DESIGN 2013 8

Course Overview


9/190VISUAL DESIGN 2013 9

Today we are going to go discuss principles

of visual interface design:

7 The language of visual design

7

Support the user experience

7 Create unique experiences

7

Design for interaction

7

Craft the details

7

Simplify


10/190


Tomorrow: focus on visual design process

7 Goal-directed visual design

7

Strategies for collaboration

7

Project introduction and experience workshop

7

Be systematic

7

Visual system and style guides


11/190


What we wontbe covering

These topics are covered in other courses:7

Stakeholder and user interviews

7

Creating personas

7 Developing scenarios

7

Designing the interaction framework

7 Documenting interaction design


12/190

VISUAL DESIGN 2013 12"#$#%& ()*+ +,** - ./&01"2&.3/ 40%.$/ - 5+,** - *+VISUAL DESIGN 2013 12

The language of

visual design


13/190


The elements of

visual design

7 Color

7 Type

7 Shape

7

Texture

7 Image

7 Scale

7 Contrast

7 Balance

7

Hierarchy

7 Association


14/190


Color guides interactions

and builds an emotional

connection with users.


15/190


Color Theory

Hue Saturation Value

Harmonious

palettes

Volume


16/190

The art of choosing colors

Use brand colors Find colors from nature, photos, etc.

Use tools for harmonious palettes Create simple palettes with few colors


17/190


Color meaning varies across cultures but some

colors have consistent meaning


18/190

Simpler color palettes support heavy use and

create elegance


19/190

Give colors meaning to help users understand


20/190

Use color to emphasize information


21/190


Text and Typography


22/190

Introduction to type

From www.typekit.com


23/190


24/190

Choose typefaces for legibility

Wide letter spacing

Wide punch width

Tall x-height

Simple strokes

Upper/lowercase


25/190

Common interface typefaces


26/190


Use varying weights to amplify visual hierarchy

Use the bold style for emphasis and avoid applying to largeblocks of text.


27/190


Format content for readability

For content-heavyweb sites:

7

Set opening paragraphs

flush left

7

Average line length forcontent 10-12 words

(65-70 characters)


28/190


When to use larger text

Target Audience7

Populations older than 40

7 Audiences with disabilities (may require voice)

7 Children and beginning readers

Environment

7

Screens that are viewed from a distance

7

Screens with protective coverings

7 High-resolution monitors

7

Lots of text


29/190


Check type sizes on the target platform


30/190


Typefaces have distinct

personalities.

The choice of typeface

helps set tone, feel

and character.

Use typography for:

7

Way-finding

(orientation and navigation)

7

Field or control labels

7

Links

7

Instructions

7

Error messages

7

Content


31/190

Discussion: What qualities does the typography convey?


32/190



33/190



34/190


35/190


Going beyond system fonts

@font-face7

New CSS font technology that newer browsers support (Safari,

Firefox, Chrome)

7

Google font directory uses technology (http://code.google.com/webfonts)

Font hosting services

7

Typekit, Fonts.com, Fontdeck, webtype, Google Fonts

Embedding

7 Call font foundry to see if they allow embedding of their fonts within apps


36/190


Test fonts for sharpness

Not all typefaces have been hinted for the interface and mayappear blurry or jagged.

http://www.typotheque.com/articles/hinting


37/190


These subtle formsof

language communicate

the personality and

characteristics of the

brand: texture, shape,

gradation, line, scale,

balance.


38/190


Texture can add affordance, create contrast or

establish a unique look


39/190


Texture isnt strictly necessary

Gradation can enrich add depth provide affordance


40/190

Gradation can enrich, add depth, provide affordance

Use the same light source be subtle consider reflectivity texture


41/190

Use thesame light source, be subtle, consider reflectivity, texture


42/190

Shape + Line


43/190

Shape


44/190


Imagery

Imagery sets the mood via composition subject style


45/190

Imagery sets the mood via composition, subject, style


46/190


Which image better conveys the desired

attributes?

%89:;


47/190


Avoid generic imagery


48/190


Sketch ideas before searching for images on stock sites

B t f ll hi h t h f i i


49/190

Best of all, hire a photographer for unique images


50/190


Balance


51/190

Balance affects how we view the quality of a design


52/190

Does this feel balanced?

B l i


53/190


Balancing

elements


54/190


Alignment


55/190


Alignment brings organization to screens and

guides viewers through content flows


56/190

Poor

alignment


57/190

Better

alignment


58/190


Visual hierarchy

accentuates differences

to navigate information

in a specific order.


59/190

Hierarchy prioritizesinformation, guides screen

flow and reduces anxiety


60/190


61/190



62/190

VISUAL DESIGN 2013 62VISUAL DESIGN 2013 62

Which zones did youmark as 1, 2 and 3?

What visual stylesinfluenced your choices?

D I S C U S S I O N


63/190


Accentuate differences by position, size,

weight, color


64/190


It doesnt have to be fancy to be effective


65/190


The greater the contrast,

the stronger the hierarchy.

Unclear hierarchy leads

to poor usability.


66/190

Is hierarchy clear? Why or Why not?


67/190

What about this example?


68/190



Sketch a mobile to-do list for nurses.

Sketching hierarchy


69/190



Sketching hierarchy

1 A nurse has a to-do list on her mobile device.

Sketch how you would indicate hierarchy (using position,

size, color, type and line weight) for the following items:

Patient A is asking for pain medicine right now

Patient C's life support system needs attention

in the next 5 minutes

10 routine emails and record-keeping tasks, 5of which are fairly important

5 patients need medication in the next hour

A

B

c

d


70/190


How did you indicate relativeimportance of the informationon the nurses to-do list?

How did you design this to-dolist for a mobile devicedifferently than you would havefor a website?

D I S C U S S I O N


71/190


Association helps us

organize information

elements appear

related and designs are

easier to understand

P d


72/190


Items that are close to oneanother are presumed to berelated.

We see 3 columns becausethe vertical spacing is closerthan the horizontal spacing.

Proximity can indicate association

P i i i di i i


73/190


If we change the spacing,

we see 4 rows instead.

Proximity can indicate association

P i i i di i i


74/190


7 When data or controls aren't related

by their position, users have to thinkharder

7 A stovetop would be more usable

if the controls were laid out more like

the burners, or vice versa

Position can indicate association

C l k it i t d


75/190


Color can make items seem associated


76/190


77/190



How is association conveyed?

1

2

By yourself, identify association in the following three

examples by making a list of what items seem related.

Next, list 3 to 5 specific visual properties that were

manipulated to communicate association in these

examples.

H i i ti d?


78/190

How is association conveyed?

D I S C U S S I O N


79/190


Which items seem relatedto each other?

What visual propertiesinfluencedyour choices?

How do you determine whetherassociation is being used well ornot??

D I S C U S S I O N


80/190


81/190

VISUAL DESIGN 2013 81"#$#%& ()*+ +,** - ./&01"2&.3/ 40%.$/ - 5+,** - 6*VISUAL DESIGN 2013 81

The experiences

that people have with

companies are now digital.

Therefore, the visual

interface has become thenew representation

for the brand.

F l


82/190


For example:

D I S C U S S I O N


83/190


What are some

products that make a

good first impression?

Abad one? Why?

D I S C U S S I O N

Based on first impressions


84/190


Based on first impressions,

which would you rather eat?



85/190



which would you rather buy?



86/190



which would you rather use?


87/190



88/190


A companys brand is the primary

source of its competitive advantageand a valuable strategic advantage.

David AakerVice Chairman of Prophet


89/190

Y b d i th


90/190


Your brand is the

experiences

people have with

your product or

service over time,

across a variety of

touchpoints.

What attributes do you associate with


91/190


What attributes do you associate with

these brands?

and what effect does that have on buying behavior?


92/190


A brand is the sumof the customers experiences with

the relevant product or company.

It is transmitted in every interaction

with the customer over the lifetime

of the relationship.

Suzanne Hogan, Eric Almquist, Simon E. GlynnLippincott Mercer

A consistent look builds the brand


93/190


A consistent look builds the brand

A unique, consistent look can make a product identifiably yours.


94/190

What brand values does Lexus convey?


95/190

What brand values does Lexus convey?

Lets talk through this for


96/190


Let s talk through this for

Features &

Attributes

Benefits

Beliefs &

Values


97/190

VISUAL DESIGN 2013 97"#$#%& ()*+ +,** - ./&01"2&.3/ 40%.$/ - 5+,** - (KVISUAL DESIGN 2013 97

Visual design makesthe product immediately

desirable and identifiable.

Good behavior determines

how people feel about theproduct in the long run.


98/190


Great experiences are both

aspirationaland authentic.

We look for the intersection of

brand attributes, business goals,

and peoples needs to create the

experience strategy.

Trends change often, software is much slower


99/190


Trends change often, software is much slower

Design to differentiate from competitors


100/190


Design to differentiate from competitors

Content should


101/190

inspire design

The interface is fading so interactions become


102/190

The interface is fading so interactions become

more influential.

Signature interactions


103/190

Signature interactions


104/190

VISUAL DESIGN 2013 104"#$#%& ()*+ +,** - ./&01"2&.3/ 40%.$/ - 5+,** - *,JVISUAL DESIGN 2013 104

Support the user experience


105/190

Interface design differs from marketing


106/190


Interface design differs from marketing

Design for people and goals


107/190

Design for people and goals

Design is more complex across multiple

l tf


108/190


platforms

Understand the different contexts


109/190

0>MNC=O

Consider the different interface needs


110/190

Contexts have different technical display


111/190


requirements

Exploring broadly to test the language across


112/190

different contexts

User factors influence design


113/190


g

What are potential user factors?


114/190


p

Diabetics often have poor eyesight


115/190


p y g

User factors and environmental factors


116/190


Environmental factors


117/190


Viewing distance


118/190


Distractions


119/190



120/190

VISUAL DESIGN 2013 120"#$#%& ()*+ +,** - ./&01"2&.3/ 40%.$/ - 5+,** - *+,VISUAL DESIGN 2013 120

Design for interaction

Aesthetic-usability effect


121/190


Aesthetic products are

perceived as easier to usethan less-aesthetic products.

Users are more forgiving

of usability flaws inproducts that are

aesthetically appealing.

Reference: Universal Principles of Design

Design for screen flow


122/190

Design for scenarios


123/190

Archetypes define the system


124/190

Design the in-between


125/190

Communicate interaction with affordance:

H d h l d b h ?


126/190


How do the visual properties indicate behavior?

An affordance is a visual clue that suggest you

i l hi


127/190


can manipulate something

Well-designed controls provide eff

ective aff

ordances like push, slide, twist,scroll, and more.

Present information clearly and simply


128/190

Present feedback or status visually


129/190


Use RVMF to prevent interference


130/190


7 1PQRS 1C:A PCN= QGT9>9NN R99TI


131/190


Information design

helps users understand

data, grasp meaning,

and make decisions

easily

A classic example by Harry Beck


132/190



133/190


134/190


Consider information

in support of a

personas goals


135/190


People understand

best when they can

compare

Comparing values


136/190


bar graphs http://nikeplus.nike.com

Comparing parts to their greater whole


137/190


bar graphs : heat maps : pixel chartshttp://pulse.ninemsn.com.au

Viewing information over time


138/190


line graph (trend emphasis) : bar graph (value emphasis) : line & point (balance)http://finance.google.com

Correlation comparing variables


139/190


scatter plots http://www.nytimes.com/packages/flash/business/20070408_EXECPAY_GRAPHIC


140/190

Dense and precise data


141/190


tables: dense information, precise values, comparing single values, multiple categories of infohttp://news.yahoo.com/election/2008 dashboard

Lower information density is good

f i t


142/190


for inexpert users

Sparklines for low density, high intensity


143/190

Progressive disclosure


144/190


Expanding areas and tool tips can show more information when it's

needed.

Ben Shneiderman calls this:

1. Overview

2.

Zoom-and-filter

3. Details-on-demand

Here's what this image describes:


145/190


Q9

R9O9#DC;YZGG?D


146/190


Lets have a few teams

share

What did you learn?


147/190

VISUAL DESIGN 2013 147"#$#%& ()*+ +,** - ./&01"2&.3/ 40%.$/ - 5+,** - *JKVISUAL DESIGN 2013 147

Craft the details

How to exhibit craftsmanship


148/190


Deliver on your promisesPay attention to every detail

Be consistent

Apply the same care to all

points in the experience

Deliver on your promises: Software should

work as expected


149/190


p

Attention to the details leads to a high-quality

product thats trusted and loved


150/190



151/190

Craftsmanship is easier with a micro grid


152/190


Fields, labels, and controls are sized and spaced

according to a base unit, rather than at random intervals.

1 pixel

5 pixelbase unit

Attention to the physical world


153/190

Consistency


154/190

Transitions


155/190


Design transitions with motion studies


156/190


How could this screen be crafted better?


157/190


Document or sketch your ideas


158/190

Communicate when space is limited


159/190


Indicate object types in a list


160/190


Show state or status


161/190



162/190

Icons influence your brand on screen.

What do these icons say about the brand?


163/190



164/190

VISUAL DESIGN 2013 164"#$#%& ()*+ +,** - ./&01"2&.3/ 40%.$/ - 5+,** - *\JVISUAL DESIGN 2013 164

Icons representobjects,actions, and results.

Action plus object is best, when possible

Th t ff ti


165/190


The most effective way

to make an icon understandable.

Example:

Adobe Photoshop

tool bar icons

Keep icons visually simple

l lh d d k l l h b k d h


166/190


Outlines, silhouettes, and dark colors on light backgrounds are the

easiest to recognize.


167/190

Will the average teenager understand

these in 10 years?


168/190


Process of icon design


169/190



Sketching icons


170/190


Create clear, memorable icons.

Sketching icons


Sketching icons


171/190


Sketching icons

1 Sketch icons for the following:

Insert a paragraph (word processor)

Delete a customer's record (customer database)

Group several objects together (drawing tool)

Ungroup the objects (drawing tool)

Buy this item (e-commerce web site)Save a photo clipping (interior design application)

A

B

C

D

E

f

D I S C U S S I O N


172/190


Lets shareour icons by posting

them up for all to see.

Which do you think

are most successful?

Designing and code: Manage the front-end to

ensure quality and design faster


173/190


Responsive design


174/190

Refinement


175/190



176/190

VISUAL DESIGN 2013 176"#$#%& ()*+ +,** - ./&01"2&.3/ 40%.$/ - 5+,** - *K\VISUAL DESIGN 2013 176

Simplify


177/190

What products feel simple?


178/190


How to make products simple


179/190


Reduce

Prioritize

Organize

Interaction designers use personas

and scenarios to


180/190


Reduce tasks and complexity

Prioritize information and tools

Organize information based on sequence,

frequency, etc.

While visual designers


181/190


Reducecomplexity by reducing the

number of visual elements and relationships

Prioritize information and show whats most

important with hierarchy.

Organizeinformation in meaningful ways

through association.

1

The goal is to minimize work


182/190


2

34

1

For example, use reduce to minimize work

and support the overall flow.


183/190


The more edges and shapes you have, the more complexitythere is for the eye and brain to figure out.

Basic clutter reduction requires little visual skill:

7

Group related elements

7 Align fields, text, and controls

How could work be reduced here?


184/190


Redesign this print dialog boxusing the reduce prioritize and organize principles


185/190


using the reduce, prioritize, and organize principles


Redesign this print dialog boxusing the reduce prioritize and organize principles


186/190


1

2

A

B

C

Alice wants 5 copies of handouts for her meeting.

As always, she wants to print from her desk printer.

Determine the right visual flow

Draw a better version (ignore other scenarios for now)Remember to reduce, prioritize, and organize

A few groups to share (depending on time).

using the reduce, prioritize, and organize principles

D I S C U S S I O N


187/190


Lets have a few teams

share

What did you learn?


188/190

VISUAL DESIGN 2013 188"#$#%& ()*+ +,** - ./&01"2&.3/ 40%.$/ - 5+,** - *66VISUAL DESIGN 2013 188

Lets wrap up

Lets take some time to reflect

on the day.


189/190


Using this wheel, writedown your reflections

about today.


190/190

See youtomorrow

Class starts at 9:00am.

Documents

CooperU VisD DayOne May 2013