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)
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
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
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
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?
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
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
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
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
54.
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/.
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.
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.
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
