24InteractionTechnique--tools

下载 0

知秋一叶

发布于

1880

人观看

#信息技术

The course is mainly about Implementation Techniques and Tools for Interaction Techniques.Generally covered User Interface Software;Operating System;Windowing System;Toolkits;Graphical Interactive Tools;Prototyping Tools;Interface Builders and so on.

展开查看详情

3 .User Interface Software How to implement the user interface portion Including how to implement widgets & other interaction techniques Various ways have been proposed over time Different layers HCII courses about UI software: PUI SSUI 05-830: “Advanced UI Software” 3 © 2014 - Brad Myers Application Higher Level Tools Toolkit Windowing System Operating System

4 .Operating System Examples: Microsoft Windows, Macintosh OS, iOS , Android, Linux In the “old days”, custom “operating systems” for Smalltalk, Bravo editor, Xerox Star, etc. Handles low-level “device drivers” that take hardware inputs from keyboard, mouse, microphone, USB, etc. Also screen drivers to allow output to screen, sounds, etc. Also other services, like file system, networking, etc. Libraries in Java, JavaScript, Adobe Flash ActionScript , etc. that provide “wrappers” to provide this same functionality 4 © 2014 - Brad Myers

5 .Windowing System Also called “Window Manager” Separate the input and output into different areas Provide graphics libraries and input handling per window Also provides user interface features for users to control the windows 5 © 2014 - Brad Myers

6 .Toolkits A library of interaction techniques that can be called by application programs Toolkits u sed only by programmers, only procedural interface Multiple layers in the toolkit itself Including ways to implement the widgets themselves Examples: Macintosh Toolbox Windows Toolkit xtk for X (Motif and OpenLook ) Java Swing and awt and swt html for output, with input controls for input JavaScript jQuery & many others Research: Garnet & Amulet, etc. 6 © 2014 - Brad Myers

7 .7 Toolkits Success Help maintain consistency among UIs Key insight of Macintosh toolbox (1984) Not just that the Macintosh UI guidelines required consistent look and feel Path of least resistance translates into getting programmers to do the right thing Successful partially because address common, low-level features for all UIs Address the useful & important aspects of UIs © 2014 - Brad Myers

8 .8 Graphical Interactive Tools Use a mouse to drag-and-drop parts of the user interface Create or use widgets Examples: Menulay (1983), Trillium (1986), Jean-Marie Hullot from INRIA to NeXT Now: Interface Builders, Visual Basic’s layout editor, resource editors, prototyping tools Advantages: Graphical parts done in an appropriate, graphical way Address the useful & important aspects of UIs Accessible to non-programmers Low threshold © 2014 - Brad Myers

9 .Prototyping Tools Just show what looks like Storyboard of screens “Click-through prototypes” Some support for behavior: typically changing screens Goal : see some of interface very quickly (hours) Often no possibility of migrating to real application May not use "real" widgets "Low Fidelity" Techniques 9 © 2014 - Brad Myers

11 .Interface Builders Also called Interface Development Tools (IDTs) or GUI Builders or “resource editors” Use widgets (not create them) Lay out widgets to make dialog boxes, menus. Have a palette or menu of kinds of widgets Select widget, place with mouse in a window Set some properties Design menus, palettes, dialog boxes, controls Put in “graphics” pane for main application window Easy to use, but limited Connect call-backs with each widget 11 © 2014 - Brad Myers

12 .Interface Builders Also called Interface Development Tools (IDTs) or GUI Builders or “resource editors” Use widgets (not create them) Lay out widgets to make dialog boxes, menus. Have a palette or menu of kinds of widgets Select widget, place with mouse in a window Set some properties Design menus, palettes, dialog boxes, controls Put in “graphics” pane for main application window Easy to use, but limited Connect call-backs with each widget 11 © 2014 - Brad Myers

13 .Interface Builders Also called Interface Development Tools (IDTs) or GUI Builders or “resource editors” Use widgets (not create them) Lay out widgets to make dialog boxes, menus. Have a palette or menu of kinds of widgets Select widget, place with mouse in a window Set some properties Design menus, palettes, dialog boxes, controls Put in “graphics” pane for main application window Easy to use, but limited Connect call-backs with each widget 11 © 2014 - Brad Myers

15 .15 Software Organizations Ways to organize code, rather than tools. "Models" Helps think about modularization and organization. Goal: separation of UI and rest of software = “semantics” © 2014 - Brad Myers

16 .16 Model-View-Controller Invented in Smalltalk, about 1980 Usual reference: Glenn E. Krasner and Stephen T. Pope. “A Cookbook for Using the Model-View-Controller User Interface Paradigm in Smalltalk-80,” Journal of Object Oriented Programming. Journal of Object Oriented Programming. Aug, 1988. 1(3). pp. 26-49. http://www.ics.uci.edu/~ redmiles/ics227-SQ04/papers/KrasnerPope88.pdf Idea : separate out presentation (View), user input handling (Controller) and "semantics" (Model) which does the work Fairly straightforward in principal, hard to carry through Never adequately explained (one article, hard to find) Goals Program a new model, and then re-use existing views and controllers Multiple , different kinds of views on same model © 2014 - Brad Myers

18 .18 MVC Standard interaction cycle: User operates input device, controller notifies model to change, model broadcasts change notification to its dependent views, views update the screen. Views can query the model Problems : Views and controllers tightly coupled What is in each part? Complexities with views with parts, controllers with sub-controllers, models with sub-models... © 2014 - Brad Myers

19 .Research: Garnet / Amulet My research projects to investigate better ways to build user interfaces Create and use widgets Garnet ( 1987-1994 ) in Lisp G enerating an A malgam of R eal-time, N ovel E ditors and T oolkits Amulet ( 1994-1997 ) in C++ A utomatic M anufacture of U sable and L earnable E ditors and T oolkits Same architecture Low and high-level tools 19 © 2014 - Brad Myers

21 .21 Types of Interactors Am_Choice_Interactor : select one or more of a set of objects Am_One_Shot_Interactor - single action, like Choice Am_Move_Grow_Interactor : move or grow objects with the mouse Am_New_Points_Interactor: to create new objects by entering points while getting feedback "rubber band" objects Am_Text_Edit_Interactor : mouse and keyboard edit of text Am_Gesture_Interactor: interpret freehand gestures © 2014 - Brad Myers

23 .Research: Peridot (1986-88) Myers B. "Creating User Interfaces Using Programming-by-Example, Visual Programming, and Constraints," ACM Transactions on Programming Languages and Systems. vol. 12, no. 2, April, 1990. pp. 143-177. ( Peridot ) Myers B., Creating User Interfaces by Demonstration, Academic Press, San Diego, 1988. Myers B., "Creating Interaction Techniques by Demonstration," IEEE Computer Graphics and Applications, Vol. 7, No. 9, IEEE, September 1987, pp. 51 - 60. First demonstrational tool, and it used by-example techniques to allow the creation of new widgets. From the drawings, it infers: Graphical constraints among the objects, such as that the boxes should be the same size as the text. control structures such as iteration over all the items in a menu how the mouse affects the graphics, such as that the check mark should follow the mouse. feedback: question and answer video (8 min) 23 © 2014 - Brad Myers

26 .26 graphical-user interfaces (GUIs) defined by: look (appearance, relatively easy) feel (behavior, relatively difficult)

27 .27 interactive behaviors normally programmed using event-callback paradigm specify what actions to take in reaction to events with callbacks leads to error-prone code [ Letondal 2010, Myers 1991]

28 .28 constraint a relationship that is declared once and automatically maintained

29 .29 constraint a relationship that is declared once and automatically maintained the toolbar is displayed above the workspace

0点赞

0收藏

0下载