Human Computer Interaction笔记

Posted on | Edited on | In ,

Introduction

  • 50% 出勤和 50% report
  • koike森森还有assignment

History

  • 1945 Vannevar Bush
    • memex的概念，二战末提出了一种信息机器的设想（个人图书馆）
      • 这种机器内部用微缩胶卷（microfilm）存储信息，也就是自动翻拍，可以不断往里面添加新的信息；桌面上有阅读屏，用来放大阅读微缩胶卷；还有许多个按钮，每一个按钮代表一个主题，只要按一下，相应的微缩胶卷就会显示出来。每一个胶卷内部还记录着相关的其他胶卷的编号，可以方便地切换，形成同主题阅读。在Bush博士的设想中，这种机器还可以与图书馆联网。通过某种机制，将图书馆收藏的胶卷，自动装载到本地机器上。因此，只通过这一个机器，就可以实现海量的信息检索。from 百度百科
    • as we may think：同时提出了wearable电脑
  • 1946 Eniac
    • 第一个计算机
    • 没有keyboard和display，只能手动
  • 1951 UNIVAC
    • 可以I/O
    • 先在纸条上打孔，然后再放进去读
  • Ivan Sutherland
    • 1963 SketchPad，display上面有图像了，并且可以对画面进行操作
    • 可以用光笔操作，不是用键盘操作了
    • CAD鼻祖
    • 第一个VR设备居然也是他做出来的 Sword of Damocles(1968)
  • Douglas Engelbart
    • 居然出现了鼠标，装了rotatory wheels（竖着的那种），可以在两个方向移动（所以装了两个吗？）
  • Alan Kay
    • PC之父
    • 1972 Dynabook，card board做的，因为CPU和GPu太大了，屏幕也没有，并不是真的
    • 1996年东芝做了个叫这个名字的PC
  • 1973 Xerox Alto
    • real working machine
  • 1981 Xerox Star
    • 出现了桌面系统
    • GUI
  • Ted Nelson
    • Hypertext Editing System -> pen to jumo to another page
  • Steve Jobs & Bill Atkinson
    • HyperCard 1987，同类的信息都在同一张卡上，然后所以的卡都连在一起，可以在卡中间jump。事情就变得非常简单了
  • Tim Berners-Lee
    • father of WWW （World Wide Web）
  • Richard Bold
    • put that there可以用手势交互，语言交互
    • 非常大的一个display和projector
  • Mark Weiser
    • father of the concept of Ubiquitous conputing(1991)
    • 预言了以后大家家家有电脑
  • Jaron Lanier
    • VPL data glove & HMD 1989，手套里面有纤维

I/O的硬件如何组合 -> 新的HCI方式

design & evaluation

ACM SIGCHI

What’s HCI

  • CS
  • design
  • 是一个交叉学科

学会

  • CHI -> 更注重想法，和转化成实现
  • UIST -> 更注重implement
  • IEEE/ACM Ubicomp
  • CSCM

重要性

  • 保证安全性，提升生活质量
  • 在商业上的产品化

推荐书

  • The Design of Everyday things
    • 核心思想Affordence: 人想象的这个东西的用途和实际的用途，让用户看到这个东西就知道是干什么用的
      • 比如傻屌的看见按键不知道按哪个的瓦斯炉
      • 方向不同的车座靠背调节
      • 根本不知道哪个是哪个的电灯开关
    • 想法
      • mapping ui to real layout
      • design is stupid
  • 七个准则 by Norman
  • 8 golden rules by. Shneiderman
    • consistency（一致性） -> 比如mac的pull down最下面都是quit，大家的位置都差不多
    • Short-term memory
      • 比如菜单里面的个数
      • 7+-2 magic number
  • Bringing Design to software T.Winograd

GUI & hypermedia

GUI

  • CUI -> GUI
  • CUI:
    • I: keyboard
    • O: charracters in display
  • GUI
    • I: keyboard + mouse
    • O: bitmap in display

desktop <->

  • like a real office emvironment (metaphor)
    • document,folder,trash
    • 对于没有用过电脑的人来说非常容易理解
    • visualizing to icons
    • operating mouse
  • Jobs居然copy了这个东西
  • 跟现在的也没有太多概念（standard interface for computer)
  • pros
    • visual by icon，因为视觉看出来的东西比较好理解
    • direct manipulation interaction
    • abstract by folders
  • cons
    • number of icons make user confused
    • more computing
    • more physical space
    • typing is faster with keyboard

其他的一些想法

  • room metaphor[henderson86]
    • different romms for different task
    • multiply desk (就像mbp的多个桌面一样)
    • based on user studys <- how they use each applications
    • 并没有变成主流，哭哭
  • 超整理法 super-organizing metaphor
    • 如何整理物理文件
    • organize by time, not name
    • sequentially, not hierarchically
    • implemented by Freeman -> Lifestream

GUI的一个特征WIMP

window, icon, menu, pointer（like mouse）

  • 整体来看
    • 苹果把pull down在左上角，因为从左往右拉比较容易
    • windows: 因为不想和apple一样所以扔到底下了
  • difficult for icon
    • 比如路上的标志设计的就很迷，大家都不知道是干啥的

direct manipulation

  • 比如在删除东西的时候CHI需要自己输入，但是GUI可以直接拖进trash里面

WYSIWYG

what you see is what you get

PUI?

I: recognization
O: large/ small displays

PUI(perceptual)

GUI -> PUI

  • PUI: using various input(sensors)
  • GUI: mouse& keyboard, not intuitive

vision-based HCI

why?

  • natural & intuitive?
  • not special device, unwired
  • multimodel

application

  • recognition
    • detection & recognition
      • object <-(detect) - object detection system(find the thing in the real world)
      • object database <-recognition- objection recognition system(know what it is)
    • detect the hand
      • colors（shapes?）
      • infrared camera
        • near infrared -> vedio cameras(capture near infrared light to the object)
        • far infrared -> capture the heat
    • hand location(手指在哪，手在哪)
      • hand regions
      • find the centre -> morphlogical operation
      • fingers -> pattern matching(有很多不同的方法)
  • tracking

gesture recognition

  • difficult
    • segmentation of hands/body -> depth camera
    • recognition of 3D pose(occlusion)
      • 如果用户转身了，手会被其他的东西挡住
    • detecting begin/end of gestures 一个非常重要的问题！
  • high-speed gestures (systems)
    • pac！pac！
      • as many hands as possible
      • advantages
        • robust against light conditions
        • real-time with 40 people with 2 hands
        • No instruction necessary
    • 3D gestures(for navigation in VR)
      • 2 cameras
      • recognise hand shapes
      • pattern classification(NN)

object recognition

  • tag-based
    • pre-registration of objects
    • difficult to attached on something(unbralla, glove…)
    • unnartual overlook
  • based on color information(‘1991)
    • 3D histogram(RGB)
    • translation/rotation invariant(如果图片改变了方向或者变了，但是颜色信息还没变)
    • 但是颜色相似的时候没法分辨
  • PTAM(‘2007)
    • recgonize feature positions
    • features & markers

gaze recognition

  • infrared cameras & LEDs
  • pattern matching
    • corners of eyes,mouse,shaping triangle
    • -> face direction

4/18

interactive surface

  • 例子
    • handheld:phone, tablet
    • horizantal: desk
    • vertical: wall

digital desk(‘93)

  • overhead projector + camera + desk
  • metaDesk(‘97) -> 用两个奇怪的方块，对这个map进行操作

LCD tabletop

  • LCD -> larger, thinner,lighter,higher resolusion, less expensive
    • before that use projectors(dark)
    • use as window? real glass is expensive then LCD
  • principles of polarization
    • 滤光吗，两个方向的（偏振片）
    • 这样可以用来检测手，把手之后的背景光滤掉
    • 非常好用
      • 可以用来检测手
    • AR marker这样的东西实在是太丑了
      • design invisiable markers
      • 把偏振光片减成了ar marker的样子，人看不到但是机器可以识别

background & motivation

  • traditional surfaces are planar & regid
    • difficult to make 3D surface
    • photoelasricity -> 透明的材料对不同载荷下颜色不同 -> 也可以用来作为影响偏振光的因素，可以用来按，按下去光就能过去惹

electrical shock

  • 为什么会有这种电人的display啊！（BIRIBIRI）

beyond 2D surface

Caytrick surface(‘18)

4/22 information visualization

更快，更精准的理解info(shape/ colors -> information)

SciVis & InfoVis

  • Sci
    • 用户比较专业
    • 用来理解专业的现象
    • physical data, measured data, simulation data
  • Info
    • abstract data
    • 给人民群众看的，感觉更加直观
  • how to layout the data

three issues

  • scalability
    • 如果我们想要vis info，如果data的量太大了，有些东西看起来就很复杂(eg.trees)
  • limited display size
  • human cant understand

tech

  • layout
  • scalability
  • filiter

layout

  • graph drawing
    • 好看，economically（多级化的，中心辐射，引力型 -> 不同关系的相斥，圆环状）
  • tree structure
    • TreeMap

5/9 Cognitive process

why important

  • 看到的不一定就是真实的
  • 通过改变HCI，可以改变看到的东西的

Seven Stage Model