Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
0 likes813 views
This document discusses data visualization, information architecture, and related topics. It provides examples of visualization projects and outlines the key steps in working with data - acquiring, parsing, filtering, mining, representing, refining, and interacting with data. It also discusses principles of information architecture like creating sitemaps, conducting competitive analysis, and assessing projects for mobile contexts. The document emphasizes thinking through a problem before implementing technical solutions and provides resources for further learning.
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
- 1. Alecsandru Grigoriupxdotpt.com Data visualization, infographics and information architecture
- 2. Me Alecsandru Grigoriupxdotpt.com “It’s all about making the data… pretty, readable and usable.”
- 4. first, let us see how others do it Alecsandru Grigoriupxdotpt.com Examples
- 7. Alecsandru Grigoriupxdotpt.com GEOCODEARTH (ex Twitearth)
- 8. Alecsandru Grigoriupxdotpt.com The Museum of Mario (IGN)
- 10. it’s like baking a very detailed wedding cake Alecsandru Grigoriupxdotpt.com How do we do it?
- 11. we acquire, parse, filter, mine, represent, refine, interact Ben Fry, Visualizing Data, O’Reilly (2008) Alecsandru Grigoriupxdotpt.com So?
- 12. obtain and store the data Alecsandru Grigoriupxdotpt.com Acquire
- 13. provide structure, meaning and order Alecsandru Grigoriupxdotpt.com Parse
- 14. do we need all the data? remove the waste Alecsandru Grigoriupxdotpt.com Filter
- 15. do some mathematical/statistical “voodoo” and get results/patterns Alecsandru Grigoriupxdotpt.com Mine
- 16. make it visually stunning or at least try Alecsandru Grigoriupxdotpt.com Represent
- 17. have an eye for the details and tune your visual Alecsandru Grigoriupxdotpt.com Refine
- 18. add the ability to navigate or manipulate your data to browse your results Alecsandru Grigoriupxdotpt.com Interact
- 19. it’s not rocket science to generate relationships from your data and draw some lines, circles …or ponies Alecsandru Grigoriupxdotpt.com But I’m not a designer
- 20. I’m here Alecsandru Grigoriupxdotpt.com Have no fear
- 28. infographics are meant to tell a story (on screen, on paper, on video) Alecsandru Grigoriupxdotpt.com The same Mary, but on a different ferry
- 30. Alecsandru Grigoriupxdotpt.com Chen Zhi Liang’s Resume http://www.behance.net/gallery/Infographics-Resume/6745371
- 31. Alecsandru Grigoriupxdotpt.com Study: fonts and colors
- 34. create a story, keep it simple, don’t overdue it and proofread it Alecsandru Grigoriupxdotpt.com Key principles
- 35. the simplest way: Hollywood 3-act Alecsandru Grigoriupxdotpt.com Storytelling
- 36. Premise, Backstory, Synopsis, Theme, Setting, Plot, Realism, Cinematics, Player control, Shifting focus, Foreshadowing events, Suspension of disbelief, Balancing conflict Alecsandru Grigoriupxdotpt.com Storytelling
- 37. Hero, Shadow, Mentor, Allies, Guardians, Trickster, Herald Protagonist, Antagonist, Shape-shifter Intrapersonal, Interpersonal, Team, Community, Humanity Alecsandru Grigoriupxdotpt.com Characters
- 38. I learned a thing or two Alecsandru Grigoriupxdotpt.com From my experience
- 39. Alecsandru Grigoriupxdotpt.com FX User Profile and Modus Operandi
- 43. the art and science of developing structures of organization to present data and information FINE Design Group Alecsandru Grigoriupxdotpt.com What is IA?
- 44. (what I used so far) Competitive analysis + matrix Business requirements + use cases Acceptance criteria Sitemap Mobile context assessment (Yes, mobile!) Alecsandru Grigoriupxdotpt.com Tools of the trade
- 45. Criteria: Functionality, Content, Usability, Branding, Values, Other You, your direct competitors and Leaders (best of the pack) 0, 1, 2 Alecsandru Grigoriupxdotpt.com Competitive analysis matrix
- 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 Grigoriupxdotpt.com Business requirements and use cases
- 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 Grigoriupxdotpt.com Acceptance criteria
- 49. horizontal, vertical, list-view static, dynamic, future, cluster elements visually or made out of cells Alecsandru Grigoriupxdotpt.com Sitemap
- 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 Grigoriupxdotpt.com Mobile context assessment
- 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 Grigoriupxdotpt.com exercise (bonus points)
- 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 Grigoriupxdotpt.com Resources
- 54. They stay the same! Think first before opening your IDE or Photoshop Alecsandru Grigoriupxdotpt.com Conclusions
- 55. the bilete.cfrcalatori.ro uninvited redesign by Grapefruit for WIAD 2013 www.slideshare.net/GrapefruitRo/murder-on-the-ia-express Alecsandru Grigoriupxdotpt.com Do we have time for one more case study?
- 56. Alecsandru Grigoriupxdotpt.com episodul viitor: (re)găsirea resurselor Web