View
238
Download
0
Category
Tags:
Preview:
DESCRIPTION
Prezentare realizată de Alecsandru Grigoriu (Grapefruit). Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Citation preview
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
Recommended