This workshop was given as part of the Data Matters short course series at NC State in 2018.

1. INTERACTIVE
VISUALIZATION
Data Matters 2018
Lorin Bruckner August 2018

2. About Using Tableau

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!

8. Digitally Interactive
Visualization

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

10. Digital Interactions

11. Digital Interactions
Zoom

12. Digital Interactions
Highlight

13. Digital Interactions
Tooltips

14. Digital Interactions
Filters

15. Digital Interactions
Filters

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

34. bit.ly/datamatters18

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/.

37. Activity: Evaluate UX

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.

62. UI Best Practices

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