6.831 | Spring 2011 | Graduate

User Interface Design and Implementation

In-Class Activities

Selected activities are available below. The remaining sessions either did not have in-class activities or contained content that could not be made available here.

SES # TOPICS
1 Usability
2 Learnability
3 Visibility
4 Efficiency
5 Errors and user control
6 User-centered design
7 Task analysis
8 Generating designs
9 User interface (UI) software architecture
10 Layout
11 Output
12 Input
13 User testing
14 Controlled experiments
15 Experiment analysis
16 Web-scale research methods
17 Prototyping
18 Graphic design
19 Information visualization
20 Color design and typography
21 Accessibility
22 Internationalization
23 Heuristic evaluation
24 Animation
25 Input/output technology
26 Mobile user interfaces

The purpose of this activity is to experience what it’s like to use a web page with screen reader software.

Go to WebAnywhere, a free, public screen reader implemented as a web proxy. Look over the instructions (particularly the keyboard shortcuts!) and play with it a bit on WebAnywhere’s home page.

Then use WebAnywhere to visit this page (note that you won’t see anything, but you’ll hear it), and try to answer these questions:

  1. What page is this?
  2. Who is profiled today?
  3. What is today’s spotlight?

Assuming you figured out the answer to #1, now go to the real web page and see how easy it is to answer these questions visually by comparison.

Other Resources

WebAIM (an organization at Utah State University) has created several good simulations of accessibility problems.

Mac OS X has a built-in screen reader called VoiceOver (which you can turn on using System Preferences / Universal Access). For Windows, the screen readers JAWS and Window Eyes both have time-limited trial versions that you can install to see what screen reading is like.

ADesigner helps you check the degree of accessibility of a web page to a screen reader. Among its nice features is a visual display (for the sake of sighted designers) of the time cost of reaching each HTML node in the page using a typical screen reader.

The purpose of this activity is to explore some of the principles and pitfalls of color design and typography.

Judging Color Schemes

Choose a web page whose color scheme you like or dislike. If none come to mind, here are a few suggestions:

Write down the main foreground and background colors it uses. Use simple terms like “dark red” or “pale blue”. Qualitatively speaking, what are the hue, saturation, and value of each one?

Judge the legibility of the color scheme. Does foreground text have good contrast with background text?

Evaluate it with a squint test. What colors “pop out”? Are these colors used for parts of the page that should attract notice?

Evaluate it for color-blind users. Use VisCheck to look at the web page as a deuteranope would see it. (VisCheck can translate simple web pages straight from a URL, but for complex pages you may need to take a screenshot and submit it as an image.) How does it fare now for legibility and squint test?

Exploring Typefaces

For this part, you’ll need to use Mozilla Firefox with the Firebug extension installed, so that you can tweak properties of font and spacing dynamically and see their effects.

Open up Firebug by clicking on the little insect icon in the lower right corner of the Firefox window, and use its Inspect feature to locate the paragraph below:

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

But, in a larger sense, we can not dedicate—we can not consecrate—we can not hallow—this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth.

In Firebug’s Style panel on the right side, pull down Options and choose Show Computed Style so you can see the paragraph’s current CSS styles. The top part of the style list (Text) is what we’re interested in. Right-click on the Style pane and select Edit Element Style so that you can tweak some of the parameters below and see how they affect the paragraph:

  • Change font-family to Garamond. (If you don’t see a change, you may not have Garamond installed; try Arial or Georgia instead.) How does the color of the paragraph change when you change the typeface?
  • Change font-size to 12pt and line-height to 12pt. How does 12 point text on 12 point leading look? Loosen up the leading until you’re happy with it.
  • Change width to 20em. How does the paragraph look now? Adjust the width until it feels right to you.

The purpose of this activity is to learn more about predicting efficiency using engineering models, specifically the keystroke-level model discussed in class.

Suppose we’re designing a form for entering an address, and we’re trying to decide between the two alternative interfaces for entering a US state shown below. The interface on the left is a drop-down menu with a list of states to choose from, and the interface on the right is a text field for entering the state’s 2-letter abbreviation (e.g. MA for Massachusetts).

State: select a state Alabama Arizona Arkansas California Colorado Connecticut Delaware District of Columbia Florida Georgia Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming State:

Use the keystroke-level model to model the process of choosing Massachusetts using each of the following methods. Assume that the keyboard focus is already on the State field, and the user’s hands are already on the device they need. Start by writing down the actions required; then assign K, B, P, H, and M labels to each action; and finally estimate the total time using the KLM calculator found below.

Method A: Using the mouse to pick Massachusetts from the drop-down menu. (Use the simplest form of the Pointing operator to estimate the times.)

Method B: Using the keyboard to pick Massachusetts from the drop-down menu. (There are several ways to do this; pick one.)

Method C: Using the keyboard to type MA into the text box.

Keystroke Level Model (KLM) Calculator

function recalculate() { var time = klm(get(“actions”).value) get(“time”).innerHTML = time } function klm(str) { var t = count(str, “K”) * get(“K”).value + count(str, “B”) * get(“B”).value + count(str, “P”) * get(“P”).value + count(str, “H”) * get(“H”).value + count(str, “M”) * get(“M”).value return t.toFixed(2) } function count(str, letter) { var matches = str.match(new RegExp(letter,“gi”)) return matches ? matches.length : 0 } function get(id) { return document.getElementById(id) }

Enter an action string below to calculate its cost in the Keystroke Level Model.

Actions:   
Time:  5.50 sec
  Keystroke sec
  Button sec
  Point sec
  Home sec
  Mental sec

References

The purpose of this activity is to explore the undo models used in single-user text editing. You will find a few different kinds of textboxes below. Experiment with your web browser’s undo model for text editing by typing, deleting, changing properties, and using Undo. Try to figure out:

  • how many undo streams are there—one, or many?
  • how is the history divided into undoable units?
  • how much previous state is recovered when you undo? (selections? cursor positions?)
  • what visible feedback does Undo give? (e.g., if the Undo affects a location scrolled out of the box?)

One line, plain text

Multi-line, plain text

I never saw a Purple Cow, I never hope to see one. But I can tell you, anyhow, I’d rather see than be one.

Multi-line, rich text

Bold Italic

Reply (To The “Purple Cow”)
by Gelett Burgess
_Apres Cinq Ans,_1914

Ah, yes, I wrote the “Purple Cow”–
I’m sorry, now, I wrote it!
But I can tell you anyhow,
I’ll kill you if you quote it.

The purpose of this activity is to practice analyzing experiment results by applying the t test. The data you will analyze will be simulated data, randomly generated by a web service.

For this activity, you will need to use:

The data generator requires two inputs: an experiment and an experimental design. For this activity, we will use the Point-and-click experiment, which simulates the time it takes for a user to point and click a particular target on screen using up to three different pointing devices (a mouse, a trackpad, and a trackball). The other input, the experiment design, is a string specifying the conditions and trials made by each user in the experiment.

The output of the data generator is tab-separated-value data, which you can copy and paste into a spreadsheet to rearrange and compute statistics, and then transfer to the t test calculator to perform the statistical test.

Between-Subjects

Generate data from the Point-and-Click experiment using the experiment design MMMM,MMMM,MMMM,PPPP,PPPP,PPPP. (How many users and trials is this?)

Move the data to your spreadsheet. It’s a good idea to split the time column into two side-by-side columns, one for the mouse condition (M) and one for the trackpad condition (P).

Use the spreadsheet to compute the mean (called AVERAGE in most spreadsheets), standard deviation (STDEV), and standard error (STDEV/sqrt(n)) of each condition. If you graphed the two means with error bars, would the error bars overlap?

Run a t test on this data at the 5% significance level. Determine the p value, the value of the t statistic, and the degrees of freedom.

Within-Subjects

Generate data from the Point-and-Click experiment using the experiment design MMPP,MMPP,MMPP,MMPP. (What’s the risk of this experiment design?)

Move the data to your spreadsheet. Line up each user’s M and P trials side-by-side.

Run a paired t test on this data at the 5% significance level. Determine the p value, the value of the t statistic, and the degrees of freedom.

The purpose of this activity is to practice designing UIs by sketching. Your goal is to design an interface for controlling the LCD projectors in a classroom like this one. Here’s some relevant information from analysis.

Hardware

The room you’re designing for has:

  • Two video signal channels sent to a system of LCD projectors arranged in pairs, capable of projecting two different images side-by-side against each wall of the room, so that all students can see the projected images;
  • One cable for a laptop;
  • One desktop PC permanently installed in the room;
  • Ten numbered whiteboards around the walls, each with its own camera focused on it.

Users

Lecturers are generally faculty members, aged 30-70. All have laptops. Some prepare lectures using PowerPoint; others prefer handwritten notes that they transcribe to blackboards or whiteboards. They don’t have time to take a training class about A/V equipment.

Tasks

  • Give lecture, which includes as subtasks:
    • Show slides.
    • Write on board, which may include as a subtask:
      • Hide slides to avoid distraction.
    • Show other material such as videos, web sites, or demos.
  • Do small-group activity. Activities happen at the whiteboards around the room. This task includes as subtasks:
    • Explain the activity, which may involve showing a slide, writing on the board, or showing a web page.
    • Discuss a group’s results by showing its whiteboard so that the whole class can see it easily.

Design Sketches

Design the interface that controls the two video signals going to the LCD projectors. (Assume that your interface will run on the built-in PC, so you have a keyboard, mouse, and high-resolution display.) Sketch at least three different designs. To help broaden your thinking, consider alternatives like this:

  • a direct manipulation design
  • a menu-and-forms design, using standard widgets
  • a wizard

…but you aren’t limited to these.

Discussion

After drawing your sketches, discuss their pros and cons. Think about:

  • How simple are your designs? Can you reduce them further, or force elements to do double-duty?
  • How well do your designs support the tasks?
  • Which aspects of usability matter for these users and these tasks? How do your designs fare on those aspects?
  • What if MIT decided to staff the classroom with a full-time A/V operator?
  • How flexible are your designs for unexpected or new tasks?

The purpose of this activity is to learn more about graphic design techniques and concepts: the squint test, simplicity and contrast, visual variables, and Gestalt principles. You’ll need a web browser to do this activity, but it doesn’t particularly matter which browser you use.

Information Display

Do a search in Google and look carefully at the list of search results. First, use the squint test to look at the whole page. What parts of the design stand out clearly?

Now look closely at the individual search results. Each result consists of several data fields. How is each data field displayed using visual variables? (For example, the page-title field uses three variables: hue: blue, size: large font, position: first line of result. Write your findings on a whiteboard.

Contrast

Now go to www.drudgereport.com. Use the squint test to look at the whole page. What parts of the design stand out clearly?

What are the major sections of the Drudge Report, and how might you use visual variables to improve their contrast?

Alignment

Go to Google Advanced Image Search (Google, then Images, then Advanced Image Search). How are the form controls aligned vertically? (It may help to resize the window so you can watch how the controls move around.) What alignment compromises were made, and why?

Now look carefully at the horizontal alignment between labels and textboxes. Where are text baselines correctly aligned, and where are they not? (It may help to resize the font of your browser, so that you can see the baselines more clearly; in Firefox, use Ctrl + and Ctrl - to resize the font.)

The purpose of this activity is to practice doing heuristic evaluation—in this case, an e-commerce web site. You will need a web browser for this activity.

The web site you will evaluate is blowoff.com. Explore at least three parts of the site:

  1. Start by evaluating the home page;
  2. Then evaluate the page for one product, such as BlowOff Duster;
  3. Finally, try to buy the product and evaluate the checkout page.

Record the usability problems you find. Justify every observation by naming one or more usability heuristics (design principles) that it violates. Assign a severity rating to each problem (cosmetic, minor, major, or catastrophic).

Include at least one positive usability comment, again justifying it by naming one or more heuristics.

The purpose of this activity is to learn more about information visualization by experimenting with modifications to an existing visualization. You’ll need a web browser to do this activity, but it doesn’t particularly matter which browser you use.

For this activity, we will use IBM’s Many Eyes collaborative visualization system, which allows people to upload data sets, create visualizations of them, and comment on them. Many Eyes was developed in the IBM Cambridge research lab, just down the street from MIT, by Martin Wattenberg and Fernanda Viegas, among others.

Go to the Survival on the Titanic (online resource no longer available) visualization and think about the following questions:

  • Study the visualization for a bit. What does it reveal about patterns of survival among the Titanic’s passengers and crew?
  • How are visual variables being used to display data attributes?
  • What aspects of the Shneiderman mantra (overview, zoom & filter, details on demand) are supported by the visualization?
  • Experiment with assigning different data properties to aspects of the visualization (row, column, size, color). What else can you learn about the patterns of survival?

The purpose of this activity is to learn more about how user interfaces handle mouse and keyboard input. You’ll need a modern standards-compliant web browser like Firefox, Opera, or Safari; don’t use an old version of Internet Explorer. The exercises below use an in-browser Javascript environment that you’ll find here (link will open in a new window or tab):

Event Dispatch and Propagation

The workbench is initially configured with an event listener listening for clicks on A. Which objects can you click on to fire this listener?

Add a click listener to object C (keeping the listener on A as well). Which listeners fire when you click on C? In what order do they fire? How about when you click on B?

Change your listener on C so that it consumes the event. In standard browsers, this is done by calling event.stopPropagation(). Now which listeners fire when you click on C? How about when you click on B?

Finally, change your listener for A from a bubbling-phase listener to a capturing listener. Now which listeners fire when you click on C? In what order?

Event Translation

Javascript’s events for mouse clicking are click, mousedown, mouseup, and dblclick. Attach listeners for these events to one of the objects in the workbench to discover the sequence in which these events occur when the user double-clicks on that object. Which of these events are raw, and which are translated?

Mouse Movements

Javascript’s event for mouse movement is mousemove. Add a mouse move listener to A, and display the mouse coordinates using print(event.clientX + “,” + event.clientY). What origin are these (x,y) positions using? How is this different from the coordinate system used by Java Swing’s mouse events? (See MouseEvent in the Java 1.5 API documentation.)

Now slow down your mouse move listener. (The workbench defines a function sleep(milliseconds) for this purpose; e.g., sleep(500) waits for 500 milliseconds before it returns.) Does the browser coalesce mouse move events? How do you know? Does it coalesce mouse click events?

Mouse Capture

Using your mousemove listener on A, determine whether the web browser provides mouse capture by default: i.e., if you press the mouse button over A, does A continue receiving mouse events until the mouse button is released, regardless of where the mouse pointer is?

Try attaching the mousemove listener to the window object instead of A. Does mouse capture work now? Note that you have to move the mouse outside the whole window to really answer this question.

Would you be able to implement a scrollbar using just HTML and Javascript? Why or why not?

The purpose of this activity is to experiment with ways to do background processing in graphical user interfaces. You will need to look at LongRun.java, which is the Java code you’ll be using. It’s compiled into LongRun.jar.

Long Task in Event Handler

Run the Java program. You’ll see a counter, initially at 0. The job of the long task is to increment this counter by 1000 units (and simulating computation or I/O by spending about 1 millisecond to do each increment). So the correct behavior is that you should see the counter rapidly increase from 0 to 1000.

Press the Event Handler button. What actually happens? Look at the code. Why does it have the effect you saw?

Long Task in Thread

Now click the Thread button, and examine the corresponding code. What happens?

Now click the Thread button several times quickly, so that several threads are running at the same time. After all the threads are done, you’d expect to see the counter increase by some multiple of 1000. What actually happens? Why?

Using invokeLater()

Now load LongRun.java into Eclipse or an editor, and modify the code for the UsingInvokeLater button so that it calls SwingUtilities.invokeLater() to avoid the problem you saw with the Thread button. There’s an example of the syntax for invokeLater() elsewhere in the program.

Click the UsingInvokeLater button a few times quickly to make sure you fixed it, and make sure the counter still increases steadily over time instead of skipping straight to its final value.

Using Timers

Now implement the body of the UsingTimer button so that it uses javax.swing.Timer to do the work in the background.

Look at your console, which displays the actual time that the background task takes. The task should take about 1000 milliseconds; any extra is overhead. Compare the overhead of your InvokeLater with the overhead of your Timer. Can you get them both down around 1000-1100 milliseconds?

The purpose of this exercise is to gain some appreciation of the problems of internationalization, specifically the wide variations in languages and scripts; bidirectional text; and the differences between character sets, fonts, and character encodings.

You will need Java installed on your laptop, so that you can run the sample program. You’ll also need a modern web browser like Firefox/Safari/Opera, and a reasonably recent version of Windows, Mac OS, or Linux. Older platforms may have weaker support for i18n.

Internationalization

Run the CharacterEncoding program, just so you can see what its interface looks like. Then examine its code, CharacterEncoding.java, particularly the main constructor for the class, with an eye for internationalization. What would need to be changed to internationalize it?

Character Encodings

Now type some text into the box labeled Text. What do the other two boxes display?

Now copy the word été into the Text box. What do you observe?

Now visit this Russian Wikipedia page and copy a word of it into the Text box. What do you observe?

Finally, visit this Japanese Wikipedia page and copy a few characters of it into the Text box. What do you observe?

Bidirectionality

Visit this Arabic Wikipedia page or this Hebrew Wikipedia page. How is the page laid out, relative to other Wikipedia pages?

Try to understand the effect of bidirectional text on editing by making selections. What happens when you select multiple lines? Notice that the page has English words embedded in it, like “International Business Machines.” Make some selections that start in one language and end in the other. What happens?

If you have Firebug installed, you can use Inspect to highlight a paragraph, drill down into it in Firebug’s tree display, and actually edit its text. Explore bidirectional editing by changing both the Arabic/Hebrew text and the English text. (You’ll need to use copy-and-paste to simulate editing the Arabic or Hebrew, unless you know how to enter those characters at your keyboard.)


© Source unknown. All rights
reserved. This content is
excluded from our Creative
Commons license. For more
information, see
http://ocw.mit.edu/fairuse.

The goal of this activity is to think about how to design interfaces for learnability.

Recall the thermostat example from lecture: some people believe that you can heat a room faster by setting the thermostat to a higher temperature than you really want, as if the thermostat were a valve for the heating system that lets more heat into the room the higher you set it. In fact, the thermostat is simply an on/off switch for the heat. It turns on as long as the room temperature is below the thermostat setting, and turns off when the thermostat setting is reached.

Design a thermostat user interface that communicates its conceptual model to the user more effectively, so that users are less likely to make this mistake. Sketch your idea on a whiteboard, but don’t stop with your first design. Critique it, and generate more designs. Don’t worry too much about size, cost, difficulty of installation, or other tradeoffs. Certainly don’t feel constrained by the old-fashioned thermostat design pictured at right. Be creative, and remember that we’re focusing on usability in this class.

A few things to think about:

  • Would it be enough to just print an explanation on the thermostat? If so, what exactly would it say?
  • A sink faucet is normally a valve, so turning it farther will make the sink fill up faster. Suppose you came across a sink faucet which was just an on/off switch. As a user, how could you tell right away?
  • Suppose you think you have a good design. How, specifically, would you test it?

The purpose of this activity is to learn more about low-fidelity prototyping by creating a simple, hand-drawn prototype in less than 5 minutes, and simulating it with another user. Divide up into pairs for this activity.

Prototype Your Alarm Clock

Think about the alarm clock you use to wake up every day. It may be a digital clock radio, it may be an analog clock, it may even be a cellphone or a desktop application. Make a low-fidelity prototype of your alarm clock. Include enough of the interface so that your low-fi prototype can display and change the current time, display and change the alarm time, and turn the alarm on and off.

Each of you should draw your own alarm clock at the same time. Don’t discuss it with your partner yet.

Run Your Prototype

Simulate your prototype, acting as the Computer, while your partner acts as user. Use these tasks:

  • Is the alarm set to wake me up at 9 am?
  • Suppose not. Set the alarm to wake me up at 9 am.
  • Set the current time one hour backward for a daylight savings time switch.

Then switch roles, so that the other person acts as the Computer simulating their own prototype on you.

The goal of this activity is to practice doing user, task and domain analysis by observing a real environment of people working. Without actual observation, task analysis is incomplete and biased. For this exercise, we’ll observe the most conveniently available environment: our classroom.

Assume we’re thinking of developing a system to deliver 6.831 as an online course. We’re not actually going to do any design in this exercise, but you should think about users, tasks, and entities from this point of view.

1. User Analysis

Who are the major user classes involved in the system? What are their important characteristics? Note that some relevant user classes might not have any representatives in the room right now.

2. Task Analysis

Pick an important user class that you don’t belong to. Identify important tasks for this user class by observation. Structure your task analysis hierarchically, with tasks and subtasks.

A few things to think about:

  • Try to distinguish essential tasks (independent of the current in-person course) from concrete tasks (which exist in the current design, but maybe don’t need to be there). Why is it important to think about this distinction?

3. Domain Analysis

Draw a domain model for the course. Include boxes for major user classes and for major information objects. Draw lines between the boxes for important relations. Finally, annotate the boxes with multiplicities (e.g., how many members of each user class?)

© Source unknown. All rights reserved. 
This content is excluded from our Creative 
Commons license. For more information, 
see http://ocw.mit.edu/fairuse.

The goal of this activity is to explore some of the main structuring patterns of GUI software: the view tree, listeners, and model-view-controller. We’ll do it using HTML, Javascript, and jQuery, along with a handy online HTML editor:

You’ll also need a modern standards-compliant web browser with developer tools installed in it. We recommend either:

Make and Inspect a View Tree

Use the editor to construct the simple HTML user interface you see on the right. You’ll need to use HTML elements like div, textarea, button, and a. Wrap the whole thing in a div element.

Use the developer tools in your browser to display the HTML tree and find the textarea node you just created.

Attach a Listener

Add jQuery to your web page, which you can do with the following line of code:

<script src="http://code.jquery.com/jquery-1.5.min.js"></script>

Attach an event listener to your Send button that calls console.log() to display the text area’s contents in your developer console. You will find it useful to:

  • put id attributes on your HTML elements
  • use the selector $("#id") to find an element with a particular id
  • use the jQuery .click() method to attach an event handler. (There are also ways to declaratively attach an event handler in the HTML code, such as the onclick attribute, but it’s generally better to do it procedurally.)
  • use the jQuery .val() method to get the value of a textarea

Modify the View Tree

Now we want to display a log of sent messages in the UI itself. First add the following HTML code to the end of your UI, so that you have a place to put the messages:

<div id="sent" style="font-style: italic">
<div>Sent messages appear here.</div>
</div>

Enhance your event listener on the Send button so that it appends the textarea’s contents to this list. For example, if the textarea has “message 1” in it, then pressing Send should change the page as follows:

<div id="sent" style="font-style: italic">
<div>Sent messages appear here.</div>
<div>message 1</div>
</div>

There are several ways to do this. You may find the following jQuery methods useful:

  • the .html() method to get or set the subtree under a node
  • the .text() method to get or set the text inside a node
  • the .append() method to add children to a node
  • the $(“html”) function to create a subtree of HTML


© Source unknown. All
rights reserved. This
content is excluded from
our Creative Commons
license. For more
information, see
http://ocw.mit.edu/fairuse.

The point of this activity is to start thinking about what it means for an interface to be usable. At right is a familiar user interface design:

List some of the aspects of this design that have good usability, and some that have poor usability. Think about the aspects of usability we’ve discussed (learnability, memorability, efficiency, errors, satisfaction), and write down which aspect(s) of usability are involved in each good or bad point you cite.

The purpose of this activity is to practice watching for critical incidents indicative of usability problems.

The videos below show users interacting with subway-ticket vending machines. Watch them carefully and identify moments that indicate problems in learnability, efficiency, or error prevention.

This activity is intended to get you thinking about the user-centered design process, by conducting a very lightweight UCD process on a few problems in our classroom.

1. Screen Locations

The first problem we’d like to solve: where should the slides be projected in the room? Recall that UCD has three parts.

Early focus on users and tasks. Let’s identify the users of the room and their critical tasks (at least with respect to the slide projection problem).

Who are the users of the classrom? It’s easy to see by observation that we have two main user classes: students and teachers.

What are their tasks? At a high level, students are here to learn; that’s their goal. The teacher is here to teach. But we can unpack these high-level goals into more specific subtasks (choosing only the ones relevant to slide projection, for now). In order to learn, a student needs to read slides. The teacher needs to show slides.

This leads to one basic requirement for our problem: Every student must be able to read the projected slides.

We’ll learn more about how to do user and task analysis in a future lecture, but this quick sketch will serve for now.

Iterative design with prototypes. How can we build prototypes of the slide projection, so that we can explore the design space before actually installing screens and projectors?

The simplest prototype we might build is a map of the room, showing where the seats are and marking where the screens might be. We can use this “prototype” to check sight lines and distances. You may not think of a mere sketch as a prototype, but it is—it’s a physical realization of an idea, and we can apply tests to it and evaluate it.

But it’s a weak prototype. The next prototype we might do is to simulate screen projection in the room itself, by holding up posters or drawing on the walls. Then we can evaluate it with real people sitting in the room, telling us what they can or can’t read.

An even higher-fidelity prototype would bring in portable LCD projectors and temporary screens (or big white sheets) to hang on the wall, in order to project actual slides.

Finally, we might do a permanent installation—which is no longer a prototype really, but a full-blown, expensive implementation.

Empirical evaluation throughout the iterative process. How can we evaluate the protoype to provide data and insight for the next iteration?

Suppose we fill the room with people (like now) and draw some simulated slides on the whiteboard. Now we can run usability tests. Some of the tests might be quantitative: “How many people can read this?” “Write down all the words on the screen as fast as you can.” Others might be qualitative: “Is this comfortable to read?” “Are you craning your neck?”

We might even find, on evaluating prototypes, that we left out important requirements: Every student must be able to see where the teacher is pointing on a slide. The teacher must be able to see the students’ faces. Because we used cheap prototypes, however, we didn’t invest a lot of resources in an implementation that we have to change or throw away—or worse, never fix.

2. Pointing at the Screen

Now it’s your turn. Let’s fix the problem we just discovered: when the lecturer points at one screen using a hand or a laser pointer, students watching other screens don’t see it.

Early focus on users and tasks. Who are the users? What are their tasks? What requirements does the system have? (Focus just on this narrow problem for now, not on everything that happens during class.)

Iterative design with prototypes. Suppose we’d like to solve this problem using computer vision to watch what the lecturer is doing and display a simulated pointer on the other screens. Imagine a few ways this solution could be prototyped. Implement and use one of them right now.

Empirical evaluation throughout the process. Evaluate your prototype (qualitatively). What did you learn about the problem space? How might you revise the design in response?

3. Students Pointing at the Screen

Now suppose this is a distance learning class, so the lecturer isn’t in the room with the students. The problem is that when a student wants to ask a question about part of a slide, the lecturer can’t see where they’re pointing.

Early focus on users and tasks. Who are the users? What are their tasks? What requirements does the system have?

Iterative design with prototypes. Suppose we’d like to solve this problem by embedding one flat panel touchscreen display in the middle of every table, showing the current slide, which students can press with a finger to show a cursor on the slide. Prototype this solution and try your prototype right now.

Empirical evaluation throughout the process. Evaluate your prototype (qualitatively). What did you learn about the problem space? How might you revise the design in response?


© Source unknown. All
rights reserved. This
content is excluded from
our Creative Commons
license. For more
information, see
http://ocw.mit.edu/fairuse.

The purpose of this activity is to explore aspects of visibility in design. Suppose you’re designing an interface for two players to play checkers (also called draughts) across the Internet. The picture on the right shows the scenario: each player has an interface on their screen, and the state of the game is stored on a network server that both communicate with.

Guided by the categories below, make a list of what needs to be made visible, and then brainstorm (and sketch) how the interface might make it visible.

  • Actions: what can the user do?
  • State: what is the current state of the system?
  • Feedback: what was the effect of the user’s action?

Course Info

Instructor
As Taught In
Spring 2011
Level