DESIGNING QUALITY WEB APPLICATIONS USING

PATTERNS

Stephanos M. Mavromoustakos

Department of Computer Science, The Philips College, 4-6 Lamias Str., 2001 - P.O.Box 28008, 2090 Nicosia, Cyprus

Andreas S. Andreou

Department of Computer Science, University of Cyprus, 75 Kallipoleos Str., P.O.Box 20537, CY1678, Nicosia, Cyprus

Keywords: Web Patterns, Quality Design, Web Engineering

Abstract: Patterns are commonly utilized by Web developers for reusability purposes. However, this paper shows how

Web patterns can also enhance the quality of Web applications. Firstly, Web quality is divided into five

major components, namely usability, functionality, reliability, efficiency, and maintainability. Secondly, the

relationship of these quality components with certain Web patterns is demonstrated and a set of guidelines

for designing quality Web applications using these patterns is proposed. A successful Web site is then used

as a case- study to demonstrate the efficacy of the proposed guidelines. The Web patterns utilized by the site

under study are identified and matched with the proposed list of patterns. Finally, we investigated how these

patterns contribute to the success of the specific Web application.

1 INTRODUCTION

The World Wide Web has become the most popular

platform for communication, e-commerce and other

applications, enabling the sharing and retrieving of

information among users and organizations around

the globe. At the same time, the need for continuing

evolution of the Web applications (Webapps),

contributes to the increase of their complexity.

Therefore, Webapps present an important challenge

to the designer: How to improve the quality of

Webapps in order to attract more users, increase

sales, and enhance an organization’s image, and at

the same time meet the short and tight delivery times

to conform with the immediacy characteristic

(Pressman, 2002).

Web patterns are methods to describe best

pract

ices and good designs, capturing development

experience in a way that it is possible for others to

reuse this experience. In fact, the goal of Web

patterns is to help Web developers resolve recurring

problems encountered during the Web system

development. Patterns can provide a shared language

for understanding common problems and their

solutions by understanding the structures and

mechanisms of Web architectures and intelligibly

reason about them.

The purpose of this paper is not to introduce or

plain Web patterns, but rather to show the

importance of Web patterns in relation to the quality

of Web applications (Webapps). Web quality is

directly related to five major components, namely

usability, functionality, reliability, efficiency, and

maintainability. A Webapp must be built around

these components, thus we demonstrate the

relationship of the aforementioned components with

specific Web patterns. Then we provide a set of

guidelines and propose a way for applying these

guidelines to produce a quality Webapp.

The rest of the paper is organized as follows:

Sectio

n 2 examines Web quality components and

Web patterns. In addition, design guidelines for Web

patterns are proposed. Section 3 presents a detailed

analysis of specific Web patterns present in a

successful Webapp and maps these to the proposed

design guidelines and finally, Section 4 draws the

concluding remarks and suggests some steps for

future work.

421

M. Mavromoustakos S. and S. Andreou A. (2004).

DESIGNING QUALITY WEB APPLICATIONS USING PATTERNS.

In Proceedings of the Sixth International Conference on Enterprise Information Systems, pages 421-424

DOI: 10.5220/0002637904210424

 SciTePress

2 QUALITY COMPONENTS AND

WEB PATTERNS

Web patterns are a recent software engineering

problem-solving method that emerged from the

object-oriented discipline. According to Alexander

(1977):

“Each pattern describes a problem which occurs

over and over again in our environment, and then

describes the core of the solution to that problem, in

such a way that you can use this solution a million

times over, without ever doing it the same way

twice”.

Patterns aim at capturing solutions and not just

abstract principles or strategies. Patterns on the Web

can be utilized to improve accuracy, suitability,

aesthetics, ease of use, changeability and in general

the overall quality of Web applications. Web quality

is primarily derived from the software quality

components of ISO 9126 (ISO, 2001).

Following these general software quality

standards as defined by the ISO 9126 and the Web

engineering guidelines proposed by Olsina, (Olsina,

1999) several quality components are identified and

presented. Each component is decomposed into

several features that must be separately addressed to

fulfil users’ needs:

Usability – (e.g. Learnability, friendliness,

playfulness, aesthetics, ease-of-use, etc.)

Functionality – (Accuracy, suitability,

compliance, interoperability, security, etc.)

Page

Elements

avigation

Patterns

E-Commerce

Patterns

Functionality

Reliability

Efficiency

Maintainability

Usability

System Reliability – (Fault tolerance, crash

frequency, recoverability, maturity, etc.)

Efficiency – (System response-time performance,

page and graphics generation speed, etc.)

Maintainability – (Analyzability, changeability,

stability, testability, etc.)

The rapid technological changes especially in the

area of Web engineering, as well as the rigorous

users’ requirements for continuous Web site updates,

easy system modifications and enhancements, both

in content and in the way this content is presented,

are key success factors for the development and

improvement of a Webapp. To this end, Web

patterns can prove quite useful suggesting ways of

designing and implementing Web based systems

grounded on sound and tested solutions.

Web patterns can be classified into four types

according to their functionality: a) Navigation, b)

Page Elements, c) Search and d) E-commerce

(Rossi, 1997; Rossi 2002; Welie, 2000):

Navigation Patterns - Accessing information is

supported by patterns such as Bread Crumbs, Split

Navigation, Double Tab, Meta Navigation, Outgoing

Links, Progressive Filtering, Repeated Menu, Teaser

Menu, Combined Menu, Fly-Out Menu, Scrolling

Menu and Directory. Navigation patterns allow for

easy and fast access to information, consistency and

simple understanding of the Web application’s

structure improving the reliability, usability and

efficiency of the site.

Page Elements – News Box, List Builder,

Tabbing, Paging, Wizard, Parts Selector, Language

Selector and Identification are patterns that can

assist the user during a task activity, enhance

interactivity and in general improve a site’s

usability, efficiency, functionality and

maintainability.

Search Patterns – Various search mechanisms

(e.g. Simple Search, Advanced Search, Sitemap) are

provided when looking for specific information.

These mechanisms can significantly enhance the

level of functionality and may also affect the quality

of the site’s usability, reliability, efficiency, and

maintainability.

E-commerce Patterns – Webapps usually require

certain functions that are vital for their operation. E-

commerce patterns, such as a Shopping Cart and a

Product Comparison aim at enhancing the quality of

the usability, reliability and functionality aspects of

these applications.

The relationship between Web quality factors and

the type of Web patterns described earlier is

depicted in figure 1.

Figure 1: The Patterns-Quality Components Relationship

Diagram

The Web quality factors described earlier can

drive the design of Webapps based on patterns

encountered on the Web. Design guidelines are also

provided for the development of successful patterns.

Tables 1 provides a sample list of each of the Web

patterns categories encountered on the Web and

propose respective design guidelines for achieving

the desired level of quality for each of the four types

of patterns described previously.

Our proposition here is simple and

straightforward: A Web designer may select the

appropriate patterns from tables 1 to 4 and follow

the suggested design guidelines to achieve the

ICEIS 2004 - SOFTWARE AGENTS AND INTERNET COMPUTING

422

desired quality. The selection will be primarily

based on the business requirements and non-

functional constraints (performance, speed, size, etc)

posed by the specific Webapp domain. Thus, if we

picture the integration of the proposed technique

with known Web engineering processes we can

position it after the analysis phase and prior to

implementation activities.

More specifically, the Web Engineering (WebE)

process (Pressman, 2000) is utilized to explain the

design process of integrating Web patterns (figure

2). WebE includes six phases allowing parallel

activities development: (a) Formulation, (b)

Planning, (c) Analysis, (d) Engineering, (e) Page

generation and testing, and (f) Customer evaluation.

Prior to the selection of Web patterns in the

Analysis phase, the business requirements as well as

the level of complexity for the desired quality of the

Webapp are identified in order to decide the types of

Web patterns that are required. The decision is made

during the Analysis phase by selecting those patterns

that are related to the business requirements from a

variety of existing ones found on the Web. In the

Engineering phase the Web patterns are

implemented by following the design guidelines

provided, while in the Page Generation and Testing

phase the patterns are incorporated into the Webapp

and tested as part of the overall application to reach

the desired quality.

Customer Evaluation

Content Design

Formulation

Planning

Analysis

Engineering

Page Generation

and Testing

Production

Interface

Design

Navigation

Design

Architectural

Design

Figure 2: The WebE Process Model

Table 1: A representative sample of Web patterns with their respective design guidelines (examples of Web sites using a

specific pattern in parentheses)

Pattern

(Websites using the pattern)

Design Guidelines

Pattern

Simple Search

(e.g. www.google.com)

9 Use a search box of maximum 30 characters

9 Pressing the “ENTER” key should act the same as clicking the “GO”

button

9 Provide search tips

9 Use a Paging mechanism for more than 10 results

9 The search string should be displayed in bold or highlighted when

presenting the results

9 The result should normally show the page title, description, category,

URL, size and date

Navigation

Pattern

Bread Crumbs

(e.g. www.google.com)

9 Show the hierarchy using symbols such as “>” or “\”

9 Must be placed below the page header or at the end of the page

9 To be used in sites with more than 3 levels

Page

Element

News Box

(e.g. www.ibm.com)

9 News items should be limited to 5 and users should be able to access

the full story from an associated link

9 Sorted by date with the most recent first

9 Old items should be sent to the archive

9 The News box should be placed at the center, to the left or right of the

page

E-Commerce

Pattern

Shopping Cart

(e.g. www.amazon.com)

9 For returning customers use a “one-click shopping” system

9 Allow users to put their products in their cart before they purchase

them

9 Users can inspect their cart at any time including all the details about

their selected products

9 Users should be able to make changes before purchasing the products

9 The items can remain in the cart for certain days

9 A wizard can be used to help the user with the checkout process

DESIGNING QUALITY WEB APPLICATIONS USING PATTERNS

423

3 APPLICATION OF THE

PROPOSED APPROACH

The Internet research groups Nielsen/Net Ratings

and Jupiter Media Metrix list the top ten most

successful web sites for 2001 to be (Starling, 2002):

AOL.com, Yahoo.com, MSN.com, Microsoft.com,

eBay.com, Amazon.com, Lycos.com, About.com,

Google.com, Disney.com.

It could be argued that some of the sites are

popular for reasons other than their content or

design. However, their quality is one of the primary

reasons for their success. In investigating the

Webapps above, we discovered that all sites use

patterns. Following, we provide a short analysis of

the building blocks of one of the sites on the list

(Amazon.com) which it was also recently awarded

the best prize among millions of Web sites for its

quality Web design. Therefore, we decided to use

this site in order to demonstrate the utilization of

patterns to the success of its underlying Webapp.

Navigation patterns in amazon.com include

double tab, list builder and directory. Page elements

include tabbing, paging, wizard and identification.

Search mechanisms include patterns such as, simple

search, advanced search and sitemap. Finally,

Amazon

also provides a shopping cart pattern for its

products. All patterns identified in Amazon’s web

site follow the same design guidelines as proposed

in this paper

Amazon made a careful selection of the patterns

to be employed using only those patterns that are

related to its business operations in a more efficient

way for accessing and retrieving information about

its products.

Amazon, as well as the rest of the sites already

aforementioned make use of patterns as our design

guidelines suggest providing an indication that our

proposition successfully enhances the quality of

Web applications.

4 CONCLUSIONS

Web patterns are methods to describe best practices

and good designs, capturing development experience

in a way that it is possible for others to reuse this

experience. Web quality was demonstrated in

relation to the quality of five major components,

namely usability, functionality, reliability,

efficiency, and maintainability. Providing quality in

the design of Web applications is an important factor

for the success of the application. Several Web

patterns were identified and categorized as

Navigation patterns, Page elements patterns, Search

patterns and E-Commerce patterns. Design

guidelines were also provided for the use of these

patterns. Finally, successful sites utilizing patterns

were identified and a short analysis of one of these

sites was performed identifying the Web patterns

used and explaining how these are related to the

quality of the Web application.

The paper provided design guidelines to be used

in Web applications and successfully demonstrated

how Web patterns affect the quality of Web

applications.

REFERENCES

Alexander, C., et al. (1977). A Pattern Language. New

York: Oxford University Press.

International Standards Organization (ISO), (2001). ISO.

IEC 9126-1, Software Engineering – Product Quality –

Part 1: Quality model

Pressman, R.S., 2002. Software engineering: A

practitioner’s approach. McGraw-Hill, London, 3

edition.

Rossi, G., Schwabe, D. and Garrido, A. (1997). Design

Reuse in Hypermedia Applications Development

Proceedings of ACM International Conference on

Hypertext (Hypertext97), ACM Press.

Rossi, G, Schwabe, D. and Lyardet, F. (2002). Improving

Web Information Systems with Navigational Patterns.

In http://www8.org/w8-papers/5b-hypertext-

media/improving/ improving.html

Starling, A. (2002). Ten Top Sites Compared. In

http://wdvl.internet.com/Authoring/Design/TopTen200

Welie, Martijn van, (2000). Designing your site’s

navigation. In http://www.welie.com/patterns/

ICEIS 2004 - SOFTWARE AGENTS AND INTERNET COMPUTING

424