1. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 1 Software Engineering: A Practitioner’s Approach, 6/e Chapter 19 Design Modeling for WebApps Software Engineering: A Practitioner’s Approach, 6/e Chapter 19 Design Modeling for WebApps copyright © 1996, 2001, 2005 R.S. Pressman & Associates, Inc. For University Use Only May be reproduced ONLY for student use at the university level when used in conjunction with Software Engineering: A Practitioner's Approach. Any other reproduction or use is expressly prohibited.

2. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 2 Design & WebApps When should we emphasize WebApp design? When should we emphasize WebApp design? when content and function are complex when content and function are complex when the size of the WebApp encompasses hundreds of content objects, functions, and analysis classes when the size of the WebApp encompasses hundreds of content objects, functions, and analysis classes when the success of the WebApp will have a direct impact on the success of the business when the success of the WebApp will have a direct impact on the success of the business “There are essentially two basic approaches to design: the artistic ideal of expressing yourself and the engineering ideal of solving a problem for a customer.” Jakob Nielsen

3. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 3 Design & WebApp Quality Security Security Rebuff external attacks Rebuff external attacks Exclude unauthorized access Exclude unauthorized access Ensure the privacy of users/customers Ensure the privacy of users/customers Availability Availability the measure of the percentage of time that a WebApp is available for use the measure of the percentage of time that a WebApp is available for use Scalability Scalability Can the WebApp and the systems with which it is interfaced handle significant variation in user or transaction volume Can the WebApp and the systems with which it is interfaced handle significant variation in user or transaction volume Time to Market Time to Market

4. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 4 Quality Dimensions for End-Users Time Time How much has a Web site changed since the last upgrade? How much has a Web site changed since the last upgrade? How do you highlight the parts that have changed? How do you highlight the parts that have changed? Structural Structural How well do all of the parts of the Web site hold together. How well do all of the parts of the Web site hold together. Are all links inside and outside the Web site working? Are all links inside and outside the Web site working? Do all of the images work? Do all of the images work? Are there parts of the Web site that are not connected? Are there parts of the Web site that are not connected? Content Content Does the content of critical pages match what is supposed to be there? Does the content of critical pages match what is supposed to be there? Do key phrases exist continually in highly-changeable pages? Do key phrases exist continually in highly-changeable pages? Do critical pages maintain quality content from version to version? Do critical pages maintain quality content from version to version? What about dynamically generated HTML pages? What about dynamically generated HTML pages?

5. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 5 Quality Dimensions for End-Users Accuracy and Consistency Accuracy and Consistency Are today's copies of the pages downloaded the same as yesterday's? Close enough? Are today's copies of the pages downloaded the same as yesterday's? Close enough? Is the data presented accurate enough? How do you know? Is the data presented accurate enough? How do you know? Response Time and Latency Response Time and Latency Does the Web site server respond to a browser request within certain parameters? Does the Web site server respond to a browser request within certain parameters? In an E-commerce context, how is the end to end response time after a SUBMIT? In an E-commerce context, how is the end to end response time after a SUBMIT? Are there parts of a site that are so slow the user declines to continue working on it? Are there parts of a site that are so slow the user declines to continue working on it? Performance Performance Is the Browser-Web-Web site-Web-Browser connection quick enough? Is the Browser-Web-Web site-Web-Browser connection quick enough? How does the performance vary by time of day, by load and usage? How does the performance vary by time of day, by load and usage? Is performance adequate for E-commerce applications? Is performance adequate for E-commerce applications?

6. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 6 WebApp Design Goals Consistency Consistency Content should be constructed consistently Content should be constructed consistently Graphic design (aesthetics) should present a consistent look across all parts of the WebApp Graphic design (aesthetics) should present a consistent look across all parts of the WebApp Architectural design should establish templates that lead to a consistent hypermedia structure Architectural design should establish templates that lead to a consistent hypermedia structure Interface design should define consistent modes of interaction, navigation and content display Interface design should define consistent modes of interaction, navigation and content display Navigation mechanisms should be used consistently across all WebApp elements Navigation mechanisms should be used consistently across all WebApp elements

7. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 7 WebApp Design Goals Identity Identity Establish an “identity” that is appropriate for the business purpose Establish an “identity” that is appropriate for the business purpose Robustness Robustness The user expects robust content and functions that are relevant to the user’s needs The user expects robust content and functions that are relevant to the user’s needs Navigability Navigability designed in a manner that is intuitive and predictable designed in a manner that is intuitive and predictable Visual appeal Visual appeal the look and feel of content, interface layout, color coordination, the balance of text, graphics and other media, navigation mechanisms must appeal to end- users the look and feel of content, interface layout, color coordination, the balance of text, graphics and other media, navigation mechanisms must appeal to end- users Compatibility Compatibility With all appropriate environments and configurations With all appropriate environments and configurations

8. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 8 WebE Design Pyramid

9. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 9 WebApp Interface Design Where am I? The interface should Where am I? The interface should provide an indication of the WebApp that has been accessed provide an indication of the WebApp that has been accessed inform the user of her location in the content hierarchy. inform the user of her location in the content hierarchy. What can I do now? The interface should always help the user understand his current options What can I do now? The interface should always help the user understand his current options what functions are available? what functions are available? what links are live? what links are live? what content is relevant? what content is relevant? Where have I been, where am I going? The interface must facilitate navigation. Where have I been, where am I going? The interface must facilitate navigation. Provide a “map” (implemented in a way that is easy to understand) of where the user has been and what paths may be taken to move elsewhere within the WebApp. Provide a “map” (implemented in a way that is easy to understand) of where the user has been and what paths may be taken to move elsewhere within the WebApp.

10. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 10 Effective WebApp Interfaces Bruce Tognozzi [TOG01] suggests… Bruce Tognozzi [TOG01] suggests… Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work. Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work. Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time. Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time. Effective applications and services perform a maximum of work, while requiring a minimum of information from users. Effective applications and services perform a maximum of work, while requiring a minimum of information from users.

11. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 11 Interface Design Principles-I Anticipation—A WebApp should be designed so that it anticipates the use’s next move. Anticipation—A WebApp should be designed so that it anticipates the use’s next move. Communication—The interface should communicate the status of any activity initiated by the user Communication—The interface should communicate the status of any activity initiated by the user Consistency—The use of navigation controls, menus, icons, and aesthetics (e.g., color, shape, layout) Consistency—The use of navigation controls, menus, icons, and aesthetics (e.g., color, shape, layout) Controlled autonomy—The interface should facilitate user movement throughout the WebApp, but it should do so in a manner that enforces navigation conventions that have been established for the application. Controlled autonomy—The interface should facilitate user movement throughout the WebApp, but it should do so in a manner that enforces navigation conventions that have been established for the application. Efficiency—The design of the WebApp and its interface should optimize the user’s work efficiency, not the efficiency of the Web engineer who designs and builds it or the client-server environment that executes it Efficiency—The design of the WebApp and its interface should optimize the user’s work efficiency, not the efficiency of the Web engineer who designs and builds it or the client-server environment that executes it.

12. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 12 Interface Design Principles-II Focus—The WebApp interface (and the content it presents) should stay focused on the user task(s) at hand. Focus—The WebApp interface (and the content it presents) should stay focused on the user task(s) at hand. Fitt’s Law—“The time to acquire a target is a function of the distance to and size of the target.” Fitt’s Law—“The time to acquire a target is a function of the distance to and size of the target.” Human interface objects—A vast library of reusable human interface objects has been developed for WebApps. Human interface objects—A vast library of reusable human interface objects has been developed for WebApps. Latency reduction—The WebApp should use multi-tasking in a way that lets the user proceed with work as if the operation has been completed. Latency reduction—The WebApp should use multi-tasking in a way that lets the user proceed with work as if the operation has been completed. Learnability— A WebApp interface should be designed to minimize learning time, and once learned, to minimize relearning required when the WebApp is revisited. Learnability— A WebApp interface should be designed to minimize learning time, and once learned, to minimize relearning required when the WebApp is revisited.

13. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 13 Interface Design Principles-III Maintain work product integrity—A work product (e.g., a form completed by the user, a user specified list) must be automatically saved so that it will not be lost if an error occurs. Maintain work product integrity—A work product (e.g., a form completed by the user, a user specified list) must be automatically saved so that it will not be lost if an error occurs. Readability—All information presented through the interface should be readable by young and old. Readability—All information presented through the interface should be readable by young and old. Track state—When appropriate, the state of the user interaction should be tracked and stored so that a user can logoff and return later to pick up where she left off. Track state—When appropriate, the state of the user interaction should be tracked and stored so that a user can logoff and return later to pick up where she left off. Visible navigation—A well-designed WebApp interface provides “the illusion that users are in the same place, with the work brought to them.” Visible navigation—A well-designed WebApp interface provides “the illusion that users are in the same place, with the work brought to them.”

14. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 14 Interface Design Workflow-I Review information contained in the analysis model and refine as required. Review information contained in the analysis model and refine as required. Develop a rough sketch of the WebApp interface layout. Develop a rough sketch of the WebApp interface layout. Map user objectives into specific interface actions. Map user objectives into specific interface actions. Define a set of user tasks that are associated with each action. Define a set of user tasks that are associated with each action. Storyboard screen images for each interface action. Storyboard screen images for each interface action. Refine interface layout and storyboards using input from aesthetic design. Refine interface layout and storyboards using input from aesthetic design.

15. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 15 Mapping User Objectives

16. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 16 Interface Design Workflow-II Identify user interface objects that are required to implement the interface. Identify user interface objects that are required to implement the interface. Develop a procedural representation of the user’s interaction with the interface. Develop a procedural representation of the user’s interaction with the interface. Develop a behavioral representation of the interface. Develop a behavioral representation of the interface. Describe the interface layout for each state. Describe the interface layout for each state. Refine and review the interface design model. Refine and review the interface design model.

17. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 17 Aesthetic Design Don’t be afraid of white space. Don’t be afraid of white space. Emphasize content. Emphasize content. Organize layout elements from top-left to bottom right. Organize layout elements from top-left to bottom right. Group navigation, content, and function geographically within the page. Group navigation, content, and function geographically within the page. Don’t extend your real estate with the scrolling bar. Don’t extend your real estate with the scrolling bar. Consider resolution and browser window size when designing layout. Consider resolution and browser window size when designing layout.

18. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 18 Content Design Develops a design representation for content objects For WebApps, a content object is more closely aligned with a data object for conventional software Represents the mechanisms required to instantiate their relationships to one another. analogous to the relationship between analysis classes and design components described in Chapter 11 A content object has attributes that include content-specific information and implementation-specific attributes that are specified as part of design

19. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 19 Design of Content Objects

20. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 20 Architecture Design Content architecture focuses on the manner in which content objects (or composite objects such as Web pages) are structured for presentation and navigation. The term information architecture is also used to connote structures that lead to better organization, labeling, navigation, and searching of content objects. The term information architecture is also used to connote structures that lead to better organization, labeling, navigation, and searching of content objects. WebApp architecture addresses the manner in which the application is structured to manage user interaction, handle internal processing tasks, effect navigation, and present content. Architecture design is conducted in parallel with interface design, aesthetic design and content design.

21. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 21 Content Architecture Hierarchical structure Grid structure Linear structure Network structure

22. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 22 MVC Architecture The model contains all application specific content and processing logic, including The model contains all application specific content and processing logic, including all content objects all content objects access to external data/information sources, access to external data/information sources, all processing functionality that are application specific all processing functionality that are application specific The view contains all interface specific functions and enables The view contains all interface specific functions and enables the presentation of content and processing logic the presentation of content and processing logic access to external data/information sources, access to external data/information sources, all processing functionality required by the end-user. all processing functionality required by the end-user. The controller manages access to the model and the view and coordinates the flow of data between them. The controller manages access to the model and the view and coordinates the flow of data between them.

23. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 23 MVC Architecture

24. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 24 Navigation Design Begins with a consideration of the user hierarchy and related use-cases Each actor may use the WebApp somewhat differently and therefore have different navigation requirements As each user interacts with the WebApp, she encounters a series of navigation semantic units (NSUs) NSU—“a set of information and related navigation structures that collaborate in the fulfillment of a subset of related user requirements”

25. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 25 Navigation Semantic Units Navigation semantic unit Navigation semantic unit Ways of navigation (WoN)— Ways of navigation (WoN)—represents the best navigation way or path for users with certain profiles to achieve their desired goal or sub-goal. Composed of … Navigation nodes (NN) connected by Navigation links NN 1 NN 2 NN 4 NN 3 link 13 link 12 link 34 link 24 NSU

26. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 26 Creating an NSU

27. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 27 Navigation Syntax Individual navigation link—text-based links, icons, buttons and switches, and graphical metaphors.. Individual navigation link—text-based links, icons, buttons and switches, and graphical metaphors.. Horizontal navigation bar—lists major content or functional categories in a bar containing appropriate links. In general, between 4 and 7 categories are listed. Horizontal navigation bar—lists major content or functional categories in a bar containing appropriate links. In general, between 4 and 7 categories are listed. Vertical navigation column Vertical navigation column lists major content or functional categories lists major content or functional categories lists virtually all major content objects within the WebApp. lists virtually all major content objects within the WebApp. Tabs—a metaphor that is nothing more than a variation of the navigation bar or column, representing content or functional categories as tab sheets that are selected when a link is required. Tabs—a metaphor that is nothing more than a variation of the navigation bar or column, representing content or functional categories as tab sheets that are selected when a link is required. Site maps—provide an all-inclusive tab of contents for navigation to all content objects and functionality contained within the WebApp. Site maps—provide an all-inclusive tab of contents for navigation to all content objects and functionality contained within the WebApp.

28. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 28 Component-Level Design WebApp components implement the following functionality WebApp components implement the following functionality perform localized processing to generate content and navigation capability in a dynamic fashion provide computation or data processing capability that are appropriate for the WebApp’s business domain provide sophisticated database query and access establish data interfaces with external corporate systems.

29. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 29 Hypermedia Design Patterns-I Architectural patterns. Architectural patterns. assist in the design of content and WebApp architecture assist in the design of content and WebApp architecture many architectural patterns are available (e.g., Java Blueprints at java.sun.com/blueprints/) many architectural patterns are available (e.g., Java Blueprints at java.sun.com/blueprints/) Component construction patterns. Component construction patterns. recommend methods for combining WebApp components (e.g., content objects, functions) into composite components. recommend methods for combining WebApp components (e.g., content objects, functions) into composite components. Navigation patterns. Navigation patterns. assist in the design of NSUs, navigation links and the overall navigation flow of the WebApp. _ assist in the design of NSUs, navigation links and the overall navigation flow of the WebApp. _

30. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 30 Hypermedia Design Patterns-II Presentation patterns Presentation patterns how to organize user interface control functions for better usability how to organize user interface control functions for better usability how to show the relationship between a interface action and the content objects it affects how to show the relationship between a interface action and the content objects it affects how to establish effective content hierarchies, and many others. how to establish effective content hierarchies, and many others. Behavior/user interaction patterns Behavior/user interaction patterns how the interface informs the user of the consequences of a specific action how the interface informs the user of the consequences of a specific action how a user expands content based on usage context and user desires how a user expands content based on usage context and user desires how to best describe the destination that is implied by a link how to best describe the destination that is implied by a link how to inform the user about the status of an on-going interaction, and others. how to inform the user about the status of an on-going interaction, and others.

31. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 31 Patterns Repositories Hypermedia Design Patterns Repository Hypermedia Design Patterns Repository http://www.designpattern.lu.unisi.ch/ http://www.designpattern.lu.unisi.ch/ InteractionPatterns by TomErickson InteractionPatterns by TomErickson http://www.pliant.org/personal/Tom_Erickson/InteractionPatterns.html http://www.pliant.org/personal/Tom_Erickson/InteractionPatterns.html Web Design Patterns by Martijn vanWelie Web Design Patterns by Martijn vanWelie http://www.welie.com/patterns/ http://www.welie.com/patterns/ Improving Web Information Systems with Navigational Patterns Improving Web Information Systems with Navigational Patterns http://www8.org/w8-papers/5b-hypertext-media/improving/improving.html http://www8.org/w8-papers/5b-hypertext-media/improving/improving.html An HTML 2.0 Pattern Language An HTML 2.0 Pattern Language http://www.anamorph.com/docs/patterns/default.html http://www.anamorph.com/docs/patterns/default.html Common Ground - A Pattern Language for HCI Design Common Ground - A Pattern Language for HCI Design http://www.mit.edu/~jtidwell/interaction_patterns.html http://www.mit.edu/~jtidwell/interaction_patterns.html Patterns for Personal Web Sites Patterns for Personal Web Sites http://www.rdrop.com/~half/Creations/Writings/Web.patterns/index.html http://www.rdrop.com/~half/Creations/Writings/Web.patterns/index.html Indexing Pattern Language Indexing Pattern Language http://www.cs.brown.edu/~rms/InformationStructures/Indexing/Overview.html http://www.cs.brown.edu/~rms/InformationStructures/Indexing/Overview.html

32. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 32 OOHDM Object-Oriented Hypermedia Design Method (OOHDM)

33. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 33 Conceptual Schema

34. These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 34 Design Metrics Does the user interface promote usability? Does the user interface promote usability? Are the aesthetics of the WebApp appropriate for the application domain and pleasing to the user? Are the aesthetics of the WebApp appropriate for the application domain and pleasing to the user? Is the content designed in a manner that imparts the most information with the least effort? Is the content designed in a manner that imparts the most information with the least effort? Is navigation efficient and straightforward? Is navigation efficient and straightforward? Has the WebApp architecture been designed to accommodate the special goals and objectives of WebApp users, the structure of content and functionality, and the flow of navigation required to use the system effectively? Has the WebApp architecture been designed to accommodate the special goals and objectives of WebApp users, the structure of content and functionality, and the flow of navigation required to use the system effectively? Are components designed in a manner that reduces procedural complexity and enhances the correctness, reliability and performance? Are components designed in a manner that reduces procedural complexity and enhances the correctness, reliability and performance?