TODO: Briefly describe each screen in the system. Focus on the purpose and content of each screen rather than its appearance. Each screen is actually an interaction context.
- Design a set of UI zones.
- List each screen with its purpose.
- List the abstract contents of each screen and describe their behavior.
- Evaluate the UI model by walking through use cases.
- After initial usability evaluations, make a few key design decisions about layout and appearance, if implementation guidance is needed.
- Zone: Public pages
- Web pages that may be accessed by logged in users or other unauthenticated visitors. Pages contain information about the website and product information. Many navigational and search choices are offered.
Screen Name and Purpose Contents Behavior and ConstraintsWelcome messageSite newsTop selling productsLarge graphic of ideal customer lifestyleLinks to departments and key categories
Large graphic of product useDepartment top sellers and specialsLinks to categories and key productsBuyers' guides
- News items are sorted by date
- Top selling products are sorted by number sold
Basic product info: name, image, SKU, manufacturerProduct price: regular price, and optional sale priceAvailability: in-stock, back-ordered, discontinuedProduct details: description, specs, additional imagesUser ratings and reviews
- Top selling products are sorted by number sold
- Order of specials set by department manager
- Price information not shown if discontinued
- If sale price, then regular price is crossed out
- Additional images shown in pop-up slide-show
- Zone: Registration and Authentication
- Screens that help users set up accounts and log in.
Screen Name and Purpose Contents Behavior and ConstraintsPrompt: Tell us about yourselfMessage displayReal name fieldEmail address fieldDesired username fieldOpt-in marketing choicesRegister button
Prompt: Please log inMessage displayUsername fieldPassword fieldLogin buttonForgotten password link
- If registration fails, message area shows error message and invalid fields are highlighted.
- Username must validate according to username requirements in feature spec. Invalid or duplicate usernames are rejected.
- "Register" is only enabled when fields have valid values.
- Some of the opt-in marketing choices will show the logos of partner companies.
- Message area is 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.
- Username must validate according to username requirements in feature spec.
- "Login" is only enabled when Username != "". If the username or password is incorrect, delay a few seconds, and then clear all fields.
- There is no separate "login failed" page or "try again" page.
- Zone: Checkout pages
- The pages in this zone help the user complete his/her purchase. Almost no navigation options are offered, because we want the user to finish checking out before doing anything else, even if that is slightly inconvenient. If the user is not logged in, they must log in (and possibly register) before proceeding past shopping cart review.
Screen Name and Purpose Contents Behavior and ConstraintsCart contents and (editable) quantitiesOption to continue shoppingSubtotal of item prices
Choice of billing methodsBilling addressShipping address (if different)Choice of shipping methods
- Note that there is no single command to empty the cart.
- Option to continue shopping needed in page because there is no navigation bar
- Editing a quantity immediately updates subtotal
Read-only copy of all purchase info.Total amountEstimated arrival dateOption to go backCommand to confirm order
- Billing methods and bill-to addresses are not stored in the user account.
- Shipping address fields are disabled, unless "Ship-to:" check-box is marked.
- Choices for shipping method are updated based on destination address (because not all shippers serve all destinations).
Message: Thank you for your orderPrompt: Please print this page for your recordsRead-only copy of all purchase info.Total amountEstimated arrival dateOption to return to shopping
- Total amount includes sales tax based on billing address.
- Confirming an order empties the shopping cart.
- QUESTION: where should coupon codes fit in?
- Zone: Individual user information
- Pages of information about the current user account. The user must be logged in to access these pages.
Screen Name and Purpose Contents Behavior and ConstraintsPrompt: This is your account informationReal name fieldEmail address fieldUsername field (read-only)New password fieldNew password repeated fieldOpt-in marketing choicesUpdate button
Prompt: These are reviews written by you.List of product reviews:
- Password must pass quality checks.
- "Update" is only enabled when all fields are valid.
- Date review was written
- Product name, link
- Rating given / Current average rating
- Text of product review
- Reviews may be sorted by date, given rating, or current product rating.
- Zone: Administrative pages
- Administrative pages are only accessible by system administrators. These pages need not have the same look and feel or navigational elements as the other zones.
Screen Name and Purpose Contents Behavior and Constraints F-00.Site look and feel optionsDefault timezone and localeSession settingsSecurity settingsOptions to control specific features
Basic product info: name, image, SKU, manufacturerProduct price: regular price, and optional sale priceAvailability: in-stock, back-ordered, discontinuedProduct details: description, specs, additional imagesUser ratings and reviewsProduct sales stats: selections, purchasesTraffic stats: page views, referrers, search termsAdditional operations: discontinue
- All fields basic, price, and detail fields are editable.
- Stats may be viewed in periods of day, week, or month.
- Sale price, if given, must be less than regular price
- Zone: UI-ZONE-NAME
- DESCRIPTION OF ZONE
Screen Name and Purpose Contents Behavior and ConstraintsPROMPTFIELD-NAMEFIELD-NAMEAVAILABLE-ACTIONS
SCREEN-NAME > PANEL-NAMEPURPOSE-OF-PANELPROMPTFIELD-NAMEFIELD-NAMEAVAILABLE-ACTIONS
SCREEN > PANEL > ELEMENT-NAMEPURPOSE-OF-ELEMENT