Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA

Alecsandru Grigoriupxdotpt.com

Data visualization, infographics
and information architecture

Me


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


Data Visualization

first, let us see how others do it


Examples


Macrometeorites


WeFeelFine


GEOCODEARTH (ex Twitearth)


The Museum of Mario (IGN)


Worldometers

it’s like baking a very detailed wedding cake


How do we do it?

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

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


So?

obtain and store the data


Acquire

provide structure, meaning and order


Parse

do we need all the data?
remove the waste


Filter

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


Mine

make it visually stunning or at least try


Represent

have an eye for the details and tune your visual


Refine

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


Interact

it’s not rocket science to generate
relationships from your data
and draw some lines, circles
…or ponies


But I’m not a designer

I’m here


Have no fear


Mapping


Time series


Connections


Scatterplot maps


Hierarchies


Networks


Infographics

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


The same Mary, but on a different ferry


Imaginary Factory


Chen Zhi Liang’s Resume

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


Study: fonts and colors


App Store Wars


The Apple Tree

create a story,
keep it simple,
don’t overdue it
and proofread it


Key principles

the simplest way:
Hollywood 3-act


Storytelling

Premise, Backstory, Synopsis, Theme,
Setting, Plot, Realism, Cinematics,
Player control, Shifting focus,
Foreshadowing events, Suspension of disbelief,
Balancing conflict


Storytelling

Hero, Shadow, Mentor, Allies,
Guardians, Trickster, Herald
Protagonist, Antagonist, Shape-shifter
Intrapersonal, Interpersonal, Team,
Community, Humanity


Characters

I learned a thing or two


From my experience


FX User Profile and Modus Operandi


Information Architecture

the art and science of developing
structures of organization to present
data and information
FINE Design Group


What is IA?

(what I used so far)

Competitive analysis + matrix
Business requirements + use cases
Acceptance criteria
Sitemap
Mobile context assessment (Yes, mobile!)


Tools of the trade

Criteria: Functionality, Content, Usability,
Branding, Values, Other
You, your direct competitors and
Leaders (best of the pack)
0, 1, 2


Competitive analysis matrix


Competitive analysis matrix

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


Business requirements and use cases

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


Acceptance criteria

horizontal, vertical, list-view
static, dynamic, future, cluster elements
visually or made out of cells


Sitemap


Sitemap

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


Mobile context assessment

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)

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


Resources

They stay the same!
Think first
before opening your IDE or Photoshop


Conclusions

the bilete.cfrcalatori.ro uninvited
redesign by Grapefruit for WIAD 2013

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


Do we have time for
one more case study?


episodul viitor: (re)găsirea resurselor Web

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA

Similar to Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA (20)

More from Sabin Buraga

More from Sabin Buraga (20)

Recently uploaded

Recently uploaded (20)

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA