1 / 18

UI Storyboarding Overview

UI Storyboarding Overview. Dr. Morgan CIS 480. UI Storyboarding Process. Understand problem context Understand Use Case sequence of actions by user Develop Navigation diagram Storyboard page/window contents and field definitions Confirm with users and business process

ksena
Download Presentation

UI Storyboarding Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UI Storyboarding Overview Dr. Morgan CIS 480

  2. UI Storyboarding Process • Understand problem context • Understand Use Case sequence of actions by user • Develop Navigation diagram • Storyboard page/window contents and field definitions • Confirm with users and business process • Storyboard and site navigation will be used to develop GUI interface ITERATIVE LOOP

  3. UI Design Rules • Strive for consistency (common look & feel) • Enable shortcuts for frequent users (accelerator keys) • Offer informative feedback (confirmations) • Design dialogs/pages to yield closure (a transaction) • Offer simple error handling (avoid confusion) • Permit easy reversal of actions (don’t forget cancel/undo) • Support internal locus of control (to/from a central point) • Reduce short-term memory load (customer #)

  4. Example UI Design Problem Menu Page Login Page • Use Case: In the order entry system a user must be authenticated by a user name and password. After they are authenticated a menu allows them to select a place order form which allows them to enter their shipping address. All user information including name, account number, order date and order number are automatically populated by the system. They can add or delete order lines from the order by using the add or delete buttons. Items to be deleted must be selected by checking the checkbox on the order line. The order form also includes a submit and cancel button to process or drop the order. If the user clicks the add order line button another window provides selection of a product and entry of the quantity. This window shows the price of each product as well. Order Page Product Page

  5. Navigation/Site Map Diagram Each flow should have a corresponding command, button or something to create event

  6. Storyboard Product page Login page Product description Price User: Wonderful Product 55.71 Better Product 35.99 Password: Add Item Qty: OK Cancel Select Cancel Order page Exit System Name: Order #: Order Date: Menu Account #: Order Ship Address: Process Sel Qty Description Price Delete Selection [ ] 1 Great Product 43.95 Add Line Delete Line Submit Cancel

  7. Use Case Example: “Receive a Book” Normal Flow: • Collect new books from shipment dock. • Select from the system to receive a book. • System provides entry of search information. • For each book, enter book title, author, and category • System displays book information if in system. • Select page from menu based on the situation. • System displays add copy form, User enters book catalog number, ISBN, year, and edition (as needed). • System displays new copy form. User enters title, author, category, publisher in addition to catalog number, ISBN, year, and edition. • System verifies information and ensures that catalog number is unique. • Mark book with catalog number and place on shelving cart. NOTE: Process can be repeated

  8. UI Storyboarding Process • Understand problem context • Understand Use Case sequence of actions by user • Develop Navigation diagram • Storyboard page/window contents and field definitions • Confirm with users and business process • Storyboard and site navigation will be used to develop GUI interface ITERATIVE LOOP

  9. UI Design Rules • Strive for consistency (common look & feel) • Enable shortcuts for frequent users (accelerator keys) • Offer informative feedback (confirmations) • Design dialogs/pages to yield closure (a transaction) • Offer simple error handling (avoid confusion) • Permit easy reversal of actions (don’t forget cancel/undo) • Support internal locus of control (to/from a central point) • Reduce short-term memory load (customer #)

  10. Use Case Navigation Diagram

  11. Storyboard of Pages

  12. Storyboard of Pages

  13. Storyboard of Pages

  14. Storyboard of Pages

  15. Navigation Diagram (Visio 2010) • In Visio • Select Software & Database • Template “Conceptual Web Site”

  16. Diagram Objects (Visio 2010) Standard Pages Home Connection Flow Between Pages Can generally just double click to add text for web page or connector

  17. Using the dynamic connector • Needed for non straight line connections • Drag and drop, Manipulate end points and • Right click on connector line to add appropriate arrow

  18. Lab Assignment • Complete the navigation diagram for the Receive a book Use case

More Related