Spring 2019 — UCLA Computer Science Department — David G. Kay


THIRD HOMEWORK

This assignment is due by 5:00 p.m. on Friday, May 10. It's longer than the previous ones and it requires coordination with other people; don't wait until after the midterm to think about it.

You will do the main part of this assignment (Part I) with the partner you chose at the end of the previous assignment.


Part I

In the previous assignment, you identified three applications that perform the same function. For this part, pick a single task (e.g., starting a new game, or setting the user preferences, or initiating a chat with someone on the buddy list) that each application performs with mouse or pointer movements. (If there is no common pointer-based task in your applications, talk to us right away to work out an alternative.) Try to identify a task that takes four or five different movements, on the average. (This is a rough guideline; don't pick a task that requires a single click in each application and don't pick one that requires a dozen steps, either.) If you have difficulty identifying an appropriate task, send us Email.

(a) Which of the three applications lets the user perform the task most quickly? Use your collective best judgement, considering everything—recognition time, movement time, anything else. Which application makes the task slowest?

(You'll need to decide on the characteristics of the hypothetical user you're talking about here—beginning or experienced, old or young or in between, whatever characteristics are relevant—and keep those assumptions constant throughout.)

Produce illustrations of the steps involved, with the movements marked. Describe and explain your conclusions in at most half a (single-spaced) page (not counting the illustrations).

(b) Use Fitts's Law (P = C1 + C2 (log2(2D/W))) to analyze the speed of performing the task on each system. For each step in the task, measure the distance and the target size and apply the formula. You'll have to make some assumptions and adopt some conventions (Will you use inches, centimeters, or pixels as your unit? What's the user's starting point at the beginning of the task?); just keep those decisions consistent as you analyze the three systems so your results should be valid for comparison purposes, even if the numbers might need some scaling to produce actual times. Don't bother with the constants C1 or C2, either. (If there's some reason that you think your systems aren't comparable in this way, talk to us. It's possible, for example, that the task has a step or two that don't involve pointing, such as text entry. Fitts's law only applies to acquiring a target with a pointer, so you'll have to make some other time estimate for non-pointer steps.)

Show your calculations and analysis (probably a spreadsheet would be best, with a row for each step in the process), keyed to the illustrations in part (a). State clearly what results this analysis produced.

(c) Did your Fitts's Law analysis of part (b) reach the same conclusion as your holistic analysis of part (a) about which application was fastest? Unless the results were identical in every respect, describe and explain the differences. (Half a page is the maximum here.)

(d) Take your best-performing application and redesign the screen(s) for the task you analyzed to make that task even faster. (If you think your winning application is perfect, choose one of the other applications and redesign it to improve it, maintaining consistency with the rest of the original application (i.e., don't just redesign it to look like the winner).) Sketch out your redesign on paper. You and your partner should each walk through the redesign, looking for problems and making improvements.

(d.1) Describe your redesign and explain how it improves the original. (Half a page maximum.)Include enough photos of your paper sketch(es) to illustrate the improvements clearly.

(d.2) After you're satisfied with your redesign, create a mock-up using a WYSIWYG GUI-building tool. (WYSIWYG describes the most common style of word processing software. It stands for What You See Is What You Get, meaning that the content you edit on the screen looks like the final document. An example of non-WYSIWYG editing would be editing the raw HTML of a web page; the HTML code doesn't look much like the final web page rendered in the browser.) There are tools that let you place buttons and sliders and menus and text and other object onto a page you design; once you know how to use the tool, it's a lot easer to plop down a set of pre-drawn radio buttons than to sketch them out by hand, and even though the product doesn't look finished, it looks neater than a hand-drawn sketch.

You may use any tool you and your partner like for this; some possibilities are listed below. We don't expect anyone to have to pay anything to complete this assignment; most of the suggestions are either web-based or downloadable for free or for a free trial. You might try a wire-framing tool like moqups.com, balsamiq.com, axure.com, or gomockingbird.com. There are also GUI-design tools or templates in Visual Basic, Visual C++, Dreamweaver (for web pages), InVision Studio, Interrface Builder, or OmniGraffle (on the Mac)). The point is to use a tool that provides you with images of buttons and boxes and menus that you can place on a canvas representing your screen. It would be the wrong idea to use Photoshop to build radio buttons or anything else from scratch. It would also be wrong to write code implementing the functionality of your (re)design; even if you're using a tool that lets you write code, this assignment is about the interface, not about implementing functionality. This is a mock-up, not a polished design, so don't spend more than an hour or two putting this together. This portion of the assignment (part (d.2)) won't be worth more than 15% of the total. Incorporate your finished illustrations into the electronic document that you turn in.

Combine all your answers into one electronic document and submit it via CCLE. (The guidelines about hand-drawn illustrations also apply.) Just one member of your group should submit the work, but of course both group members' names must appear clearly in the body of the assignment itself. Please communicate with your partner about who will submit; two submissions for the same partnership will cause delays, inconvenience your TAs, and maybe even lower your score.

Part II

Read each of the following. They'll show up in future lectures, later assignments, and/or the final exam:

There's nothing to turn in for this part.

Written by David G. Kay, Winter 2004; using GUI-building tools in assignments was suggested by Alfred Kobsa and Nayla Nassif. Modified by David G. Kay, Summer 2007, Summer 2008, Summer 2010, Spring 2019.

David G. Kay, kay@uci.edu