Jean F. Hall using the Argonne Version of the Institute's Digital Automatic Computer. Credit: Energy.gov

HCID 520 User Interface Software + Technology

ScheduleReadingHomeworkGrading

Whether you're a software designer, engineer, or user experience researcher, understanding what user interfaces are, how they're built, and what kinds of interfaces can exist is a critical literacy for collaboration and creativity. After all, user interfaces are a medium, like any other: painters need to understand paint, writers need to understand words, and anyone involved in designing, building, or understanding interactions with software needs to understand user interfaces.

By end of the course you will:

  • Be able to describe all major user interface concepts and paradigms
  • Use a theory of user interfaces to describe, analyze, and critique user interface technology
  • Describe major classes of inventions in user interface software and technology
  • Identify open questions in user interface technology
  • Conducted detailed assessments of product opportunities for user interface innovations

Textbook

There aren't many textbooks that adequately cover the technical side of HCI, so I wrote one for this class called User Interface Software and Technology. It's meant to be concise, accessible, and alive, incorporating the latest research.

Workload

Your weeks look like this:

  • Monday: Come to class ready for discussion and activity
  • Tuesday: Do your Wednesday reading
  • Wednesday: Come to class ready for discussion and activity
  • Thursday-Sunday: Do your Monday reading, then do your homework

Stay on top of reading so you have time to focus on homework.

Office Hours

I'm available to talk about jobs, careers, graduate school, research, class, and anything else. My office hours are always posted on the top of my faculty website. To guarantee I'll be around, write me in advance to secure a time.

Schedule

Week 1 — Welcome
1/3Lecture
  • Welcome (60 min)
    • Who am I?
    • How I will teach you?
    • Why is this class required?
    • Learning outcomes and grading
    • About you
Week 2 — History and Theory
1/8Lecture
  • Required reading (10 min): The history of user interfaces
  • Selected reading discussion (15 min)
  • Activity (45 min)
    • Objective: analyze the implications of different visions
    • Rationale: UX requires strategy and strategy requires vision
    • Pair up (5 min)
    • Read Bush's vision for the Memex (5 min)
    • Create an alternative vision (20 min)
    • Share your vision with another pair (5 min)
    • If your vision had materialized, how would our interactions with computing be different? (10 min)
1/10Lecture
  • Required reading (10 min): A theory of user interfaces
  • Selected reading discussion (15 min)
  • Activity (45 min)
    • Objective: practice using the theory to reason about user interfaces.
    • Rationale: design critique requires analysis, which requires a theoretical lens
    • Form an ad hoc group of two (5 min)
    • Deconstruct a single function of a user interface you use regularly (20 min):
      • Reverse engineer a description of the major functions exposed by the user interface
      • Identify the gulfs of execution for each function and the affordances the interface uses to bridge them.
      • Identify the gulfs of evaluation for each function and the feedback the interfaces uses to bridge them.
    • Present the most surprising gulfs you found (20 min)
  • Homework 1 overview (10 min)
  • Week 3 — User Interfaces as Mediation
    1/15Lecture
    • NO CLASS, MLK Day
    1/17Lecture
    • Homework 1 due
    • Required reading (10 min): How user interfaces mediate
    • Selected reading discussion (15 min)
    • Activity (45 min)
      • Objective: reverse engineer mediation models
      • Rationale: design critique requires analysis, which requires a theoretical lens
      • Form ad hoc group of two (5 min)
      • Reverse engineer a description of the the metadata language or social cues exposed by the user interface (20 min)
      • Present your deconstructions (20 min)
    • Homework 2 overview (10 min)
    Week 4 — Interface Paradigms
    1/22Lecture
    • Required reading (10 min): Declarative interfaces
    • Selected reading discussion (20 min)
    • Activity (40 min)
      • Objective: Critique a programming interface
      • Rationale: Programming interfaces have tradeoffs; articulating them is key to deciding whether to allow something to be programmable.
      • Form ad hoc groups of two.
      • Make an account on If This Then That, a programming environment for writing service integration automation.
      • Create an event that seems useful to at least one member of your group, and while you create the script, critique the following:
        • What gulfs of execution do you see?
        • What gulfs of evaluation do you see?
      • Present the gulfs you discovered.
    • Mid-quarter course assessment (20 min)
    1/24Lecture
    • Homework 2 due
    • Required reading (10 min): Interactive interfaces
    • Selected reading discussion (15 min)
    • Activity (45 min)
      • Objective: Critique a game interface
      • Rationale: While most interactive interfaces leverage design conventions from the original Xerox Star, video games are decidedly unconventional in their interaction designs.
      • Form ad hoc groups of two.
      • Find a web-based game
      • Learn to play it, finding non-WIMP user interface elements.
      • For each non-WIMP interface element:
        • What gulfs of execution do you see?
        • What gulfs of evaluation do you see?
        • Could a WIMP interface element have been used instead?
      • Present the gulfs you discovered.
    • Homework 3 overview (10 min)
    Week 5 — Interface Abstractions
    1/29Lecture
    • Required reading (10 min): User interface software architecture
    • Selected reading discussion (15 min)
    • Activity (45 min)
      • Objective: Identify how MVC is realized in code
      • Rationale: Identifying the links between specific parts of a program and it's MVC elements will help make MVC more concrete.
      • Form groups of two. Find someone who either has much more or much less web development experience than you.
      • Visit this CodePen example.
      • For each line of HTML, CSS, and JavaScript in the example, add a comment that tags it as either implementing the model, view, or controller of the user interface.
      • We'll discuss each line of code as a class.
    1/31Lecture
    • Homework 3 due
    • Required reading (10 min): Accessibility
    • Selected reading discussion (15 min)
    • Activity (45 min)
      • Objective: Learn how to identify accessibility defects in a user interface
      • Rationale: Accessibility defects are invisible unless you know how to see them
      • Form groups of two.
      • Activate your operating system's screen reader (OS X, Windows, iOS, and Android)
      • Select an iOS, Android, OS X, or Windows application to test for accessibility defects.
      • Find at least 5 major defects, where a defect is a complete inability to provide input or interpret output for any disability.
      • As a class, each group will share the most severe defect they detected.
    • Homework 4 overview (10 min)
    Week 6 — Pointing and Text
    2/5Lecture
    2/7Lecture
    Week 7 — Advanced Input
    2/12Lecture
    • Required reading (10 min): Hands
    • Selected reading discussion (15 min)
    • Activity (45 min)
      • Objective: Understand the limitations of state of the art gestures.
      • Rationale: Gestures are increasingly ubiquitous ways of expressing commands.
      • Find a partner.
      • Visit the $1 recognizer demo page and try to demonstrate every gesture in the demo. Do you notice patterns in which gestures are harder to perform?
      • Define your own custom gesture in the demo, then have at least two others try to perform it. What kinds of mistakes do they make?
      • Review the iOS gesture set, watching each video. Which gestures are harder to perform than others and why?
      • Devise a new iOS gesture that you believe would be generally useful.
      • Review Apple's documentation on the iOS gesture recognition state machine. Draw the state machine for your custom iOS gesture.
    2/14Lecture
    • Homework 5 due
    • Required reading (10 min): Bodies
    • Selected reading discussion (15 min)
    • Activity (30 min)
      • Objective: Understand the limitations of speech interfaces.
      • Rationale: Speech interfaces are increasingly ubiquitous. Find the boundaries.
      • Find a partner.
      • Devise two tasks to complete on your phone using only its speech interfaces (and the normal touch interface when a function is not possible via speech).
      • Race each other to complete each task.
      • After your race, make a note of every breakdown that occurred, including errors, error recovery, disambiguation, and other gulfs of execution and evaluation.
      • Develop an opinion: can these challenges be overcome with future improvements or are they inherent to speech interfaces?
      • Discuss limitations as a class
    • Homework 6 overview (25 min)
    Week 8 — Dynamic Output
    2/19Lecture
    • NO CLASS, President's Day
    2/21Lecture
    • Andy at SIGCSE 2018, Eric teaching
    • Required reading (10 min): 3D visual output
    • Selected reading discussion (15 min)
    • Activity (45 min)
      • Objective: Homework 6 progress
      • Use this open time to refine your how your idea will work:
        • Seek expertise from your instructor and TA
        • Seek critique from your instructors and peers
        • Coordinate writing
        • Prototype ideas
    Week 9 — Static Output
    2/26Lecture
    • Required reading (10 min): 2D visual output
    • Selected reading discussion (15 min)
    • Activity (45 min)
      • Objective: Homework 6 progress
      • Use this open time to refine your how your idea will work:
        • Seek expertise from your instructor and TA
        • Seek critique from your instructors and peers
        • Coordinate writing
        • Prototype ideas
    2/28Lecture
    • Required reading (10 min): Physical output
    • Selected reading discussion (15 min)
    • Activity (45 min)
      • Objective: Homework 6 progress
      • Use this open time to refine your how your idea will work:
        • Seek expertise from your instructor and TA
        • Seek critique from your instructors and peers
        • Coordinate writing
        • Prototype ideas
    Week 10 — Miscellany
    3/5Lecture
    • Required reading (10 min): Help
    • Selected reading discussion (15 min)
    • Activity (45 min)
      • Objective: Homework 6 progress
      • Use this open time to refine your how your idea will work:
        • Seek expertise from your instructor and TA
        • Seek critique from your instructors and peers
        • Coordinate writing
        • Prototype ideas
    3/7Lecture
    • Required reading (10 min): Intellectual property
    • Selected reading discussion (15 min)
    • Activity (45 min)
      • Objective: Homework 6 progress
      • Use this open time to refine your how your idea will work:
        • Seek expertise from your instructor and TA
        • Seek critique from your instructors and peers
        • Coordinate writing
        • Prototype ideas
    • Course evaluation (10 min)
    Finals
    3/14

    Reading

    There are two types of readings in this class. The first are required readings from the book I wrote, User Interface Software and Technology. When you read this, you'll need to come to class ready to demonstrate your knowledge of everything in the chapter, including any video under 10 minutes (longer videos are there for deeper learning). We'll start class by discussing any points of confusion in the chapter. Then, I'll give a quiz with a single question and if you answer it correctly, you'll get full credit. After the quiz, we'll discuss the right answer. If you miss class, you can makeup the missed quiz credit by writing me an email with a critique of the chapter containing at least two ideas for improvements.

    The second type of reading is selected reading. You can choose any of the articles cited in the "Further reading" section of a chapter. Pick based on interest, then read the paper (or if it's a book, a chapter of the book), and distill the key insights of the paper into three sentences:

    1. Sentence 1: What the paper explained
    2. Sentence 2: A description of an idea the paper shared and how it changed your thinking.
    3. Sentence 3: What impact you believe this insight may have on user interfaces in the future.

    Each submission should include the cited paper and then three sentences like this:

    This paper described a new pointing device called a "mouse." I found the idea of mapping the motion of an object on two axes to a virtual coordinate system to be intriguingly general. I predict we'll see a diversity of mouse shapes to fit the diversity of hands and abilities.

    For selected readings, you'll get 0.5 points for each of the three sentences, and anywhere from 0 to 0.5 points based on the pithiness of your writing (meaning it should be concise and forcefully expressive). The example above is pithy enough for full credit.

    Homeworks

    Whereas the readings in the course will give you a strong conceptual foundation for user interfaces, the homeworks will help you practice two key skills in interaction design, UX research, and front-end engineering: analyzing and communicating design opportunities. You'll do this over the course of several homeworks:

    By the end of the course, you'll have deeply analyzed an user interface innovation for product viability.

    Grading

    There are 100 points you can earn in this class:

    • Required reading quizzes (16 points)
    • Selected reading summary (32 points)
    • Homework (52 points): due each Wednesday before class

    After rounding your points to the nearest whole number, I'll map your 100 points to a 4.0 scale using the table below.

    ≥954.0≥883.3≥812.6≥741.9≥671.2
    ≥943.9≥873.2≥802.5≥731.8≥661.1
    ≥933.8≥863.1≥792.4≥721.7≥651.0
    ≥923.7≥853.0≥782.3≥711.6≥640.9
    ≥913.6≥842.9≥772.2≥701.5≥630.8
    ≥903.5≥832.8≥762.1≥691.4≥620.7
    ≥893.4≥822.7≥752.0≥681.3≤610.0

    Late work receives no credit unless you can provide a note from a health care professional documenting the reason for your absence.

    If you're not happy with a reading or homework grade, you can read our feedback and resubmit it for a regrade at any time. We'll give you up to 50% of the credit you lost on your last submission. Our goal is for you to learn the material. This allows you to correct whatever misconception you had and have that improved knowledge reflected in your grade.