UI Prototyping Overview Dr. Neal CIS 480

UI Prototyping Process 1.Understand problem statement 2.Understand Use Case sequence of actions by user 3.Storyboard page contents and field definitions 4.Confirm with users and business process 5.Build pages and site navigation using GUI tool or graphics tool 6.Confirm with users and business process 7.Validate fields and validation with business processes

Example Problem In the order entry system a user must be authenticated by a user name and password. After they are authenticated a place order form 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 enter of the quantity. This window shows the price of each product as well.

Storyboard Login page OKCancel Name: Account #: Order #: Order Date: Ship Address: User: Password: Sel Qty Description Price [ ] 1 Great Product Add LineDelete LineSubmitCancel Order page Product page Product description Price Wonderful Product Better Product Qty: SelectCancel Exit System Add Item Delete Selection Menu Order Process

Navigation/Site Map Diagram

Prototyped Page for Product The Great Sales Company Display OrdersDisplay Orders Company Information Contact UsCompany InformationContact Us Please Select a product by filling in the quantity: Product DescriptionQuantityPrice Blue T-Shirt XL with crew sleeves19.95 Gray Jacket 300 micro fleece Med49.34 Select ItemsSelect Items Cancel SelectionCancel Selection