Chapter : 13 WebApp Design

WebApp Design Quality Design leads to high-quality product. General quality attributes which can be applied to WebApp are : Usability :- Global site understandability Online feedback and help features Interface and aesthetic features Special features

2) Functionality :- Navigation and browsing features Searching and retrieving capability Application domain-related features 3) Reliability :- Correct link processing Error Recovery User input validation and recovery

4) Efficiency :- Response time performance Page generation speed Graphics generation speed 5) Maintainability :- Ease of correction Adaptability Extendibility Additional attributes

Security :- WebApps have become heavily integrated with critical corporate and government databases. Ecommerce applications extract and then store sensitive customer information. Therefore security is paramount in many situation. The key measure of security is the ability of WebApp and its server environment to rebuff unauthorized access. Availability :- Availability is the measure of the percentage of time that a WebApp is available for use. The typical end user expects WebApps to be available 24/7/365.

Security :- WebApps have become heavily integrated with critical corporate and government databases. Ecommerce applications extract and then store sensitive customer information. Therefore security is paramount in many situation. The key measure of security is the ability of WebApp and its server environment to rebuff unauthorized access. Availability :- Availability is the measure of the percentage of time that a WebApp is available for use. The typical end user expects WebApps to be available 24/7/365.

3) Scalability :- Build a WebApp that can accommodate the burden of success (significantly more end users) and become more successful. 4) Time-to-market :- It is a measure of quality from a business point of view. The first WebApp to address a specific market segment often captures a disproportionate number of end user. A useful set of criteria for assessing the quality of content : Can the scope and depth of content be easily determined to ensure that it meets user’s need? Is content valuable to targeted user community?

Design Goals A set of design goals that are applicable to virtually every WebApp regardless of application domain, size and complexity : Simplicity : Content should be informative but succinct (brief) and should use a delivery mode that is being delivered. Aesthetic should be pleasing. Architecture should achieve WebApp objectives in simplest possible manner. Navigation should be straightforward. Functions should be easy to use and easier to understand. Consistency : Content should be constructed

consistently. Graphic design should present a consistent look across all parts of the WebApp. Architecture design should establish templates that lead to a consistent modes of interaction, navigation, and content display. Navigation mechanism should be used consistently across all WebApp elements. 3) Identity : The aesthetic, interface and navigational design of a WebApp must be consistent with the application domain for which it is to be built. We should work to establish an identity for the WebApp through the design. A website for hiphop group will have a different look and feel than a WebApp designed for a financial service company.

4) Robustness : The user expects robust content and functions that are relevant to user’s need. If these elements are missing or insufficient, it is likely that the WebApp will fail. 5) Navigability : The user should understand how to move about the WebApp without having to search for navigation links or instructions. It is important to position links to major WebApp content and functions in a predictable location on every web page. 6) Visual Appeal : Many design characteristics do

A Design Pyramid For WebApp contribute visual appeal. 7) Compatibility : A WebApp will be used in a variety of environments and must be designed to be compatible with each. A Design Pyramid For WebApp Figure 13.2

WebApp Interface Design The objective of a WebApp interface are to : (1) establish a consistent window into the content and functionality provided by the interface (2) guide the user through a series of interactions with the WebApp (3) organize the navigation options and content available to the user. To achieve a consistent interface, we should use aesthetic design to establish a coherent look. To guide user interaction, we may draw on an appropriate metaphor that enables the user to

gain an intuitive understanding of the interface. To implement navigation options, we can select from a number of interaction mechanism : Navigation menu : keyword menus that list key content and/or functionality. These menus may be implemented so that the user can choose from a hierarchy of subtopics that is displayed when the primary menu option is selected. Graphic icons : buttons, switches, and similar graphical images that enable the user to select some property or specify a decision. Graphic images : some graphical representation that is selectable by the user and implements a link to content object or WbApp functionality.

Aesthetic Design Layout Issues Aesthetic design is an artistic endeavor that complements the technical aspects of WebApp design. Layout Issues A number of general layout guidelines: Don’t be afraid of white space : It is inadvisable to pack every square inch of a web page. Emphasize content : The typical web page should be 80% content with the remaining real estate dedicated to navigation and other features.

Organize layout elements from top-left to bottom-right : The majority of user will scan a web page from top-left to bottom-right. If layout elements have specific priorities, high-priority elements should be placed in the upper-left portion of the page. Group navigation, content, and function geographically within the page : Human look for patterns in virtually all things. If there are no discernable patterns within a web page, user frustration is likely to increase. Don’t extend your real estate with the scrolling bar :

The user would prefer not to scroll The user would prefer not to scroll. It is better to reduce page content or to present necessary content on multiple pages. Consider resolution and browser window size when designing layout :Rather than defining fixed sizes within a layout, the design should specify all layout items as a percentage of available space. Graphic Design Issues The graphic design process begins with layout and proceeds into a consideration of global color schemes; text types, sizes, and style; the use of supplementary media; and all other aesthetic elements of an application.

The user would prefer not to scroll The user would prefer not to scroll. It is better to reduce page content or to present necessary content on multiple pages. Consider resolution and browser window size when designing layout :Rather than defining fixed sizes within a layout, the design should specify all layout items as a percentage of available space. Graphic Design Issues The graphic design process begins with layout and proceeds into a consideration of global color schemes; text types, sizes, and style; the use of supplementary media; and all other aesthetic elements of an application.

Content Design Content Object In context of WebApp design, a content object is more closely aligned with a data object for traditional software. A content object has attributes that include content-specific information and implementation specific attributes that are specified as part of design. UML association and an aggregation may be used to represent relationship between content object.

Content Design Issues Once all content objects are modeled, the information that each object is to deliver must be authored and then formatted to best meet the customer’s needs. Content authoring is the job of specialists in the relevant area who design the content object by providing an outline of information to be delivered and an indication of the types of generic content objects that will be used to deliver the information. Aesthetic design may also be applied to represent the proper look and feel for the content.

Architectural Design Content Architecture As an architectural designer, you must identify content architecture and WebApp architecture. Content Architecture The design of content architecture focuses on the definition of the overall hypermedia structure of the WebApp. Four different content architecture : 1) Linear Structure : It is encountered when a predictable sequence of interactions is common. E.g. a tutorial presentation in which pages of information are presented only after prerequisite information has been presented. (Figure : 13.4)

2) Grid structure : It is an architectural option that can be applied when WebApp content can be organized categorilly in two (or more) dimensions. E.g. an e-commerce site sells golf clubs. (Figure : 13.5) 3) Hierarchical Structure : A WebApp hierarchical can be designed in a manner that enables flow of control horizontally across vertical branches of structure. (Figure 13.6) 4)Networked or Pure structure : Architectural components are designed so that they may pass control to virtually every other component in the system. (Figure 13.7)

Component-Level Design WebApps deliver sophisticated processing functions that (1) perform localized processing to generate content and navigation capability in a dynamic fashion, (2) provide computation or data processing capability that are appropriate for the WebApp’s business domain, (3) provide sophisticated database query and access, and (4) establish data interfaces with external corporate systems. To achieve these capabilities, you must design and construct program components that are identical in form to software components for traditional software.