0
Alecsandru Grigoriupxdotpt.com

Data visualization, infographics
and information architecture
Me

Alecsandru Grigoriupxdotpt.com

“It’s all about making the data…
pretty, readable and usable.”
Alecsandru Grigoriupxdotpt.com

Data Visualization
first, let us see how others do it

Alecsandru Grigoriupxdotpt.com

Examples
Alecsandru Grigoriupxdotpt.com

Macrometeorites
Alecsandru Grigoriupxdotpt.com

WeFeelFine
Alecsandru Grigoriupxdotpt.com

GEOCODEARTH (ex Twitearth)
Alecsandru Grigoriupxdotpt.com

The Museum of Mario (IGN)
Alecsandru Grigoriupxdotpt.com

Worldometers
it’s like baking a very detailed wedding cake

Alecsandru Grigoriupxdotpt.com

How do we do it?
we acquire, parse, filter, mine,
represent, refine, interact

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

Alecsandru Grigo...
obtain and store the data

Alecsandru Grigoriupxdotpt.com

Acquire
provide structure, meaning and order

Alecsandru Grigoriupxdotpt.com

Parse
do we need all the data?
remove the waste

Alecsandru Grigoriupxdotpt.com

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

Alecsandru Grigoriupxdotpt.com

Mine
make it visually stunning or at least try

Alecsandru Grigoriupxdotpt.com

Represent
have an eye for the details and tune your visual

Alecsandru Grigoriupxdotpt.com

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

Alecsandru Grigoriupxdotpt.com

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

Alecsandru Grigo...
I’m here

Alecsandru Grigoriupxdotpt.com

Have no fear
Alecsandru Grigoriupxdotpt.com

Mapping
Alecsandru Grigoriupxdotpt.com

Time series
Alecsandru Grigoriupxdotpt.com

Connections
Alecsandru Grigoriupxdotpt.com

Scatterplot maps
Alecsandru Grigoriupxdotpt.com

Hierarchies
Alecsandru Grigoriupxdotpt.com

Networks
Alecsandru Grigoriupxdotpt.com

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

Alecsandru Grigoriupxdotpt.com

The same Mary, bu...
Alecsandru Grigoriupxdotpt.com

Imaginary Factory
Alecsandru Grigoriupxdotpt.com

Chen Zhi Liang’s Resume

http://www.behance.net/gallery/Infographics-Resume/6745371
Alecsandru Grigoriupxdotpt.com

Study: fonts and colors
Alecsandru Grigoriupxdotpt.com

App Store Wars
Alecsandru Grigoriupxdotpt.com

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

Alecsandru Grigoriupxdotpt.com

Key principles
the simplest way:
Hollywood 3-act

Alecsandru Grigoriupxdotpt.com

Storytelling
Premise, Backstory, Synopsis, Theme,
Setting, Plot, Realism, Cinematics,
Player control, Shifting focus,
Foreshadowing eve...
Hero, Shadow, Mentor, Allies,
Guardians, Trickster, Herald
Protagonist, Antagonist, Shape-shifter
Intrapersonal, Interpers...
I learned a thing or two

Alecsandru Grigoriupxdotpt.com

From my experience
Alecsandru Grigoriupxdotpt.com

FX User Profile and Modus Operandi
Alecsandru Grigoriupxdotpt.com
Alecsandru Grigoriupxdotpt.com
Alecsandru Grigoriupxdotpt.com

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

Alecsandru...
(what I used so far)

Competitive analysis + matrix
Business requirements + use cases
Acceptance criteria
Sitemap
Mobile c...
Criteria: Functionality, Content, Usability,
Branding, Values, Other
You, your direct competitors and
Leaders (best of the...
Alecsandru Grigoriupxdotpt.com

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
B...
I WANT TO BUY MY PRODUCTS
WITHOUT REGISTERING BECAUSE
I AM A ONE-TIME SHOPPER

How? Use a radio button option at checkout
...
horizontal, vertical, list-view
static, dynamic, future, cluster elements
visually or made out of cells

Alecsandru Grigor...
Alecsandru Grigoriupxdotpt.com

Sitemap
strip your use cases to the bare minimum
Lookup/Find (urgent info, local): I need an answer to something
now—frequently re...
represent (pen & paper) – in a visual manner –
the following set of data
•
•
•
•
•
•
•
•
•
•

7,188,671,803 Current World ...
S. Negru, Resources for data visualization &
interactive exploration: http://tinyurl.com/kr8oxg5
B. Fry, Visualizing Data,...
They stay the same!
Think first
before opening your IDE or Photoshop

Alecsandru Grigoriupxdotpt.com

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

www.slideshare.net/GrapefruitRo/murder-on-the-ia...
Alecsandru Grigoriupxdotpt.com

episodul viitor: (re)găsirea resurselor Web
Upcoming SlideShare
Loading in...5
×

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

244

Published on

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

Published in: Design, Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
244
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Alecsandru Grigoriupxdotpt.com Data visualization, infographics and information architecture
  2. 2. Me Alecsandru Grigoriupxdotpt.com “It’s all about making the data… pretty, readable and usable.”
  3. 3. Alecsandru Grigoriupxdotpt.com Data Visualization
  4. 4. first, let us see how others do it Alecsandru Grigoriupxdotpt.com Examples
  5. 5. Alecsandru Grigoriupxdotpt.com Macrometeorites
  6. 6. Alecsandru Grigoriupxdotpt.com WeFeelFine
  7. 7. Alecsandru Grigoriupxdotpt.com GEOCODEARTH (ex Twitearth)
  8. 8. Alecsandru Grigoriupxdotpt.com The Museum of Mario (IGN)
  9. 9. Alecsandru Grigoriupxdotpt.com Worldometers
  10. 10. it’s like baking a very detailed wedding cake Alecsandru Grigoriupxdotpt.com How do we do it?
  11. 11. we acquire, parse, filter, mine, represent, refine, interact Ben Fry, Visualizing Data, O’Reilly (2008) Alecsandru Grigoriupxdotpt.com So?
  12. 12. obtain and store the data Alecsandru Grigoriupxdotpt.com Acquire
  13. 13. provide structure, meaning and order Alecsandru Grigoriupxdotpt.com Parse
  14. 14. do we need all the data? remove the waste Alecsandru Grigoriupxdotpt.com Filter
  15. 15. do some mathematical/statistical “voodoo” and get results/patterns Alecsandru Grigoriupxdotpt.com Mine
  16. 16. make it visually stunning or at least try Alecsandru Grigoriupxdotpt.com Represent
  17. 17. have an eye for the details and tune your visual Alecsandru Grigoriupxdotpt.com Refine
  18. 18. add the ability to navigate or manipulate your data to browse your results Alecsandru Grigoriupxdotpt.com Interact
  19. 19. it’s not rocket science to generate relationships from your data and draw some lines, circles …or ponies Alecsandru Grigoriupxdotpt.com But I’m not a designer
  20. 20. I’m here Alecsandru Grigoriupxdotpt.com Have no fear
  21. 21. Alecsandru Grigoriupxdotpt.com Mapping
  22. 22. Alecsandru Grigoriupxdotpt.com Time series
  23. 23. Alecsandru Grigoriupxdotpt.com Connections
  24. 24. Alecsandru Grigoriupxdotpt.com Scatterplot maps
  25. 25. Alecsandru Grigoriupxdotpt.com Hierarchies
  26. 26. Alecsandru Grigoriupxdotpt.com Networks
  27. 27. Alecsandru Grigoriupxdotpt.com Infographics
  28. 28. infographics are meant to tell a story (on screen, on paper, on video) Alecsandru Grigoriupxdotpt.com The same Mary, but on a different ferry
  29. 29. Alecsandru Grigoriupxdotpt.com Imaginary Factory
  30. 30. Alecsandru Grigoriupxdotpt.com Chen Zhi Liang’s Resume http://www.behance.net/gallery/Infographics-Resume/6745371
  31. 31. Alecsandru Grigoriupxdotpt.com Study: fonts and colors
  32. 32. Alecsandru Grigoriupxdotpt.com App Store Wars
  33. 33. Alecsandru Grigoriupxdotpt.com The Apple Tree
  34. 34. create a story, keep it simple, don’t overdue it and proofread it Alecsandru Grigoriupxdotpt.com Key principles
  35. 35. the simplest way: Hollywood 3-act Alecsandru Grigoriupxdotpt.com Storytelling
  36. 36. Premise, Backstory, Synopsis, Theme, Setting, Plot, Realism, Cinematics, Player control, Shifting focus, Foreshadowing events, Suspension of disbelief, Balancing conflict Alecsandru Grigoriupxdotpt.com Storytelling
  37. 37. Hero, Shadow, Mentor, Allies, Guardians, Trickster, Herald Protagonist, Antagonist, Shape-shifter Intrapersonal, Interpersonal, Team, Community, Humanity Alecsandru Grigoriupxdotpt.com Characters
  38. 38. I learned a thing or two Alecsandru Grigoriupxdotpt.com From my experience
  39. 39. Alecsandru Grigoriupxdotpt.com FX User Profile and Modus Operandi
  40. 40. Alecsandru Grigoriupxdotpt.com
  41. 41. Alecsandru Grigoriupxdotpt.com
  42. 42. Alecsandru Grigoriupxdotpt.com Information Architecture
  43. 43. the art and science of developing structures of organization to present data and information FINE Design Group Alecsandru Grigoriupxdotpt.com What is IA?
  44. 44. (what I used so far) Competitive analysis + matrix Business requirements + use cases Acceptance criteria Sitemap Mobile context assessment (Yes, mobile!) Alecsandru Grigoriupxdotpt.com Tools of the trade
  45. 45. Criteria: Functionality, Content, Usability, Branding, Values, Other You, your direct competitors and Leaders (best of the pack) 0, 1, 2 Alecsandru Grigoriupxdotpt.com Competitive analysis matrix
  46. 46. Alecsandru Grigoriupxdotpt.com Competitive analysis matrix
  47. 47. 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 Alecsandru Grigoriupxdotpt.com Business requirements and use cases
  48. 48. 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 Alecsandru Grigoriupxdotpt.com Acceptance criteria
  49. 49. horizontal, vertical, list-view static, dynamic, future, cluster elements visually or made out of cells Alecsandru Grigoriupxdotpt.com Sitemap
  50. 50. Alecsandru Grigoriupxdotpt.com Sitemap
  51. 51. 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 Alecsandru Grigoriupxdotpt.com Mobile context assessment
  52. 52. 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 Alecsandru Grigoriupxdotpt.com exercise (bonus points)
  53. 53. 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 Alecsandru Grigoriupxdotpt.com Resources
  54. 54. They stay the same! Think first before opening your IDE or Photoshop Alecsandru Grigoriupxdotpt.com Conclusions
  55. 55. the bilete.cfrcalatori.ro uninvited redesign by Grapefruit for WIAD 2013 www.slideshare.net/GrapefruitRo/murder-on-the-ia-express Alecsandru Grigoriupxdotpt.com Do we have time for one more case study?
  56. 56. Alecsandru Grigoriupxdotpt.com episodul viitor: (re)găsirea resurselor Web
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×