1Fall 2004 6.831 UI Design and Implementation 1 2Fall 2004 6.831 UI Design and Implementation 2 Suggested by Jennifer LinThis is the File Open dialog box from Microsoft PowerPoint. File open dialogs have evolved considerably since they appeared in early graphical user interfaces; early file dialogs just showed the filesystem and gave controls for navigating around it. Current file dialogs like this one do a lot more. What evidence of task analysis – that is, careful thinking about what goals and subgoals a user might have when opening or saving a file – can we find in this interface?One example is the set of shortcut icons on the left side. There are some very common places that users go to open files, like their Desktop or their My Documents folder. The History icon captures another aspect of the file-opening task: that users often need to open a file that they’ve opened recently.If you click on My Network Places, you’ll see more evidence of task analysis: not just a list of the network places that you’ve already created (network places are basically bookmarks pointing to file servers), but also icons for the common subtasks involved in managing the list of network places: Add Network Place to add a new one; and the Network Setup Wizard if you aren’t connected to the network yet.The toolbar icons across the top offer other examples of subtasks of opening or saving a file. Probably the most important is the New Folder icon, which lets you create a new folder to save your file in.It’s worth noting that all these operations are available elsewhere in Windows – recently opened files are found in PowerPoint’s File menu, the Network Setup wizard can be found from the Start menu or the Control Panel, and new folders can be made with Windows Explorer. So they’re here only as shortcuts to functionality that was already available – but shortcuts that serve both learnability (since the user doesn’t have to learn about all those other places in order to perform the task of this dialog) and efficiency (since even if I know about those other places, I’m not forced to navigate to them to get the job done).But you obviously can’t put every possible operation into a dialog box like this, nor would you want to try –usability depends strongly on simplicity. That’s why task analysis is valuable; it helps you select what to include and what to exclude.The pull-down menu under the Open button is also interesting – it shows how several different goals might use this file dialog as a subtask. Open Read-only suggests that I’m opening a file only to look at it. Open a Copy means I want to use the file as a starting point for a new file. Why are these options useful? They’re designed for error prevention: if I use them, they’ll keep me from accidentally overwriting the original file with changes I didn’t want to make. (Unfortunately they’re probably rarely used; despite being a regular user of PowerPoint, I didn’t even notice them until looking closely at this dialog.)3Fall 2004 6.831 UI Design and Implementation 3 Output models Drawing Rasterization Color modelsToday’s lecture continues our look into the mechanics of implementing user interfaces, by looking at output in more detail.Our goal for these implementation lectures is not to teach any one particular GUI system or toolkit, but to give a survey of the issues involved in GUI programming and the range of solutions adopted by various systems. Presumably you’ve already encountered at least one GUI toolkit, probably Java Swing. These lectures should give you a sense for what’s common and what’s unusual in the toolkit you already know, and what you might expect to find when you pick up another GUI toolkit.4Fall 2004 6.831 UI Design and Implementation 4 Components Graphical objects arranged in a tree with automatic redraw Example: Label object, Line object Also called: views, interactors, widgets, controls, retained graphics Strokes High-level drawing primitives: lines, shapes, curves, text Example: drawText() method, drawLine() method Also called: vector graphics, structured graphics Pixels 2D array of pixels Also called: raster, image, bitmapThere are basically three ways to represent the output of a graphical user interface.Components is the same as the view hierarchy we discussed last week. Parts of the display are represented by view objects arranged in a spatial hierarchy, with automatic redraw propagating down the hierarchy. There have been many names for this idea over the years; the GUI community hasn’t managed to settle on a single preferred term.Strokes draws output by making calls to high-level drawing primitives, like drawLine, drawRectangle, drawArc, and drawText.Pixels regards the screen as an array of pixels and deals with the pixels directly.All three output models appear in virtually every modern GUI application. The component model always appears at the very top level, for windows, and often for components within the windows as well. At some point, we reach the leaves of the view hierarchy, and the leaf views draw themselves with stroke calls. A graphics package then converts those strokes into pixels displayed on the screen. For performance reasons, a component may short-circuit the stroke package and draw pixels on the screen directly. On Windows, for example, video players do this using the DirectX interface to have direct control over a particular screen rectangle.What model do each of the following representations use? HTML (component); Postscript laser printer (stroke input, pixel output); plotter (stroke input and output); PDF (stroke); LCD panel (pixel).5Fall 2004 6.831 UI Design and Implementation 5 !! "#$ Component model Each node and edge is a component A node might have two subcomponents: circle and label Stroke model Graph view draws lines, rectangles and text Pixel model Graph view has pixel images of the nodesACBSince every application uses all three models, the design question becomes: at which points in your application do you want to step down into a lower-level output model? Here’s an example.
View Full Document
Unlocking...