San Jose State University : Site Name

Navigation

Main Content

Working in Mars Mission Control, JPL

Ronald Mak

Department of Computer Science
Spring Semester 2015

Office hours: TuTh: 7:30-8:30 PM
Office location: MacQuarrie Hall, room 413
E-mail: ron.mak@sjsu.edu
Mission Control, Jet Propulsion Laboratory (JPL)
NASA Mars Exploration Rover Mission

CS 235 User Interface Design


Section 1: TuTh 1:30-2:45 PM, MH 422


Lectures


Date Content
Jan 22 Slides: Goals; design teams; postmortem report; grading; UI; first team task; Therac-25; UX; Apple iPhone; usability testing; data visualization
Jan 27 Slides: User-centered design; agile development; iterative design; application purpose; users; mental models; requirements: functional and nonfunctional; what requirements must have; strong statements; how to get requirements; use cases; functional specification
Jan 29 Slides: Team requirements gathering exercises; Assignment #1
Feb 3 Slides: Example use case alternate sequence; design patterns; organization design patterns; navigational models; navigational design patterns

Design video: The Expert
Feb 5 Slides: Page layout; how to show importance; how to show relationships; gestalt principles; page layout design patterns; application prototype; lists; list design patterns
Feb 10 Slides: Guest lectures by Bob Nicholson:
  • "User Interface Requirements in the Real World"
  • "Working with Graphic Designers"
Feb 12 Slides: Application prototype; action design patterns; undoable and not undoable actions; getting input from users; input controls; choice controls; controls for list item selection; controls for creating lists; controls for sorting lists; user input design patterns
Feb 17 Slides: Assignment #2; definitions of usability; don't make me think; scan vs. read; "satisfice"; follow conventions; visual hierarchies; format text for scanning; "scent of information"; confusing options; home page; web navigation; persistent navigation; navigation conventions; page names; you are here; website taglines

Usability testing video (at the bottom of the page)
Feb 19 Slides: Cognitive science; biased perceptions; bias by experience: priming, familiar patterns, context, goals; perception and UI design; long-term memory; recognition vs. recall; short-term memory; working memory; attention; working memory and UI design; long-term memory and UI design; attention and goals; recognition and UI design

Videos: Perception    Attention and change blindness   
Feb 24 No class due to job fair.
Feb 24 Slides: Usability testing: Innovative Designers, Team Four, Thundercats
Mar 3 Slides: Usability testing: Unknown, UXability, X Factor
Mar 5 Slides: Assignment #3; gestalt principles; contrast vs. brightness; color discrimination; color blindness; cones; rods; fovea; peripheral vision; noticing error messages; visual searches; action controls; affordance; feedback; Apple GarageBand example
Mar 10 Slides: Hand-eye coordination; Fitts's Law; target sizes; steering law; how your brain learns; practice: frequency, regularity, precision; "gulf of execution"; task analysis; conceptual model; consistency; vocabulary; lower the risk; perception of time; responsiveness; busy and progress indicators; delays; task closure; display important information first; animated tasks; work ahead; prioritize user actions; timely websites
Mar 12 Slides: Prototype presentations: Innovative Designers, Team Four, Thundercats
Mar 17 Slides: Prototype presentations: Unknown, UXability, X Factor
Apr 2 Slides: Midterm solution; Assignment #4; mobile-centric thinking; designing with small screens; persistent navigation: springboard, cards;, list menu, dashboard, gallery, tab menu, configurable tabs, skeuomorphism; transient navigation: side drawers, toggle menu, pie menu, page swiping, scrolling tabs, accordion
Apr 7 Slides: Computer History Museum unofficial field trip; forms; forms abandonment; sign in; registration; multi-step; checkout; calculator; search; long forms; anti-patterns: novel notions, skeuomorphic cuteness, nonstandard navigation, needless complexity, bad navigation controls, hidden controls, mental model mismatch, idiot boxes, chart junk, too many buttons, poor platform porting
Apr 9 Slides: Microinteractions; structure of microinteractions; feedback; feedback as personality; manual triggers; faux affordance; bring the data forward; discoverable and invisible manual triggers; manual trigger states; "feedforward"; system triggers; rules; rule constraints; rules in context; conservation of complexity; limited options and smart defaults; prevent user errors; spring-loaded and one-off modes; loops
Apr 14 Slides: Data visualization; data analysis tools; why analyze data; tables vs. graphs; history of data visualization; meaningful data; visual perception; abstract data; pre-attentive attributes; quantitative perceptions; successful data analyst
Apr 16 Slides: Overcoming memory limits; information visualization; analytical interactions; comparing; avoid 3-D graphs; relative heights in bar charts; sorting; adding variables; filtering; highlighting; aggregating; re-expressing; re-visualizing; zooming and panning; re-scaling; accessing details; annotating; bookmarking; Shneiderman's Mantra; tree maps
Apr 28 Slides: Final project; sorting, rearranging, and filtering data; design patterns for data visualization; overview plus detail; data tips; data spotlight; dynamic queries; data brushing; local zooming; sortable table; radial table; multi-Y graph; small multiples; treemap
Apr 30 Slides: Data spotlight examples; bar chart guidelines; reference lines; bar charts as small multiples; visual crosstab display; smooth and rough; box plots; line graphs; scatterplots; points + lines; over-plotting reductions; density encoding; types of analyses; time series analysis
May 5 Slides: Time series analysis: trend, variability, rate of change, co-variation, cycles, exception, bar charts; part-to-whole and ranking analysis; pie charts, bar charts, Pareto charts, ranking changes through time; deviation analysis: bar charts, line graphs; distribution analysis: bar charts, 5-value summation, spread, center, shape, stem and leaf plots, box and whisker plots; multiple distributions; distribution deviation graphs; linear correlation coefficient; correlation: logarithmic, exponential, polynomial; correlation does not imply causation; false correlations; multivariate analysis; multivariate displays: glyphs, whiskers and stars, heat maps, parallel plots
May 7 Slides: Well and poorly designed dashboards; what is a dashboard; visual display; information to achieve objectives; fits on a single screen; monitor information at a glance; how presents information; customized; what a dashboard is not; situational awareness; performance monitoring; decision making; dashboard solutions; dashboard design mistakes; data-ink ratio
May 12 Slides: Dashboard design practices: organize information, delineate groups, support meaningful comparisons, discourage meaningless comparisons, expose lower-level conditions; bullet graphs: space efficient, in a series, alternatives to bars; sparklines: enhanced, scaling, what to display, fill the plot area, useful quantitative range, consistent scale, subrange of values, consistent spread, logarithmic scale, magnitude of change, bandlines, outliers, degrees of change; how to display a data value; table vs. graph; table format; fancy gauges and meters


Goals


We will study the principles of designing, developing, and evaluating a compelling and effective user interface (UI) and experience (UX) for desktop, web, and mobile applications. Topics will include: The growing field of Big Data highlights the importance of data visualization, and we'll practice the design patterns to present complex and voluminous data in insightful information displays.

Students will work in small teams to work on UI/UX design projects. We will examine case studies, and there may be guest lectures by UX professionals. The final project will be a significant data visualization application.


Prerequisites


Experience developing desktop, web, or mobile applications, or instructor consent.


Required books


There are no required books for this class.


Recommended books for self-study


User Interface Design and Evaluation
Debbie Stone, Caroline Jarrett, Mark Woodroffe, Shailey Minocha
Morgan Kaufmann, 2005
ISBN: 978-0120884360
Mobile User Experience:
Patterns to Make Sense of it All

Adrian Mendoza
Morgan Kaufmann, 2013
ISBN: 978-0124095144
Mobile Design Pattern Gallery:
UI Patterns for Smartphone Apps (2nd edition)

Theresa Neil
O'Reilly Media, 2014
ISBN: 978-1449363635
Microinteractions:
Designing with Details

Dan Saffer
O'Reilly Media, 2013
ISBN: 978-1491945926
Designing Interface (2nd edition)
Jenifer Tidwell
O'Reilly Media, 2011
ISBN: 978-1449379704
Books by Steve Krug
New Riders
  • Don't Make Me Think, Revisited:
    A Common Sense Approach to Web Usability (3rd edition)
    , 2014
    ISBN: 978-0321965516
  • Rocket Surgery Made Easy
    The Do-It-Yourself Guide to Finding and Fixing Usability Problems
    , 2009
    ISBN: 978-0321657299
Books by Stephen Few
Analytics Press
  • Now You See It:
    Simple Visualization Techniques for Quantitative Analysis
    , 2009
    ISBN: 978-0970601988
  • Show Me the Numbers:
    Designing Tables and Graphs to Enlighten
    , 2012
    ISBN: 978-0970601971
  • Information Dashboard Design:
    Displaying Data for At-a-Glance Monitoring (2nd edition)
    , 2013
    ISBN: 978-1938377006
Books by Edward Tufte
Graphics Press
  • Visual Explanations:
    Images and Quantities, Evidence and Narrative
    , 1997
    ISBN: 978-0961392123
  • The Visual Display of Quantitative Information, 2001
    ISBN: 978-0961392147
  • Envisioning Information, 1990
    ISBN: 978-0961392116
  • Beautiful Evidence, 2006
    ISBN: 978-0961392178