HCI-人机交互19.9-19.11

what is it about？

Humans Machines Interface
About the system development
Interface:present instructions to human and translate instruction from human to machine
Interaction offer mode of operation and connect with interface

History

1950’s - Batch Processing
1960’s - Time sharing
1970’s - Networking(1972 1^st email) and Graphical Display
1980’s - Microprocessor
1990’s - WWW
1995’s - Ubiquitous Computing
2020’s - Grid/Cloud computing / Human Robot Interaction / Touch Screen / Table Computing

interdisciplinary

computer science
cognitive psychology
ergonomics
graphical design
artificial intelligence
sociology

Definition

A set of processes, dialogues and actions through which a human employs and interacts with a computer

Interface

Physically : pressing buttons, moving levers
Perceptually : display things on a screen which we can see
Conceptually : what we should be doing

Information Visualization

Definition : Data transformed to graphical representation
abstract data include both numerical and non-numerical data

*Difference between Information visualization and scientific visualization

Information visualization : coordinate space no relation with data && design a space && data transformed to a grid.
Scientific visualization : true spatial coordinates, XYZ, 3D model && measurement taken on grid

key concept : usability

Definition : Usability is a quality attribute that assesses how easy user interfaces/interactions are to use.
also refer to methods for improving ease-of-use during the design process.
usability components

• Learnability
• Throughput (also Efficiency)
• Flexibility
• Attitude (Satisfaction)

key concept : cognetics

cognition definition : a term to describe the psychological processes involved in the acquisition, organization and use of knowledge rational rather than the emotional characteristics.
information processing : perceived - processed - acted upon
in cognition we distinguish two modes: Experiential cognition(unconscious) and Reflective cognition(conscious)
human memory model

• sensory(key board)
  *iconic memory
  *echoic memory
  *haptic memory
• short term memory(CPU)
  *working memory
  *used for storage and decision-making
  *recency effect
• long term memory(ROM storage)
  *two mode : semantic and episodic memory
  *semantic network

the model human processor :
perceptual system
cognitive system
motor system

key concept : psychological state

1.Closure

user’s desire to “close” a task
Indicate that the interface : cognitive tasks should be short

2.User Attitude and Anxiety

negative attitude results in slower learning
anxiety reduces WM capacity and causes slower learning

3.Control

inexperienced users ; willing to be led slowly by the computer
experienced users : wish to take the initiatives
as people gain experience, so their desire to control the computer increases

4.Psychological Observations

Better at recogintion than recall
remember grouped things better
learn by doing
rely on previous experiences : Episodic memory
differ in how we learn

5.Attention

variation of attention

• orienting
  expecting
  searching
  filtering
• “Cocktail Party Phenomenon”
• locus of attention
  human can only have single attention

6.Meaningfulness

• Factors
  Familiarity
  Associated imagery
  context
  culture
  emotional state

7. Emotion and Models

emotion : affect

reasoning

- three different types of reasoning

• Deductive reasoning : Derive logically necessary conclusion from given premises / prior knowledge is addressed to solve conflicts
• Abductive reasoning : reasoning from event to cause
• Inductive reasoning : Generalize from cases seen to cases unseen

perception

Definition : the way that you notice or understand something using one of your senses

• sensation
• Gestalt (bottom-up approach)
  *Pragnanz
  *Proximity
  *similarity
  *closure
  *continuation
  *common fate
  *familiarity

sense

vision system

• some crux of Human Vision : whole rather part/ sum more than separate /LTM

• photo-senors : the Retina
  *Cones : photopic vision (bright-light vision)
  *Rods : scotopic vision(dim-light vision)

• eyes most sensitive to green and yellow/least sensitive to blue
  -perceptual processing of vision
  *stage 1 pre-attentive processing : no focus attention required / sensory input
  *stage 2 attribute attention : focus attention required / segment visual scene / WM LTM
  *stage 3 active attention : focus attention required / WM LTM

• depth vision
  *stereoscopy
  *motion parallax
  *accommodation
  *occlusion
  *texture
  *familiarity
  *laws of perspective
  *shadow casts

human audio

hearing : density / wave patterns
audition : understand a sound

haptic system

human touch : somatosensory perception / proprioception

• key concepts : Propriocaptive (including cutaneous, kinaesthetic and vestibular sensations)
• vestibular : head position, acceleration and de-acceleration
• kinaesthetic : the feeling of motion. muscles tendons and joints
• cutaneous : skin. pressure, temperature and pain
• tactile : pressure of skin

Affordance

• definition : affordance is a resource or support that the environment offer an animal. what a person thinks can be done with an object.

Mental model

• knowledge representation
  symbolic representation / sub-symbolic representation

• mental model
  *Mind constructs small scale models of reality to anticipate ecents, to reason and to underline explanation
  *definition : mental models are people have of themselves, others and the things with which they interact. A dynamic mental representation allowing people to make predictions and inferences and image.
  *type : functional mental model (how to use) / structural mental model(how it works)

• schemeta
  *a schemata is a network of knowledge based on previous experience. / static

Metaphor

• analogy
  *A resemblance of relations; an agreement or likeness between things in some circumstances or effects, when the things are otherwise entirely different.
  -simile
  form of metaphor that compares two different things to create a new meaning. always use “like” or “as”

key concept : visibility

definition : the extent to which functions and their results are visible to the user as well as how easy it is to find and use these functions

• keyboard : QWERTY Keyboard and Dvorak keyboard
• mouse : pointing device
• I/O through sound : sonification

interaction model Norman

task language : the language of the user
core language : the language of the system

• Interaction framework Abowd & Beale
  • translation between languages
  • user - input - core - output
  • 4 translation Articulation, performance, presentation, observation
    

Landmark in interaction

• Dynabook 1977
• VisiCalc 1977
• Hypertext 1945
• Ubiquitous Computing 1991

Interaction concept

• navigation: attention
• sensitivity: sensitivity tuple Fitz Law

Interaction design components

• Metaphors, Graphics, Icons, Glyps, Geons, Language, Documentation, Tutorials
• features of iamge = UI
  • familiar to users
  • supports learning by exploation
  • hides system model
  • reflects current status
  • supports retention
  • reduces need for training

Interaction styles

Linguistic styles

Key-Model styles

• function keys: strict sequences of operation / not much training required / useful in public places

Direct manipulation

• WIMP : windows, icons, menus, pointers
• characteristics of menus : offer actions that make sense / based on rcognition not remembering / carefully chosen names and icons / not suitable for complex actions / may screen space
• menu styles: Pll-down & pop-up, command, cascading, iconic, tree-structured, pie, multiple column, fish-eye

Evaluation of interaction

• Fitt’s Law
  T = k*log₂(D/S+0.5)
  T = time to move hand to target
  k ± 100ms
  D = distance
  S = size of target

Color

definition : sensory responce to electromagnetic radiation in the spectrum between wavelengths 0.4 - 0.7 μm -400 - 700 nm

• 3 color model
  • Red, Green, Blue Model : RGB
  • Hue, Saturation and Lightness Model : HSL
    • Hue : perception to a color name = Tint
    • Saturation : intensity of a color = shade
    • Lightness : value, reflection of a color from a surface with reference to nearby surfaces = Tone(value)
  • Cyan, Magenta, Yellow, Black : CMYK

color for interaction

• background, apparent brightness & size
• extreme color pairs
• de-saturated color pairs

Windows

• windowing system tasks

  • Managing input
  • Changing focus
  • Managing a single window
  • Managing multiple windows

• Room-Building concept

  • room = icon + name

• Virtual Desktops

  • increase screen capacity
  • video memory
  • organize by putting applications in different screens
  • connect pplication to screen

widgets

Interface Components are virual devices, referred to as widgets.

• Buttons : push, radio, check box
• Scrollbars
• Menus
• Text boxes

sequential programs

• program takes control, prompts for input
  the user waits on the program
  control resides with the program

GUI

• control resides at the user side
  the user can take action

events

An event is something “interesting” that happens in the system

Icons

Pictographic symbols that are used to focus on essential features

• types
  icon(something that looks like what it represents)
  index(sign caused by object that it represents / depending on the previous experience)
  symbol(sgin completely arbitraty in appearance / meaning must be learned)

• icon representation
  Similar icons: Visually analogous to concept / object
  Example icons: Things commonly associated with action
  Symbolic icons: Use image that represents concept
  Arbitrary icons: No direct relationship with concept

• advantages of icons
  Recognition compactness comprehensibility university re-use dynamic aspects

• disadvantages of icons
  ambiguity depend on user, text and context, cannot completely replace words in some conplex situations, expensive, too many distact

• moving icons (Micons)
  can be static / dynamic / portary dynamics / clarify action is ongoing

• 4 rules for icon design
  look different from all other icons
  obvious what it does/represents
  recognizable in 16*16 oiexl image
  look good in Black & white and color

• auditory icons
  sound diretly reflects physical interaction of object

• audio-aids : EarCons
  short sound fragments that help operate the system

• Tactile aids : Tactions
  structures abstract tactile messages to
  communicate complex information to non-visual
  users

• kineticons
  Iconograhic scheme based on motion

• Emotion-Aids: EmotiCons
  Originally a sequence of ordinary characters
  used in e-mail, chat, SMS:

Color scheme

• Complementary color scheme
  color that are oppsite each other
• Monochromatic color scheme
  colors that are one of particular shade of color
• Analogous color scheme
  colors shades that are next to each other
• Triad color scheme
  three color that are equally spaced from each other
• Custiom
  colors from a certain inspiration

Text & Legibility

• visual density and balance
  on paper : density of 70-80% common
  on screen : 15-20% recommanded
• text legibility

1. choice of upper and / or lower case
2. follow all rules for grammer / punctuation
3. long line lengths can be difficult to read
4. abbreviations must be familiar to users

• text coding
  intensity
  shape e.g. box frame
  uderlining
  color and/or shading
  character size and font style
  blinking
  reverse video
  greying-out
  movement
  sound and/or synthesized speech
  change locus of attention

Design

• conceptual design
  what do we expect from the user/ making abstractions
• physical design
  how is it going to work / can lead to a detailed look and feel
  components : operational design/ representation design/ ineraction design

System analysis

• the PACT system
  people : physical characteristics, phychological differences
  activities : cooperative complexity
  context : physical, social, organizational
  technologies : what I/O devices for communication/content

Software lifecycle

• waterfall lifecycle model
  each step contains validation and verification
  

• spiral lifecycle model
  iteration, prototyping, controls problem

• star lifecycle model
  • no predetermined starting/end point
  • based on the iteration
  • order of activities not fixed
  • reflects actual practice user centered design
    

User model : persona

• A precise description of a user and what they want to accomplish
  • imaginary, but precise
  • specific, but stereotyped
• decribe a person in terms of their
  • goals of life
  • capabilities, inclinations, and background

System model : scenario

• Informal narrative decription decribing human activities/tasks

• Are stories of rich design

• using scenarios to

  • Communicate with others
    – designers, clients, users
    – Prevent misunderstanding / mismatching
    – Use scenario in formal approaches
    – Introduce behaviour of the system
    – Single path in the system

• text - video based

• four types of scenarios

  • stories
  • conceptual scenarios
  • concrete scenarios
  • uses cases

Problem statement

• Human activity: what activity is supported
• Users
• Level of support to be provided
• Form of solution
• Statement of overall goal of whole system in
  a single phrase or sentence
  – Aim: show clear understanding of what is needed
  – Main assumptions should be separately stated
  – System evolves from problem statement

User analysis

• what is the level of expertise
  • Novicw intermittent frequent
• What is the familiarity with specific hardware and software
• What is the software they are familiar with
• What is the job-related information access requirement
• What are the computing skills of users
• What is the general educational level
• Data gathering: Conventional + SUA
  • Read background material
  • Interviews
  • Questionnaires
  • Forms analysis
  • SUA = situational user analysis ( … PACT)

Task analysis

• definition :

  • Something a user undertakes to achieve something
  • To Interactive Software, extremely meaningful

• Interaction Design focus on Task Analysis

  • Decomposition
  • Ordering
  • Assignment (computer – human – interactions)

• ‘ Task Analysis is the process of analysing the way people perform their jobs and it is important to the software designer because a major part of the design will focus on supporting the jobs people do.’

• Methods for Task Analysis

  • Hierarchical task decomposition
    • often using structure chart
    • decompose in tasks, subtasks, and actions
    • plan: sequence of subtasks or actions (THD)
    • TA should coincide with user’s mental model
    • task allocation important
  • Knowledge based analysis
  • Entity-Relationship based analysis

• plan

  • types :
    Fixed sequence - e.g. 1.1 then 1.2 then 1.3
    Optional tasks - if then action
    Wait for events - if then 1.4; time involved
    Cycles - do while ; loop
    Time-sharing - do ; at the same time … (and do)
    Discretionary - do any of , or in any order
    Mixtures - most plans involve several of the above

• task analysis in InfoVis
  • Overview
  – present entire collection
  • Zoom
  – zoom to specific parts of interest
  • Filter
  – filter out uninteresting items
  • Details on demand
  – Select specific group/item and present details
  • Relate
  – Relationships among items
  • History
  – History of actions for progressive refinement, i.e: undo, replay.
  • Extract
  – Extraction of sub-collections through queries.

• cognitive tasks analysis

  • Techniques Cognitive modeling
    • GOMS : Goals, Operators, Methods and Selection
    • CCT : Cognitive Complexity Theory
    • • GOMS is about procedural knowledge
      • GOMS good in finding key tasks
      • GOMS & CCT somewhat legacy methodology
      • Keystroke Level Method (KLM) = GOMS

Model-View-Controller Architecture

• Design pattern for the software architecture

• model – information that application manipulates
  view – visual display of the model
  controller – receives all input events and decides upon meaning and process

Dialogue design

• Conversation between two or more parties

• dialogue levels :
  • Lexical
  – Shape of icons, actual keys pressed
  • Syntactic
  – Order of inputs and outputs
  • Semantic
  – Effect on internal application/data

• State Transition Networks
  

• Hierarchical STNs
  

• Petri Nets

  • Notation for reasoning about concurrent activities, computer science (Petri, 1962)
  • Flow graph:
    – Place/Node Local state (cf. STN states)
    – Transitions Local state change (cf. STN arcs)
    – Arcs Connections of states
    – Counters/Tokens Information Unit, Current state
    – Rules Condition for a local state change
  • 

• properties

  • action properties : Completeness/Determinism/Consistency
  • state properties : Reach-ability/Reversibility/Dangerous states

Data abstraction

• Data type characterization:
  • Attribute
  – Some specific property that is measured
  – aka variable, data dimension, dimension
  • Item
  – Individual entity that is discrete
  – Row, node …
  • Link
  – Relationship between items in a network
  • Grid
  – Strategy for sampling continuous data
  – geometry, topology
  • Position
  – Spatial data element (e.g. GPS)
• Dataset types
  • Table
  – Flat table, row = item; colum = attribute
  – Multi dimensional table
  • Network
  – Relationship (link,edge) between items (node, vertex)
  – Tree, hierarchical structure – parent ~ child
  • Field
  – Continuous, sampled to Grid
  – Geometry and Topology of Grid
  • Geometry
  – Specification of shape with explicit spatial positions

Usability

• Definition: Usability comprises the effectiveness,
  efficiency and satisfaction with which specified
  users can achieve specified goals in a particular
  environment

• advantages usability specs
  • Part of the management and control mechanisms for the iterative refinement process
  • Allows clear assessment of usability during iterative prototyping cycles
  • Identifies data to be collected, avoids gathering unusable or irrelevant data
  • Objectively identifies interface weaknesses which need further design effort

• Disadvantages Usability Specifications

• • Measures of specific user actions in specific situations
  • No reliable technique for setting usability specifications; Issue of globalization
  • Different tasks and user groups may need different usability specifications

Prototyping

• Purpose of Prototyping : Identifying user interface, interaction (and other) requirements

• Prototype Fidelity low fidelity / high fidelity
  • Fidelity refers to the level of detail
  • High fidelity:
  – A prototype that looks like the final product
  • Low fidelity:
  – Artists renditions with many details missing

• Merits of Prototyping :
  • Requirements capture
  – Interface and functional requirements
  • Reveals problems / prevents gross mistakes
  • Allows evaluation and discussion
  – Fostering innovative ideas (from designers and users)
  • Users enjoy prototyping and feel involved
  – Participatory design
  • Suggests level of user support
  • Results in better usability
  • Reduced deadline effect
  • Fewer lines of code

• Prototyping: Participatory Design

  • two types :
    – CARD: Collaborative Analysis of Requirements & Design
    • Goal: design workflow
    • Higher level of abstraction
    – PICTIVE: Plastic Interface for Collaborative Technology Initiatives through Video Exploration
    • Goal: design screens
    • Find interaction

• Computer Assisted LowFi Prototyping

  • The SILK System : Sketching Interfaces Like Krazy
  • The Denim System : Designing Web Sites by Sketching Interactive Storyboarding for WWW

• “Wizard of Oz” prototyping
  • User thinks having interacting with a computer, but a developer is responding to output rather than the system.
  • Usually done early in design to understand users’ expectations (requirements)

• Prototyping Methods
  

• Requirements Animation
  • Functional requirements are demonstrated in prototype (mock-up)

• Throw-away prototyping
  • Similar to requirements animation
  • Prototype is not developed into the final product

• Evolutionary prototyping
  • Prototype is not discarded
  • Prototype used as the basis for next iteration of design
  • i.e. system “evolves” from prototype

• Incremental prototyping
  • Final product is build as separate components, one at a time
  • allows large systems to be installed in phases to avoid delays between
  specification and product delivery.
  • Includes thorough testing for each phase
  • Typical with larger projects

Evaluation

Evaluation is the gathering of information about usability or potential usability of a system
Goals of Evaluation :

• Assess extent of system functionality / system usability
• Assess effect of interface/interaction on user
• Identify specific problems

• Formative Evaluation
  • Purpose: to support iterative refinement
• Summative Evaluation
  • Purpose: quality control

Evaluation methods

• 

• Types of Data:

  • Quantitative data : Objective measures
  • Qualitative data : Subjective responses

• Expert evaluation

  • Analytical – Cognitive walkthrough

    • Cognitive Walkthrough

  • Heuristic

    • Heuristic evaluation

  • Model based

    • GOMS:
    • Keystroke level model
    • Dialogue models, state transition

• Empirical evaluation

  • Observational
  • Survey evaluation
  • Experimental evaluation

USABILITY EVALUATION

• Important concepts in support of usability evaluation:
  • MUSiC :
    – Measuring the Usability of Systems In Context, or
    – Measurements for Usability Standards In Computing
  • DRUM (is part of MUSiC)
    – Diagnostic Recorder for Usability Measurement
    – Software that facilitates management of
    evaluation data

User participation evaluation

• No more then 5 users required

• Feature Observational Evaluation

  • Empirical method, Cooperative Evaluation
  • Observing a small group of articulate users
  • Hawthorne effect : Testing environment affect users’ behavior
  • Eye tracking
  • Think Aloud

• Features Survey Evaluation

  • Empirical method
  • Interview
  • Questionnaire
    • Styles of question
      – general
      – open-ended
      – scalar
      – multiple-choice
      – ranked

• Features Experimental Evaluation

  • Empirical method
  • Laboratory Studies
  • Field Studies

• Variables

  • Independent variable (IV) : characteristic changed to produce different conditions
  • Dependent variable (DV) : characteristics measured in the experiment

• Hypothesis

  • Prediction of outcome
  • Null hypothesis : States no difference between conditions/Aim is to disprove this

Service design

• Touch-Points
• Brand
• LifeStyle : Lifestyles focuses on the ways in which people lead their lives, on their aspirations rather than their intentions, on their values and on their search for identity.

Ubiquious computing

• Sensors: key to Ubiquitous computing
• Make the interface metaphor visible to user
• AKA：Pervasive computing/Physical computing/Tangible media
• Scales of devices：
  • Inch pocket : Individuals own many of them and they can all
    communicate with each other and environment

• Foot hand/lap : Individual owns several but not assumed to be always with them.
• Yard mounted wall/table : Buildings or institutions own them and lots of people share them.

• Pervasive Computing
  • Access and Interact with information any place and anytime
  • Wearable Computing

Mixing realities

• Augmented Reality

  • Augmented reality is an environment that includes both virtual reality and real-world elements. It augments the scene with additional information
  • Real information added to VR-world
  • Adds to Reality – Virtuality continuum

• Virtual Reality

  • Brings Humans into a Computer Space.
  • Use specific hardware – VR mounted display
  • Stereoscopic view adds to immersion

Virtual characters

• Avatar, artificial representations of people
• Properties Intelligent VC’s
  • Autonomy,
  Agent acts on own accord,
  no human intervention
  • Reactivity,
  Takes stimuli from environment
  • Proactivity,
  Takes initiative to act;
  through user or through environment
  • Collaboration,
  Is able to collaborate with other agents

Persuasive technology

• Using computers to change what we think and do. Persuasion is the common denominator and computers are the vehicle to persuade with

• Captology :Design, research and analysisof interactive computer products created for the purpose of changing peoples attitudes or behavior