Yorkville High School Computer Science

User Interface Design :: Projects :: UI Project Computer Prototype

Problem

You may want to use a prototyping tool for this assignment -- such as an HTML editor like Dreamweaver if you're building a web application, or a GUI builder like Visual Studio if you're writing a desktop application. You don't necessarily have to throw this prototype away, so you can choose a tool that will produce code you can use in your final implementation. But you shouldn't get too attached to this prototype either, and be prepared to make radical changes or throw it away if evaluation reveals serious usability problems.

Your computer prototype should be:

• High fidelity in look.

Use this prototype to explore the graphic design of your final implementation. Lay out screens as you want them to appear in your final implementation. Make choices about colors, fonts, alignment, icons, and white space.

• Medium fidelity in feel.

This prototype must run on a desktop computer with a mouse and a keyboard. For most projects, the web or desktop is the target setting, so your prototype will approach high fidelity in feel. Even if your ultimate platform implements a touchscreen it is easier to build a prototype for a keyboard/mouse input.

• Low fidelity in breadth.

Your prototype should include every feature needed by your scenario from your project design.

• Low fidelity in depth.

You can leave out most of your backend. Where system responses are needed, make them canned (i.e., always the same) or random. Consider using static images (pixel-model output that you created in a drawing program) in places where the final implementation would have to draw on the fly (stroke-model or component-model). Use realistic data in your canned displays, however -- in particular, data of a realistic scale. If you're building (say) an MP3 player and your prototype displays only three songs in the user's library, that's pretty unrealistic, and won't adequately test your UI design choices. Your domain analysis from your project analysis should help you recall what was realistic.

Here are some issues you should not worry about in this prototype:

• Window resizing.

When a window is resized, its layout has to adjust to respond. Don't worry about this for now. Determine a good default size for your windows and design a good layout for that size (using either automatic layout or even absolute positioning). Your final implementation probably should support window resizing, depending on your application, but you should decide how to make your interface's default look as good as possible, before worrying about variation.

• Platform independence.

Even if your final implementation will run on multiple platforms -- different browsers, different operating systems -- your prototype doesn't need to look good or work well everywhere. Focus on one platform for now.

After you hand in your prototype, it will be distributed to some of your classmates, who will do heuristic evaluations of it and give their reports back to you. Since your evaluators must be able to view and interact with your prototype, this puts some constraints on how you implement your prototype. It must run on a conventional desktop computer with a mouse, keyboard, and screen, running on Windows (since that is readily available in Yorkville). The prototype you give to your evaluators can be any of the following:

• Java JAR File
• Windows Executable or Visual Studio Project
• HTML

You can require evaluators to use a particular web browser to ensure the correct appearance and operation of your prototype.

What to Turn In

Add a section called "Computer Prototype" to your project's web page. This section should provide instructions for accessing and starting up your computer prototype, both for your classmates who will be evaluating your prototype and for Mr. Miller.

• Specify the platform and software requirements for your prototype.
• Give brief, step-by-step instructions for starting up your prototype. For websites, a hyperlink to the site is sufficient. For JAR files or executables, say how to start the program.
• Describe which parts of the prototype are shallow (incompletely implemented or canned), so that your evaluators know what should work and what shouldn't.
• If your prototype must be downloaded, like a JAR file, put it in a place where it can be downloaded over the Web, and include a link to it in your site.
• Your prototype should be downloadable as a single file. Package multiple files into a ZIP archive for easy downloading.