William Sandner
19 KiB
19 KiB
<html>
<head>
</head>
<script src="https://www.w3schools.com/lib/w3data.js"></script>
Overview
Project Plan
Workflows
Current
<!-- Markdown content here -->
<h1><a href="design.html">Design</a> > User Interface</h1>
<hr>
<h5>Project:</h5>
<p dir="auto">::PROJECTNAME</p>
<h5>Internal Release Number:</h5>
<p dir="auto">::X.Y.Z</p>
<h5>Related Documents:</h5>
<ul dir="auto">
<li>::LINKS TO RELEVANT STANDARDS</li>
<li>::LINKS TO OTHER DOCUMENTS</li>
</ul>
<hr>
<h3>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>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>What are the ranked goals for the user interface of this system?</h4>
<ol dir="auto">
<li>::<a href="glossary-std.html#understandability_and_learnability">Understandability and learnability</a></li>
<li>::<a href="glossary-std.html#task_support_and_efficiency">Task support and efficiency</a></li>
<li>::<a href="glossary-std.html#safety">Safety</a></li>
<li>::<a href="glossary-std.html#consistency_and_familiarity">Consistency and familiarity</a></li>
</ol>
<h3>Metaphors, Exemplars, and Standards</h3>
<p dir="auto"> </p>
<h4>What is the central metaphor of this UI design?</h4>
<p dir="auto">::PARAGRAPH</p>
<h4>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" data-markdown-generated-content="">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" data-markdown-generated-content="">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="LINK-TO-SYSTEM">EXISTING-UI</a>: DESCRIPTION</li>
</ul>
<h4>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" data-markdown-generated-content="">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" data-markdown-generated-content="">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/" data-markdown-generated-content="">http://www.w3.org/TR/WCAG10/</a>">W3C Accessibility guidelines</a></li>
</ul>
<h3>Task Models</h3>
<p dir="auto"> </p>
<h4>What types of users will use this system?</h4>
<p dir="auto">::See the <a href="user-needs">user needs document</a>.</p>
<h4>What types of tasks will those users perform?</h4>
<p dir="auto">::See the <a href="use-case-suite">use case suite</a>.</p>
<h3>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" data-markdown-generated-content="">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="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="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="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="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="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="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>Technical Constraints / Operational Context</h3>
<p dir="auto"> </p>
<h4>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>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>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>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>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>Understandability and learnability</h4>
<p dir="auto"> </p>
<h5>Are there any labels of icons that are likely to be misunderstood?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5>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>Are advanced options clearly separated from the most commonly used options?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5>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>Task Support and Efficiency</h4>
<p dir="auto"> </p>
<h5>Which use cases force the user to work through more than two interaction contexts?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5>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>Safety</h4>
<p dir="auto"> </p>
<h5>Are there any dangerous or irreversible actions that are done with only one step?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h4>Consistency and Familiarity</h4>
<p dir="auto"> </p>
<h5>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>Do all elements in your system that appear the same, actually function the same?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5>Do all elements in your system that appear the same, actually function the same?</h5>
<p dir="auto">::1-3 SENTENCES</p>
<h5>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 -->
<script>
w3IncludeHTML();
</script>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
<script src="assets/strapdown/strapdown-topbar.min.js"></script>
<script src="assets/logo.js"></script>
<script src="assets/themeswitcher.js"></script>
</html>