Figures from Chapter 4 Form Storyboarding Dirk Draheim

Figures from Chapter 4 Form Storyboarding Dirk Draheim, Gerald Weber Form-Oriented Analysis Springer, October 2004.

Fig. 4. 1. Page Diagram – Part I the login data was erroneous Login the registration data was erroneous Welcome browse the books on offer by exploring more and more subcategories select a book out of a list of featured books in order to view details of the book Search. Result Registration Book Category add book to the shopping cart select books out of a list of featured books in order to add them to the shopping cart update cart items delete a cart item Shopping. Cart Springer Verlag 2004

Fig. 4. 1. Page Diagram – Part II Shopping. Cart if the user is not yet a registered customer, he or she might register now order items: this link only exists, if the cart is not empty the user is not logged in Order. Login the user is logged in the login data was erroneous Order. Information the registration data was erroneous place an order Order. Registration Confirmation Springer Verlag 2004

Fig. 4. 2. Screen diagram – Part I – My Shopping Cart Book Welcome Page Logout Quantity Price Quine: Word and Object 1 12. 46 Delete Wittgenstein: Tractatus 1 23. 06 Delete Adams: Dirk Gently 2 24. 00 Delete Update Search for a book: Search Login Buy items in cart Welcome Page E-mail: Password: Springer Verlag 2004 login Register as new already logged in

Fig. 4. 2. Screen diagram – Part II – login Customer Registration Welcome Page E-mail: Register as new Full Name: error occurred Street Address: City: Order Information State: Welcome Page View Cart Logout Edit Account Payment Method John Q. Public Whatever, ***- 86745 49 Nowhere Lane Expiration: 01/2008 New Haven Place your order CT 06511, U. S. A. Book Quine: Word and Object Wittgenstein: Tractatus Adams: Dirk Gently Total Springer Verlag 2004 Country: Quantity Price 1 1 2 12. 46 23. 06 24. 00 59. 52 error occurred Shipping Details ZIP: Password: Repeat Password: Card Type Card No. Whatever. Card Expiration Date 01 Cardholder 2006 Register

Fig. 4. 3. List of options for a single conceptual option My Shopping Cart Book Welcome Page Logout Quantity Price Quine: Word and Object 1 12. 46 Delete Wittgenstein: Tractatus 1 23. 06 Delete Adams: Dirk Gently 2 24. 00 Delete Update Search for a book: Search Springer Verlag 2004 Buy items in cart }

Fig. 4. 4. Form storyboard – Part I Update. Cart • cart. Item • quantity Delete. Cart. Item • cart. Item Shopping. Cart Search • search. Item Order error occurred Order. Login Order. Registration. Link Order. Registration Welcome. Link Order. Login. Form • e-mail • password Springer Verlag 2004 Welcome. Link

Fig. 4. 4. Form storyboard – Part II Order user ady alre n ed i logg Order. Login. Form • e-mail • password Order. Information Welcome. Link Place. Order Springer Verlag 2004 Order. Registration. Form • e. Mail • full. Name • street. Address • city • state • zip • country • password • repeated. Password • card. Type • card. Number • expiration • cardholder error occurred Order. Registration

Fig. 4. 5. Page images – Part I Welcome. Link Shopping. Cart Logout Update. Cart • cart. Item • quantity Search • search. Item Order. Information Delete. Cart. Item • cart. Item Order. Login Welcome. Link Order. Login. Form • e-mail • password Order. Registration. Link Springer Verlag 2004

Fig. 4. 5. Page images – Part II Order. Login Welcome. Link Order. Login. Form • e-mail • password Order. Registration. Link Order. Information Welcome. Link Logout View. Cart Order. Change. Link Place. Order Springer Verlag 2004 Order. Registration. Form • e. Mail • full. Name • street. Address • city • state • zip • country • password • repeated. Password • card. Type • card. Number • expiration • cardholder

Fig. 4. 6. Form storyboard annotated with interaction information – Part I Update. Cart ¡ cart. Item q quantity Delete. Cart. Item ¡ cart. Item Shopping. Cart Search q search. Item Order. Login error occurred Order Springer Verlag 2004 Welcome. Link Order. Registration Welcome. Link Order. Login. Form q e-mail Þpassword

Fig. 4. 6. Form storyboard annotated with interaction information – Part II Order alre ady n ed i logg Order. Login. Form q e-mail Þpassword Order. Information Welcome. Link Place. Order Springer Verlag 2004 Order. Registration. Form q e. Mail q full. Name q street. Address q city q state q zip q country Þpassword Þrepeated. Password card. Type q card. Number expiration q cardholder error occurred user Order. Registration

Fig. 4. 7. Message storyboard– Part I Update. Cart ¡ cart. Item q quantity Delete. Cart. Item ¡ cart. Item Shopping. Cart l cart. Item Search q search. Item Order 2 Order. Login. Form q email Þpassword Springer Verlag 2004 2 error occurred ! author. Name ! title n default. Quantity ! price Order. Registration. Link Order. Login ! error. Message n default. Email Welcome. Link Order. Registration ! error. Message n default. Email n default. Full. Name n default. Street. Address n default. City n default. State n default. Zip n default. Country default. Card. Type n default. Card. Number default. Expiration n default. Cardholder

Fig. 4. 7. Message storyboard– Part II Order. Login. Form q email Þpassword 1 Order. Information ! full. Name ! street. Address 4 ! city ! state ! zip ! country 5 ! card. Type ! truncated. Card. Number ! expiration Welcome. Link Place. Order Springer Verlag 2004 1 user already logged in 3 error occurred 4 shipping details 5 payment method ! author. Name ! title ! quantity ! price ! total. Price Order. Registration ! error. Message n default. Email n default. Full. Name and so on. . . 3 Order. Registration. Form q e. Mail q full. Name q street. Address q city q state q zip q country Þpassword Þrepeated. Password card. Type q card. Number expiration q cardholder