CS228 HumanComputer Interaction

1
CS228 Human-Computer Interaction
User Interfaces
Command-based User Interfaces Text-based Exchang
e medium is the computer Graphical User
Interfaces Graphics-based Ex WIMPs (Windows,
icons, menus and pointer) Windows, Mac OS X,
GNOME Windows 2D rectangular input/output
channels Menus Hierarchically-organized
lists Widgetsicons Localized graphical action
triggers Exchange medium is the
computer Tangible Interfaces Graphics-based, or
object-based Input device is the human
body Exchange medium is the physical
environment.
2
CS228 Human-Computer Interaction
User Interfaces
Graphical User Interfaces Windows are
electronic versions of sheets of paper
3
CS228 Human-Computer Interaction
Ubuntu Linux XGL
User Interfaces
Graphical User Interfaces Windows are
maturing beyond this conception
University of Toronto 3D Physical Desktop
Technology
Microsoft Vista
4
CS228 Human-Computer Interaction
User Interfaces
Different interface objects reflect different
underlying organizational themes Windows/visual
desktops embodies spatial organization Menus
embody branching/hierarchical organization Comma
nd-based interfaces (and wizards) embody
sequential organization (command after command
piping etc.) Pop-ups embody contextual
organization (right-clicking on an icon,
etc.) Different ways of organizing information
in an information space
5
CS228 Human-Computer Interaction
Information space
An information space is a space filled with
objects and data, that people enter or observe
from the outside, and navigate the space to
accomplish various tasks. Information spaces do
not need to be virtual or completely
electronic An airport is an information space
? filled with signs, timetables, objects, help
desks, personnel, etc. An information space
consists of two parts The conceptual
information structure (or information
architecture) and interfaces that provide views
onto, and ways to manipulate, that
structure. Both are created to support an
activity of set of activities Activity
Catching a train Conceptual structures Routes,
stations, times, railway car classes,
etc. Interfaces Paper/electronic timetables
6
CS228 Human-Computer Interaction
Information space
Information spaces can be layered each higher
level provides a more global, abstract
representation of the layer below. Layer
Webpages Conceptual structures text,
images, metadata, document structure,
etc. Interfaces Web browser format,
print format Layer Internet Conceptual
structures Webpages, size of pages, links
between pages Interfaces Search list, global
map Q Other examples of layering in information
spaces?
7
CS228 Human-Computer Interaction
Structuring information spaces
How to go from the messy world of human needs to
the clean world of information spaces? i.e., how
do we conceptualize a domain of knowledge, need,
and/or activity? We choose a conceptualization
this is known as choosing an ontology. Must
choose The number and types of conceptual
objects that will exist. Must choose the right
level of abstraction Strike a balance between
a coarse-grained and fine-grained
ontology Coarse-grained Few categories
weakly-typed Eg. Train leaves station x at
t1, arrives station y at t2. Pro Con
Fine-grained Many categories Eg. Express
train, first-class train, cargo
train, local/state/national train, stopping
times / places, etc. Pro Con
8
CS228 Human-Computer Interaction
Structuring information spaces
Disentangling some big words Ontology Determi
ning what things exist establishing
boundaries where none existed Taxonomy Determi
ning how to group things together a method
of classification Epistemology The nature of
knowledge and knowing how do we come to know
things? How does knowledge compare to
belief? So building an information space is
both an ontological (choose a coarse-grained
approach) and a taxonomic (choose five broad
categories) endeavor. The process of building an
information space is an example of
epistemology Why did we choose a coarse-grained
approach for this domain?
9
CS228 Human-Computer Interaction
Information space design
Create an interface appropriate to the
information space Information space
characteristics Volatility How often (if at
all) do the types and instances of objects
change? Choose an ontology that keeps the type
of objects stable If volatile, choose
coarse-grained ontology otherwise, fine-grained
ontology. Size Conceptual and physical/perceptual
objects Topology Distance Direction Media Design A
gents
10
CS228 Human-Computer Interaction
Information space design
Create an interface appropriate to the
information space Information space
characteristics Volatility Size Coarse-grained
ontologies provide lots of object instances
(large size) Fine-grained ontologies provide
few object instances (). Affects
search Coarse-grained Search methods tuned
to find data within complex objects Fine-graine
d Search methods turned to locating simple
objects. Websites Lots of pages requires lots
of links Few, long pages requires scrolling
/ text search. Conceptual and physical/perceptual
objects Topology Distance Direction Media Design A
gents
11
CS228 Human-Computer Interaction
Information space design
Create an interface appropriate to the
information space Information space
characteristics Volatility Size Conceptual,
physical and perceptual objects Conceptual
objects files, web pages, directories, images,
documents, etc. Physical objects Input / output
devices, storage devices Perceptual
objects Windows, web pages, icons, widgets,
etc. Find a good match of physical/perceptual
objects to the conceptual objects Good
match One icon image for each file type Poor
match Tightly interconnected graph (conceptual
object) stored in different files, on
different computers Topology Distance Direction Me
dia Design Agents
12
CS228 Human-Computer Interaction
Information space design
Create an interface appropriate to the
information space Information space
characteristics Volatility Size Conceptual,
physical and perceptual objects Topology Conceptu
al topology What are the different categories,
and how are they related? Animal human rock
planet Classes animal and human are closer
to one another than animal and
planet. Physical topology How to move
between and through physical objects? How
many links connect one web page with
another? Distance Direction Media Design Agents
13
CS228 Human-Computer Interaction
Information space design
Create an interface appropriate to the
information space Information space
characteristics Volatility Size Conceptual,
physical and perceptual objects Topology Distance
How far apart are two objects / activities in an
information space? Q How would you measure this
distance? Conceptually objects are in the same
/ similar / different categories Number of
interactions number of clicks, links,
etc. Time Direction Can navigation be
reversed? Use visual analogies (a horizon line,
a geography) to aid 3D navigation Up is clear
in a branching topology, but not down (down into
which sub-branch?) Media Design Agents
14
CS228 Human-Computer Interaction
Information space design
Create an interface appropriate to the
information space Information space
characteristics Volatility Size Conceptual,
physical and perceptual objects Topology Distance
Direction Media What sensor modalities can be
exploited for the given space? How to exploit
images, video and sound for conveying the spaces
structure? Design Give the space a coherent
design Q how? Agents
15
CS228 Human-Computer Interaction
Information space design
Create an interface appropriate to the
information space Information space
characteristics Volatility Size Conceptual,
physical and perceptual objects Topology Distance
Direction Media Design Agents Objects that have
their own perceptual, movement and cognitive
abilities May be humans, avatars, or non-human
AI agents. Agents may organize the space to make
our navigation easier Librarian may organize
data into easy to recognize categories Virtual
ants travel along links, dropping virtual
pheromone, indicating shortest paths between
locations. Pheromones chemical signals used by
animals to mark the environment