19 KiB
19 KiB
<html>
<head>
</head>
Overview
Project Plan
Workflows
Current
<!-- Markdown content here -->
<h1 id="user-content-designdesignnbspgtnbspuser-interface" dir="auto"><a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/Design">Design</a> > User Interface</h1>
<hr>
<h5 id="user-content-project" dir="auto">Project:</h5>
<p dir="auto">::PROJECTNAME</p>
<h5 id="user-content-internal-release-number" dir="auto">Internal Release Number:</h5>
<p dir="auto">::X.Y.Z</p>
<h5 id="user-content-related-documents" dir="auto">Related Documents:</h5>
<ul dir="auto">
<li>::LINKS TO RELEVANT STANDARDS</li>
<li>::LINKS TO OTHER DOCUMENTS</li>
</ul>
<hr>
<h3 id="user-content-overview" dir="auto">Overview</h3>
<p dir="auto"><em>TODO: Answer the questions below to help you design the user interface
features of your system. Some ecomponents.htmlxample text is provided. Add or delete
text as needed.</em></p>
<h4 id="user-content-what-are-the-most-important-facts-that-a-developer-should-know-about-the-user-interface-of-this-system" dir="auto">What are the most important facts that a developer should know about the user interface of this system?</h4>
<p dir="auto">::PARAGRAPH OR BULLETS</p>
<h4 id="user-content-what-are-the-ranked-goals-for-the-user-interface-of-this-system" dir="auto">What are the ranked goals for the user interface of this system?</h4>
<ol dir="auto">
<li>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/Glossary-Std#understandability_and_learnability">Understandability and learnability</a></li>
<li>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/Glossary-Std#task_support_and_efficiency">Task support and efficiency</a></li>
<li>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/Glossary-Std#safety">Safety</a></li>
<li>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/Glossary-Std#consistency_and_familiarity">Consistency and familiarity</a></li>
</ol>
<h3 id="user-content-metaphors-exemplars-and-standards" dir="auto">Metaphors, Exemplars, and Standards</h3>
<h4 id="user-content-what-is-the-central-metaphor-of-this-ui-design" dir="auto">What is the central metaphor of this UI design?</h4>
<p dir="auto">::PARAGRAPH</p>
<h4 id="user-content-what-existing-systems-have-user-interfaces-similar-to-the-ui-you-want-to-build-what-specific-aspects-are-similar" dir="auto">What existing systems have user interfaces similar to the UI you want to build? What specific aspects are similar?</h4>
<ul dir="auto">
<li>::<a href="<a href="http://www.amazon.com" class="link">http://www.amazon.com</a>">amazon.com</a>: Our e-commerce site will
have stores and departments, and search like this site.</li>
<li>::<a href="<a href="http://www.microsoft.com/office/using/default.asp" class="link">http://www.microsoft.com/office/using/default.asp</a>">Microsoft Office</a>: We
will use configurable toolbars the same way Office 2000 does.</li>
<li>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/LINK-TO-SYSTEM">EXISTING-UI</a>: DESCRIPTION</li>
</ul>
<h4 id="user-content-what-ui-design-standards-guidelines-and-styles-are-you-following" dir="auto">What UI design standards, guidelines, and styles are you following?</h4>
<ul dir="auto">
<li>::<a href="hcomponents.htmlttp:/msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/welcome.asp">Microsoft UI guidelines</a></li>
<li>::<a href="<a href="http://java.sun.com/products/jlf/ed1/guidelines.html" class="link">http://java.sun.com/products/jlf/ed1/guidelines.html</a>">Java UI guidelines</a></li>
<li>::<a href="<a href="http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/AHIGHIGs/index.html" class="link">http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/AHIGHIGs/index.html</a>">Mac UI guidelines</a></li>
<li>::<a href="<a href="http://www.w3.org/TR/WCAG10/" class="link">http://www.w3.org/TR/WCAG10/</a>">W3C Accessibility guidelines</a></li>
</ul>
<h3 id="user-content-task-models" dir="auto">Task Models</h3>
<h4 id="user-content-what-types-of-users-will-use-this-system" dir="auto">What types of users will use this system?</h4>
<p dir="auto">::See the <a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/user-needs">user needs document</a>.</p>
<h4 id="user-content-what-types-of-tasks-will-those-users-perform" dir="auto">What types of tasks will those users perform?</h4>
<p dir="auto">::See the <a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/use-case-suite">use case suite</a>.</p>
<h3 id="user-content-content-model--interaction-contexts" dir="auto">Content Model / Interaction Contexts</h3>
<p dir="auto"><em>TODO: List interaction contexts. Each interaction context is a "place"
where users see information and where they select commands or options.
In a graphical user interface, a interaction context will eventually be
implemented as a window or dialog box. In other applications, an
interaction context may be implemented as, e.g., a web page, a voice
menu prompt, or a physical control panel.</em></p>
<p dir="auto"><em>TIP: Each interaction context is an exclusive mode: the user can only
use one interaction context at a time. All the components within one
context are visible and usable at the same time. E.g., if a window has
three tabs, that is three interaction contexts because only one tab can
be used at a time.</em></p>
<p dir="auto"><em>TODO: For each interaction context, list the abstract components within
that context. Each component is a piece of information, or a user
interface affordance. In a GUI, each abstract component will eventually
become a widget, but the choice of specific widgets happens later.
Choice of abstract components corresponds to step 2 in the
<a href="<a href="http://www.ics.uci.edu/~jrobbins/htmlproto/index.html" class="link">http://www.ics.uci.edu/~jrobbins/htmlproto/index.html</a>">HTML prototyping example</a>
demonstrated in class.</em></p>
<p dir="auto"><em>TIP: Most high frequency use cases should be carried out in only one
interaction contexts. A use case that requires three interaction
contexts could be hard to use. However, interaction contexts with too
many components can also be hard to use.</em></p>
<table>
<thead>
<tr>
<th>Interaction Context --Abstract UI Components</th>
<th>Purpose</th>
<th>Contents / Constraints / Behavior</th>
</tr>
</thead>
<tbody>
<tr>
<td>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/LINK-TO-MOCKUP">Login dialog</a></td>
<td>::Verify that the current user is actually the person that they claim to be.</td>
<td></td>
</tr>
<tr>
<td>::--Prompt</td>
<td>::Tell the user that this dialog is to log in.</td>
<td>::"Please log in".</td>
</tr>
<tr>
<td>::--Message area</td>
<td>::Give the user some feedback about the login process.</td>
<td>::Initially blank. Changes to "Checking username and password" when the user presses "Login". Changes to "Invalid username or password, please try again", if login fails.</td>
</tr>
<tr>
<td>::--Username</td>
<td>::Identify the user account that the current user is trying to access.</td>
<td>::The name of the user account. Regex: [-_a-z0-9]{1-16}. The application should not do anything that would help users guess usernames. E.g., this should not be a combo-box with recent users listed, and it should not offer auto-complete.</td>
</tr>
<tr>
<td>::--Password</td>
<td>::Verify that the current user knows a secret password that only the true user of that user account should know.</td>
<td>::The password of 4-16 characters. Do not display the password on the screen. The application should not do anything that would help users guess passwords.</td>
</tr>
<tr>
<td>::--Login</td>
<td>::Allow the user to indicate that they have completed entry of their username and password.</td>
<td>::"Login" Only enabled when Username != "". If the username or password is incorrect, delay a few seconds, and then clear all fields.</td>
</tr>
<tr>
<td>::--Lost Password</td>
<td>::Allow the current user to start a process of generating a new password for a given username.</td>
<td>::"Forgot your password? Click here." Only enabled when Username != "".</td>
</tr>
<tr>
<td>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/LINK-TO-MOCKUP">PAGE-NAME</a></td>
<td>::PURPOSE</td>
<td></td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/LINK-TO-MOCKUP">PAGE-NAME</a></td>
<td>::PURPOSE</td>
<td></td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/LINK-TO-MOCKUP">MAIN-WINDOW-NAME</a></td>
<td>::PURPOSE</td>
<td></td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/LINK-TO-MOCKUP">DIALOG-NAME</a></td>
<td>::PURPOSE</td>
<td></td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::<a href="/Suborbital-Systems/ReadySetGit/src/commit/dab4ad17c1effb3ac0a353fbe93d0ecc4e3da60f/LINK-TO-MOCKUP">DIALOG-NAME</a></td>
<td>::PURPOSE</td>
<td></td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
<tr>
<td>::--ABSTRACT-COMPONENT-NAME</td>
<td>::PURPOSE</td>
<td>::CONTENTS</td>
</tr>
</tbody>
</table>
<h3 id="user-content-technical-constraints--operational-context" dir="auto">Technical Constraints / Operational Context</h3>
<h4 id="user-content-what-are-your-assumptions-about-the-output-devices" dir="auto">What are your assumptions about the output devices?</h4>
<p dir="auto">::We assume that the user has a 17-inch or larger screen with 1024x768
pixels that can display thousands of colors (16 bit or more). We
assume basic audio that can play simple sound files.</p>
<p dir="auto">::We make very few assumptions about the user's screen or web browser,
other than the assumption that they can view page somehow. We will
not use any audio features.</p>
<p dir="auto">::This "pay-at-the-pump" system has a 320x200 16-color display and
can beep.</p>
<h4 id="user-content-what-are-your-assumptions-about-the-input-devices-that-you-will-use" dir="auto">What are your assumptions about the input devices that you will use?</h4>
<p dir="auto">::We assume only that the user has a standard keyboard and mouse.</p>
<p dir="auto">::This "pay-at-the-pump" system has digits 0-9, "OK", "Cancel", and
four menu buttons along the right-hand edge of the screen.</p>
<h4 id="user-content-what-are-your-assumptions-about-the-amount-of-time-users-will-spend-on-tasks" dir="auto">What are your assumptions about the amount of time users will spend on tasks?</h4>
<ul dir="auto">
<li>::Use cases UC-02 and UC-04 are expected to take a few minutes each.</li>
<li>::Use case UC-00 should take less than 5 seconds each. All other use
cases should take less than 30 seconds each.</li>
</ul>
<h4 id="user-content-what-windowing-systems-ui-libraries-or-other-ui-technologies-will-you-use" dir="auto">What windowing systems, UI libraries, or other UI technologies will you use?</h4>
<p dir="auto">::Standard Java Swing with no extra libraries.</p>
<p dir="auto">::Simple HTML and CSS with simple GIF images.</p>
<h3 id="user-content-user-interface-checklist" dir="auto">User Interface Checklist</h3>
<p dir="auto"><em>TODO: Answer the following questions to help evaluate the design. You
may add or remove questions to fit your project.</em></p>
<h4 id="user-content-understandability-and-learnability" dir="auto">Understandability and learnability</h4>
<h5 id="user-content-are-there-any-labels-of-icons-that-are-likely-to-be-misunderstood" dir="auto">Are there any labels of icons that are likely to be misunderstood?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5 id="user-content-is-the-users-current-place-and-state-clearly-visible-eg-wizard-step-2-of-5-or-edit-mode-vs-play-mode" dir="auto">Is the user's current place and state clearly visible? E.g., wizard step 2 of 5, or edit-mode vs. play-mode.</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5 id="user-content-are-advanced-options-clearly-separated-from-the-most-commonly-used-options" dir="auto">Are advanced options clearly separated from the most commonly used options?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5 id="user-content-are-there-no-invisible-options-or-commands-eg-hold-down-the-control-key-when-opening-a-dialog-box-to-see-advanced-options" dir="auto">Are there no invisible options or commands? E.g., hold down the control key when opening a dialog box to see advanced options.</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h4 id="user-content-task-support-and-efficiency" dir="auto">Task Support and Efficiency</h4>
<h5 id="user-content-which-use-cases-force-the-user-to-work-through-more-than-two-interaction-contexts" dir="auto">Which use cases force the user to work through more than two interaction contexts?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5 id="user-content-which-use-cases-force-the-user-to-perform-slow-or-difficult-ui-steps-eg-entering-a-long-code-number-like-an-isbn-eg-long-mouse-drag-operations" dir="auto">Which use cases force the user to perform slow or difficult UI steps? E.g., entering a long code number like an ISBN. E.g., long mouse-drag operations.</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h4 id="user-content-safety" dir="auto">Safety</h4>
<h5 id="user-content-are-there-any-dangerous-or-irreversible-actions-that-are-done-with-only-one-step" dir="auto">Are there any dangerous or irreversible actions that are done with only one step?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h4 id="user-content-consistency-and-familiarity" dir="auto">Consistency and Familiarity</h4>
<h5 id="user-content-do-ui-elements-in-your-system-work-the-same-as-they-do-in-the-existing-example-systems-you-identified" dir="auto">Do UI elements in your system work the same as they do in the existing example systems you identified?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5 id="user-content-do-all-elements-in-your-system-that-appear-the-same-actually-function-the-same" dir="auto">Do all elements in your system that appear the same, actually function the same?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5 id="user-content-do-all-elements-in-your-system-that-appear-the-same-actually-function-the-same-1" dir="auto">Do all elements in your system that appear the same, actually function the same?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5 id="user-content-are-all-elements-share-consistent-visual-characteristics-such-as-font-and-color-scheme-unless-there-is-a-reason-for-them-to-differ" dir="auto">Are all elements share consistent visual characteristics such as font and color scheme, unless there is a reason for them to differ?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<p dir="auto">#####Are labels used consistently throughout the system? E.g., not "forward/back" in some contexts and "next/prev" in others.</p>
<p dir="auto">::1-3 SENTENCES</p>
<!-- End Markdown content -->
</html>