hci2

--------------------------------------------------------------------------------
                                 INTERACTION
--------------------------------------------------------------------------------

- Interaction Models
- Ergonomics (physical characteristics of interaction - الأريحية)
- Interaction Styles
- Context (social - organizational - motivational)

--------------------------------------------------------------------------------
                             INTERACTION MODELS
--------------------------------------------------------------------------------

- Terms:
  -> Domain: Area of work under study (ex: graphic design)
  -> Goal:   What you wanna achieve
  -> Task:   How you go about doing it in terms of operations and actions.

- Donald Norman's Model:
  -> Concentrates on user's view of the interface
  -> Consists of seven stages [USER EFSEPIE]:
     1- User establishes the goal
     2- formulates intention
     3- specifies actions at interface
     4- executes actions
     5- perceives system state
     6- interprets system state
     7- evaluates system state w.r.t goal
  -> Execution/Evaluation Loop:
                        +----- Goal <-----+
              Execution |                 | Evaluation
                        +---> System -----+
  -> Human Errors:
     * Slip:
       ^_^ Understand system/goal.
       ^_^ Correct formulation of action.
       >_< Incorrect action.
       FIX Better Interface design
     * Mistake:
       >_< May not even have right goal.
       FIX Better understanding of system

- Abowd and Beale's Model:
  -> Extension of Norman.
  -> Has four parts: --> User --> input --> system --> output -->
  -> Each part has its own language
  -> Interaction = translation between languages
  -> Problems in interaction = problems in translation
  -> Full story:
     - User intentions translated into actions on interface (input)
     - actions translated into alteration in system state (system)
     - reflected in the output display (output)
     - interpreted by the user (user)
  -> Abowd and Beale:
     - Not restricted to electronic computers
     - Identifies all elements of interaction
     - Allows comparative assessment of systems
     - An abstraction

--------------------------------------------------------------------------------
                                ERGONOMICS
--------------------------------------------------------------------------------

- Study of physical characteristics of interaction
- Defines standards/guidelines for constraining the way we design systems
- Examples:
  -> Arrangement of controls and displays:
     Controls grouped according to: function - frequency of use - sequentially
  -> Surrounding Environment:
     Seating adaptable to cope with all sizes of user
  -> Health Issues:
     Physical position - environmental conditions (temperature, humidity) -
     lighting - noise.
  -> Use of color:
     Red warning - green for okay - awareness of colour-blindness
- Context matters!
                 | Office  | Industrial
  ---------------+---------+------------
  Type of Data   | Textual |  Numeric
  Rate of Change |  Slow   |   Fast
  Environment    |  Clean  |   Dirty (The oil soaked mouse, LOL w kda -_-)
- Industrial Interface:
  -> Tranditional: Dials (أقراص شبه تليفونات زمان) and Knobs (شبه في البوتاجاز)
  -> Now: Screens and keypads and dala3 mase5...
- Glass Interface:
  >> Cheap - flexible - multiple representations - precise values
  << Not physically located - loss of context - complex interfaces
- Indirect Manipulation:
  -> Office (direct): User interacts with artificial world
  -> Industrial (indirect): User interacts with real world through interface
  -> Issues of industrial: Feedback - delays

--------------------------------------------------------------------------------
                             INTERACTION STYLES
--------------------------------------------------------------------------------

- Common Styles: Command Line Interface - Menus - Natural Language -
                 Question/Answer and Query Dialogue - WIMP - 3D interfaces -
                 Form-fills and spreadsheets - Point and Click

- Command Line Interfaces:
  + Suitable for repetitive tasks
  + Better of expert users than novices (NOT TRUE BTW)
  + Offers direct access to system functionality B-)
  + Command Names/Abbreviations should be meaningful
  + Typical Examples: UNIX - Quafios 1.0.1

- Menus:
  + Set of options displayed on screen
  + Options visible so less recall + easier to use
  + Options rely on recognition so names should be meaningful
  + Selection by Numbers/letters/arrow keys/mouse/combinations
  + Often options are hierarchially grouped
  + Restricted form of full WIMP
  + Examples: FDISK - GRUB BOOT MENU

- Natural Language:
  + Speech recognition or typed natural languages
  - Problems: Vague - Ambiguous - Hard to do well
  + Solutions: Try to understand subset - pick on keywords
  + Examples: The robot of interstellar movie.

- Query Interfaces:
  -> Question/Answer interfaces
     + good for novices but restricted functionality
     + often used in information systems
  -> Query Languages (SQL)
     + requires understanding of database structure and language syntax
     + requires some expertise

- Form-fills:
  + Primarily for data entry or data retrieval
  + Requires good design + obvious correction facilities
  + Example: Google forms

- Spreadsheets:
  + First spreesheet: VISICALC
  + Followed by: Lotus 1-2-3
  + OpenOffice.org Math most common today (not MS EXCEL as the slides claim)
  + sophisticated variation of form filling

- WIMP:
  + Windows/Icons/Menus/Pointers
  + Windows/Icons/Mice/Pull-down menus
  + Example: Quafios 2

- Point and Click:
  + Used in multimedia/web browsers/hypertext
  + Minimal Typing

- Three-dimensional interfaces:
  + Virtual reality
  + Ordinary window systems but 3D workspaces:
    -> light and occlusion give depth
    -> distance effects

--------------------------------------------------------------------------------
                            ELEMENTS OF WIMP
--------------------------------------------------------------------------------

- Windows:
  -> Areas of screen that behave as if they are independent
  -> Scrollbar: move the contents of the window up/down or from side to side
  -> Title bars: describe the name of the window

- Icons:
  -> Small picture representing some object in the interface (window or action)
  -> Windows can be closed down (iconized, the era of Windows 3.1 and NeXTSTEP)

- Menus:
  -> Choice of operations/services offered on the screen
  -> Problem: too many options take a lot of screen space
  -> Solution: Pop-up!
  -> Menu bar (top of screen):
     - pull-down menu: mouse hold and drag down (i think like windows 1.01)
     - drop-down menu: mouse click reveals menu (like today - القوائم المنسدلة)
     - fall-down menu: mouse just moves over bar (store.fut-electronics.com)
  -> Contextual Menus:
     - pop-up menus: actions for selected objects (القوائم المنبثقة)
     - pie menus (arranged in a circle): easier, quicker, but not widely used.
  -> Cascading Menus:
     - menu selection opens new menu (hierarchial menu structure)
     - "and so in ad infinitum"
  -> Keyboard Accelerators:
     - Key combinations - same effect as menu item
     - Active when menu open (Usually first letter, like P in edit menu = paste)
     - Active when meny closed (like Ctrl+V to paste)
  -> Menus design issues:
     - which kind to use (pull-down, pop-up, etc...)
     - what to include in menus
     - words to use
     - how to group items
     - choice of keyboard accelerators

- Pointers:
  -> Uses mouse/trackpad/joystick/trackball/cursor keys/keyboard shortcuts
  -> Wide variety of graphical images (arrow, cross, hand, etc...)

- Buttons:
  -> Can be selected to invoke an action
  -> Special kinds: - radio buttons (mutually exlusive chocies)
                    - check buttons (non-exlusive choices)

- Toolbars:
  -> Long lines of icons
  -> Fast access to common actions
  -> Often customizable (choose which toolbars to see + what options are on it)

- Palettes and tear-off menus:
  -> Problem: menu not there when you want it
  -> Solution: - Palettes: little windows of actions (like in photoshop/VS.NET)
               - Tear-off and pin-up menus (menu tears off to become palette)

- Dialogue boxes:
  -> Information windows that pop up to inform events or request info.

--------------------------------------------------------------------------------
                              INTERACTIVITY
--------------------------------------------------------------------------------

-> Speech-driven Interfaces (rapidly improving but still inaccurate)
-> Look and feel:
   WIMP systems have the same elemnts (windows, icons, blah blah)
   But different systems behave differently (Mac OS X menus vs Windows menus)
   Appearance + Behaviour = Look and feel
-> Initiative: Old Question/Answer: Computer, WIMP: user
   WIMP exceptions: preemptive parts of the interface (like dialogue boxes)
-> Error and repair:
   Can't always avoid erros, but we can put them right
   Make it easy to detect errors so the user can repair them
-> Context:
   - Interaction affected by social/organizational context
   - Other people: desire to impress - competition - fear of failure
   - Motivation: fear - allegiance - ambition - self-satisfaction
   - Inadequate Systems: Cause frustration and lack of motivation

--------------------------------------------------------------------------------
                     EXPERIENCE, ENGAGEMENT, AND FUN
--------------------------------------------------------------------------------

- first you gain experience
- then you engage
- finally, you have fun.

- Experience?
  -> Home, entertainment, shopping
  -> Psychology of experience:
     * flow (Csikszentimihalyi) (i just copied/pasted it)
     * balance between anxiety and boredom
  -> Education
     * things you can just do with help
  -> Wider
     * Literary analysis, film studios, drama

- Designing Experience:
  -> Real Cracker:
     Cheap and cheerful - bad joke/plastic toy/paper hat - pull and bang
  -> Virtual Cracker:
     cheap and cheerful - bad joke/web toy/cut-out mask - click and bang
  -> 1) Sender fills in web form
     2) Recipient receives email
     3) Recipient opens email to find the cracker page "closed"
     4) Recipient clicks on "open" and the cracker opens very slowly
     5) Cracker opens: msg + joke + mask to be printed and cut-out/worn + webtoy
     6) Sender watches the progress
  -> The cracker experience:

                 |               |    Real Cracker    |   Virtual Cracker
     ------------+---------------+--------------------+-----------------------
       Surface   |     design    | cheep and cheerful | simple page/graphics
       Elements  |      play     | plastic toy & joke |    web toy & joke
                 |  dressing up  |     paper hat      |   mask to cut out
     ------------+---------------+--------------------+-----------------------
                 |     shared    | offered to another |    sent by email
                 | co-experience |   pulled together  | hide content till "open"
     Experienced |   Excitement  | cltr. connotations | recruited expectation
       Effects   |   Hiddenness  | contents inside    | first page closed
                 |    Suspense   | Pulling cracker    | slow page change
                 |    Surprise   | bang (when works)  | WAV file (when works)

  -> Physical design constraints:
     - Ergonomic: minimum button size
     - Physical: High-voltage switches are big
     - Legal and safety: High cooker controls
     - Context and environment: Easy to clean
     - Aesthetic: Must look good
     - Economic: not cost too much!

  -> Design trade-offs (because constraints are contradictory):
     - Within categories:
       Safety(cooker controls):
       * front panel safer for adults
       * rear panel safer for children
     - Between categories:
       MiniDisc remote: ergonomics vs physical
       Ergonomics: controls need to be bigger
       Physical: No room!
       Solution: Multifunction controls + reduced functionality

   -> Fluidity السيولة
      Do physical aspects reflect logical effect?
      - Logical state revealed in physical state? (on/off buttons)
      - Inverse actions inverse effects? (arrow buttons, twist controls)

   -> Spring back controls أزرار التحكم ام سوستة - زي في موبايلات نوكيا القديمة:
      - one-shot buttons - joystick - some sliders
      - Good: large selection sets
      - Bad: hidden state (you don't some option is on or off maslan)

   -> Physical Layout:
      - Logical Relationship: spatial grouping

   -> Compliant Interaction:
      - Mechanical buttons shows and controls state
      - Rotary knobs can be controlled by user/machine مفتاح ضبط برنامج الغسالة

   -> Managing Value:
      - People use something only if it has perceived value + value exceeds cost
      - Exception for this law: habit.
      - Value not necessarily personal gain or money.
      - Weighing up value: helps get my work done - fun - good for others
      - Cost: download time - money - learning effort

   -> Discounted future:
      - In economics, net present values (NPV) - صافي القيمة الحالية:
        discount by (1+rate)^(years to wait)
      - In life, people heavily discount:
        * future value + future cost
        * hence resistance to learning
        * need low barriers and high perceived present value

   -> Example - HCI book search:
      - value for people who have the book: helps you to look up things
      - value for those who don't: sort of online mini-encyclopaedia
        but also says "buy me"!!

   -> Value and organizational design:
      - Coercion الإكراه
        Tell people what to do --> value = keep your job
      - Enculturation
        Explain corporate values - establish support
      - Emergence
        Design process so that individual values --> organizational values

   -> Summary:
      - If you want someone to do something:
        1. make it easy for them.
        2. understand their values.

--------------------------------------------------------------------------------
                                 PARADIGMS
--------------------------------------------------------------------------------

- Paradigms: predominant theoretical framworks or scientific world views
  Ex: Aristotelian, Newtonian, Einsteinian (relativistic) paradigms in physics.

- Why study paradigms?
  Concerns: How can an interactive system be developed to ensure its usability?
            How can the usability be demonstrated or measured?

- History provides paradigms for usable designs.

- understanding HCI history = understanding a series of paradigm shifts

- New computing technologies arrive, new perception of the human-computer
  relationship is created.

- The initial paradigm: Batch processing (impersonal computing)

- Example Paradigm shifts:
  -> Time-sharing (interactive computing)
  -> Networking (community computing)
  -> Graphical displays (direct manipulation)
  -> Microprocessor (personal computing)
  -> WWW (global information)
  -> Ubiquitous computing

- Time-sharing:
  -> Single computer supporting multiple users
  -> 1940s and 1950s explosive technological growth
  -> 1960s need to channel the power
  -> JCR Licklider at ARPA
     JCR  = Joseph Carl Robnett
     ARPA = Advanced Research Projects Agency
     JCR Licklider becamse the director of Project MAC at MIT in 1968. The
     project had produced one of the first computer time-sharing system, CTSS.

- Video Display Units:
  -> More suitable medium than papers (i.e, teletypes and printers)
  -> 1962 - Sutherlands' sketchpad
  -> one person's contribution could drastically change the history of computing

- Programming Toolkits:
  -> Engelbart at Stanford Research Institute الراجل اللي اخترع الماوس
  -> 1963 - Augmenting Man's Intellect
  -> 1968 - NLS/Augment system demonstration (NLS=On-Line System)

- Personal Computing:
  -> 1970s - Papert's LOGO language for simple graphics programming by children
  -> LOGO is not an acronym btw.
  -> A system is more powerful as it becomes easier to use
  -> Kay at Xerox PARC (PARC=Palo Alto Research Center) - the Dynabook.

- Window systems and WIMP:
  -> Windows used for dialogue partitioning "to change the topic".
  -> 1981: Xerox Star: first commercial window system

- Metaphor:
  -> Relating computing to real world activity is effective learning technique
  -> Examples:
     - LOGO's turtle dragging its tail
     - file management on an office desktop
     - word processing as typing
     - financial analysis on spreadsheets
     - virtual reality: user inside the metaphor
  -> Problems: some tasks do not fit a given metaphor - cultural bias

- Direct Manipulation:
  -> 1982: Shneiderman describes the appeal of graphically-based interaction:
     + Visibility of objects
     + Incremental action and rapid feedback
     + Reversibility encourages exploration
     + Syntactic correctness of all actions
     + Replace language with actions
  -> 1984: Apple Macintosh
  -> The model-world metaphor
  -> WYSIWYG = What you see is what you get

- Language vs action:
  -> Actions don't always speak louder than words.
  -> DM: interface replaces underlying system
  -> Language paradigm
  -> Interface as mediator
  -> Interface acts as intelligent agent
  -> Programming by example is both action and language.

- Hypertext:
  -> 1945: Vannevar Bush desribed memex: a hypothetical proto-hypertext system.
  -> 1960: Nelson's Xanadu project
  -> Mid 1960s: Nelson described hypertext as non-linear browsing structure
  -> Hypermedia and multimedia

- Multimodality:
  -> A mode is a human communication channel
  -> Multimodality is emphasis on simultaneous use of multiple channels for I/O

- Computer Supported Cooperative Work (CSCW):
  -> Removes the bias of single user/single system
  -> can no longer neglect the social aspects
  -> example: email

- The World Wide Web:
 -> Hypertext, as originally realized, was a closed system.
 -> HTTP protocol and HTML markup language.

- Agent-based interfaces:
  -> Original interfaces: commands given to computer - language-based
  -> Direct Manipulation/WIMP: world representation of commands - action-based
  -> Agents: return to language by instilling proactivity and intelligence in
             command processor: Avatars, Natural Language Processing (NLP)

- Ubiquitous Computing:
  -> The most profound technologies are those that disappear
  -> Late 1980: Computer became very apparent
  -> How to make it disappear?
     - shrink and embed/distribute it in physical world
     - design interactions that don't demand our intention

- Sensor-base and context-aware interaction:
  -> How can we go from sensed physical measures to interactions that behave
     as if made “aware” of the surroundings?