Your SlideShare is downloading. ×
Make it Real: Designing with Data
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Make it Real: Designing with Data

794
views

Published on

Ben Salinas' presentation from the UXPA Boston 2014 Conference

Ben Salinas' presentation from the UXPA Boston 2014 Conference

Published in: Design, Technology, Art & Photos

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
794
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Make It Real Designing With Data Ben Salinas ben@goinvo.com @bensalinas #MakeItReal Thursday, May 15, 14
  • 2. Integrating real data in your designs is critical to determine its success Today’s Topic: Thursday, May 15, 14
  • 3. Why Design With Real Data? How to Design With Real Data? Thursday, May 15, 14
  • 4. Does this design “work”? Most of our job as designers: Thursday, May 15, 14
  • 5. Buying a Broom Thursday, May 15, 14
  • 6. Thursday, May 15, 14
  • 7. Maybe you realize that visual design influences usability... Thursday, May 15, 14
  • 8. And maybe you want to make sure the content is representative Thursday, May 15, 14
  • 9. Does this design work? Thursday, May 15, 14
  • 10. But when making a decision, the details are what matters. Thursday, May 15, 14
  • 11. Data and Content are the User Experience Why Design With Real Data? Thursday, May 15, 14
  • 12. Why Design With Real Data? = Fake Data = Fake Design = Fake Feedback = Wrong Decisions Thursday, May 15, 14
  • 13. Real data will enter the equation eventually. Why Design With Real Data? Thursday, May 15, 14
  • 14. Our jobs as designers: Organize data into information to enable users to gain knowledge Thursday, May 15, 14
  • 15. Understand The Data In order to tell its story, we need to Thursday, May 15, 14
  • 16. Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname Real Data has a min and max. Design with outliers in mind Andrei Herasimchuk Dirk Knemeyer Kriengsak Niratpattanasai Tiff Biset Katrina Penruddocked-Longoria Juhan Sonin Thursday, May 15, 14
  • 17. Jennifer Patel Ben Salinas Dirk Knemeyer Eric Benoit Emily Twaddell Juhan Sonin Jonathan Follett Adam Pere Sarah Kaiser Sein Woo Xingjie “Roger” Zhu Michael Bester Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname Real Data has an average and a distribution 0% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 0 2 4 6 8 10 12 14 Distribution of US Surnames Letters in Surname Thursday, May 15, 14
  • 18. Source: http://www.digikey.com/en-US/articles/techzone/2011/jun/water-heaters-find-key-role Water Heater Usage by Hour and Month Real Data is cyclical Thursday, May 15, 14
  • 19. Real data has a story. Dow Jones Industrial Average 1974 - 2014 Thursday, May 15, 14
  • 20. Blood Pressure Glucose HDL LDL Triglycerides Sleep Happiness Weight Alcohol, Drugs Environment Medications Conditions Exercise Nutrition Waist Circumference Vaccinations 76 Real data has a story. Thursday, May 15, 14
  • 21. It is impossible to evaluate the success of a design if it does not use real data. Thursday, May 15, 14
  • 22. Does this technique work? Thursday, May 15, 14
  • 23. Pre-Diabetes Blood Pressure Glucose HDL LDL Triglycerides Sleep Happiness Weight Alcohol, Drugs Environment Medications Conditions Exercise Nutrition Waist Circumference Vaccinations Hypertension Blood Pressure Glucose HDL LDL Triglycerides Sleep Happiness Weight Alcohol, Drugs Environment Medications Conditions Exercise Nutrition Waist Circumference Vaccinations Not all fake data looks fake Thursday, May 15, 14
  • 24. But, we need more than just some real data. Everything has to be realistic. Thursday, May 15, 14
  • 25. Thursday, May 15, 14
  • 26. Thursday, May 15, 14
  • 27. Thursday, May 15, 14
  • 28. Thursday, May 15, 14
  • 29. Thursday, May 15, 14
  • 30. Thursday, May 15, 14
  • 31. Is this data representative? Thursday, May 15, 14
  • 32. Incorporating Data in Your Designs Thursday, May 15, 14
  • 33. Rapid “Prototyping” Tools are Flourishing Thursday, May 15, 14
  • 34. They allow designers to build interactive prototypes Thursday, May 15, 14
  • 35. They allow designers to build interactive prototypes Thursday, May 15, 14
  • 36. flashy demos of static designs They allow designers to build interactive prototypes Thursday, May 15, 14
  • 37. http://indigo.infragistics.com/prototype/rove#f=Search Which flight will you pick? Thursday, May 15, 14
  • 38. Indigo Studio is great! Check out this interactive prototype. It has graphs! http://indigo.infragistics.com/prototype/worldstats#f=iPad%2FHome& Thursday, May 15, 14
  • 39. Except... it isn’t really interactive. Or real. www.bit.ly/1ncfECO Thursday, May 15, 14
  • 40. All of these tools focus on moving images around. Transitions influence the understanding of a design... But the content matters more. Thursday, May 15, 14
  • 41. Task 1. Gathering/Crafting Data 2. Understanding the Data 3. Designing with the Data Time ~15% ~35% ~50% Thursday, May 15, 14
  • 42. A Simple Project Selection Screen Thursday, May 15, 14
  • 43. Crazy Foam 3 days ago6 Concepts Locking in 12 days Name Number of Concepts Deadline Last Updated Image Thursday, May 15, 14
  • 44. Num Project Concept @Image Updated Status IsNew 3 Concepts Animal Wine AnimalWine_01.png 3 days ago Locking in 15 days l 6 Concepts Crazy Foam CrazyFoam_01.png Aug 18, 2012 Locking in 12 days l 1 Concept Dentyne Fire Gum Dentyne_01.jpg Oct 12, 2012 Locking in 2 months l 1 Concept Five Gum Five_01.jpg Oct 12, 2012 Fielding l 4 Concepts Luchador Wine Luchador_01.png Oct 12, 2012 Results ready l 1 Concept Nestea Raspberry Nestea_01.png Oct 12, 2012 Results ready l 1 Concept R Wine RWine_01.png Oct 12, 2012 Locking in 1 month l 1 Concept Stride Stride_01.jpg Oct 12, 2012 Fielding l 7 Concepts Trident Splash Refresh TridentSplash_01.jpg Oct 12, 2012 Results ready l 1 Concept Trident Watermelon TridentWatermelon_01.jpg Oct 12, 2012 Fielding 3 Concepts Trident White TridentWhite_01.jpg Oct 12, 2012 Locking in 5 days 1 Concept Twist Gum Twist_01.jpg Oct 12, 2012 Locking in 2 days 1 Concept Wrigleys Wrigleys_01.jpg Oct 12, 2012 Locking in 1 month 4 Concepts Yellow Blue Wine YellowBlue_01.png Oct 12, 2012 Fielding Crafting Data Thursday, May 15, 14
  • 45. Crafting Data • Name + Image need to align • Deadline - a few will have upcoming deadlines. A few will have ended. There probably won’t be any with far away deadlines • Last Updated - Correlation between deadline and last updated • Number of Concepts - Most projects will have 3-5 concepts. Thursday, May 15, 14
  • 46. Same Data - Different Design Thursday, May 15, 14
  • 47. InDesign DataMerge 1. Export as .indd or .png to include in a comp 2. Export individual elements as .png to include as content in prototypes Use Layers to create hover states or alternate views of the same content (i.e. deleted view) Thursday, May 15, 14
  • 48. Let’s adapt a technique from Forecast.io to work across many cities Thursday, May 15, 14
  • 49. Gather weather forecasts for many cities Process and cleanse the data Make a visualization for each city Thursday, May 15, 14
  • 50. Chartwell Font Thursday, May 15, 14
  • 51. Does this technique work? What should we change? Thursday, May 15, 14
  • 52. ScreenScraper Chrome Extension: Grab structured data from a website Kimono: Turn a website into an API and do basic crawling InDesign/Illustrator DataMerge: Drive a design via tabular data SublimeText: Text Editor with “multi-edit capability” Chartwell Font: Create charts just by typing numbers Thursday, May 15, 14
  • 53. Why Design with Real Data? Data is the User Experience Fake data = fake design results in fake feedback Your design is going to live and breath real data... eventually Thursday, May 15, 14
  • 54. Make It Real Designing With Data Ben Salinas ben@goinvo.com @bensalinas #MakeItReal A Special Thanks to my colleagues at Thursday, May 15, 14