Bill Manaris : Fall 2017 / CSCI 380

CSCI 380 – User Interface Development


Section 1: MWF 11:30am-12:20pm / HWEA 300
Section 2: MWF 12:30pm-1:20pm / HWEA 300


Introduction to human-computer interaction and user interface development. Topics include human factors of interactive software, interactive styles, design principles and considerations, development methods and tools, interface quality, and evaluation methods. Stresses the importance of good interfaces and the relationship of user interface design to human-computer interaction.


  1. CSCI 221 with a grade of C- or better.
  2. MATH 207 (co-requisite or prerequisite).

Test Dates


* Homework1, Homework2, Homework3, Homework4, FinalProject.

Homework1, Homework2, Homework3, Homework4, Homework5, Homework6, FinalProject

Readings & References

  1. Silicon Valley HBO excerpt - the Pied Piper Platform Usability Test - "Totally Freaked Out" scene.
  2. Designers are not users by Jakob Nielsen, principal of Nielsen Norman Group.
  3. Notetracks - a collaborative platform to review, record and share your music ideas.
  4. User-Centered Design by Donald Norman, from his 2006 Benjamin Franklin Medal award.
  5. Goggle Design is a cooperative effort by designers, writers, and developers at Google. It presents Google’s design work, innovations, and guidelines across fields. Of interest to us are:
    • Material Design - collection of design resources.
    • Design Is Never Done - Design is the art of continuous problem solving - an active cycle of investigating and validating needs, crafting and developing ideas, and creating solutions.
    • Color Guidelines - color guidelines inspired by bold hues with muted environments, deep shadows, and bright highlights. (An example - other possibilities exist, of course.)
  6. The evolution of the desk - a thought-provoking, historically-accurate (almost) progression.
  7. Jacob Nielsen's usability pointers
  8. Usability breakdown - some notable examples.
    • "Nest Thermostat Glitch Leaves Users in the Cold", NY Times article (Jan. 2016) - an example of UI adaptive model that is problematic.
    • USS McCain collision ultimately caused by UI confusion (Nov. 2, 2017) The accident was in part caused by a user error made through the bridge's central navigation control UI... which lead to a cascading effect. "At this point, everyone on the bridge thought there had been a loss of steering. In the commotion that ensued, the commanding officer and bridge crew lost track of what was going on around them."
  9. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics"). See How to Conduct a Heuristic Evaluation,'s Heuristic Evaluations and Expert Reviews, and Nielsen Norman Group's Heuristic Evaluation.
  10. Norman's Design Analysis Concepts (NDACs) - some examples:
  11. NIME 2016 keynote lecture by Garth Paine - over the last two decades, the NIME community has seen an explosion of innovative and inspired ideas around the development of new musical interfaces. This lecture provides an overview of the field and important issues that emerge again and again, which may inform UI development in general.
  12. User personas
  13. User scenarios
    • User scenarios are the stories that your personas act out. Basically, user scenarios are thought exercises (though represented visually) in which you predict how certain types of users — represented by your personas — will interact with your UI in a given situation in order to complete a given goal.
    • Scenarios (from
  14. Use Cases
    • Use cases are written descriptions of how users will perform tasks on your system. Each use case outlines, from a user’s point of view, a system’s behavior as it responds to a request. Each use case is represented as a sequence of simple steps, beginning with a user's goal and ending when that goal is fulfilled.
  15. Conceptual Models
    • Conceptual models in a nutshell - explains conceptual models and describes why its best to develop the conceptual model of a system before its user interface.
  16. Ideation
    • Ideation doesn't waste time, it saves time - improve your UI design solutions by considering many ideas before settling on any one of them.
    • Ideation in practice - data from 257 UX professionals shows that quality UX ideas come from ideating early in the design cycle, drawing inspiration from user research, and working with a group. Many struggle with generating ideas because they lack time, managerial support, and a methodology for conducting effective ideation sessions.
  17. Paper prototypes
  18. UX/UI Prototyping Tools
    • The 7 Best Prototyping Tools for UI and UX Designers in 2016 - choosing the right prototyping tool will maximize efficiency while minimizing effort (choosing the wrong tool will waste your time, in the long term). Get to know a tool, before selecting it. Things to consider are: learning curve, type of UI (website, mobile app, desktop app, other, all), fidelity (low (sketch, wireframe), high (flow, interaction)), sharing (collaboration with teammates, users), skills required (easy, hard, programming required, visual design required), and cost (free, or how much).
    • How to choose the right UX prototyping tool - important thoughts on choosing the right tool for rapid prototyping of UIs.
  19. UI lifecycle
    • Mayhew's Usability Engineering Lifecycle.
    • Scrum is a development process which incorporates all other development processes.
      • It is agile and revolves around a theme of identify, implement, evaluate.
      • It cuts through complexity to focus on building software that meets needs incrementally and empirically.
      • Also see Scrum guide for term definitions (e.g., Sprint, Sprint Planning, Daily Scrum, Sprint Review, Product Backlog, etc.)
  20. Design Critique
    • How to conduct design critiques. Important points/quotes:
      • "Critical discussion around design is as important as the design process itself. If you work in a design team, feedback from your colleagues can keep you challenged, and can push you to improve."
      • "Criticism should be honest, and constructive. Nobody wins if the discussion is simply an exchange of warm fuzzies. The goal of every critique is to discover how to make a design better…"
      • "When you’re the recipient of a design critique, rule number one is listen. Your first impulse might be to defend each and every criticism, but that will kill conversation, and won’t give you the opportunity to really consider the suggestions offered."
      • "Bring a notebook to the critique, and keep detailed notes on the suggestions you receive. Not only does this help you remember the direction you should take when you sit back down to work, but it also shows your colleagues that their input is valuable."
      • "You will inevitably encounter points at which some feedback stings a bit, but that is okay. Fostering open communication in your team even when the feedback is hard to hear is, in the long term, a healthy thing."
      • "You really can’t call yourself a designer if you can’t give and take criticism ... The sting you might feel from criticism of your work is just a growing pain as your mind expands. Embrace it, because it’s going to lead you to new heights in your career."
  21. Card Sorting
    • Card sorting is a relatively low-tech technique in UX design for using a group of subject experts or users to generate a taxonomy or hiearchical strucure of concepts or items. It is very useful for designing information architecture, workflows, menu structure, or website navigation paths.
    • Card sorting: a definitive guide - Card sorting is a technique that many information architects (and related professionals.) use as an input to the structure of a site or product.
    • Card sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them. They may also help you label these groups. To conduct a card sort, you can use actual cards, pieces of paper (and possibly software).
  22. GOMS and Keyboard-Level Model
  23. Seven, Plus or Minus Two - An Important Rule About Human Mental Capacity
  24. Measuring Usabilty
    • Translating UX Goals into Analytics Measurement - When determining what to measure on an ongoing basis, it is imperative to fully understand the ultimate goal of the design to be sure you choose an appropriate metric. If you don’t clearly define the goal, it is impossible to determine the best method to track performance or user experience.
  25. - the U.S. Department of Health & Human Services website on all-things related to building useable products.
  26. Apple Watch "fails to excite" and is "a bit underwhelming" say designers - In April, Apple courted the design world by presenting the Apple Watch at a pavilion in Milan and holding a glamorous dinner for leading designers. So what do designers think of the product now – and why are so few of them wearing it?
  27. An introduction to pair programming. This 9-minute video describes what pair programming is, the do's and don'ts of effective pairing, and the pros and cons of pair programming.
  28. Lewis, C. and Rieman, J. (1994), Task-Centered User Interface Design - A Practical Introduction.
  29. Critchley, S., "Designing Musical Instruments for Flow", O'Reilly Digital Media, December 29, 2004. (If you ask musicians what they value most about making music, most of them will say — in some form or another — flow. Flow is that wonderful sense of being lost in your work, when "work" becomes joy. Time disappears, and so do distraction, anxiety, and just about everything else, yielding to a pure unity of creator and creation. So wouldn't it be strange if many of today's musical instruments were designed to prevent or destroy flow?)
  30. Intro to Python
  31. jythonMusic provides software for music-making and creative computing. It is a collection of Jython libraries for music, images, graphical user interfaces (GUIs), and connecting to external MIDI devices, smartphones, and tablets, among others.
  32. Color Scheme Designer and Adobe Color Ruler for user interfaces.
(Printable View of