Chapter 13 WebApp Design Overview The chapter describes the technical and non-technical activities that make up WebApp

p design. WebApp design encompasses six major steps driven by requirements modeling information. Content design uses the content model (developed during analysis) as the basis for establishing the design of content objects. Aesthetic design (also called graphic design) establishes the look and feel that the end-user sees. Architectural design focuses on the overall hypermedia structure of all content objects and functions. Interface design establishes the layout and interaction mechanisms that define the user interface. Navigation design defines how the end-user navigates through the hypermedia structure, and component design represents the detailed internal structure of functional elements of the WebApp. The Web engineering team should review each design model element to uncover errors inconsistencies and omissions. Web Quality Requirements Usability Functionality Reliability Efficiency Maintainability Security Availability Scalability Time-to-market

WebApp Design Quality Checklist Can content and/or function and/or navigation options be tailored to the users preferences? Can content and/or functionality be customized to the bandwidth at which the user communicates? Have graphics and other non-text media been used appropriately? Are graphics file sizes optimized for display efficiency? Are tables organized and sized in a manner that makes them understandable and displayed efficiently? Is HTML optimized to eliminate inefficiencies? Is the overall page design easy to read and navigate? Do all pointers provide links to information that is of interest to users? Is it likely that most links have persistence on the Web?

Is the WebApp instrumented with site management utilities that include tools for usage tracking, link testing, local searching, and security?

Assessing Web Content Quality Can the scope and depth of the web content be determined to ensure that it meets user needs? Can background and authority of contents authors be easily identified? Is possible to determine content currency and date of last update? Is content location stable (e.g. URL stays the same)? Is the content credible? Is the content unique? Is the content valuable to users? Is the content well organized and easily accessible?

WebApp Design Goals Simplicity Consistency Identity Robustness Navigability Visual appeal Compatibility

Web Engineering Design Activities Interface design describes structure and organization of the user interface (screen layout, interaction modes, and navigation mechanisms) Aesthetic design look and feel of WebApp (graphic design) Content design defines layout, structure, and outline for all WebApp content and content object relationships Architectural design hypermedia structure of WebApp Navigation design navigational flow between content objects Component design develops processing logic required to implement the WebApp functional components

WebApp Interface Objectives

Establish a consistent window into the content and functionality provided by the interface Guide the user through a series of interactions with the WebApp Organize the navigation options and content available to the user

Interface Control Mechanisms Navigation menus (keyword menus) Graphic icons (buttons, switches, etc.) Graphic images (used to implement links)

Aesthetic Design Layout issues o Use white space generously o Emphasize content o Organize elements from top-left to bottom-right o Group navigation, content, and function geographically within page\ o Avoid temptation to use scroll bars o Take differing resolutions and browser window sizes into account during design Graphic design issues o Layout o Color schemes o Text fonts, sizes, and styles o Multimedia elements (audio, video, animation, etc.)

Content Design Representations for content objects and their relationships (Web engineers) o Analysis content objects modeled by UML associations and aggregations Representation of information within specific content objects (content authors) o As content objects are designed they are chunked to form pages (based in user needs and content relationships) o Aesthetic design may be applied to get the proper look and feel for the information

Architecture Design Content architecture focuses on the manner in which content objects are

structured for presentation and navigation WebApp architecture addresses the manner in which the application is structured to manage user interaction, handle internal processing tasks, effect navigation, and present content (may be influenced by the nature of the development environment) Architectural design is often conducted in parallel with user interface design

Content Architectural Structures Linear structures text and graphics presented in fixed sequential order Grid structures useful when WebApp content must be organized in two pr more ways or dimensions Hierarchical structures not always traversed in strict depth-first manner, branches are often inter-linked Networked or "pure" web structure every node is connected to every other node Composite structures combine one or more of these structures

Model-View-Controller (MVC) Architecture Three layer architecture that decouples interface from both navigation and application behavior Model object contains all application specific content and processing logic View contains all interface specific functions enabling presentation of content and processing logic Controller manages access to the model and the views and coordinates flow of data between them In WebApps, the view is updated by the controller using data from the model based on user input

Navigation Design Identify the semantics of navigation for different users based on the perceived roles (i.e. visitor, registered customer, or privileged user) and the goals associated with their roles. Define the mechanics (syntax) of achieving navigation

Navigation Semantics Each user encounters a series of navigation semantic units (NSUs)

Each NSU is composed of a set of navigation elements called ways of navigation (WoN) Each WoN is organized as a set of navigational nodes (NN) connected by navigational links that represent the best navigation pathway to achieve a navigational goal for a soecific type of use bbb

Navigation Syntax Individual navigation link text-based links, icon, buttons, switches, and geographical metaphors Horizontal navigation bar lists 4 to 7 major content or functional categories in a bar with appropriate links Vertical navigation column (two strategies) Lists major content or functional categories Lists every major content object in WebApp Tabs variation of navigation bar or columns Site maps provides all inclusive table of contents to all content objects and functionality contained in the WebApp

WebApp Component-Level Design The component design methods for traditional software components apply to the design of WebApp components with little modification The implementation environment, programming languages, design patterns, frameworks and software for WebApps may vary somewhat

Object-Oriented Hypermedia Design Method (OOHDM) Conceptual design Creates representation of subsystems, classes, and relationships that define WebApp application domain UML class and collaboration diagrams may be used Navigational design Identifies navigational objects derived from conceptual design classes UML use-cases, state diagrams, and sequence diagrams may be used Use of CRC cards may also be helpful Abstract interface design Specifies interface objects visible to users during WebApp interaction Abstract data view (ADV) formal model (similar to UML state diagram) used to represent relationship between interface object s and navigation object and the behavioral characteristics of the interface objects

Implementation classes, navigation, and interface are characterized in a manner that allows them to b implemented in a specific computing environment