See what I mean: Brief guide to Information Design

Information design is not the same as information architecture; it is not merely an “enlightened” version of graphic design; it is not somehow a niche component in interface or experience design; it is not technical writing. It is a broad and exploratory discipline. To practice Information design implies viewing the world through a special filter, disassembling it with analytical curiosity, to then assemble it again in a simplified way and with a feeling for precision and detail

ATTENTION SLIDESHARERS:

The second half of this presentation can be viewed at:

www.slideshare.net/tbisaacs

STEPHEN P ANDERSON

poetpainter.com

view Z i

V.P of Design

We’re sick.

SPINACH

PACKAGING?

FILM DEVELOPING FORMS?

KID’S MENUS?

LEGAL FORM TO GET A TATTOO?

421399227/

CALEB IS SICK

CHUCK IS SICK

alert/

http://www.23hd.com/2006/02/02/makeover-osx-firefox-software-update-JEREMY IS SICK

INFORMATION DESIGN

Information design makes complex information

easier to understand and to use.

INFORMATION DESIGN

the art and science of preparing information so

that it can be used by human beings with

efficiency and effectiveness

Information design makes complex information

easier to understand and to use.

16826054074

+1 682 605 4074

OR

THE DATA IS THE SAME

But which one do you want to work with?

INFORMATION DESIGN

•product catalogs

INFOGRAPHICS

DATA VISUALIZATION

MODELS & DIAGRAMS

VISUAL THINKING

“WAIT! This is Refresh.”

information design applies to

Web Apps: Forms Web Apps: Tabular Data / Data Grids

The Display of Search Results Business Intelligence Reports

Web Sites (IA) Concept Models

and more!

Information design is not the same as information architecture;

it is not merely an “enlightened” version of graphic design; it is not somehow a niche component in interface or experience

design; it is not technical writing It is a broad and exploratory discipline

Dirk Knemeyer

http://www.boxesandarrows.com/view/

information_design_the_understanding_discipline

http://www.cookingwithxaml.com/meals/financials/default.html http://37signals.com/better_fedex.php

http://www.cookingwithxaml.com/meals/financials/default.html

INFORMATION DESIGN BASICS

TO MAKE COMPLEX INFORMATION EASIER TO UNDERSTAND

“To practice Information design implies viewing the world

through a special filter, disassembling it with analytical

curiosity, to then assemble it again in a simplified way and with a feeling for precision and detail.”

Gerlinde Schuller

DEFINE THE SCENARIO

Who is interacting with this? What is their

context? What do they need?

1 Identify MY medicine

2 Find the right prescription

3 Read directions for use

(everything else I could need)

“USING” A PRESCRIPTION LABEL

1 Identify MY medicine

2 Find the right prescription

3 Read directions for use

(everything else I could need)

“USING” A PRESCRIPTION LABEL

My name (or other identifier)

1 Identify MY medicine

2 Find the right prescription

3 Read directions for use

(everything else I could need)

“USING” A PRESCRIPTION LABEL

My name (or other identifier)

Prescription Name

1 Identify MY medicine

2 Find the right prescription

3 Read directions for use

(everything else I could need)

“USING” A PRESCRIPTION LABEL

My name (or other identifier)

Prescription Name Directions

1 Identify MY medicine

2 Find the right prescription

3 Read directions for use

(everything else I could need)

“USING” A PRESCRIPTION LABEL

My name (or other identifier)

Prescription Name Directions

Pharmacy #, refills, etc.

(first, it’s a mess!)

-Pharmacy logo is most important!

(first, it’s a mess!)

-Pharmacy logo is most important! -Then, the store number

(first, it’s a mess!)

-Pharmacy logo is most important! -Then, the store number

-Followed by the prescription number

(first, it’s a mess!)

-Pharmacy logo is most important! -Then, the store number

-Followed by the prescription number -Then the phone number

(first, it’s a mess!)

-Pharmacy logo is most important!

-Then, the store number

-Followed by the prescription number

-Then the phone number

-Oh, and now I notice the medication name

(first, it’s a mess!)

-Pharmacy logo is most important!

-Then, the store number

-Followed by the prescription number

-Then the phone number

-Oh, and now I notice the medication name -Followed by directions

(first, it’s a mess!)

-Pharmacy logo is most important!

-Then, the store number

-Followed by the prescription number

-Then the phone number

-Oh, and now I notice the medication name -Followed by directions

-And hey, whose script is this?

(first, it’s a mess!)

My name (or other identifier) Prescription Name

Directions

Everything else

My name (or other identifier) Prescription Name

Directions

Everything else

My name (or other identifier)

Prescription Name

Directions

Everything else

Deborah Adler

“Mine” the

details

Button color review committee

Conference A

THE STANDARD:

Focused on scheduling events

SIMPLE ALTERNATIVE:

Great for simple events

SIMPLE ALTERNATIVE:

Great for simple events

I need more options

SIMPLE ALTERNATIVE:

More options are just a click away

IDENTIFY THE NODES OF

INFORMATION

it’s good to know what you’re working with

http://indexed.blogspot.com/2008/04/lets-go-see-band.html

http://graphs.gapminder.org

NODES OF INFORMATION:

?

LOOK AT YOUR SHEETS

The nodes of information

are self evident.

Resist “Default

Thinking”

A B

A B

WRONG PROBLEM!

! ?

! ?

(RIGHT PROBLEM TO SOLVE)

ORGANIZE TO REDUCE COMPLEXITY

S ort

I ntegrate

P rioritize

ANY IDEA?

What How

GROUP & SORT INFO:

view Z i

view Z i

LOOK AT YOUR SHEETS

What can you group together to reduce

complexity?

REMOVE UNNECESSARY

INFORMATION

65

This amount fidelity isn’t needed User is either accepts default result set, or all results

Anything in between is noise.

Duplicate text can confuse users, especially if they miss the arrows

This fidelity isn’t needed Instead, reduce the amount of options:

BACK 1 of 8 NEXT

This fidelity isn’t needed Instead, reduce the amount of options:

“Free Shipping both ways”

is mentioned 13 times

Number of products = 12

Context makes the content explicit

(remove the darn labels!)

LOOK AT YOUR SHEETS

Is there any information that can be removed?

EMPHASIZE MOST IMPORTANT

INFORMATION

AND MINIMIZE THE LESS IMPORTANT STUFF

“Would you like to add this to your schedule?”

http://www.lukew.com/resources/articles/ web_forms.html

http://nextupdate.com/blog/archives/2008/02/issue-tracker-design-decisions/

http://nextupdate.com/blog/archives/2008/02/issue-tracker-design-decisions/

view Z i

Past

view Z i

this is the top

priority?

Is this necessary?

Your order

Your order

PRICE?

Large Stuffed Crust Pizza

Place order for $19.26

Go back and make changes to my order

LOOK AT YOUR SHEETS

Highlight the important stuff Mark the stuff you

might minimize.

HIDE NON -CRITICAL

INFORMATION

INTERFACE CHALLENGE:

HOW DO WE REDUCE COMPLEXITY IN OUR

APPLICATIONS?

CLICK

http://songza.com

http:// viddler.com

http:// viddler.com

http:// viddler.com

http:// viddler.com

(aka Progressive Disclosure 2.0)

A quick introduction

revealing interfaceS

http://flickr.com/photos/knowprose/103650244/ http://slideshare.net/jeremy

LOOK AT YOUR SHEETS

Is there any information that could be collapsed or

hidden?

DISPLAY INFORMATION VISUALLY

we’ve been visual

thinkers for thousands

of years

http://flickr.com/photos/iirraa/167674453/

http://www.viewzi.com/search/mmmgood/brownies

replace text with

visuals

http://worrydream.com/MagicInk/

reinforce text

with visuals

http://www.newspond.com/

http://concertvine.com

http://tuaw.com

Make relationships

visually explicit!

http://garrettdimon.com/archives/2007/8/20/tracker_status_amp_comments/

Prior Period Week 1 Week 2 Week 3 Week 4 Period to date Year to date

$ 3,333,826 756,779 0 0 0 756,770 18,757,608

&PY 108.7 108.1 0.0 0.0 0.0 108.1 107.0

$PLan 3,235,893 804,559 0 0 0 804,559 18,674,197

Suggest content

or function with

visual cues

http://glassdoor.com

http://discoapp.com

http://getsatisfaction.com http://kampyle.com

view Z i

view Z i

display data

visually

LOOK AT YOUR SHEETS

How could you present this information (more) visually?

Think in 3D

G oogle Y ahoo A sk M SN

M A

M A

view Z i

Ask “Can a 5

year old understand

this?”

USE TASK -BASED LANGUAGE

“The only use of the word 'you' in the

original was 'amount you owe '”

Karen A Schriver

http://www.jsonline.com/story/index.aspx? id=222255

8 Wages, salaries, tips, etc Attach Form(s) W-2

9a Taxable interest. (See page 22 for rules about when to file Schedule B; attach if required)

9b Tax-exempt interest Do not include this amount on line 9a

10a Ordinary dividends Attach Schedule B if required (see page 23)

10b Qualified dividends (see page 23)

11 Taxable refunds, credits, or offsets of state and local income taxes (see page 23)

12 Alimony received

13 Business income or loss Attach Schedule C or C-EZ

14a Capital gains, distributions, or losses. (See pages 24–25 for rules about when to file Schedule D)

14b Required to file Schedule D? Yes❒ No❒ If “yes,” please attach Schedule D

14c If Schedule D is not required, enter post-May 5 capital gain distributions

15 Other gains or losses Attach Form 4797

18 Rental real estate, royalties, partnerships, S corporations, trusts Attach Schedule E

19 Farm income or loss Attach Schedule F

20 Unemployment compensation

21a Social security benefits (see page 27) 21b Taxable amount

23 Add lines 8 through 22b (in the far right column) This is your total income

24 Educator expenses (see page 29)

25 IRA deduction (see page 29)

26 Student loan interest deduction (see page 31)

27 Tuition and fees deduction (see page 32)

28 Moving expenses Attach Form 3903

29 One-half of self-employment tax Attach Schedule SE

30 Self-employed health insurance deduction (see page 33)

31 Self-employed SEP, SIMPLE, and qualified plans

32 Penalty on early withdrawal of savings

33a Alimony paid 33b Recipient’s SSN

34 Add lines 24 through 33a

35 Subtract line 34 from line 23 (in right column) This is your adjusted gross income

Please place IRS

name and address

label here

Other-wise, print or type.

Presidential Election Campaign

Do you, or your spouse (if filing a joint return) want $3 to go to this fund? Please be aware that

checking “Yes” will not change your tax or refund.

For Jan 1–Dec 31, 2003 If for another tax year, fill in period: beginning , 2003, ending _, 200 _.

Your first name and initial Last name

If a joint return, spouse’s first name and initial Last name Home address (number and street) If you have a P.O box, see page 19. Apt no.

City, town or post office, state, and ZIP code If you have a foreign address, see page 19.

Please check only

one box See page

For Disclosure, Privacy Act, and Paperwork Reduction Act Notice , see page 77 Cat No 11320B Form 1040 (2003)

1 Your social security number Spouse’s social security number

10a

11 12 13 14a

15

17b 18 19 20 16b

• No of children in 7c who did not live with you due to divorce

or separation (see page 21)

• No of dependents in 7c not entered above Add numbers from above for

total exemptions

2 ❐ Single

3 ❐ Married filing jointly (applies even if only one person had an income)

4 ❐ Married filing separately Enter your spouse’s SSN above and full name here

5 ❐ Head of household (applies to people who provide a home for a child or adult who qualifies them under IRS rules)

If the person is a child but not your dependent, enter this child’s name here

6 ❐ Qualifying widow(er) with a dependent child

7a ❐ Yourself If someone else can claim you as a dependent, do not check box 7a

7b ❐ Spouse

7c

7d Calculate your total number of exemptions in the column to the right

First name Last name Social security number Relationship to you

Dependents: Check box for each dependent who qualifies for a child tax credit "

Spouse You

16a 17a

21a 22a

14c

10b 9b

24 25 26 27 28 29 30 31 32

!

33a

21b 22b 23

35

Sabre Ticketing Assistant 2.0 January, 2007 Confidential and Proprietary Sabre Inc !!

"#$%$&'()&*(+$%,-.$&'(

/.0#-*(1)#-(23.$0&(

or PCC settings How an airfare is stored, using WS or PQ, must be configured by the user

and/or validate an FP line and issue a ticket

to re-price the itinerary and compare the new fare with the existing stored fare

to reject the PNR if the new fare is higher, lower or either, versus the original stored fare

Sabre Ticketing Assistant 2.0 January, 2007 Confidential and Proprietary Sabre Inc !!

"#$%$&'()&*(+$%,-.$&'(

/.0#-*(1)#-(23.$0&(

or PCC settings How an airfare is stored, using WS or PQ, must be configured by the user

and/or validate an FP line and issue a ticket

to re-price the itinerary and compare the new fare with the existing stored fare

to reject the PNR if the new fare is higher, lower or either, versus the original stored fare

“The amount of difference allowed is $20

The difference is allowed to be greater than the allowed amount.”

Greater than

Allow difference to be:

USD

LOOK AT YOUR SHEETS

How would you make this

more conversational?

TIGHTEN IT ALL UP

v

Welcome to White Space

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit Curabitur tristique, sapien id

scelerisque euismod, turpis lacus sollicitudin nulla,

non iaculis quam nulla ullamcorper erat Nam

accumsan laoreet enim Cras vel lectus Cum sociis

natoque penatibus et magnis dis parturient montes,

nascetur ridiculus mus Maecenas malesuada

mattis metus Proin vehicula pretium nunc Donec

est arcu, viverra a, rutrum sit amet, interdum vitae,

est Aenean enim orci, faucibus in, posuere et,

congue pretium, nunc Vestibulum sagittis turpis

vitae pede Praesent est Aenean consectetuer

ornare arcu Nulla rhoncus.

Welcome to White Space

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Curabitur tristique, sapien id scelerisque euismod, turpis lacus sollicitudin nulla, non iaculis quam nulla ullamcorper erat Nam

accumsan laoreet enim Cras vel lectus Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Maecenas malesuada

mattis metus Proin vehicula pretium nunc Donec est arcu, viverra a, rutrum sit amet, interdum vitae, est Aenean enim orci, faucibus in, posuere et,

congue pretium, nunc Vestibulum sagittis turpis vitae pede Praesent est Aenean consectetuer ornare arcu Nulla rhoncus.

http://jasonsantamaria.com

FLUID

POTENTIALLY LONG LINE LENGTH

FIXED

LOOK AT YOUR SHEETS

Get out your pens!

ENSURE IT’S FLEXIBLE

TO BE CONTINUED

The second half of this presentation can be viewed at:

www.slideshare.net/tbisaacs