IT 107: Human Computer Interaction (HCI)

• IT 107 is about Human Computer Interface
• Prepared by Sir Jayvee Cruz

What is HCI?

• Human Computer Interaction is the study of how people design, implement, and use interactive computer systems
• HCI also covers how computers affect individuals, organizations, and society.

Three Parts of HCI

• Human, referring to the user
• Computer itself
• Interaction, referring to the ways they work together

Goals of HCI

• To allow users to carry out tasks safely
• To allow users to carry out tasks effectively
• To allow users to carry out tasks efficiently
• To allow users to carry out tasks enjoyably

Usability

• Usability is a crucial issue in HCI
• It is a combination of:
• Ease of Learning
• High speed of user task performance
• Low user error rate
• Subjective user satisfaction
• User retention over time

How to Improve Interfaces

• Educate Software Professionals
• Draw upon fast accumulating knowledge regarding H-C interface design
• Integrate UI design methods & techniques into standard software development methodologies

Brainstorming Activity

• Think of any software/application that requires human interaction
• Explain how the software/application works
• Consider the input/output devices needed in operating the software/application

Evolution of Human Computer Interaction

• 40s-ties: vision, Vannevar Bush
• 50s-ties: compilers, Grace Hopper
• 60s-ties: Sketchpad, Ivan Sutherland
• 70s-ties: Dynabook, Alan Klay
• 80s-ties: XEROX Star, Microcomputers
• 90s-ties: Multimedia
• 2000s-ties: Mobiles
• 2010-ties: ?

Vannevar Bush (1890-1974)

• Author of "As We May Think" essay

"As We May Think" Essay

• It proposed a future device where an individual stores all books, records, and communications, mechanized for speed and flexibility.
• It is considered an enlarged intimate supplement to memory.
• Published in The Atlantic Monthly, 1945.
• Introduced "Memex": analog hypertext which is a concept considered an early precursor to hypertext

ENIAC, 1946

• Considered "World's first Super Computer"
• It stands for Electronic Numerical Integrator and Computer
• The ENIAC team programmed the system at the University of Pennsylvania in Philadelphia.
• Nearly 50 women worked on ENIAC in 1944 alone
• Women participated in the all-important programming for the machine throughout its life.

Grace Hopper

• Known as the "Inventor of Compiler"
• The compiler improved usability
• A-0: Arithmetic language version 0; 1951-1952
• COBOL, 1959

Joseph C.R. Licklider

• Known for "First Interactive Screens"

1960s Ties (Joseph C.R. Licklider)

• Data was stored in paper tape or cards with holes punched in them
• Cards were sent to a computer centre for processing, and results were printed.
• The first screens and cathode ray tubes (CRT) were implemented

Ivan Sutherland

• Known for “Sketchpad”
• Sketchpad (Robot Draftsman) is a computer program written in 1963
• The program earned Ivan Sutherland the Turing Award in 1988 and the Kyoto Prize in 2012

Sketchpad

• Featured a complete graphical user interface
• It is considered the ancestor of modern computer-aided design (CAD) programs
• A major breakthrough in the development of computer graphics in general

Douglas Engelbart

• Known for "Computer mouse"

1960s Ties (Douglas Engelbart)

• Douglas Engelbart invented the mouse in 1968
• He demonstrated the interaction using the mouse at the Mother of All Demos

Evolution of Computer Mouse

• 1963: Douglas Engelbart invented the computer mouse with horizontal and vertical movements
• 1981: Invention of the optical mouse was created, using (LED) to track movements
• Laser Mouse: Development of laser technology
• The Lexip PU94 Mouse: Invention of a computer mouse with two integrated joysticks

Ergonomic Design

• Non-ergonomic mice cause bending of the wrist
• Ergonomic mice allow for a more natural wrist position

People at the center (1970s)

• Technology at the focus of design includes Batch interaction, command line interface
• Alan Kay:
• Dynabook: concept of laptop
• Object oriented programing, SmallTalk
• People at the Center of Design

Laptop Design

• The laptop's name indicates the ability to put the computer in their lap while they use it

GUI

• "Graphical User Interface"

1980s Ties (GUI)

• XEROX STAR (Pioneering Computer Work Station) in 1981 was developed by XEROX PARC (Palo Alto Research Center)
• This introduced the Office metaphor
• Windows, icons, folders
• Ethernet network
• File server
• Print server
• Email
• Microcomputers

Fundamental Principles of HCI

• Perception
• Behavior models
• Descriptive modeling
• Schneiderman's 8 rules

Perception

• This relates to how people see the UI
• The user interface must be simple enough for anyone to use without assistance
• Opinions on UI design will vary

Behavior Models

• Several models are used to predict the way in which an interface or user will behave

Predictive Modeling

• Uses an equation or calculation to forecast an event
• An interface shuts down/hibernates if a command takes too long

Key Stroke Level Model

• Breaks down each sequence of operations into individual actions
• hitting keys on the keyboard
• clicking on the mouse
• pointing the mouse
• moving between using the mouse and the keyboard again
• Each action is assigned a time in order to calculate how the system will respond

Throughput

• Throughput measures include the amount or speed of processing in response to a command
• Speed processing, including variation in tasks or complexity, is known as the response time

Fitt's Law

• A model designed to predict the time it would take for the average human to interact with the computer
• It predicts the time it would take to move your mouse from one end of the screen to another
• It predicts the time it would take to type out each letter of the alphabet in order

Key Action Model

• Describes how users interact with a computer via a keyboard and what macros or shortcuts they like to use to carry out tasks
• The best example for this is PC gamers, the majority use what is termed as a ‘WASD' controls
• This refers to the keys that determine the direction of movement in the game and some use the arrow keys
• This is an example of two different groups using different keys but expecting the same outcome

Buxton's Three State Model

• Used to describe the ease of mouse (or mouse wheel) mobility and will measure how much pressure the individuals apply to it
• It also gathers information on the speed and dexterity of its movement
• The model checks three states to check:
• Out of range is used to display re-positioning and clutching of the mouse; Like when you run out of room on the mousemat
• Tracking is used to monitor where the user moves things around the screen such as the cursor
• Dragging is checking the time it takes the user to move one file from point a to b

Guiard's Model of Bimanual Skill

• It describes how often people divide hand-operated tasks between a certain hand
• Example: 90% of individuals write with their right hand, but some can do both and 10% use the left
• Typing is different as most use two hands on the keyboard
• It specifies how often users will separate which hand they use for specific tasks

Shneiderman's Eight Golden Rules of Interface Design

1. Strive for Consistency
2. Enable Frequent Users to Use Shortcuts
3. Offer Informative Feedback
4. Design Dialog to Yield Closure
5. Offer Simple Error Handling
6. Permit Easy Reversal of Actions
7. Support Internal Focus of Control
8. Reduce Short-Term Memory Load

Basic HCI Subjects

1. Context-aware computing

• Style of computing in which situational and environmental information about people, places and things is used to anticipate immediate needs and proactively offer enriched, situation-aware and usable content, functions and experiences
• Examples: Health monitors, communications systems, just-in-time information systems, and applications that control real world devices.

2. Perceptual Interface

• Allows a computer user to interact with the computer without having to use the normal keyboard and mouse
• These interfaces are realized by giving the computer the capability of interpreting the user's movements or voice commands

3. Collaboration and learning

• Exchange of ideas that enables and improves the interaction between two students (student-student) coping with the learning material on a network.

4. Digital design and fabrication technologies

• Integral to the discourse surrounding contemporary design and architectural practice
• The translation from design to realization is mediated by a range of tools and processes whose development is informed over time by material properties, skill, technology, and culture

5. Human-centered Artificial Intelligence

• Learns from human input and collaboration, focusing on algorithms that exist among a larger, human-based system
• Human-centered AI is defined by systems that are continuously improving because of human input while providing an effective experience between human and robot

6. Interactive Data Exploration and Presentation

• A machine-learning algorithm can be fed a data set and can be used to identify whether a hypothesis is true based on the data set

7. Optometry and Human Vision Simulation

• The use of computer simulators across healthcare simulation to educate optometrists and ophthalmologists to assess, diagnose and manage vision changes and eye care
• Eye simulators combine computers, external or internal images of the eye, and a simulated ophthalmoscope

8. Usable Programming

Disciplines Contributing to HCI

1. Computer Science
2. Cognitive Psychology
3. Social Psychology
4. Ergonomics/Human Factors
5. Linguistics
6. Artificial Intelligence
7. Philosophy, Sociology & Anthropology
8. Engineering & Design
9. Information Security

Computer Science Contributions to HCI

• Technology, Software design, development & maintenance
• User Interface Management Systems (UIMS) & User Interface
• Development Environments (UIDE)
• Prototyping tools, Graphics

Cognitive Psychology Contributions to HCI

• Information processing, Capabilities
• Limitations, Cooperative working
• Performance prediction

Social Psychology Contributions to HCI

• Social and Organizational structures

Ergonomics/Human Factors Contributions to HCI

• Hardware design, Display readability

Artificial Intelligence Contributions to HCI

• Intelligence Software

Philosophy, Sociology & Anthropology Contributions to HCI

• Computer supported cooperative work (CSCW)

Engineering & Design Contributions to HCI

• Graphic design, Engineering principles

Information Security Contributions to HCI

• Integrity, non-repudiation
• Authorization, confidentiality
• Identification, authentication

Interaction Metaphors

• Cognitive models for interaction that can profoundly influence the design of interfaces to data spaces
• Examples: ATM machines, Railway ticket selling machines, Hot beverage vending machines, Others

UI Design/Develop Process

1. Analyze user's goals & tasks
2. Create design alternatives
3. Evaluate options
4. Implement prototype
5. Test
6. Refine

Design Evaluation

• "Looks good to me" isn't good enough
• Both subjective and objective metrics
• Consider these metrics:
• Time to learn
• Speed of performance
• Rate of errors by user
• Retention over time
• Subjective satisfaction

Bad web design versus Good web design

HCI Consists of Three Parts

• The user
• The computer itself
• The ways they work together (interaction)

HUMAN in HCI

• Humans are the users of computers
• HCI should always consider what users expect and need, what physical abilities and limitations they may have, how their perceptual systems work, and what they find attractive and enjoyable when they use computers.
• Humans are limited in their capacity to process information, which has important implications for design
• Information is received and responses are given via several input and output channels, like visual, auditory, haptic, and movement
• Information is stored in memory: sensory memory, short-term (working) memory, long-term memory
• Information is processed and applied through reasoning, problem-solving, skill acquisition, and potential for error
• Emotion influences human capabilities
• Users share common capabilities but are individuals with differences, which should not be ignored

COMPUTER in HCI

• A computer carries on its business in a much less obvious way
• The information a computer contains and the operations it performs are represented inside the computer in a form that we can't directly observe, binary digits encoded as two levels of electrical charge
• A computer display does not arise naturally from what it is doing inside, and any feedback the user might need must be explicitly planned out and programmed
• A computer system comprises various elements, each of which affects the user of the system
• Input devices for interactive use, allowing text entry, drawing, and selection from the screen, include: text entry such as traditional keyboard, phone text entry, speech and handwriting, pointing through primarily the mouse, but also touchpad, stylus, and others, and 3D interaction devices
• Output display devices for interactive use, include:
• different types of screen mostly using some form of a bitmap display
• large displays and situated displays for shared and public use
• digital paper may be usable shortly
• Various devices in the physical world, include:
• physical controls and dedicated displays
• sound, smell, and haptic feedback
• sensors for nearly everything including movement, temperature, bio-signs
• Memory consists of short-term memory (RAM), long-term memory (magnetic and optical disks), capacity limitations related to document and video storage, and access methods as they limit or help the user
• Processing considers the effects when systems run too slow or too fast, the myth of the infinitely fast machine, limitations on processing speed, and networks and their impact on system performance

INTERACTION in HCI

• Interaction between users and computers occurs at the user interface which includes both software and hardware
• People use computers or different embedded devices for different purposes and interact with these machines
• The interaction between the user and the system has four parts: User, Input, System, Output

Interaction Styles

1. Command Line Interface

• Provides a means of expressing instructions to a computer directly, using function keys, single characters, abbreviations, or whole word commands

2. Menus

• A list of options or commands presented to the user of a computer or communications system

3. Natural Language

• Users are unable to remember a command or lost in a hierarchy of menus, and may long for the computer that can understand instructions expressed in everyday words

4. Question/Answer and Query Dialog

• The user is asked a series of questions (mainly with yes/no responses, multiple-choice, or codes) and is led through the interaction step by step; an example would be web questionnaires

5. Form-Fills and Spreadsheets

• Form-filling interfaces are used primarily for data entry but can also be useful in data retrieval applications
• The user is presented with a display resembling a paper form, with slots to fill in

6. WIMP Interface

• WIMP stands for Windows, Icons, Menus, and Pointers (or maybe Windows, Icons, Mouse, Pull-down menus)
• WIMP is the style of graphical user interface that uses the above-mentioned common widgets
• It was invented at Xerox PARC, popularized by the Apple Macintosh and now available in other varieties such as the Microsoft Windows operating system, the X Window System, OSF/Motif, NeWS, and RISC OS

7. Point and Click Interfaces

• Point and click are the actions of a computer user moving a pointer to a certain location on a screen (pointing) and then pressing a button on a mouse, usually the left button (click), or another pointing device

8. Three Dimensional Interfaces

• Virtual reality is one of the best examples of three-dimensional interfaces, but VR is only a part of a range of 3D techniques available to the interface designer
• The simplest technique is where ordinary WIMP elements, buttons, scroll bars, etc., are given a 3D appearance using shading, giving the appearance of being sculpted out of stone -Skeuomorph is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them

Final Project Outline

• Design and evaluate an interface
• 0 - Team formation & topic choice
• 1 - Understand the problem space
• 2 - Exploring the design space
• 3 - Prototype
• 4 - Evaluation
• Main 4 parts worth 25% each
• Students will find a specific client to get the list of user requirements, operational processes and functionalities
• They design the interface of the suggested application to develop considering the key traits of usability design such as simplicity, accessibility and usability
• Students will be incrementally led through the phases of requirement analysis, computer prototyping and storyboard of the operational processes, and several methods of usability analysis and evaluation
• The implementation of the interfaces to be created by the student is using the Pencil Project or other wire framing application tools capable of doing technology interface designs and layouts and functionality development

Rubrics for Assessment

• Simplicity and Readability
• Modularity
• Efficiency
• Usability
• Robustness