INF 454: Data Visualization and User Interface Design

Spring 2016 Syllabus

Day/Times: TBD (4 Units)
Location: TBD

Instructor: Dr. Luciano Nocera

Email: nocera@usc.edu
Phone: (213) 740-9819
Office: PHE 412

Course TA: TBD

Email: TBD
Office Hours: TBD

IT Support: TBD
Email: TBD
Office Hours: TBD

Instructor’s Office Hours: TBD; other hours by appointment only. Students are
advised to make appointments ahead of time in any event and be specific with the
subject matter to be discussed. Students should also be prepared for their
appointment by bringing all applicable materials and information.

Catalogue Description
One of the cornerstones of analytics is presenting the data to customers in a usable
fashion. When considering the design of systems that will perform data analytic
functions, both the interface for the user and the graphical depictions of data are of
utmost importance, as it allows for more efficient and effective processing, leading to
faster and more accurate results. To foster the best tools possible, it is important for
designers to understand the principles of user interfaces and data visualization as the tools
they build are used by many people - with technical and non-technical background - to
perform their work. In this course, students will apply the fundamentals and techniques in
a semester-long group project where they design, build and test a responsive application
that runs on mobile devices and desktops and that includes graphical depictions of data
for communication, analysis, and decision support.

Short description: Foundational course focusing on the design, creation,

understanding, application, and evaluation of data visualization and user interface
design for communicating, interacting and exploring data.
Prerequisites:
INF 250 Introduction to Data Informatics

Course Objective
Students will learn:
• The theory and practice of creating effective user interfaces for modern
devices ranging from mobile phones to large screen displays.
• To design guidelines for effective human computer interaction and the
cognitive science theory that support the guidelines.
• Usability testing techniques to inform the design process and implementation
techniques for building responsive user interfaces that adapt to different devices.
• Learn the theory and practice of creating good visualizations.
• In the theory part students will learn how our brains process visual data, and how the
way our brains work affects how we perceive visualizations and how we should design
visualizations to make them easy to understand.
• Students will get an understanding of which colors and shapes stand out clearly, how to
organize visualizations and when images convey ideas more clearly than words.
• Learn guidelines and methods to design effective visualizations and how to implement
interactive visualizations for the Web.
• To work in groups.

Class Communication
Blackboard at USC will be used for class communication.

Books and Readings

All books, papers or reports will be available to students online, at the USC
bookstore and/or via the USC libraries at http://www.usc.edu/libraries/.

Required Readings:

About Face 3: The Essentials of Interaction Design, by Alan Cooper, Robert Reimann
and David Cronin. ISBN: 978-0470084113.

Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability
Problems, by Steve Krug. ISBN: 978-0321657299.

The Functional Art: An Introduction to Information Graphics and Visualization, by

Alberto Cairo. ISBN: 978-0321834737.

Optional Readings:
The Design of Everyday Things, by Donald A. Norman. ISBN: 978-0465067107

Grading Schema
Quizzes: 20%
Homework Assignments: 30%
Class Project: 30%
Final: 20%
__________________________________________
Total 100%

Grades will range from A through F. The following is the breakdown for grading:

94 - 100 = A 74 - 76 = C
90 - 93 = A - 70 - 73 = C-
87 - 89 = B+ 67 - 69 = D+
84 - 86 = B 64 - 66 = D
80 - 83 = B- 60 - 63 = D-
77 - 79 = C+ Below 60 is an F

The graded coursework will consist of four major components:

Quizzes
There will be a quiz most weeks at the beginning of the lecture. The quiz will be 10
minutes and consist of two parts:
1. Questions testing understanding of the material from the previous week.
2. Questions about the readings for the class. The questions are
suitable for students who read the required readings.
The worst quiz score will not count towards the grade. There will be no make-ups or
rescheduling for any reason (this is why one quiz does not count).

Homeworks
Homeworks will require 1-4 hours to complete. Each student is expected to submit
the completed assignment each week. Homeworks are submitted individually and
students will receive individual scores. However students may work in groups to
complete the tasks. For the last four weeks of the course there will be no
homeworks as students are expected to work on the class projects exclusively.
Students are expected to attend class having completed the assignments for the
period, and be prepared to engage in informed discussions on those materials.

Final Exam
The final exam is cumulative, and will be done on the last day of the program.
Students should look at the schedule of finals before planning their vacations, as
there is no option for rescheduling.
Class Project
The class project gives students the opportunity to put into practice the theory and
techniques covered in class. The projects are about designing and implementing a
complex interactive infographic or data visualization application.
The project is a group project of two/three students. An important objective of the
class is to teach students to work in groups, so students cannot work on projects
individually.
In addition, groups will be organized into clusters of 3 or 4 groups. The purpose of
clusters is to provide a way for groups to critique each others’ designs.

Project deliverables will consist of the following artifacts:

1. Working demo: students should produce a working demonstration of the

system.
2. Presentation: students will present their projects to the class using the
PechaKucha presentation format (see http://www.pechakucha.org). PechaKucha is
a simple presentation format where you show 20 images, each for 20 seconds. One
talks along as the images advance automatically. One cannot use bullets in any of the
slides.

Course Topics and Schedule

User Interface Design Principles (Textbook: Cooper)
The Functional Art (Textbook: Cairo)

Wee Lecture Readings Homework Exam

k

1 Introduction to UI design and Cooper chapter 1 and 2 Assignment 1:

visualization; why it is Follow Cairo Part I,
important, what are it’s uses, Cairo chapter 1 and 2 Ch.1 example on UN
examples, course overview, Data: find fertility
overview of rates with different
homework/projects. trends for 3 countries,
use Google Sheets to
create 2 different
charts to show
different aspects of
this data.
2 Understanding goal-oriented Cooper chapters 3, 4 and 5 Assignment 2: Quiz 1
design; focusing on users not Conduct interviews
the software; user goals and Cairo chapters 3 for an example
mental models; application (e.g.,
implementation models; purchasing music),
design process. User define personas and
categories and their needs, goals.
beginners, intermediates,
experts; understanding Assignment 3:
users, qualitative research; Prototype and create
stakeholder, subject matter bubble cloud and
expert, customer and user slope graphs
interviews; conducting visualizations of UN
interviews, what to ask. fertility rates for 3
Personas, definition, steps to years and 9 countries
construct them; user goals, of your choice.
experience, end and life
goals. Survey of visualization
techniques.

3 Foundations of design, Cooper chapters 6 and 7 Assignment 4: Quiz 2

scenarios and personas; steps Critiquing
to define requirements using Cairo chapters 4 visualizations in news
personas; from requirements to media. Find 5
design, defining sketches; different infographics
validating designs with on the same subject
scenarios. and compare them
using the
Introduction to responsive visualization wheel.
design. What do they do well,
what do they do
Design space of visualizations; poorly?
the visualization wheel; design
trade-offs.
4 Principles of interaction Cooper chapters 10 and Assignment 5: Quiz 3
design, design values; 11. identify 3 examples of
interaction design patterns; excise in applications
platforms and postures; Cairo chapter 5 you use and propose
designing for the desktop; better alternatives.
designing for the Web,
informational vs Assignment 6:
transactional Web sites, Web Design two
applications. Orchestration infographics to show
and flow, transparent data of your choice.
interaction, modeless Use different trade-
interaction; examples of offs in the
good and bad designs; visualization wheel.
identifying GUI features that One must be a
slow down use (excise), in minimalist
navigation, error messages visualization.
and alerts.

Balancing function and

esthetics; minimalism;
making visualizations
memorable.

5 Designing good behavior; Cooper chapter 14 Assignment 7: Quiz 4

addressing excise: putting identify 3 examples of
idle cycles to work, Cairo chapter 6 and 9 excise and 3 examples
remembering user actions; of inappropriate
metaphors, idioms and visual design in
affordances; problems with applications you use
metaphors. Visual interface and propose
design; relationships, solutions.
hierarchy, alignment, grid,
consistency, visual noise and Assignment 8: Create
clutter, simplicity, text, color, a list of queries
standards. pertinent to a public
transportation
The eye and the visual brain; system. Answer these
visual queries; implications queries using a map
for design. for a region of the
world you are not
familiar with. Does
the map you chose
support answering
the questions well?
Explain your answers.
6 Undo, single and multiple; Cooper chapters 19, Assignment 9: Quiz 5
saving the user’s work; data (optional Cooper chapter identify 3 examples of
entry, data errors, missing 20) inappropriate direct
data, system responses. manipulation
Direct manipulation; http://tableau.com behavior in
pointing and clicking; applications and
affordances; selection, https://www.r-project.org propose solutions;
command ordering and identify 3 examples in
selection, multiple selection; http://d3js.org applications where
drag and drop, insertion direct manipulation
targets; modal tools; cursors, http://raphaeljs.com should have been
object manipulation used but wasn’t and
http://processingjs.org propose solutions.
Preattentive features and
their use in visualizations; Assignment 10:
Uses of transitions and Analyze three
animations in visualizations. visualizations using
Interactive graphics. the criteria discussed
in Cairo chapter 6.
Select the worst of
these visualizations
and suggest 2
redesigns to improve
them.

7 Controls, widgets and Cooper chapters 24 and Assignment 11: Quiz 6

dialogue boxes; buttons, 25 research and identify
selection, checkboxes, radio 5 examples of
buttons, list controls, combo Cairo chapter 8 inappropriate dialogs
boxes; data entry controls, and alerts in
dials, sliders, text boxes, applications and
validation; scrolling; menus, propose solutions.
tooltips. dialogs, Modal and
modeless; uses of dialog
boxes; complex dialogs;
errors, alerts and
confirmations; preventing
errors; feedback.

Review of popular
visualization tools (Tableau,
R, Google charts, Raphaël,
Processingjs, D3.js).
8 Perception, vision, Gestalt Cairo Profiles 1-3 Assignment 12: Find
principle; visual structure. 3 different types of
Reading; design to support visualizations on the
reading; color vision; ability to Web where colors
distinguish colors, guidelines have been used
for using color; peripheral inappropriately.
vision; making messages Explain why and
visible; redesign them
according to the color
Implications of color vision principles covered in
for visualizing data; the course.
trichromatic and opponent
opponent process theory;
color coding information.
Emphasis and highlighting;
color sequences, semantics of
color.

9 Memory, short-term and Cairo Profiles 4-7 Assignment 13: Get a Quiz 7
long-term; implications for bus route with stops,
interface design; attention, schedule and assume
external aids; goal directed current location of
behavior; recognition vs buses. Design a
recall, implications for visualization that
interface design. shows busses on,
behind and ahead of
How the brain recognizes schedule.
complex objects; sets of
primitives; scene
characterization; visual and
verbal thinking; visual and
verbal working memory;
implications for design;

10 Learning from experience; Cairo Profiles 8-10 Work on Project Quiz 8

actions vs problem solving;
implications for interface Krug chapters 1, 2, 3 and 4
design; facilitating interface
learning, consistency;
avoiding user fear;

Interface responsiveness;
limitations of the human
brain; implications for
interface design.

Depth perception and cue

theory: different ways to
perceive depth. 2.5D design;
linking perception and
action.
 11 Do-it-yourself testing; Krug chapters 5, 6, 7 and 8 Work on Project Quiz 9
observing users; organizing
your tests; what to test.
recruiting users, how many;
what to test; organizing your
tests, checklists; test setup;
conducting the tests.

Introduction to maps and

projections; using geospatial
data. Showing data in maps;
adding points and other
graphics to maps;

12 Observing tests; what to Krug chapters 9, 10 and Work on Project Quiz

record; debriefing users, 11. 10
what to ask; what to take
away from tests; making
decisions.

Finding the main problems;

making sure usability is
improving; remote testing.

13 Course review. Krug chapters 12, 13 and Work on Project

14.

14 Project Presentations. Project

Presentations

15 Study Week

16 Final Examination Per University Final

schedule Exam

Statement for Students with Disabilities

Any student requesting academic accommodations based on a disability is required
to register with Disability Services and Programs (DSP) each semester. A letter of
verification for approved accommodations can be obtained from DSP. Please be sure
the letter is delivered to me (or to TA) as early in the semester as possible. DSP is
located in STU 301 and is open 8:30 a.m.–5:00 p.m., Monday through Friday.
Website and contact information for DSP:
http://sait.usc.edu/academicsupport/centerprograms/dsp/home_index.html, (213)
740-0776 (Phone), (213) 740-6948 (TDD only), (213) 740-8216 (FAX)
ability@usc.edu.
Statement on Academic Integrity
USC seeks to maintain an optimal learning environment. General principles of
academic honesty include the concept of respect for the intellectual property of
others, the expectation that individual work will be submitted unless otherwise
allowed by an instructor, and the obligations both to protect one’s own academic
work from misuse by others as well as to avoid using another’s work as one’s own.
All students are expected to understand and abide by these principles. SCampus, the
Student Guidebook, (www.usc.edu/scampus or http://scampus.usc.edu) contains
the University Student Conduct Code (see University Governance, Section 11.00),
while the recommended sanctions are located in Appendix A.

Emergency Preparedness/Course Continuity in a Crisis

In case of a declared emergency if travel to campus is not feasible, USC executive
leadership will announce an electronic way for instructors to teach students in their
residence halls or homes using a combination of Blackboard, teleconferencing, and
other technologies.

Statement on Academic Conduct and Support Systems

Academic Conduct
Plagiarism – presenting someone else’s ideas as your own, either verbatim or recast
in your own words – is a serious academic offense with serious consequences.
Please familiarize yourself with the discussion of plagiarism in SCampus in Section
11, Behavior Violating University Standardshttps://scampus.usc.edu/1100-
behavior- violating-university-standards-and-appropriate-sanctions/. Other forms
of academic dishonesty are equally unacceptable. See additional information in
SCampus and university policies on scientific misconduct,
http://policy.usc.edu/scientific-misconduct/.
Discrimination, sexual assault, and harassment are not tolerated by the university.
You are encouraged to report any incidents to the Office of Equity and Diversity
http://equity.usc.edu/ or to the Department of Public Safety
http://capsnet.usc.edu/department/department-public-safety/online-
forms/contact-us. This is important for the safety whole USC community. Another
member of the university community – such as a friend, classmate, advisor, or
faculty member – can help initiate the report, or can initiate the report on behalf of
another person. The Center for Women and Men http://www.usc.edu/student-
affairs/cwm/ provides 24/7 confidential support, and the sexual assault resource
center webpage sarc@usc.edu describes reporting options and other resources.

Support Systems
A number of USC’s schools provide support for students who need help with
scholarly writing. Check with your advisor or program staff to find out more.
Students whose primary language is not English should check with the American
Language Institute http://dornsife.usc.edu/ali, which sponsors courses and
workshops specifically for international graduate students. The Office of Disability
Services and Programs
http://sait.usc.edu/academicsupport/centerprograms/dsp/home_index.html
provides certification for students with disabilities and helps arrange the relevant
accommodations. If an officially declared emergency makes travel to campus
infeasible, USC Emergency Information http://emergency.usc.edu/will provide
safety and other updates, including ways in which instruction will be continued by
means of blackboard, teleconferencing, and other technology.

Statement on Diversity
The diversity of the participants in this course is a valuable source of ideas, problem
solving strategies, and engineering creativity. I encourage and support the efforts of
all of our students to contribute freely and enthusiastically. We are members of an
academic community where it is our shared responsibility to cultivate a climate
where all students and individuals are valued and where both they and their ideas
are treated with respect, regardless of their differences, visible or invisible.