CMSC 173: Human Computer Interaction Design

• CMSC 173 is a course on Human Computer Interaction
• Design foundation is the focus of the lecture
• Mylah Rystie U. Anacleto, MSc is the assistant professor at the Institute of Computer Science, College of Arts and Sciences

Human Computer Interaction (HCI)

• HCI is a field of study and discipline concerned with the design, implementation, and evaluation of interactive computer systems for human use
• HCI also studies the major phenomena surrounding human use of computer systems.
• An informal definition of HCI is making things useful and usable
• One of the HCI mantras is: Right information, Right format, Right place, at the right time

Design Thinking

• Design thinking includes these steps:
  • Empathize
  • Define
  • Ideate
  • Prototype
  • Test

Key Areas of Interaction Design

• Includes the following:
  • Technology and Devices
  • Interaction and Service Design
  • Physical and Environment
  • People and Embodied Practices
  • Social and Policy

Seatwork Details:

• Arranged by lab section for seating
• Students should sit beside their preferred partner or group, with a maximum of 3 per group
• Coverage includes DOET chapter 1
• A key question from DOET Chapter 1:
  • Given the interaction of a chair and a 260+ lbs person, is there affordance? What can be done to avoid occurrence of error in design?
  • Answer: there is no affordance
  • A chair in a lecture hall is not designed to hold >260lb persons.
  • Affordance involves both the chair and the person/user & the "relationship" between them.
  • To avoid error in design, apply the signifier principle. For example, post a sign that says max load limit is 140 lbs
• There are 6 fundamental principles of interaction
• Interaction design is about how the machine reacts and responds to users
• Great interaction creates great experiences

Fundamental principles of interaction:

• Signifier: Communicates where the action should take place
• Mapping
• Feedback
• Discoverability
• Constraints
• Conceptual Models
• D.Norman states: We design for discoverability and understanding

Psychopathology

• Psychopathology is the study of mental illness or mental distress.
• It is the manifestation of behaviors and experiences that may be indicative of mental illness or psychological impairment
• "Psychopathology of everyday things"- everyday designs have pathologies

The Design of Everyday Things

• Written by Donald Norman, a cognitive scientist, and usability engineer.
• In the book, Norman discusses what comprises bad and good design in everyday objects.
• Written out of frustration from issues related to design when travelling to the UK like faucets, light switches, and even doors
• You characterize an object by its actions & state
• You perform actions on an object and to know its state, you need clues that can relate to

Frustrations of Everyday Things

• Visibility problems occur
• No visual operation cues given
• An example is "Norman doors"
• Too many visual cues (clutter and confusion)

Norman Quote

• “It is frequently a lack of visibility that makes so many computer-controlled devices so difficult to operate. And it is an excess of visibility that makes many types of modern gadget ridden equipment so intimidating.”

Major areas of design

• Industrial design is the professional service of creating and developing concepts and specifications that optimize the function, value, and appearance of products and systems for the mutual benefit of both users and manufacturer
• Interaction design focuses on how people interact with technology, with the goal to enhance peoples' understanding
• Interaction design draws on principles of psychology, design, art, and emotion to ensure a positive, enjoyable experience.
• Experience design: the practice of designing products, processes, services, events, and environments with a focus placed on the quality and enjoyment of the total experience

Human-Machine Interaction Issues

• Three Mile Island plant's control rooms were poorly designed, so error was inevitable
• Design was at fault, not the operators
• Most designing done by engineers who are experts in technology, but not understanding of people
• A lack of understanding of the design principles necessary for effective human-machine interaction impacts the quality of the design
• Self-imposed restrictions on the designer (cost)
• Limitations of technology

Human-Centered Design (HCD)

• An approach that puts human needs, capabilities, limitations, and behavior first, then designs to accommodate these
• It requires good communication, especially from machine to person, indicating possible actions, what's happening, and what's about to happen
• Designers focus on cases where things go wrong (concept of reasonably foreseeable use/misuse)
• Machine highlights the problems, then the person understands the issue, takes the proper actions, and the problem is solved
• The process includes: Observe, rapid prototype, test, iterate

Human-Centered Design (HCD) Principles

• Discoverability determines if it is possible to figure out what actions are possible, where, and how to perform them
• Understanding includes what does it all mean & how the product is supposed to be used
• Relevant components must be visible and must communicate the correct message.
• Provide signals that naturally indicate where to push doors and make supporting pillars visible
• If complex devices, discoverability and understanding require manuals or personal instruction.
• Products must satisfy engineering, manufacturing, and ergonomic requirements, but also the aesthetics of form and the quality of interaction
• Discoverability: When interacting with a product, one needs to figure out how to work it
• Discoverability relies on the appropriate application of five psychological concepts
• Good design is: "Discoverable" & "Understandable"
• To know how to design for understandability & discoverability we have a look at 5 psychological factors

Discoverability relies on these five psychological concepts:

- Affordances
- Signifiers
- Constraints
- Mappings
- Feedback

Affordances

• The relationship between the properties of an object and the capabilities of the interacting human with respect to the actions that can be performed on this object by this human
• Affordances are concerned with how "relationship" affects the object and the human
• You must consider the capabilities of the interacting human - Are they Strong? Clumsy? Careful?
• Load-bearing chair + strong human = a chair that can hold the human
• Affordances are clues to the operation of things.
• To be effective, affordances (and anti-affordances) have to be discoverable (perceivable)
• A door with plate mounted on it affords pushing
• Knobs is for turning, pushing, and pulling
• Slots are for inserting
• Glass allows to supports seeing through , but not the passage of air or objects

Anti-affordances

• Anti-affordances are concerned with actions that are not possible given existing capabilities
• Glass affords not allowing air flow

Signifiers

• Whereas affordances determine what actions are possible, signifiers communicate where the action should take place
• A signifier is any mark or sound, any perceivable indicator that communicates appropriate behavior to a person
• Examples:
  • "PUSH"
  • the presence of people to determine if you missed the train
  • A flag is an indicator of wind direction
• It's about communicating meaningful clues to your user group about the use of the design to highlight the design purpose

Affordances vs. Signifiers

• Signifiers expose affordances & save people from trial and error
• Three signifiers reveal the object's enhanced affordance
• A label that indicates the function/content
• Signifier On/Off indicates when something is functioning
• Discoverable affordance through swipe to scroll or delete information

Affordances and Signifiers: A Summary

• Affordances are the possible interactions between people and the environment. Some affordances are perceivable, others are not.
• Perceived affordances often act as signifiers, but they can be ambiguous and even misleading
• Signifiers signal actions, in particular what actions are possible and how they should be done.
• Signifiers must be perceivable, else they fail to function.
• Design, signifiers are more important, and they communicate how to use the design.
• A signifier can be words, a graphical illustration, or a device whose perceived affordances are unambiguous.

Conceptual models

• An explanation, usually simplified, of how something works.

Key Concepts

• Affordance refers to the relationship between the properties of an object and the capabilities of the agent (person) that determine just how the object could possibly be used
• Constraints limit choices & restrict undesired operations.
• Conceptual Models are mental idea of a device and its operation
• Discoverability determines if it is possible to figure out what actions are possible and where and how to perform them.
• Feedback sends back to the users information about what action they have actually done and what the result has been accomplished.
• Human-Centered Design puts human needs, capabilities, limitations and behavior first, then designs to accommodate these. It requires good communication especially from machine to person, indicating possible actions and what is about to happen.
• Mapping has a "relationship between elements of two sets of things" for example the relationship between "a control and its results." This is also "easiest to learn when there is an understandable mapping between the controls, the actions, and the intended result."
• Natural Signals "allow the design to be interpreted without any need to be conscious of them"
• Signifier is "any mark or sound, any perceivable indicator that communicates appropriate behavior to a person"
• System image results "from the physical structure that has been built (including documentation, instructions, and labels)."
• Understandability means knowing "what does it all mean? How is the product supposed to be used? What do all the different controls and settings mean?
• A User develops a "mental model" through "interaction with the system."