Design Modeling for Web Applications

1
Design Modeling for Web Applications
2
Design Issues for Web Engineering

• Design and WebApp Quality
• Security
• Availability
• Scalability
• Time-to-Market

3
Design Goals

• Simplicity
• Consistency
• Identity
• Robustness
• Navigability
• Visual Appeal
• Compatability

4
The Web Design Pyramid

• Interface Design
• Aesthetic Design
• Content Design
• Navigation Design
• Architecture Design
• Component Design

5
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

6
WebApp Interface Design

• Interface Control Mechanisms
• Navigation Menus
• Graphic Icons
• Graphic Images

7
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

8
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.

9
Continued

• 10. Describe the interface layout for each state.
• 11. Refine and review the interface design model.

10
Aesthetic Design

• Layout issues
• - Look, Navigation, Events
• Graphic Design Issues
• - Sizes, Fonts, Typefaces

11
Architecture Design

• Linear Structures
• Grid Structure
• Hierarchical

12
Navigation Design

• Semantics
• Syntax

13
Hypermedia Design Patterns

• Architectural Patterns
• Component constructions patterns
• Navigation patterns
• Presentation patterns
• Behavior/user Interaction Patterns

14
Object Oriented Hypermedia Design Method (OOHDM)

• Conceptual Design
• Navigational Design
• Abstract Interface Design

15
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?