6.831 User Interface Design & Implementation Fall 2005 Quiz 2 This quiz is closed book, closed notes. You have 80 minutes to complete it. Your name: ___________________________________________________ 1. (6 points) Louis Reasoner is creating an interface that visualizes all the files on a filesystem. Using the theory of visual variables, discuss each of his design choices, and propose an alternative visual variable that might be better. (a) File age is represented by hue: the oldest files are yellow, medium-age files are blue, and the latest files are green. Hue isn’t a great choice here, because it’s not perceptually ordered, but the data variable (age) is ordered. Hue also is a fairly short variable, with only 10 or so easily distinguishable levels, but age may be very long (spanning from minutes ago to years ago). A better visual variable might be position (along a timeline, say). (b) File type is represented by a short extension, like .mp3 or .txt. This uses shape as the visual variable. Shape is not selective, so the eye can’t easily pick out all the .mp3 files from the visualization. A better variable might be hue, which is selective, although short. (c) File size is represented by the font size of the filename and the size of the icon. Size is also short, and it’s disassociative – small files will make it harder to detect other visual variables, like the shape of the extension. A better variable might be position (on a vertical scale, for example).2. (3 points) Here are two interfaces for displaying information: Interface A: Interface B: Mentioning specific rules of simplicity and contrast, explain why interface B has a better graphic design than interface A. B is simpler because each element does double-duty as both a label and a data value (e.g. www.hcibib.org/ instead of URL: www.hcibib.org/). B has better contrast between elements because it uses redundant visual variables: e.g. the title is larger, underlined, and colored differently from the rest of the display. 3. (3 points) Which Gestalt rule of grouping is most relevant to white space, and why? Proximity, because whitespace pushes elements farther apart or brings them closer together, changing the way we perceive how the elements are grouped.4. (6 points) When Louis Reasoner writes papers, his section heading levels look like this: Title (12-point Arial) Section (12-point Courier New) Subsection (12-point Times New Roman) By appealing to graphic design principles, explain why this is a bad design. Give as many reasons as you can. This design depends on differences in shape (font face) to distinguish the section heading levels. It’s bad because (1) shape is unordered, but hierarchical ordering is essential to the nature of section headings; (2) only one visual variable is used, rather than sharpening contrast by using redundant variables; (3) shape is not selective, so it’s much harder to scan through the paper looking at the headings for a single level (such as Chapter). 5. (6 points) A dialog box has four components (shown below in arbitrary locations). In the empty box below, draw a good layout of the four components, and label on your drawing the important alignment relationships and whitespace decisions. 6. 742 Evergreen Terrace Homer Simpson Name: Street: Your layout: The components: 742 Evergreen Terrace Homer Simpson Name: Street: left edge aligned left edge aligned right edge aligned baselines aligned balanced top & bottom margins, in good proportion to content balanced left & right margins horizontal gap between label and field, small enough to group them vertical gap between fields, small enough to group them(6 points) Ben Bitdiddle’s interface uses three colors (in addition to black and white): pure red (RGB=255,0,0), pure green (RGB=0,255,0), and pure blue (RGB=0,0,255). Give two reasons supporting his color design, and two reasons against it. Pro: (1) the design uses only a small number of colors; (2) those colors use the full length of the hue and value visual variables, maximizing the contrast. Con: (1) the colors are fully saturated, which tires the eye; (2) red and green can’t be distinguished by red-green colorblind users. 7. (3 points) Explain how each of the three output models is handled by a typical GUI builder. Components: a typical GUI builder has a palette of components that can be added to the UI. Strokes: strokes must be encapsulated in a custom component in order to be added to the UI. Pixels: images can be placed directly in the UI using an image or label component. 8. (4 points) Give one advantage and one disadvantage of using widgets to design a UI. Advantages: (1) external consistency with other applications using the same toolkit; (2) reuse of code and user interface design. Disadvantages: (1) widgets constrain the designers’ thinking, overlooking potentially better designs that might need custom UI; (2) widgets can be misused, wedged into a purpose that they aren’t suited for.9. (6 points) In a Virtual Salad Bar program, the user can choose at most one salad dressing: Italian, Ranch, or French. Draw four different reasonable ways to design this interface using standard widgets, and discuss the tradeoffs between them. 3 radio buttons 3 toggle buttons single-selection listbox with 3 choices drop-down menu with 3 choices Screen space: the drop-down menu saves screen real estate relative to listbox and radio buttons, or toggle buttons with text labels; toggle buttons with icon labels are use the least space. Pointing efficiency: textual toggle buttons and listbox items have the biggest targets; radio buttons have big labels, but encourage aiming only for the little circle. Drop-down menu requires two pointing actions to change. Scaling: listbox and drop-down scale better to many choices (with scrolling and jumping on keypress) 10. (6 points) Discuss the usability advantages and disadvantages of tab pane widgets. Advantages: (1) familiar real-world metaphor; (2) fast navigation by a single pointing action; (3) the tab offers an affordance for operating on a pane (e.g. closing it). Disadvantages: (1) doesn’t scale beyond a single row of tabs, which limits the total number of tabs and the length of visible label on each tab; (2)
View Full Document
Unlocking...