Interactive Visualization
- 1. INTERACTIVE VISUALIZATION Data Matters 2018 Lorin Bruckner August 2018
- 3. About Using Tableau • Tableau is not the most powerful interactive data visualization tool. • Other options are D3 and R Shiny. • Tableau has a drag-and-drop graphical interface so it can be learned quickly. • Tableau is one of the most widely-used business intelligence tools. • Tableau has a free version (Tableau Public) and free academic version (Tableau Desktop w/ academic license)
- 4. What is Interactive Visualization?
- 5. Visualization you can click on!
- 9. What is Interactive Visualization? • Users can create changes to the visualization • When a user enacts a cause, the visualization responds with an effect Conversation between visualization and audience, a.k.a. USERS
- 16. What’s so great about Interactive Visualization?
- 17. Why Interactive Visualization? Show more data Get more insights Tell more stories Interactive viz does MORE of everything.
- 18. Why Interactive Visualization? The “Bart and Lisa” Theory • Wants instant information • Needs to understand things quickly • Prefers the big picture • Longer attention span • Likes to spend time exploring information • Pores over details Interactive viz satisfies BOTH
- 19. Why Interactive Visualization? Can be made PERSONAL to your audience
- 20. How Much Interaction do we Need?
- 21. How Much Interaction do we Need? What percentage of New York Times website users interact with data visualizations?
- 22. How Much Interaction do we Need? What percentage of New York Times website users interact with data visualizations? 10-15%
- 23. How Much Interaction do we Need? Two main goals of Interactive Data Visualization Explore Explain
- 24. How Much Interaction do we Need? • Used for research phase • Do not support strong communication of a message • Often provide maximum amount of interaction Exploratory Visualizations
- 25. How Much Interaction do we Need? • Used for communication • Often tell a story, share a message or make an argument • Usually interaction has limitations Explanatory Visualizations
- 26. How Much Interaction do we Need? Many visualizations do a little of both.
- 27. How Can I Create GOOD Interactive Visualizations?
- 28. How Can I Create GOOD Interactive Visualizations? Prioritize User Experience
- 30. Who is Our Stakeholder?
- 31. Stakeholder • Provides small, 0% interest loans • Works with small businesses in developing countries • Funding is crowdsourced • Non-profit; takes donations separate from loan system Microloan Organization
- 32. Stakeholder • Wants a re-do of this web page • Give users an idea of what the economic climates are like in the borrowers’ home countries • Give users an idea of what the loans are being used for What are their goals? • Lenders (and those interested) • Donors (and those interested) • Employee Brand Promoters Who are the users?
- 33. Activity: Download Datasets and Merge Them in Tableau
- 36. User Experience • Useful - fulfills a need • Usable - easy to use • Desirable - attractive and evokes appreciation • Findable - needed information is easy to find • Accessible - accessible to people with disabilities • Credible - trusted and believed by users All aspects of the end-user’s experience with a product, system or service The ideal system is… Morville, Peter. “User Experience Honeycomb.” Semantic Studios, 2004, semanticstudios.com/user_experience_design/.
- 39. User Centered Design • ISO 9241-210:2010 • Workflow begins with research • Cycle is iterative based on results of evaluation • Similar in many ways to the design thinking process Process/Workflow for Creating Optimal User Experience Specify Context of Use Design Solutions Specify Requirements Evaluate Solutions Identify User Need
- 40. User Centered Design • ISO 9241-210:2010 • Workflow begins with research • Cycle is iterative based on results of evaluation • Similar in many ways to the design thinking process Process/Workflow for Creating Optimal User Experience Specify Context of Use Design Solutions Specify Requirements Evaluate Solutions Identify User Need
- 41. Activity: Specify Context of Use (Personas) • Fictional representations of major user groups • Attempt to understand the system from the user’s point of view • Popular exercise among both marketers and designers/developers since the 80s • The more research and data put into creating personas, the better they will be Personas “Personas.” My Internet Scout, myinternetscout.com/use- customer-persona-profiles-to-increase-revenue/.
- 42. Activity: Specify Context of Use (Personas) • No matter how much data we collect on users, personas will always be a reflection of our own biases. • The goal of creating personas is to practice putting yourself in someone else’s shoes. • You should love, care about and support the personas you create. Persona Tips Vecteezy.com
- 43. Activity: Specify Context of Use (Personas) Employee Brand Promoter Persona
- 44. Activity: Specify Context of Use (Personas) • Most active lenders live on either the east coast or west coast of the United States • The largest number of lenders are either students, teachers, or retirees • They use Kiva through website and mobile What we know about Lenders Use the hand-outs to complete personas for Lenders and Donors. If you aren’t sure what to write, look at the Employee Brand Promoter persona which I already filled out as an example. Instructions • Majority are married women over the age of 50 • Make either less than $75k a year or more than $200k a year • Many give on a monthly basis (automated) • Like Kiva for its transparency What we know about Donors
- 45. Activity: Specify Context of Use (Personas) Lender Persona Donor Persona
- 46. User Centered Design Specify Context of Use Design Solutions Specify Requirements Evaluate Solutions Identify User Need
- 47. Requirements FUNCTIONAL REQUIREMENTS NON-FUNCTIONAL REQUIREMENTS DEFINES What the system should do What the system should not do DEMONSTRATES Behaviors Qualities EXAMPLE System will display a bar chart with employment data for each city If there are no employment records for a city, it will be hidden from the bar chart
- 48. Activity: Identify Requirements Working off your personas, come up with at least three requirements for each. Requirements can be either functional or non-functional. Feel free to look at your dataset to understand the capabilities and constraints of your system. Instructions 1. Presentation of a story for each borrower that shows: • how they are using their loan • how long it took them to get the loan • how many lenders helped fund the loan 2. An infographic presentation that provides information on: • borrower genders • groups of borrowers vs. individuals • loan amounts • term lengths • number of lenders 3. Both presentations should be customizable to specific countries and industries. Employee Brand Promoter Requirements
- 49. Activity: Identify Requirements Lender Requirements
- 50. Activity: Identify Requirements 1. Interactive map showing economic conditions of countries Kiva supports. 2. Interactive map showing how many borrowers are being supported in each country. 3. Links to Kiva website for lending in different countries. 4. Information about methods and data sources. Lender Requirements
- 51. Activity: Identify Requirements 1. Interactive map showing economic conditions of countries Kiva supports. 2. Interactive map showing how many borrowers are being supported in each country. 3. Links to Kiva website for lending in different countries. 4. Information about methods and data sources. Lender Requirements Donor Requirements
- 52. Activity: Identify Requirements 1. Interactive map showing economic conditions of countries Kiva supports. 2. Interactive map showing how many borrowers are being supported in each country. 3. Links to Kiva website for lending in different countries. 4. Information about methods and data sources. Lender Requirements 1. Interactive map showing borrowers that Kiva works with across the globe. 2. Information on loan amounts and uses. 3. Link to share with others. Donor Requirements
- 53. User Centered Design Specify Context of Use Design Solutions Specify Requirements Evaluate Solutions Identify User Need
- 55. Interaction Design • Text • Visuals • Space • Time • Behavior Practice of designing interactions between the user and system, with a focus on…
- 56. Interaction Design • What actions can the user take? • What information do you provide to let a user know what will happen before they perform an action? • What feedback does a user get once an action is performed? • Is information chunked into five (plus or minus two) items at a time? • Is the user’s end simplified as much as possible? Questions for Interaction Design ?
- 57. Interaction Design Use Cases Cloudgirl.tech. “Example of a Use Case Diagram.” Bertelsmann’s Data Science Scholarship, 2017, cloudgirl.tech/use-case-diagram-example-project-update9/.
- 58. Interaction Design User Journey Map Rehash.org. “User Journey Map.” ServiceBridge, www.servicebridge.com/articles/customer-experience-in-service-businesses.
- 59. Activity: Develop Visualizations in Tableau Open Tableau and click on “Sheet 1” in the bottom left.
- 61. User Interface Combination of elements used to interact with a system. • The goal of UI design is to get out of the user’s way. • If the UI is good, the user will barely notice it. • Whenever you create an interactive visualization, you are creating a user interface.
- 63. UI Best Practices Every element should have a reason for being included.
- 64. UI Best Practices Every action should have feedback.
- 65. UI Best Practices Every action should have feedback.
- 66. UI Best Practices Controls should be close to the objects they control.
- 67. UI Best Practices Break complex actions down into smaller steps.
- 68. UI Best Practices Guide user’s attention using visual hierarchy and focal points.
- 69. UI Best Practices Consistency is key “Choreography.” Material Design, Google, material.io/design/motion/choreography.html.
- 70. Activity: Develop Dashboards in Tableau Open Tableau and click on the icon at the bottom.
- 72. Graphic Design • Graphic designers communicate with symbols, imagery and text • Need to be familiar with illustration, photography and typography • Critical understanding of basic design elements and principles Communication and Problem Solving Through Visual Elements Vecteezy.com
- 73. Graphic Design • Use titles, headlines and body text. • Separate different levels of text using size, weight, color, position and contrast. Typographic Hierarchy TITLE HEADLINE BODY
- 74. Graphic Design • Adhere to brand guidelines when available • Choose a palette of no more than 5 colors (black, white and grey count as different colors) • Different palettes evoke different emotions (Read Eiseman, Leatrice. Color: Messages and Meanings: A Pantone Color Resource. Gloucester, MA: Hand Books Press, 2006.) • Use online resources to browse color palettes. • Colour Lovers (colourlovers.com) • Adobe Kuler (color.adobe.com) Color
- 75. Graphic Design • Elements that are close to one another but not quite touching create tension • White space reduces clutter and draws focus to important elements Proximity This text is too close to the edge of this box. This text has room to breathe.
- 76. Graphic Design This text has room to breathe. INNER PADDING OUTER PADDING Tableau Terminology
- 77. Activity: Develop Dashboards in Tableau Open Tableau and go to your story tab.
- 78. User Centered Design Specify Context of Use Design Solutions Specify Requirements Evaluate Solutions Identify User Need
- 79. Evaluation • Usually involves asking a user to complete some tasks with the system and provide feedback • Many different techniques with different levels of interference from tester • Some testing techniques involve fancy equipment • Heuristic evaluation by Neilson- Norman Group is popular Usability Testing
- 80. Activity: Develop Dashboards in Tableau UX Heuristics Evaluation Worksheet