see what i mean (part 1)

ATTENTION SLIDESHARERS:This presentation is part 1 of a 2 part presentation.

The second half of this presentation can be viewed at:www.slideshare.net/tbisaacs

STEPHEN P. ANDERSON

poetpainter.com

viewZi

V.P. of Design

viewZi

TRAVIS ISAACStravisisaacs.com

Dir. of ViewzerExperience

We’re sick.

SPINACH

PACKAGING?

FILM DEVELOPING FORMS?

KID’S MENUS?

LEGAL FORM TO

GET A TATTOO?

http://flickr.com/photos/noahcoad/421399227/

CALEB IS SICK

http://www.oaktreecreative.com/blog/design/proximity-matters/

CHUCK IS SICK

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

JEREMY IS SICK

INFORMATION DESIGN

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

16826054074

+1 682 605 4074

OR

THE DATA IS THE SAMEBut which one do you want to work with?

INFORMATION DESIGN

•signage systems•forms•tests and test scores•information kiosks•data tables•statistical displays of all types

•listings•charts•diagrams •BALLOTS•maps•schedules and timetables

•manuals•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!

GR

AP

HIC

DE

SIG

N

FR

ON

T-

EN

D D

EV

TE

CH

NIC

AL

WR

ITIN

G

INF

OR

MA

TIO

N A

RC

HIT

EC

TU

RE

US

AB

ILIT

Y /

HC

I

GR

AP

HIC

DE

SIG

N

FR

ON

T-

EN

D D

EV

TE

CH

NIC

AL

WR

ITIN

G

INF

OR

MA

TIO

N A

RC

HIT

EC

TU

RE

US

AB

ILIT

Y /

HC

I

INFORMATION DESIGN

GR

AP

HIC

DE

SIG

N

FR

ON

T-

EN

D D

EV

TE

CH

NIC

AL

WR

ITIN

G

INF

OR

MA

TIO

N A

RC

HIT

EC

TU

RE

US

AB

ILIT

Y /

HC

I

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 ...

Dirk Knemeyer

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

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

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

INFORMATION DESIGN BASICSTO 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 SCENARIOWho 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

TIP:“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:

?

NODES OF INFORMATION:

__ Image

__ Title

__ Length

__ From

__ Views

NODES OF INFORMATION:

__ Image

__ Title

__ Length

__ From

__ Views

__ Visited (or not)

LOOK AT YOUR SHEETS

The nodes of information are self evident.

TIP:

Resist “Default Thinking”

A B

A B

WRONG PROBLEM!

! ?

! ?

(RIGHT PROBLEM TO SOLVE)

ORGANIZE TO REDUCE COMPLEXITY

SortLabelIntegratePrioritize

ANY IDEA?

ANY IDEA?

What How

GROUP & SORT INFO:

viewZi

viewZi

LOOK AT YOUR SHEETS

What can you group together to reduce

complexity?

REMOVE UNNECESSARY INFORMATION

65

66

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

Anything in between is noise.

67

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

68

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

Instead, use tabs, or offer a drop down with plain english - “Sort by

lowest price”

69

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

BACK NEXT1 of 8

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

71

“Free Shipping both ways” is mentioned 13 times

72

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/

viewZi

Present

Past

viewZi

this is the top priority?

Is this necessary?

Your order

Your order

PRICE?

Large Stuffed Crust Pizzawith mushrooms

$8.13

Large Stuffed Crust Pizzawith olives

$8.13

$23.12

Did we get your order correct?

-$3.8520% off your first web order!

SUBTOTAL

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

CLICK

http://songza.com

http://songza.com

http://songza.com

http://songza.com

http://songza.com

http://viddler.com

http://viddler.com

http://viddler.com

http://viddler.com

(aka. Progressive Disclosure 2.0)

A quick introductionrevealing 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

103

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.livevalidation.com/

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.comhttp://kampyle.com

viewZi

viewZi

display data visually

LOOK AT YOUR SHEETS

How could you present this information (more) visually?

TIP:

Think in 3D

Google Yahoo Ask MSN

M

A

G G A MY

M G Y A M

AM G M M Y

viewZi

M

A

Google Yahoo Ask MSN

G G A MY

M G Y A M

AM G M M YG

Visually represent overlap between sources

viewZi

TIP:

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

16a IRA distributions (see page 25) 16b Taxable amount

17a Pensions and annuities (see page 25) 17b Taxable amount

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

22a Other income. List type (see page 27) 22b List 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 IRSname and addresslabel here. Other-wise, print or type.

About You

(99) IRS use only: Do not write or staple in this space.

OMB No. 1545-0074

Important!You MUST enter your SSN(s)"

""

"

Presidential Election CampaignDo you, or your spouse (if filing ajoint return) want $3 to go to thisfund? Please be aware thatchecking “Yes” will not changeyour 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.The 1040Instructionsprovide help foreach question onthis form.

Your FilingStatusPlease check onlyone box. See page20 for rules.

YourExemptionsIf you have more thanthree dependents,see page 21.

YourIncome

YourAdjustedGrossIncome

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 boxes checked in 7a + 7b

• No. of children in 7cwho lived with you

• No. of children in 7c who didnot live with you due to divorceor separation (see page 21)

• No. of dependents in 7cnot entered aboveAdd numbers from above fortotal 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 youDependents: Check box for each dependent who qualifies for a child tax credit. "

8

1040 U.S. Individual Income Tax Return 2003Department of the Treasury—Internal Revenue Service

!

Please encloseyour payment, butdo not attach it bystapling orclipping. To speedup the processingof your payment,use Form 1040-V.

Thank you!

Please staple orclip Forms W-2and W-2G here. Ifyou did not get aW-2, see page 22.

If tax was withheldfrom distributions,attach Form(s)1099-R. See page 25.

34

9a

Yes # No # Yes # No #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&(

• Ticketing Assistant will process pricing QC checks based on the DK number or PCC settings. How an airfare is stored, using WS or PQ, must be configured by the user.

• Every PNR must have a Stored Fare in order for Ticketing Assistant to create and/or validate an FP line and issue a ticket.

• The Check for Existing Stored Fare will test for a Valid (not inactive) stored fare.

4053)#-(/.0#-*(1)#-(6$.7(48##-&.(1)#-(

• Selecting ‘Compare Stored With Current Fare’ will display the following popup window:

• Ticketing Assistant will use the pricing instructions found in the stored fare to re-price the itinerary and compare the new fare with the existing stored fare.

• A dollar amount can be input as a threshold and the comparison will be made to reject the PNR if the new fare is higher, lower or either, versus the original stored fare.

• The dollar amount should be entered as a decimal numeral. (100.00)

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

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

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

• Ticketing Assistant will process pricing QC checks based on the DK number or PCC settings. How an airfare is stored, using WS or PQ, must be configured by the user.

• Every PNR must have a Stored Fare in order for Ticketing Assistant to create and/or validate an FP line and issue a ticket.

• The Check for Existing Stored Fare will test for a Valid (not inactive) stored fare.

4053)#-(/.0#-*(1)#-(6$.7(48##-&.(1)#-(

• Selecting ‘Compare Stored With Current Fare’ will display the following popup window:

• Ticketing Assistant will use the pricing instructions found in the stored fare to re-price the itinerary and compare the new fare with the existing stored fare.

• A dollar amount can be input as a threshold and the comparison will be made to reject the PNR if the new fare is higher, lower or either, versus the original stored fare.

• The dollar amount should be entered as a decimal numeral. (100.00)

“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 SpaceLorem 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