Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Data visualization, infographicsand information architecture

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

“It’s all about making the data…pretty, readable and usable.”

Me

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Data Visualization

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Examples

first, let us see how others do it

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Macrometeorites

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

WeFeelFine

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

GEOCODEARTH (ex Twitearth)

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

The Museum of Mario (IGN)

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Worldometers

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

How do we do it?

it’s like baking a very detailed wedding cake

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

So?

we acquire, parse, filter, mine, represent, refine, interact

Ben Fry, Visualizing Data, O’Reilly (2008)

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Acquire

obtain and store the data

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Parse

provide structure, meaning and order

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Filter

do we need all the data? remove the waste

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Mine

do some mathematical/statistical “voodoo”and get results/patterns

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Represent

make it visually stunning or at least try

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Refine

have an eye for the details and tune your visual

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Interact

add the ability to navigate or manipulate your data to browse your results

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

But I’m not a designer

it’s not rocket science to generaterelationships from your dataand draw some lines, circles

…or ponies

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Have no fear

I’m here

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Mapping

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Time series

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Connections

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Scatterplot maps

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Hierarchies

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Networks

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Infographics

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

The same Mary, but on a different ferry

infographics are meant to tell a story(on screen, on paper, on video)

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Imaginary Factory

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Chen Zhi Liang’s Resume

http://www.behance.net/gallery/Infographics-Resume/6745371

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Study: fonts and colors

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

App Store Wars

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

The Apple Tree

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Key principles

create a story, keep it simple,

don’t overdue itand proofread it

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Storytelling

the simplest way: Hollywood 3-act

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Storytelling

Premise, Backstory, Synopsis, Theme,Setting, Plot, Realism, Cinematics,

Player control, Shifting focus, Foreshadowing events, Suspension of disbelief,

Balancing conflict

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Characters

Hero, Shadow, Mentor, Allies,Guardians, Trickster, Herald

Protagonist, Antagonist, Shape-shifter

Intrapersonal, Interpersonal, Team,Community, Humanity

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

From my experience

I learned a thing or two

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

FX User Profile and Modus Operandi

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Information Architecture

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

What is IA?

the art and science of developingstructures of organization to present

data and information

FINE Design Group

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Tools of the trade (what I used so far)

Competitive analysis + matrix

Business requirements + use cases

Acceptance criteria

Sitemap

Mobile context assessment (Yes, mobile!)

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Competitive analysis matrix

Criteria: Functionality, Content, Usability,Branding, Values, Other

You, your direct competitors andLeaders (best of the pack)

0, 1, 2

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Competitive analysis matrix

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Business requirements and use cases

talk to the clients and find out what

they want and what are the customer needs

use case format:

I WANT TO DO SOMETHING

BECAUSE OF THIS OUTCOME

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Acceptance criteria

I WANT TO BUY MY PRODUCTS

WITHOUT REGISTERING BECAUSE

I AM A ONE-TIME SHOPPER

How? Use a radio button option at checkout to skip the registration process

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Sitemap

horizontal, vertical, list-view

static, dynamic, future, cluster elements

visually or made out of cells

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Sitemap

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Mobile context assessment

strip your use cases to the bare minimum

Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world

Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions

Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it

Edit/Create (urgent change/micro-tasking):I need to get something done now that can’t wait

http://alistapart.com/article/organizing-mobile

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

represent (pen & paper) – in a visual manner –the following set of data

• 7,188,671,803 Current World Population

• 55,279,742 Cars produced this year

• 114,432,330 Bicycles produced this year

• 289,560,351 Computers sold this year

• 636,221 TV sets sold worldwide today info

• 4,807,836 Cellular phones sold today

• 176,455,804,298 Emails sent today

• 3,173,404 Blog posts written today

• 507,636,003 Tweets sent today

• 3,489,437,754 Google searches today

exercise (bonus points)

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Resources

S. Negru, Resources for data visualization & interactive exploration: http://tinyurl.com/kr8oxg5

B. Fry, Visualizing Data, O’Reilly, 2007

S. Few, Information Dashboard Design, O’Reilly, 2006

P. Morville, L. Rosenfeld, Information Architecture for the World Wide Web, O’Reilly, 1998

D. Roam, The Back of the Napkin (Expanded Edition),Portfolio Trade, 2013

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Conclusions

They stay the same!

Think first before opening your IDE or Photoshop

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

Do we have time for one more case study?

the bilete.cfrcalatori.ro uninvitedredesign by Grapefruit for WIAD 2013

www.slideshare.net/GrapefruitRo/murder-on-the-ia-express

Ale

csan

dru

Gri

go

riu

px

do

tpt.

com

episodul viitor: (re)găsirea resurselor Web