Design Modeling for Web Applications Developed by Reneta Barneva, SUNY Fredonia

Design Issues for Web Engineering Design and WebApp Quality Security Availability Scalability Time-to-Market Developed by Reneta Barneva, SUNY Fredonia

Developed by Reneta Barneva, SUNY Fredonia Design Goals Simplicity Consistency Identity Robustness Navigability Visual Appeal Compatability Developed by Reneta Barneva, SUNY Fredonia

Developed by Reneta Barneva, SUNY Fredonia The Web Design Pyramid Interface Design Aesthetic Design Content Design Navigation Design Architecture Design Component Design Developed by Reneta Barneva, SUNY Fredonia

WebApp Interface Design Interface Design Principles and Guidelines Anticipation Communication Consistency Controlled Autonomy Efficiency Flexibility Focus Human Interface Objects Latency Reduction Metaphors Maintain Integrity Readability Track State Visible Navigation Developed by Reneta Barneva, SUNY Fredonia

WebApp Interface Design Interface Control Mechanisms Navigation Menus Graphic Icons Graphic Images Developed by Reneta Barneva, SUNY Fredonia

Interface Design Workflow Tasks Review Information contained in the analysis model and refine as required. Develop a rough sketch of the interface layout. Map user objectives into specific interface actions. Define a set of user tasks that are associated with each action Developed by Reneta Barneva, SUNY Fredonia

Developed by Reneta Barneva, SUNY Fredonia Continued 5. Storyboard screen images for each interface action. 6. Refine interface layout and storyboards using input from aesthetic design. 7. Identify user interface objects that are required to implement the interface. 8. Develop a behavioral representation of the interface. Developed by Reneta Barneva, SUNY Fredonia

Developed by Reneta Barneva, SUNY Fredonia Continued 10. Describe the interface layout for each state. 11. Refine and review the interface design model. Developed by Reneta Barneva, SUNY Fredonia

Developed by Reneta Barneva, SUNY Fredonia Aesthetic Design Layout issues - Look, Navigation, Events Graphic Design Issues - Sizes, Fonts, Typefaces Developed by Reneta Barneva, SUNY Fredonia

Developed by Reneta Barneva, SUNY Fredonia Architecture Design Linear Structures Grid Structure Hierarchical Developed by Reneta Barneva, SUNY Fredonia

Developed by Reneta Barneva, SUNY Fredonia Navigation Design Semantics Syntax Developed by Reneta Barneva, SUNY Fredonia

Hypermedia Design Patterns Architectural Patterns Component constructions patterns Navigation patterns Presentation patterns Behavior/user Interaction Patterns Developed by Reneta Barneva, SUNY Fredonia

Object Oriented Hypermedia Design Method (OOHDM) Conceptual Design Navigational Design Abstract Interface Design Developed by Reneta Barneva, SUNY Fredonia

Design Metrics for WebApps Does the user interface promote usability? Are the aesthetics appropriate, pleasing to the user? Is the content designed in a manner that imparts the most information with the least effort? Is navigation efficient and straightforward? Has it been designed to accommodate special goals and objectives? Are components designed in a manner that reduces complexity and enhances correctness? Developed by Reneta Barneva, SUNY Fredonia