See What I Mean (Part 1)
-
Upload
stephen-anderson -
Category
Economy & Finance
-
view
38.202 -
download
0
Transcript of 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