The chapter describes the technical and non-technical activities that make up WebApp design. The look and feel of the content is part of the graphic design. The layout of the user interface is created as part of the interface design. The WebApp technical structure is modeled as part of the architectural design and navigational design. A good Web engineer will make sure that a design model should be built before construction begins and that the design will evolve from the stakeholder requirements. WebApp design includes six major steps (content design, aesthetic design, architectural design, interface design, navigational design, component design). 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
Web Quality Attributes Visible to End-Users
Time (volatility of content)
Structural (content cohesiveness and working links)
Content (matches user expectations)
Accuracy and consistency
Response time and latency
Performance
Assessing Web Quality
Can the scope and depth of the web content be determined to ensure that it meets user needs?
Can background and authority of content's 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
Navigation design - navigational flow between content objects
Architectural design - hypermedia structure of WebApp
Component design - develops processing logic required to implement the WebApp functional components
End-User Interface Concerns
Where am I?
Interface should indicate which WebApp is running
Interface should indicate user's location in content hierarchy
What can I do now?
Interface helps user understand current options (live link and relevant content)
Where have I been and where am I going?
Provide user with map showing paths through the WebApp
User Interface Design Principles
Anticipation - interface designed to anticipate the user' s next move
Communication - interface shows status of any user initiated activity
Consistency - navigation and controls are same throughout WebApp
Controlled autonomy - designer allows user to feel in control of WebApp
Efficiency - WebApp optimizes user's work efficiency, not the designer's
Flexibility - support specific tasks as well as allow browsing
Focus - interface and content should remain focused on user tasks
Fitt's Law - time to hit a target using a pointing device is a function of the distance traveled and the size of the target
Human interface objects - use WebApp tool libraries
Latency reduction - provide feedback to user when delays are necessary, multi-task when possible to avoid long waiting periods
Learnability - interface is easy to learn and easy to retain over time
Metaphors - interfaces based on metaphors familiar to user are easy to learn and easier to use
Maintain work product integrity - don't allow user work products to be lost when errors occurs (e.g., save often)
Readability - content is easy to read by young and old
Track state - when appropriate track state of user interaction to allow user to logoff and return later
Visible navigation - provide illusion that user remains in same place and work is brought to them
Pragmatic WebApp Interface Guidelines
Minor server errors are likely to cause user to leave WebApp and look for an alternative site
Reading speed on monitor is about 25% slower than for hardcopy
Avoid "under construction" signs
Users prefer not having to scroll to read content
Navigation menus and headers should be designed consistently and be available on all pages available to the user
Do not rely on browser functions to assist in navigation
Aesthetics should never take precedence over application functionality
Navigation should be obvious to causal users
Interface Control Mechanisms
Navigation menus
Graphic icons (buttons, switches, etc.)
Graphic images (used to implement links)
Interface Workflow Tasks
Review and refine analysis information.
Develop rough sketch of WebApp interface layout.
Map user objectives into specific interface actions.
Define set of user tasks associated with each action.
Storyboard screen images for each interface action.
Refine interface layouts and storyboards using input from aesthetic design.
Identify user interface objects required to implement user interface.
Develop procedural representation of user's interaction with the interface.
Develop a behavioral representation of user's interaction with the interface.
Describe interface layout for each state.
Review and refine the interface model (focus on usability).
Aesthetic Design
Layout issues
Use white space generously
Emphasize content
Organize elements from top-left to bottom-right
Group navigation, content, and function geographically within page
Avoid temptation to use scroll bars
Take differing resolutions and browser window sizes into account during design
Graphic design issues
Layout
Color schemes
Text fonts, sizes, and styles
Use of multimedia elements (audio, video, animation, etc.)
Content Design
Representations for content objects and their relationships (Web engineers)
Analysis content objects modeled by UML associations and aggregations
Representation of information within specific content objects (content authors)
As content objects are designed they are "chunked" to form pages (based in user needs and content relationships)
Aesthetic design may be applied to get the proper look and feel for the information
Content Object Browsing Primitives
Sequential - used for linear content
Conditional - allows user to choose between alternative content objects and allows return to current position
Nested - allows branching to other content objects, but demands return to object where branching occurred
Iterative - occurs when user goes through content object repeatedly with each iteration defining new state conditions and use of different links
Technical Elements for Web-Based Design
Design principles and methods (high modularity, low coupling, information hiding, stepwise refinement, OO design methods)
Golden rules (design heuristics for hypermedia applications)
Design Patterns (can be applied to WebApp functional elements, documents, graphics, and general aesthetics)
Templates (provide reusable skeletal frameworks for any design pattern or document used within the WebApp)
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 or 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 structues
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 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 map - provides all inclusive table of contents to all content objects and functionality contained in the WebApp
WebE Design Patterns
Architectural patterns - assist in the design of content and WebApp architecture
Component construction patterns - recommended methods for combining WebApp components
Navigation patterns - assist in design of navigation semantic units (NSU) navigation links, and overall navigation flow of WebApp
Cycle (user is returned to previously visited node)
Web ring (implements a grand cycle that links entire hypertext into a tour of a subject)
Contour (occurs when cycles are interconnected, allowing navigation across paths defined by cycles)
Counterpoint (hypertext commentary used to interrupt content narrative to provide additional information or insight)
Mirrorworld (content is presented using several threads, each with its own perspective or point of view)
Sieve (user guided through a series of decisions to direct user to specific content indexed by the decisions)
Neighborhood (uniform navigation is provided to user regardless of position within the WebApp)
Presentation patterns - assists in presentation of content to user via the interface
Behavior/user interaction patterns - assist in the design of user-machine interaction
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 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 be implemented in a specific computing environment
Use WebApp Design Metrics
Is the WebApp interface usable?
Are the aesthetics of the WebApp pleasing to the user and appropriate for the information domain?
Is the content designed to impart the most information for the least amount of effort?
Is navigation efficient and straightforward?
Has the WebApp architecture been designed to accommodate special goals and objectives of users, content structure, functionality, and effective navigation flow?
Are the WebApp components designed to reduce procedural complexity and enhance correctness, reliability, and performance?
