1 Direct Manipulation Interfaces . Why buy and use a product? 2 Direct Manipulation Interfaces . Positive acceptance of an application . Mastery of the interface . Competence in performing tasks . Ease in learning originally and in assimilating advanced features . Confidence in the capacity to retain mastery over time . Enjoyment in using the interface . Eagerness to show off interfaces to novices . Desire to explore more powerful aspects 3 Direct Manipulation Interfaces . Attributes of direct-manipulation interfaces . Visibility of the objects and actions of interest • Example: Driving an automobile . Rapid, reversible, incremental actions . Replacement of types commands by a pointing action on the object of interest . Example: Dragging a file to a trash can versus “rm file.doc” • What about: “rm file*.doc”? • What about “rm *.*” with no undo? 4 Direct Manipulation Interfaces . Extensions of direct manipulation . Virtual reality – users are in an immersed environment • Reality is blocked out via a head-mounted display • Hand gestures (via a data glove) allow users to point, select, grasp and navigate . Augmented reality – user remains in normal surroundings, but adds a transparent overlay. • Examples – labeled buildings, hidden plumbing • Google: Project Glass • http://www.youtube.com/watch?v=W2E2zcFt9Xo • http://www.youtube.com/watch?v=tnRJaHZH9lo&feature=related . Tangible user interfaces – users manipulate physical objects • Example – putting several plastic blocks near each other to create an office floor plan 5 Direct Manipulation Interfaces 6 Direct Manipulation Interfaces . Command-line versus display editors versus word processors . The Tubeless Interface 7 Direct Manipulation Interfaces . Command-line versus display editors versus word processors . Single-line and Multi-line Editors (e.g., IBM MVS, VM, TSO, JCL) 8 Direct Manipulation Interfaces . Command-line versus display editors versus word processors . Single-line and Multi-line Editors versus WYSIWYG (what you see is what you get) editors (e.g., Microsoft Word – early 1990s) . Example: Three basic modes of vi • Command mode (Telling the computer what to do: Low level commands, e.g., move the cursor to the right one character) . Default when you enter vi. Most letters, or short sequences of letters, that you type will be interpreted as commands . Pressing Esc when you're in command mode, your terminal will beep at you. This is a very good way to tell when you're in command mode • Insert mode (Entering the content) . Whatever you type is inserted in the file at the cursor position . Press Esc to end insert mode, and return to command mode. • Line mode (Telling the computer what to: High level commands, e.g. Save) . To enter line mode from command mode, type a colon ( : ) . Your cursor moves to the bottom of the screen, by a colon prompt. Type a line mode command, then press Enter. 9 Direct Manipulation Interfaces . Command-line versus display editors versus word processors . Single-line and Multi-line Editors (e.g., vi) Starting vi and Saving Files Starting vi: vi filename (start editing filename, create it if necessary) Saving the file you're working on and/or leaving vi: :wq (write the file to disk and quit) Quit without saving any changes: :q! :w! newfile (write all lines from the entire current file into the file 'newfile', overwriting any existing newfile) :n,m w! newfile (write the lines from n to m, inclusive, into the file newfile, overwriting any existing newfile) 10 Direct Manipulation Interfaces . Command-line versus display editors versus word processors . Single-line and Multi-line Editors Type To Move To h one space to the left (also try left arrow) j one line down (also try down arrow) k one line up (also try up arrow) l one space to the right (also try right arrow) $ end of current line ^ beginning of current line Enter beginning first word on the next line G end of file :n line n; use :0 to move the beginning of the file w beginning of next word; 5w moves to the beginning of the 5th word to the right e end of next word b beginning of previous word Ctrl-b one page up Ctrl-f one page down % the matching (, ), [, ], {, or } (Press % with your cursor on one of these characters to move your cursor its mate.) 11 Direct Manipulation Interfaces . Command-line versus display editors versus word processors . Single-line and Multi-line Editors • Searching for text Type To /string search down for string ?string search up for string n repeat last search from present position • Inserting text Type To a append starting right of cursor A append at the end of the current line i insert starting left of cursor I insert at beginning of the current line o open line below cursor, then enter insert mode O open line above cursor, then enter insert mode :r newfile add the contents of the file newfile starting below the current line 12 Direct Manipulation Interfaces . Command-line versus display editors versus word processors . Single-line and Multi-line Editors • Deleting text Type To x delete single character; 5x deletes 5 characters dw delete word; 5dw deletes 5 words dd delete line; 5dd deletes 5 rows cw delete word, leaves you in insert mode (i.e. change word) cc change line -- delete line and start insert mode s change character -- delete character and start insert mode D delete from cursor to end of line C change from cursor to end of line -- delete and start insert mode u undo last change U undo all changes to current line J join current line with line that follows (press Enter in insert mode to split line) 13 Direct Manipulation Interfaces . Command-line versus display editors versus word processors . Single-line and Multi-line Editors • Cutting and Pasting Type To xp transpose two characters (two commands, x followed by p) yy yank (i.e. copy) one line into a general buffer (5yy to yank 5 lines) "ayy yank into the buffer named a P put the general buffer back before the current line "aP put from buffer a before current line p put the general buffer back after the current line "ap put from buffer a after the current line • Miscellaneous Commands Type To Ctrl- g show line number of current line Ctrl- l redraw the entire display 14 Direct Manipulation Interfaces . Command-line versus display editors versus word processors . Early 1980s – Text editing was done with line-oriented command languages . Nroff/troff: Unix based word processor .nf = no-fill, you use for graphs or text that you don't want spaces to be ignored .ce # = centers by the # of sentences you enter .ti # = .ti indents but only for one line, so if you have one sentence that needs to be indented 8 spaces but the rest of the page is indented 3 you can use .ti 8 for that single sentence .fi = fill-in, extra space will be ignored and text that is entered like this, the fill-in command will continue until you enter a .nf command and vice-versa .in # = # is the number of spaces you want the text indented, this command will be in place until you put in a new .in command...if you want something to not be indented you put in .in 0 15 Direct Manipulation Interfaces . Command-line editors . Who would use these interfaces? . Why? 16 Direct Manipulation Interfaces . Command-line editors . Who would use these interfaces? . Why? • Mastery of the interface • Competence in performing tasks • Ease in learning originally and in assimilating advanced features • Confidence in the capacity to retain mastery over time • Enjoyment in using the interface • Eagerness to show off interfaces to novices • Desire to explore more powerful aspects 17 Direct Manipulation Interfaces . Command-line editors . Who would use these interfaces? . Why? • BETTER THAN A TYPEWRITER • BETTER THAN A SLIDE RULE • BETTER THAN A CALCULATOR 18 Direct Manipulation Interfaces . Advantages of WYSIWYG Editors . Users see a full page of text • 20 to 60 lines provides a context for each sentence . The document is seen as it will appear when printed • Eliminating the clutter of formatting commands . Cursor action is visible • Indicates where to focus attention and apply action . Cursor motion is natural • Arrow keys or mouse provide natural physical mechanisms for moving the cursor . Labeled icons make frequent actions rapid • Toolbar for frequent actions . Immediate display of the results of an action • Example: Clicking a button to center text provides immediate result . Rapid response and display • Full page of text in a fraction of a second . Easily reversible actions • Example: Undo, backspace 19 Direct Manipulation Interfaces . Technology advancements evolving from word processing . Integration of graphics, spreadsheets, animations, photographs, etc. Desktop publishing software . Presentation software . Hypermedia environments and the World Wide Web (hyperlinks to documents) . Improved macro facilities (e.g., construct, save and edit sequences of frequently used actions) . Spell checkers and thesauri . Grammar checkers • Use of passive voice • Excessive use of certain words • Lack of parallel construction . Document assemblers • Contracts • Wills 20 Direct Manipulation Interfaces . Spreadsheets . 1979 – VisiCalc from a Harvard Business School student . 254 rows and 63 columns . Functions within a cell as it relates to other cells . Simulation of an accountants spreadsheet . Lotus 1-2-3 dominated the market in the 1980s . Today Excel dominates • Graphics displays • Multiple windows • Statistical routines • Database access (e.g., Price List to Service Catalog) 21 Direct Manipulation Interfaces . Spatial Data Management . Direct Touch Displays – Nicholas Negroponte at MIT 22 Direct Manipulation Interfaces . Spatial Data Management . ArcView – ESRI • Global Information Systems (Demo) • Select type of information to display (roads, population, rainfall, topography, political boundaries 23 Direct Manipulation Interfaces . Video Games . The most exciting, well-engineered, commercially successful application of direct-manipulation concepts? . Pong . Pacman (http://www.activitypad.com/online-games/pacman/) . Field of action is visual and compelling .