1 of 13

Human-Computer Interaction

saadh.info/hci

​

Week 7 (Tuesday): Designing Interfaces

​

1

2 of 13

Announcements

  • Assignment 1
    • All graded except those missing files

​

2

3 of 13

Attendance and Agenda

  1. Paper Prototyping
  2. Prototyping Demo

​

3

4 of 13

Test 1 Format (October 10)

  • Syllabus and Test Sections: Everything covered till today
    1. Perception and Cognition [10 Points]
    2. Qualitative Research Methods [10 Points]
    3. Thematic Analysis and Affinity Mapping [10 Points]
    4. Scenario-based Design and Prototyping [10 Points]
    5. Screen-based Design and Design Principles [10 Points]
  • Each section: 3 Multiple Choice (6 points), 1 Applied Question (4 Points]
  • Bonus [5 Points]:
    • Submitting a “help sheet” according to guidelines [2 Points]
    • Additional Question

​

​

4

5 of 13

Project Milestone 1 (October 11)

  1. User research procedure: You are required to conduct at least eight total interviews along with one other user research method (e.g., a survey or contextual inquiry).
  2. Data Analysis: Present at least five themes along with analysis based on your second user research method.
  3. Modeling Data: A user profile table and at least three personas.
  4. Task Scenarios: At least three of each type of scenarios: problem scenarios, user stories, activity scenarios, and interaction scenarios.
  5. Low-fidelity Prototyping: At least three designs and evaluations with 3-5 users. For this milestone, the users do not necessarily need to be your real users.

​

5

6 of 13

Assignment 2 (October 18)

  • One example of good design and one example of bad design, e.g., something on Tulane’s campus, dorms, or websites or any New Orleans City websites. Capture these examples with photos.
  • For each:
    • At least one captioned photo
    • Why did you choose this design?
    • Who uses this design, when they use it, and why they use it?
    • What makes it good or bad?

​

6

7 of 13

Scenarios-based Design

7

8 of 13

Screen-based User Interface Design

8

9 of 13

Screen-based User Interface Design

  • Explicit inputs: unicode text strings, e.g., keystrokes and accepts all kinds of symbols from all kinds of languages.
  • Implicit inputs: search history, search preferences, and even sensor input (such as your location)
  • Some of these implicit inputs also have default values.
  • State is data stored in memory that represents information about an application its current status.
  • User inputs respond to input by executing event handlers, which take the input and perform some operation on state, then provide some feedback to explain the result of the operation.
  • A mode is a state that causes a user interface, given the same input, to provide different output depending on the value of the state. Could be active (automatically switch) or passive (required user action).

9

10 of 13

Gulf of execution

  • The gulf of execution: between
    • what a person wants to do with an interface and
    • what inputs are actually possible to provide
  • The gulf of evaluation: between
    • output and feedback an interface provides and
    • a person’s ability to relate that output to their goal.
  • When you’re designing a user interface, you’re looking for a design that makes these gulfs as easy to bridge as possible.

​

10

11 of 13

Norman’s Design Principles

  • Affordances: Link between how things look and how they’re used
  • Signifiers: Cues indicate how to use objects.
  • Mapping: Control layout matches system functions.
  • Feedback: Timely, accurate, and proximal response to user actions.
  • Constraints: Restrict possible actions to prevent errors.
  • Visibility: Good signifiers, visible system system state, feedback…
  • Conceptual Models: Users' mental understanding of system.

​

“It is common to think of interaction between a person and technology as communicating with the technology... the real communication is between designer and person, where the technology is the medium.” - Norman

​

​

​

11

12 of 13

Screen-based User Interface Design: Prototyping

  • Form groups of 3-4.
  • Each student designs one interface, including all resulting user interfaces triggered by different user actions, e.g., button clicks, on the screen (15 minutes).
  • Develop a plan to structure the sequence of screens and simulate the dynamic aspects of the system (5 minutes).
  • Take turns being the "computer," "user," and "observer." [15 minutes]
    • Combination 1: Computer: A, Facilitator: B, Observer: C
    • Combination 2: Computer: B, Facilitator: C,: Student A
    • Combination 3: Computer: C, Facilitator: A, Observer: B

​

​

12

13 of 13

Attendance & Next Time

  • Prototyping

​

  • Time to work on projects

13