CooperU VisD DayTwo May 2013

8/10/2019 CooperU VisD DayTwo May 2013

1/150

VISUAL DESIGN 2013 1

VisualInterfaceDesign

!

Day 22013


2/150


Todays agenda: putting it all together

" Goal-directed visual design

" Strategies for collaboration

"

Project introduction and experience workshop

" Developing the visual system


3/150



Now that weve covered the

basics of visual interface design,

lets look at how it aff

ects thedesignprocessand team

collaboration.


4/150


5/150



Whats your typicalvisual design process

today?

D I S C U S S I O N


6/150


#$%$&' )*+, ,-++ . /0'12#3'/40 51&/%0 . 6,-++ . 7


Goal-directed Visual Design


7/150VISUAL DESIGN 2013 7

Goal-Directed Design works on several levels

Market & product definition" Users and their needs

Interaction design

"

Behavior and approximate form

Information design

" Clear communication of information

Visual interface design" Communication of behavior

and brand through pixels

Industrial design

" brand through physical form



Coopers Goal-Directed design process...

2898:;:?@8A589?BC

DEA8@?CB 28FG?;8H8C>958IC?JEC

K;:H8LE;M58IC?JEC



Goal-directed design starts

with understanding the people

that will experience your productor service, and defining

the design vision from there.


10/150


Research helps us

2898:;:?@8A589?BC


K;:H8LE;M58IC?JEC


11/150


2898:;:?@8A 589?BCDEA8@?CB 28FG?;8H8C>958IC?JEC K;:H8LE;M58IC?JEC 1CB?C88;?CB&GNNE;>

Understand business

and user needs:

"

Emphasis on qualitative methods;

observation and interviews

"

Stakeholders

"

Customers

"

End-users

" Subject matter experts

"

Competitor and literature review

Research


12/150


Stakeholders include anyone

in the company who sets the

vision for the product line,

or who has insight into thecurrent users and their use

of the product.


13/150


Visual design

stakeholders

include:

"

Corporate marketing/branding

! People or others accountable for brand

strategy (not just guidelines)

" Product managers or others

! Stakeholders who own overall vision

" Developers

! Responsible for implementation of

screen design


14/150


For visual design,

stakeholders can

explain:

"

Brand attributes the design should

convey

"

Existing documentation, guidelinesand examples

" Product vision

"

Competitive landscape

"

Unique aspects of the domain"

Technical constraints (such as

resolution and color depth)


15/150


Challenge: what if no one owns the brand?

This is common in startups.Ask founders or execs questions like these:

"

What movie star (car, etc.) is the product most like?

" What characteristics made you choose that?

"

What movie star (car, etc.) is the product least like?

" Compared to competitors, this product is more__, less___


16/150


Conduct an

experience

workshop:

"

A workshop helps define

the experience more vividly

"

Everyone agrees to an ideal

experience


17/150


What about

the users?In user interviews,the visual designer looks for:

"

Environment and display issues

(such as lighting and distance

from the screen)"

User characteristics (such as

poor vision)

"

Indications of brands that

resonate with the users

"

How users want to feel about

their experience


18/150


What will be challenges

in this environment?


19/150


How might visual design

differ for these people?


20/150


Modeling helps us

2898:;:?@8A589?BC


K;:H8LE;M58IC?JEC


21/150


Makesenseof the research

and create tools that are useful

for building consensus among

stakeholders and the project

team, and for setting the path

for design.


22/150


Modeling Personas:

"

User archetypes represent thespecific needs of many individuals

"

Based on behavior patterns

observed in research

" Enable us to drive our ideas from

data about real people

"

Used as design and

communication tools throughoutthe project

/H:B89 6 O?H %EEAL?CP ?&>EE

Persona


23/150


Modeling Scenarios:

"

Allow us to easily imagine, anddiscuss the ideal user experience

"

Drive design coherence by

contextualizing features in

someones life

" Evolve as the project continues

to become more detailed and

specific

" Help us identify high-level

requirements for the design

/H:B89 6 O?H %EEAL?CP ?&>EE

Scenario


24/150


The visual designer focuses on:

" Ensuring that personas include

emotional and brand perspectives

" Collaborating on process or concept

visualization


25/150


Requirements definition helps us

2898:;:?@8A589?BC


K;:H8LE;M58IC?JEC


26/150


Define the product

experience:

" Identify key user goals and

functional and emotional needs

"

Identify the sweet spot where

business goals, user needs, andtechnical considerations intersect.

Requirements


27/150


The interaction designers:

" Focus on idealized workflow in the form of scenarios

" Generate data and functional needs


28/150


While the visual designer:

Assembles a set of visualdesign requirements.

" Some may be technical (type

size, resolution, etc.)

" Others are focused on the

brand and emotional qualitiesthe design must convey


29/150


Framework definition helps us

2898:;:?@8A589?BC


K;:H8LE;M58IC?JEC


30/150


Get the design right

(without wasting time

or money):

"

A holistic view of the design

" Use scenarios as the foundation

"

Low-cost, rapid exploration of

several possibilities

"

Structure and design language

mostly separate

"

Ends with focus on most

appropriate concept

Framework


31/150


The visual designer:

" Develops visual style studies

based on keywords

" Solicits the client's feedback

"

Applies one or two directions

to actual interaction design

screen sketches


32/150


Visual language studies

Create 3-5 possible

directions based on

experience attributes.

" Include color, type, and control

treatments

" Shown independent of

interaction design

" One or two extreme options

that push the boundaries


33/150


Detailed design helps us

2898:;:?@8A589?BC


K;:H8LE;M58IC?JEC


34/150


Design the product

in more detail

and make sure

it is feasible:

" Iterate, iterate, iterate

" Collaborate closely with engineers

to ensure feasibility

" Conduct user evaluations

"

Create form and behaviorspecifications, or go directly

to code

Detailed Design


35/150


The visual designer:

" Refines screens to communicate

behavior and importance

" Simplifies grid by making things

more consistent

" Creates icons

"

Illustrates states for controls,

selections, etc.

"

Defines and documents the visual

system

"

Collaborates with developers on

front-end development or prototypes


36/150


and communicates visual system

The visual style guide:" Color palette, specific uses

"

Typefaces, sizes, and styles

" Control and icon library

"

How states are depicted

" Grid specifications and pixel measurements for spacing

"

Rationale


37/150


Implementation support helps

2898:;:?@8A589?BC


K;:H8LE;M58IC?JEC


38/150


Ensure that the

product is built

as intended:

"

Work with the builders iteratively

" Provide design consultation

on implementation priorities

and trade-offs

" Respond to questions and issues

as they arise

"

Advocate and build empathy

for the user

Implementation Support


39/150


40/150

VISUAL DESIGN 2013 40#$%$&' )*+, ,-++ . /0'12#3'/40 51&/%0 . 6,-++ . R-VISUAL DESIGN 2013 40

Strategies for Collaboration


41/150


Product teams are large

Dozens of people can't effectively design together,

but they all need input into the process.

"

Executives

" Managers

"

Engineers

" Marketers

"

Sales people

"

Support

" QA

"

Customers


42/150


but effective design teams are small

" Less communication overhead

" Consensus is possible; compromise

less necessary

" Meetings are collaborative,

not competitive" Design team drives process

and brings in stakeholders for key

decisions


43/150


Engagement leads:

" Senior team member experienced

in one or more design disciplines

" Good at balancing various designer

perspectives with business point

of view

" Responsible for overall project success

" Lays out initial project schedule,

involved as needed throughout project


44/150


Visual designers:

" Good at visually clarifying behavior

while communicating brand attributes

" Well-versed in graphic design

and information design

"

Responsible for final visualrepresentation

" Part-time in early phases, full-time

in later phases


45/150


Interaction synthesis designer:

" Good at narrative, facilitation,

and detail

" Well-versed in communication

and process

"

Responsible for documentingresearch and design

" Full-time from initial research

through final specification


46/150


Interaction generator designer:

" Good at visualizing systems

and structures

" Well-versed in usability and

interaction design principles

"

Responsible for generating screensketches, but not for final visual look

" Full-time from initial research through

final specification


47/150


Why are interaction design and visual

design distinct roles?

Each should be literate in the other field, but:

"

Most are better at one discipline than the other

" It's hard to be responsible for both (one suffers)

"

There's a productive tension between the two


48/150

VISUAL DESIGN 2013 48VISUAL DESIGN 2013 48

Visual design forces interaction

designers to work through

the details.


49/150


Collaborating with interaction designers

+

Especially during refinement, visual designers and interactiondesigners are constantly collaborating

+ If either team member communicates poorly or misses a deadline,

it causes extra work for the other designers


50/150


What visual designers need from IxDs

to be successful:

" Content-complete layout that's close to final

"

Exact on-screen text and realistic data

" Every control and an explanation of its behavior

"

Discussion of how elements should be related

(association and hierarchy that need to be expressed)


51/150


Collaborating with developers

" Understand the technical constraints of the platform

" Understanding the skill set of developers

"

Encourage developer involvement in design meetings

" Deliver assets and design specifications early


52/150


" Determine who the final decision

makers are before you begin

"

Interview executives early

" Collaborate early and often

! It's easier to make more small

decisions vs. fewer large decisions

! Frequent collaboration minimizes

surprises

"

Sell your designs

" Use personas and experience

attributes to reduce subjectivity

Collaborating with stakeholders


53/150


Overall, remember that the best solution wins

" Each person should trust the skill of the others, but challenge their work as

appropriate

" Say what isn't working about the solution, rather than jumping to proposing

an alternative

" Conflict often means neither party is right

"

When in doubt, use the 15-minute rule


54/150


What visual design

collaboration challenges

have you faced?

D I S C U S S I O N


55/150


Now lets put the process

into practice!


56/150


57/150


Y O U R P R O J E C T I N T R O D U C T I O N

Facilitating better patient care

through integrated records.

CarePal visual interface design


58/150


Y O U R P R O J E C T I N T R O D U C T I O N

CarePal visual interface design1

2

3

The target is busy physicians and clinicians focused

on providing the best patient care.

They have to present complex information to their patients

in a clear and simple way, and make better decisions

and diagnoses.

We must provide assistance to clinicians without being

prescriptive or forceful.

I want to know their story


59/150


Dr. Alice Barnes

PhysicianSt. Lukes Hospital

I want to know their story.

Goals:

+

Focus on the patient not the PC+ Be aware of critical and/or

exceptional informationand events

+ Feel like a partner in care

Alice Barnes is a physician that uses

the CarePal Tablet PC interface

to provide good care for her patients.

She brings CarePal with her during

her rounds. She uses a combination

of touch and an attached stylus.

Q8;9EC:


60/150


Imagine that an interaction designer

has just shared with you this initial

design sketch.

(See your handout section for

a larger image.)

You are going to design a visual

interface that balances CarePals

brand with the experience that

your persona Dr. Alice Barnes

wants to have.

We will walk through the process

together.

3:;8Q:@ 2EGB= &M8>


61/150


Lets begin by conducting

an experience workshop

to create a shared creative

vocabulary.


62/150

VISUAL DESIGN 2013 62#$%$&' )*+, ,-++ . /0'12#3'/40 51&/%0 . 6,-++ . 7,VISUAL DESIGN 2013 62

Experience Workshop


63/150

Experience workshop


64/150


What is it?

"

This workshop is a group

discussion based on a broad

selection of brand and product

representations

" Each image, word, or description

conveys an emotion or quality ofinteraction that represents a

product or service experience


65/150


How does it help?

"

The experience workshop gives

everyone a way to participate and

share their opinion

"

It gives them creative tools to

make their perspectives more

tangible

" This helps the entire team reach

a shared vision before the design

process begins

"

It builds a strong emotionalconnection between the business

and users


66/150


Lets step through

the process


67/150


1 2 3 4

Draw the experience

canvas.


68/150


1 2 3 4

Select images that

express experiential

goals.


69/150


1 2 3 4

Provide tools for voting.

Vote on images and

then discuss the

rationalebehind

choices.


70/150


1 2 3 4

Plot images on the

canvas and record

themes.


71/150


WHITEBOARD

Set up whiteboard with negative and

positive poles for brand identity andexperience.

DISCUSS IMAGES

Position images with a high

vote count around the poles,

discussing the groups impressions

of each image.

KEY THEMES

Write down words that represent

key themes around the poles.

EXPERIENCE ATTRIBUTESAfter the workshop, create an

experience attribute word cloud to

capture the discussion outcome.

Recap:


72/150


73/150


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

CarePal experience workshop

1

2

3

Together, well create an experience canvas with positive and

negative poles on the whiteboard.

Use your voting dots to choose the images that represent

what you think the experience should be and shouldnt be.

Place these images along the continuum and then discusswhy you chose those images. Document keywords that

define whyon the canvas.


74/150


What do you thinkof the ExperienceWorkshop?

What did you learn?

D I S C U S S I O N


75/150

VISUAL DESIGN 2013 75#$%$&' )*+, ,-++ . /0'12#3'/40 51&/%0 . 6,-++ . TSVISUAL DESIGN 2013 75

Synthesizing Experience

Attributes

E i tt ib t


76/150


Experience attributes

Are a synthesis of:

" What the company wants to convey about its brand

(the company and/or the product)

" Influence of competition (need to differentiate)

"

How the users want to feel about their experience

Wh t j t b d tt ib t ?


77/150


Why not just use company brand attributes?

Typically an essential starting point, but

" Often too broad for a specific product

"

May not consider how users want to feel

" May not be optimal for guiding visual interface design


78/150


Lets step through

the process


79/150


1 2 3

Reviewthe experience

canvas weve created

and make notes about

the keywords shown.


80/150


1 2 3

List attributes and look

for words or phrases

that are relatedto each

other. Distill down

to 3-5 keywords.

cient

Ease of useTime savingTake away challengesSimpleMinimal (process)Put your feet upPhew!


81/150


82/150


Not just any attribute

will do

Focus on words you might

use to describe the

appearance of a person.

Refining attrib tes


83/150


Refining attributes:

For example, efficient could mean any of these:

" Simple uncomplicated

" Trouble free

" Effortless

" Minimal

"

Put your feet up

" Phew!

" Tranquil

" Gentle

" Calm

" Graceful

"

Elegant

" Painless

" Time-saving

" Smooth

" Straightforward

" Relaxed

"

Soothing

" Comforting

" Peaceful



84/150



To begin refining, remove negatives.

Efficient


" Trouble free

" Effortless

" Minimal

" Put your feet up

" Phew!

" Tranquil

" Gentle

" Calm

" Graceful

" Elegant

" Painless

" Time-saving

" Smooth

" Straightforward

" Relaxed

" Soothing

" Comforting

"

Peaceful



85/150



Find the words with the most meaning

that will also differentiate the product.

Efficient


"

Trouble free

" Effortless

" Minimal

" Put your feet up

"

Phew!

" Tranquil

"

Gentle

" Calm

" Graceful

" Elegant

"

Painless

" Time-saving

"

Smooth

" Straightforward

" Relaxed

" Soothing

"

Comforting

" Peaceful


86/150


Once the attributes are

defined, they are then

translatedinto visual

interface elements and

elements of interaction.

For example:


87/150


For example:

More examples:


88/150


More examples:

Experience attributes advanced topic:


89/150


We often look to find the attribute that captures the essence of the

experience. This is the best way to reach the top of the brand

essence pyramid.

Experience attributes, advanced topic:


90/150



Lets synthesize our experience

workshop into attributes.

CarePal Experience Attributes


91/150



CarePal Experience Attributes

1

2

In groups, review the experience canvas weve created

and make notes about the keywords shown.

List attributes and look for words or phrases that are

related to each other to distill down into 3-5 keywords.

Add 3-4 clarifying words to each main keyword.

Find the words with the most meaning that will alsodifferentiate your product.

A

B

D I S C U S S I O N


92/150


Would anyone like

to share?


93/150


Now lets translate theseexperience attributes into

a visual language.


94/150

VISUAL DESIGN 2013 94#$%$&' )*+, ,-++ . /0'12#3'/40 51&/%0 . 6,-++ . )RVISUAL DESIGN 2013 94

Visual Style Studies


95/150


Visual language studiespromote conversation

about the look and feel.


96/150


A visual language studyoffers several directions

for the visual look and feel

of the final design.

These are separate from

the design framework.

TIPS:


97/150


VISUAL HIGHLIGHTS

Show the most important visual

elements to limit complexity.

PLACEHOLDER DATA

Studies use nonsense data, soreviewers can focus on look and feel

rather than content.

COLOR PALETTE

Shows the set of colors for the

interface.

VARIATIONS

Vary colors and textures across the

studies to emphasize different

experience attributes.

TIPS:

How this progresses:


98/150


&>U@8 9>GAU /C>8;:U@8

4 5

How this progresses:

From this


99/150


From this

to this


100/150


to this.

Why multiple concepts?


101/150


Why multiple concepts?

With interaction design,

scenarios tend to suggest one

direction that is most efficient.

With visual style,there are typically several good

ways to express brand ideals.

Feedback we want from brand stakeholders


102/150


" Gut reactions

"

More considered reactions about which ones best convey brand attributes

(not personal preferences)

" A sense of what's too out there or too conservative

"

Consensus on one or two directions that are close

Feedback we want from brand stakeholders


103/150



Create several quick visual

language studies.

CarePal visual language study


104/150



CarePal visual language study

1

2

3

In groups, use your experience attributes to create visual

language studies.

Cut out images from your visual interface handouts that

represent your experience attributes.

What colors best represent your attributes? Icons? UI?

Information graphics?

Paste these cut outs onto your visual style study worksheet.

A


105/150


106/150

D I S C U S S I O N


107/150


Lets have a few teams

share

What did you learn?


108/150


Now that we haveestablished a visual language

direction, lets discuss how

to create a complete visualsystem.


109/150

VISUAL DESIGN 2013 109#$%$&' )*+, ,-++ . /0'12#3'/40 51&/%0 . 6,-++ . +-)VISUAL DESIGN 2013 109

Developing the VisualSystem


110/150


A good visual system

brings regularityand

structureto the user

experience.

" Eliminates unnecessary variation which

reduces cognitive and visual work

"

Makes decisions easier as you design

" Gives you a basis for consistency checks

" Lets multiple people lay out screens

" Aids implementation efforts

" Provides guidance for later expansion

" Defines the application of layout, color

and typography, controls, etc.

Outline the visual system in a style guide


111/150


3EC>8C>9X

+Y Z:UEG>

,Y /A8CJ>U

[Y 3E@E;

RY

'UNEB;:N=U

SY /H:B8

7Y /;E@9

\Y &


112/150


Lets step through the visualsystem components that

need to be addressed in the

style guide

The layout grid is the backbone


113/150


y g

of the visual system

The visual system needs to:

" Outline major divisions of space

(the macro grid)

! E.g. Panes, views, navigation bars, etc.

" Define individual element size

and spacing based on multiples

of a basic unit

(the micro grid)

!

E.g. Controls, buttons, text, etc.

Macro grid


114/150


g

" A limited number of rows and columns support the interaction framework

"

Good systems typically have no more than 5 to 7 variations

The canonical grid


115/150


g

+

,

[

R

7

Example macro grid


116/150


p g


117/150



118/150


Be decisive


119/150


If your space allocation is anywhere close to a simple fraction (1/5,

1/4, 1/3, 1/2), use that fraction.

! x

! x

Below the macro grid is a micro grid


120/150


The micro grid is composed of base units a certain number

of pixels square (such as 3, 4, or 5 pixels).

For example, if this is a base-5 grid, the large squares

may be 225 pixels (45 base units), but not 223 or 228 pixels.

5px

5px

Micro grid


121/150


Fields, labels, and controls are sized and spaced according

to a base unit, rather than at random intervals.

1 pixel

5 pixelbase unit

Typical base units


122/150


A 5x5 pixel base unit works well for many applications.

Example specification of micro grid


123/150


Identity


124/150


The visual system needs to:" Discuss how the identity

is applied

" Refer to the corporate style

guide for more general guidance

if needed

Color


125/150


The visual systemneeds to address:

" Primary and accent brand

colors

" Supplementary colors for

the interface

" Color coding

The color system

fi l f


126/150


specifies color for:

"

UI structural elements(backgrounds, buttons, etc.)

" Highlight colors to draw attention

" Color coding for visual feedback

(e.g. red/yellow/green)

"

Dominant colors for icons or imagery

Typography


127/150



" Typefaces (including

rationale)

" Hierarchy

"

Capitalization

" Alignment

Type system principles


128/150


A good type system rarely has more than 2 faces.

Use a good workhorse screen font (such as Segoe UI or

Verdana) for most content and interface elements. Or

test a less common one.

Consider a unique face from the brand identity systemfor largertype such as headers.

Sizes


129/150


Most type systems require 3 4 sizes for clear hierarchy.

Size differences should be decisiveat least 2 4 pixels.

Compare:16171819202122 14 162024

Example


130/150



131/150

Iconography


132/150



" Principles

" Globalization

concerns

"

Icon catalog

" Categorize icons by action

" Show multiple states

Controls


133/150



" Describe types and uses

" Show possible states

" Specify any detailed

behavior (such ascharacter limits)

Screen Specifications


134/150



" Illustrate at the micro

level how individual

atomic elements are

to be positioned

" Overview for each

archetype

" Details for each element

" Additional detail for sub

elements if necessary

Colors and pixel measurements


135/150


Response to changing resolutions


136/150


Be sure to describe what happens when:

" Windows are re-sized

"

Application is used at a sub-optimal resolution

" How the design responsively changes


137/150


A good visual style

guide explains the why

as well as the what.

"

Relates to and reinforces the rest

of the form and behavior spec

"

Starts with the whole and breaks

it down into atomic units

"

Clearly explains how the system

is constructed for developers

"

Leaves no room for interpretation

Design for user experience first


138/150


Never sacrifice usability to follow brand guidelines, but:

" Be guided by brand attributes

"

Be consistent with corporate style where practical

" Don't forget that a good user experience is emotionally as well as practically

satisfying

How long does this take?


139/150


+ Minimum five days for very simple product

+ Couple of weeks for an average product

+ Truly comprehensive style guides can take a month or more, but there's a

point at which it's not worth the investment


140/150

Graphic and UI code libraries


141/150


+ Dont require reading of large spec doc

+ Improve consistency and improve product craftsmanship

+ Are immediately useful for designers and developers

+ But dont show much rationale so can be misinterpreted

+

UI code libraries are more effort

The visual style guide


142/150


Focuses on rules for applying the visual system:

" Color palette specific uses

"

Typefaces, sizes, and styles

" Control and icon library

"

How states are depicted

" Grid specifications and pixel measurements for spacing

"

Rationale



143/150


Identify the main componentsof your visual system.

Document the Visual System



144/150


Document the Visual System

1

2

Work with your team to outline all of the main

components of a visual system for CarePal.

Make notes for each of the following:

Layout: Macro and micro grids

Color use

Typography

Iconography

Controls and screen specifications

(See handouts section.)

A

B

C

D

E

D I S C U S S I O N


145/150


What did you learn?


146/150

VISUAL DESIGN 2013 146#$%$&' )*+, ,-++ . /0'12#3'/40 51&/%0 . 6,-++ . +R7VISUAL DESIGN 2013 146

Lets wrap up


147/150

D I S C U S S I O N


148/150


What did you learn?

What will youdo differently?


149/150


Twitter: @Cooper

Email: [email protected]

Facebook: www.facebook.com/cooperdesign

Vimeo: vimeo.com/cooperdesign

Stay in touch!


150/150

Thank you!

CooperU VisD DayTwo May 2013

Documents

Transcript of CooperU VisD DayTwo May 2013