The creation of an effective design will typically require a diverse set of skills.
Sometimes, for small projects, a single developer may need to be multi-skilled.
For larger projects, it may be advisable and/or feasible to draw on the expertise of specialists:
Web engineers,
Graphic designers,
Content developers,
Programmers,
Database specialists,
Information architects,
Network engineers,
Security experts,
Testers.
In Design pyramid for WebApps, each level of the pyramid represents a design action…
Interface Design
Where am I? The interface should
provide an indication of the WebApp that has been accessed
Inform the user of location in the content hierarchy
What can I do now? The interface should always help the user understand his current options
what functions are available?
what links are live?
what content is relevant?
Where have I been, where am I going? The interface must facilitate navigation.
Provide a “map” (implemented in a way that is easy to understand) of where the user has been and what paths may be taken to move elsewhere within the WebApp.
Aesthetic Design
Aesthetic design, also called graphic design.
Layout Issues :
Don’t be afraid of white space.
Emphasize content.
Organize layout elements from top-left to bottom right.
Group navigation, content, and function geographically within the page.
Don’t extend your real estate with the scrolling bar.
Consider resolution and browser window size when designing layout.
Content Design
Develops a design representation for content objects
For WebApps, a content object is more closely aligned with a data object for conventional software.
Represents the mechanisms required to instantiate their relationships to one another.
Analogous to the relationship between analysis classes and design components.
A content object has attributes that include content-specific information
Implementation-specific attributes that are specified as part of design
Architecture Design
Content architecture focuses on the manner in which content objects (or composite objects such as Web pages) are structured for presentation and navigation.
The term information architecture is also used to predict structures that lead to better organization, labeling, navigation, and searching of content objects.
WebApp architecture addresses the manner in which the application is structured to manage user interaction, handle internal processing tasks, effect navigation, and present content.
Architecture design is conducted in parallel with interface design, aesthetic design and content design.
Content architecture :
Four different content structures :
(1) Linear structures
(2) Grid structure
(3) Hierarchical structures
(4) Networked or “pure web” structure
WebApp architecture
WebApp architecture describes an infrastructure that enables a Web-based system or application to achieve its business objectives.
The Model-View-Controller (MVC) architecture is one of a number of suggested WebApp infrastructure models that decouple the user interface from the WebApp functionality and informational content.
Model-View-Controller (MVC) architecture
Model :
The model (sometimes referred to as the “model object”) contains all application-specific content and processing logic, including all content objects, access to external data/information sources, and all processing functionality that is application specific.
View :
The view contains all interface specific functions and enables the presentation of content and processing logic, including all content objects, access to external data/information sources, and all processing functionality required by the end user.
Controller :
The controller manages access to the model and the view and coordinates the flow of data between them.
Navigation Design
Begins with a consideration of the user hierarchy and related use cases.
Each actor may use the WebApp somewhat differently and therefore have different navigation requirements
As each user interacts with the WebApp, it encounters a series of navigation semantic units (NSUs)
NSU—“a set of information and related navigation structures that collaborate in the fulfillment of a subset of related user requirements”
Navigation Semantic Units
Navigation semantic unit
Ways of navigation (WoN)—represents the best navigation way or path for users with certain profiles to achieve their desired goal or sub-goal. Composed of …
Navigation nodes (NN) connected by Navigation links
Navigation Syntax
Individual navigation link—text-based links, icons, buttons and switches, and graphical metaphors..
Horizontal navigation bar—lists major content or functional categories in a bar containing appropriate links.
Vertical navigation column
lists major content or functional categories
lists virtually all major content objects within the WebApp.
Sitemaps—provide an all-inclusive tab of contents for navigation to all content objects and functionality contained within the WebApp.
Component-Level Design
WebApp components implement the following functionality
Perform localized processing to generate content and navigation capability in a dynamic fashion
Provide computation or data processing capability that are appropriate for the WebApp’s business domain
Jean Kaiser suggests a set of design goals that are applicable to virtually every WebApp regardless of application domain, size, or complexity.
The following are the set of design goals to apply webApp
Simplicity
Consistency
Identity
Robustness
Navigability
Visual Appeal
Compatibility
Simplicity
Content should be informative but to the point and should use a delivery mode (e.g., text, graphics, video, audio) that is appropriate to the information that is being delivered.
Architecture should achieve WebApp objectives in the simplest possible manner.
Navigation should be straightforward and navigation mechanisms should be naturally obvious to the end user.
Functions should be easy to use and easier to understand.
Consistency
This design goal applies to virtually every element of the design model.
Content should be constructed consistently
e.g., text formatting and font styles should be the same across all text documents;
Graphic art should have a consistent look, color scheme, and style)
Identity
Establish an “identity” that is appropriate for the business purpose.
Robustness (Strength)
The user expects robust content and functions that are relevant to the user’s needs.
Navigability
Navigation should be simple and consistent.
It should also be designed in a manner that is predictable.
The user should understand how to move about the WebApp without having to search for navigation links or instructions.
Visual appeal
The look and feel of content, interface layout, color coordination, the balance of text, graphics and other media, navigation mechanisms must appeal to end-users
Compatibility
WebApp will be used in a variety of environments (e.g., different hardware, Internet connection types, operating systems, browsers)
There are essentially two basic approaches to design:
The artistic ideal of expressing yourself
The engineering ideal of solving a problem for a customer.
Design is the engineering activity that leads to a high-quality
product. This leads us to a recurring question that is encountered
in all engineering disciplines: What is quality?
Some other quality attributes
Security
WebApps have become heavily integrated with critical corporate
and government databases. E-commerce applications extract and
then store sensitive customer information.
Rebuff (Reject) external attacks
Exclude unauthorized access
Ensure the privacy of users/customers
Availability
The measure of the percentage of time that a WebApp is available
for use.
Scalability
Can the WebApp and the systems with which it is interfaced
handle significant variation in user or transaction volume… If
numbers of users are extend…
Time to Market
although time-to-market is not a true quality attribute in the
technical sense, it is a measure of quality from a business point of
view.
There are two dimensions in WebApp Design Patterns:
The design focus of the pattern and its level of granularity.
Design focus identifies which aspect of the design model is relevant (e.g., information architecture, navigation, interaction).
Granularity identifies the level of abstraction that is being considered (e.g., does the pattern apply to the entire WebApp, to a single Web page, to a subsystem, or an individual WebApp component?).
Design Focus
WebApp patterns can be categorized using the following levels of design focus
Information architecture patterns relate to the overall structure of the information space, and the ways in which users will interact with the information.
Navigation patterns define navigation link structures, such as hierarchies, rings, tours, and so on.
Interaction patterns contribute to the design of the user interface.
Presentation patterns assist in the presentation of content as it is presented to the user via the interface.
Functional patterns define the workflows, behaviors, processing, communication, and other algorithmic elements within a WebApp.
Design Granularity: When a problem involves “big picture” issues, you should attempt to develop solutions (and use relevant patterns) that focus on the big picture.
In terms of the level of granularity, patterns can be described at the following levels.
Architectural patterns. This level of abstraction will typically relate to patterns that define the overall structure of the WebApp, indicate the relationships among different components.
Design patterns. These address a specific element of the design such as an aggregation of components to solve some design problem, relationships among elements on a page, or the mechanisms for effecting component-to-component communication.
Component patterns. This level of abstraction relates to individual small-scale elements of a WebApp.
Hundreds of user interface (UI) patterns have been proposed in recent years.
Most fall within one of the following 10 categories of patterns :
(1) Pattern: TopLevelNavigation
Brief Description: Used when a site or application implements a number of major functions. Provides a top-level menu, often coupled with a logo or identifying graphic, that enables direct navigation to any of the system’s major functions.
(2) Pattern: CardStack
Brief Description: Used when a number of specific subfunctions or content categories related to a feature or function must be selected in random order. [e.g. DropDownList]
(3) Pattern: Fill-in-the-Blanks
Brief description: Allow alphanumeric data to be entered in a “text box.”
(4) Pattern: SortableTable
Brief description: Display a long list of records that can be sorted by electing a toggle mechanism for any column label.
(5) Pattern: BreadCrumbs
Brief description: Provides a full navigation path when the user is working with a complex hierarchy of pages or display screens.
(6) Pattern: EditInPlace
Brief description: Provide simple text editing capability for certain types of content in the location that it is displayed.
(7) Pattern: SimpleSearch
Brief description: Provides the ability to search a website or persistent data source for a simple data item described by an alphanumeric string.
(8) Pattern: Wizard
Brief description: Takes the user through a complex task one step at a time, providing guidance for the completion of the task through a series of simple window displays.
(9) Pattern: ShoppingCart
Brief description: Provides a list of items selected for purchase.
(10) Pattern: ProgressIndicator
Brief description: Provides an indication of progress when an operation takes longer than n seconds.
