<<

WIMP interfaces

• WIMP = Windows, Icons, Menus, Pointers – they’re everywhere! – in fact, after circa 1983, the vast majority of Lecture 12: interfaces are based on the WIMP paradigm Beyond WIMP • e.g., think about Windows vs. vs. UNIX-based managers – some exceptions... • e.g., text terminals, game systems – ... but generally, WIMPs rule!

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 1 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 2

Evolution of (& users) Beyond WIMP

Hardware Operating Programming Terminal Advertising Generation User types paradigm technology mode languages technology image • WIMP has been around a while, and probably One user at a TTY, Vacuum tubes, huge 1 time "owns" Machine typewriter. will remain on the scene for a long time. machines, much Experts, as 1945-1955 machine (but language Only used in Programming cooling, short mean pioneers calculator Pioneer for a limited 001100111101 the computer time between failures. time only) center. • But let’s think forward. Batch ("computer as Transistors; more What’s the next step? 2 temple" - Line-oriented Technocrats, Computer as reliable. Computers Assembler ADD 1955-1965 make terminals professional information Command languages start seeing use A,B Historical offerings to ("glass-TTY") computerists processor outside the lab. – Nielsen: “virtual realities, head-mounted displays, sound get oracle replies) and speech, pen and gesture recognition, animation and Full screen Specialized Integrated circuits. Timesharing terminals, groups without multimedia, limited , and highly 3 Businesses can cost- (online "High-level" Mechanization alphanumeric computer Full-screen strictly hierarchical 1965-1980 justify buying transaction languages, of white-collar portable computers with cellular or other wireless characters only. knowledge menus and form fill-in Traditional computers for many processing Fortran, Pascal labor Remote access (e.g. bank needs. systems) common. tellers) communication capabilities” (?!) Graphical Problem Personal 4 VLSI. Individuals can Single user displays with Business oriented productivity WIMP (Windows, Icons, – increasing computing power makes this possible 1980-1995 buy their own personal fair resolution. professionals, languages, (computer as Menus, and a Pointing device) Modern personal computer computers Desktops and hobbyists spreadsheets tool) heavy portables. – but can all this be in a single interface? "Dynabook" Wafer-scale Networked [61], maybe not... that’s yet another difference! 5 integration, computer- single user Non-imperative, multimedia I/O, Computer as Noncommand interfaces 1996-? on-a-chip. Individuals systems and possibly Everybody easily portable, entertainment • interfaces may become more task/user specific Future can buy many embedded graphical with cellular computers. systems modem.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 3 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 4

Page 1 Functional vs. Object-Oriented One step forward...

• “Old-school” interfaces are functional • Thought exercise in requiring specification of entire function – imagine you have access to a movie database – uses a “verb-noun” syntax • database = info about films, actor/actresses, etc. – e.g., “rm foo”, “emacs file.java” – how can you answer questions like... • Current GUIs are object-oriented • In what films did Harrison Ford star between 1980-90? – uses a “noun-verb” syntax • In what films did Julia Roberts and Richard Gere costar? – e.g., select , drag to trash / select “Open” • What are the most popular Sci Fi movies of 1993? • What seems to be coming on the horizon? – “syntax-free” interfaces – well, at least syntax-flexible • can specify noun-verb, or verb-noun, or something radically different... just like communication w/ people

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 5 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 6

One step forward... Non-command interfaces

• Ahlberg & Shneiderman’s FilmFinder • Idea: user and computer interact not through a dialogue of commands and responses, but through a complex, dynamic, continuous interaction • Huh? What’s that? • Nielsen’s 12 “interaction characteristics” for next-generation, non-command software – not all applications will incorporate all 12 – rather, it is expected that many applications will incorporate a significant subset of the 12

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 7 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 8

Page 2 1. User focus 2. Computer’s role

• Interaction feels like “using a computer”, • Old: “Do what you’re told” not working on a task (according to Nielsen) New: “Do what I mean!” • With NC interfaces, focus = task... • Great idea... but why is this hard? features come for free implicitly • Example: Intelligent tutoring • Example: – monitor what the student knows Portholes – interrupt with instruction when necessary system • Example: Model tracing / “Mind tracking” – update – infer student knowledge, or disabled user’s every 5min intentions, or driver’s intentions... – implicit awareness

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 9 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 10

3. Interface control 4. Syntax

• Old: User controls computer • Old: Rigid interaction “syntax” New: Computer controls interaction New: No / little syntax • Examples: warn user of incoming email, • Example: deleting files infer current writing task and provide – way #1: select and delete (noun-verb) template, etc. – way #2: say “remove all *.java files” (verb-noun) • BUT this is very hard to do well – can we integrate multiple methods? – must avoid interrupting the user • Example: writing math expressions – guesses / inferences had better be right! – try not to require top-down or bottom-up

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 11 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 12

Page 3 5. Object visibility 6. Interaction stream

• Old-school interfaces with “direct • Old: Single-threaded input / output manipulation” require visible objects New: Multi-threaded, multimodal • New interfaces could manipulate objects • Example: “Put that there!” implicitly through higher-level interactions, – point to display wall at object or with hidden agents – say “Put that”... point to destination... “there” • Might this be dangerous? • Example: eye-driven window interface – user doesn’t know about manipulation File Edit Special – can be good, can be bad Birds Zoo Zoo

hawk dove Birds Fish

Done Trash

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 13 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 14

7. Bandwidth 8. Tracking feedback

• Old: Low input bandwidth (keys, mouse) • Old: Feedback only after completed input New: Very high bandwidth New: Continuous feedback on-the-fly • Systems may incorporate motion tracking, • Example: Emacs search (sort of) virtual reality, speech, “peripheral” input • Example: movie database • Difficulties • Interface should react like the real world – requires lots of processing power, both for – again, input-output lag is an issue accepting input and interpreting it – again, processing power is an issue – lags are unacceptable! (e.g., motion sickness in virtual environments)

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 15 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 16

Page 4 9. Turn-taking 10. Interface locus

• Old: First user, then computer, then user... • Old: Computer on the desk New: Continuous stream for both New: Computers everywhere • Closely related to feedback... computer is • Ubiquitous computing from... always responding, so there’s never a “turn” – smaller, lighter “computers” • How does this map onto the real world? • e.g., PDAs, calculators, watches – when we interact with the inanimate world? – computers built into everyday objects • e.g., ovens, cars, shopping carts • e.g., walking through the park, playing basketball – when we interact with the animate world? – computers built into not-so-everyday objects • e.g., pet dog robots • e.g., talking to someone, interacting with a pet – we sometimes take turns in the real world... • Good for awareness, “telepresence”; why not in a user interface? dangerous for privacy?

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 17 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 18

11. User programming 12. Software packaging

• That is, programming for end users • Old: Application-centered approach • Old: (Usually) hard-core macro languages New: System-wide, OO approach New: Smooth adaptation of objects • Example: spell checkers • Example: object-oriented customization – should be only one for your entire system – “take your basic” “but make the” – does have this right?? “behave like this...” • integrated across Word, Excel, PowerPoint, email – if possible, can specify with state transitions • easier to do for a single vendor, and has the • like storyboards, or like SILK’s behaviors unfortunate side effect of monopolization • BUT in the end, complex programs require • open source, open standards — but can we really complex languages arrive at a true standard? – hard (for me) to envision huge successes here

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 19 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 20

Page 5 Sample noncommand interface domains HC“Eye”

• Interface agents • Human --> machine communication... – provide active help, reminders, etc. – keyboard, mouse • Embedded help – speech, handwriting, gestures – actually show the process, guiding the user’s – poking (CRL Kiosk), tickling (Tickle-Me Elmo) !! “hand” to the right places • Computer music • Gaze-based interfaces (GBIs) – computer listens, plays along, harmonizes, etc. – users control the interface using gaze / eye movements – typical focus on disabled users – gaze is often the only (primary) input

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 21 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 22

Gaze-Added Interfaces (GAIs) Case Study: IGO

• Users control the interface using gaze and/or other inputs File Edit Special • Gaze added to basic/existing input

instead of replacing it Birds Zoo • Users can… Zoo – employ only basic inputs

– employ only gaze input hawk dove – employ any combination of basic / gaze Birds Fish

Done Trash

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 23 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 24

Page 6 Gaze-Added Input Intelligent Interpretation

• Gaze focus: background highlight • All GBIs must interpret gaze – i.e., assign gaze to intended object File Edit Help hawk • Gaze : (keyboard) key • Standard interpretation • Gaze control analogous to mouse – assign gaze to underneath / nearest object – click for select • Intelligent interpretation – double-click for open – assign gaze to most likely object – hold for drag – use probabilistic model of behavior

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 25 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 26

Intelligent Interpretation Intelligent Interpretation

• Find object that maximizes Pr (gaze|object) • Pr (object|history)

File Edit Help Edit Edit Copy Copy

Paste Paste

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 27 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 28

Page 7 Evaluation Study Task Times

• Training Stage (8 blocks of 10 trials) • No difference between gaze and mouse – gaze only or mouse only 10 • Free Stage (2 blocks of 10 trials) 9 8 – gaze and/or mouse as desired 7 6 • Trial = one of five tasks (5-10 s) 5 4 Gaze – select icon, close window, open window 3 Mouse 2 Free (double-click), select (drag), 1 move icon (drag) 0 Train Train Train Train Free Free • Ten users with no GBI experience 1 2 3 4 1 2 B l o c k

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 29 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 30

Task Errors Free Stage Gaze Use

• More errors with gaze than mouse • Overall gaze use = 67% • Errors in free stage –> gaze use • Correlated to (gaze–mouse) times (R=.70)

100 100 90 90 80 80 70 70 60 60 50 40 Gaze 50 30 Mouse 40 20 Free 30 10 20 0 10 Train Train Train Train Free Free 0 1 2 3 4 1 2 1 2 3 4 5 6 7 8 9 10 B l o c k U s e r

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 31 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 32

Page 8 Gaze Use by Action Type Intelligent Interpretation

• Less complex actions –> more gaze use • Comparison of correctness with... – intelligent interpretation 100 90 – “no-context” interpretation: 80 assign gaze to nearest object 70 60 – “basic” interpretation: 50 assign gaze to underneath object 40 30 20 10 0 Select Close Open Menu Move Action

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 33 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 34

Lessons Learned Thought question…

• Gaze nicely complements other inputs • Ok, let’s try to put all this to use. – users quickly adapt to gaze input • We know how a typical web browser looks – users successfully interleave gaze, mouse • Can we design a new one “beyond WIMP”? • Common difficulties – “leave before click” – gaze dragging – handling two “cursors” • Intelligent interpretation helps – eye trackers will improve, but variability will remain – better eye tracking –> greater

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 35 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 36

Page 9 On Beyond GUI: Wearable Wearable, Heterogeneous, Adaptive . Corners of watch • Cursorless bezel serve as “tactile • Eyes-free landmarks” to Steven Feiner guide user’s finger Computer Graphics & User Interfaces Lab Department of Computer Science Columbia University New York, NY 10027

Supported in part by AFRL, NSF, ONR, and gifts from Alias Systems, IBM, Mitsubishi Electric Research Labs, and Microsoft

CHI 2006 Workshop: What is the Next Generation of Human-Computer Interaction? Montreal, Canada April 23, 2006 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 37 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 38

Wearable Wearable

• Cursorless • Cursorless • Eyes-free • Eyes-free

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 39 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 40

Page 10 Heterogeneous Heterogeneous

• Coordinated use of different displays • Coordinated use of and interaction dimensionalities devices – “Pull” 2D image – Multiple displays into 3D model • Projected desktop • Handheld – “Push” 3D model • High-res monitor into 2D image • See-through head- worn – Multiple interaction devices • Multi-touch table • Tracked hands/ heads • Speech

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 41 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 42

Adaptive Adaptive

• Change user • Change user interface in interface in response to response to environment environment – Modify – Modify layout of transparency virtual to reveal objects to important avoid content on overlap in AR desktop

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 43 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 44

Page 11 Three Themes for Future UIs

• Wearable – Cursorless  Eyes free, glanceable,… • Heterogeneous – Mix of users, displays, devices, dimensionalities,… • Adaptive – Dynamically modified in response to changes in environment, tasks,…

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 45

Page 12