Introduction Web Application design refers to the concepts, principles and methods that are required to transform an understanding

g of what the web application should do into a representation of what the web application should be. The common practice is characterized by the poorly coordinated design tasks i.e. information design, hypertext design, software design. The uncoordinated clash of several cultures is overcome by using a three part structure i.e. presentation design, interaction design and functional design. To reflect the different aspects in the design of web applications, the web application designs subtasks are used.

Meshes

Components

Presentation

Presentation of the navigational situation

Content(media) presentation

Interaction

Navigation

Dialog

Function

Workflow Orchestration

Info systems, SW-modules web component

The three part layering shows a clear differentiation between presentation and interaction. Presentation concerns the mesh taking the node, currently visited by user, into account. Presentation of components i.e. node contents is a central design task. Interaction within a mesh is referred to as navigation and within component is a dialog in the sense of a user interface.

Functional design strongly influenced by information management systems, the mesh side is characterized by workflow management approaches.

Web Design from an Evolutionary Perspective Information Design: An Authoring Activity

Initially the HTML focused only on authoring. Its weaknesses relevant from design perspective are as follows. HTML can be understood as a document description language. HTML mixes aspects like hypertext structure.

HTML is text-centric. The support for structuring and formatting within nodes improved gradually, but hypertext aspects like user-definable node and link types, reverse links, non-trivial destination anchors are still missing The use of XML began when standard computers could digest SGML Parsers. Almost all weaknesses of HTML have been addressed in various standards.

Few Basic rules for design of document-based web applications for authoring aspect are: Meshes should form the center of information design. Conventional documents should be decomposed into atomic nodes. Aspects like layout and content, node and mesh should be separated conceptually even if technology doesnt support such separation. Selected technology should support advanced concepts.

Software Design: A Programming Activity

Programmable Web Dynamics was introduced by HTML forms. With this the importance of script languages also increased as they could be used according to the need of browsers or servers and were easy to handle. Distributed Programming

Distributed Programs in the internet initially ran directly on TCP connections; inter-process communication (IPC) dominated.

Merging Information Design and Software Design Web and distributed programming technologies have not merged fully. It is better to ignore the technology-driven approach to separate the object world from hypertext world in design process. The web application would be designed from elements and links. The following simplified alternatives should be observed in this approach: ELEMENTS can be implemented as either static pages (e.g. JavaScript) or server generated pages (ASP,JSP). They can also be implemented as applets. LINKS i.e. URLs in HTML can be used if target is information and not a program, and if both content and address are known at the time of implementation or presentation.

Problems and Restrictions in Integrated Web Design The integration of hypertext, information and software design into web design is difficult because of three specific obstacles: Cultural, Technological and conceptual problems. Cultural Problem- Could be because of clashes among web developers in practice, researchers, tool and method developers and trainers. Technological Problem- The available tool and methods are insufficient. Conceptual Problem- The integrated Concept would have to be adapted to latest developments and findings before it can reach the maturity to be implemented in tools and methods.

A Proposed Structural Approach Presentation Design Design has output of documents, media and data on its component side. On the mesh side focus is on the visualization, auditory output of meshes and the components currently visited by a user.

Interaction Design This is concerned with the control flow of a users interaction with a web application. The term navigation is used on mesh side, while the term dialog is used on the component side.

Functional Design

this introduces the core design of components and meshes emphasizing the software developers perspective. the component side will describe information design. The mesh side will focus on composition of active components into business processes and highly customized ubiquitous web applications.

Presentation Design Presentation design defines the look and the structure of how multimedia contents are presented. initially HTML used to specify contents with format instructions, links and scripts. Modern presentation design follows the conceptual separation of web applications content and its presentation. The content of web application includes composition of explicitly developed multimedia contents on component side and implicitly defined contents on mesh side. Tools available to create web applications can be grouped into two categories depending on how they support presentation design: page editors and content management systems. PAGE EDITORS-used to create smaller ad-hoc web applications. Major benefits are that they are similar to standard software, which allow the users to work in a familiar environment and to directly format the contents. Major drawbacks developers can lose the bigger conceptual picture. CONTENT MANAGEMENT SYSTEMS-allow separation of editing activities from the layout. Content management systems have special tools for various participating roles, so HTML knowledge is generally not required. content, layout and navigation are separate.

Presentation of Nodes and Meshes The developer specifies the fundamental look of multimedia contents on component side and on the mesh side the interaction and functional design implicitly result in unformatted contents. As an e.g. of tasks involved in navigation design, consider the presentation design for navigation interfaces. Navigation interfaces should help to find answers to three important questions:

(1) Where am I ? (2) Where was I ? (3) Where can I go ?

The question Where am I ? can be answered by using the mechanism for retracing steps, which leave a visual trial of path taken. At any point, the user can retrace the steps to any previous point visited. The answer to the question Where was I ? is not easy, as HTTP used in web technology is a stateless protocol and linking techniques are primitive. The BACK button and lists of pages previously visited are generally used in browsers. But always the back button cannot be used. This shows that there is a need to coordinate the presentation and interaction design.

The approach to answer the question Where can I go ? involves listing all top levels of a web site. It requires suitable marking of the destinations that can be reached from within the current page. This marking should emphasize links in the text.

Device Independent Development Approaches The presentation design considers these requirements to support the device-independent development of applications. The Device Independent Working Group(DIWG) of W3C is currently working on this issue. Their tasks include aspects from field of application development, the adaptation of applications to the users context and different representations of information.

Interaction Design Interaction design is concerned with interaction of visual, dynamic, functional and technical elements of web applications. Its main purpose is to combine these elements to offer the users an interesting and attractive as well as consistent and easy to understand experience. The interaction of web applications is divided into four aspects: User Interface User Interface Organization Navigation design User Activities

User Interaction Servers need to generate a new page every time; applications run slowly an forms are not sufficient to cover advanced interaction techniques, HTML fell short. To overcome these limitations, number of approaches were developed with overlapping functionality. To help organize the development decisions, the following core properties of a software application are considered: Maintainability- It refers to the average effort to locate and fix a software failure. Reusability- It refers to the possibility of using the code of a particular application in other applications without a lot of changes. Scalability- It not only refers to the ability of sustaining large number of users but also, from development point of view, the ability of identifying different development activities that can be carried out in parallel by a development team. Expandability- It refers to the degree of effort required to improve or modify software functions efficiency

User Interaction Organization User interface of a web application has to represent a large amount of information, operations on this information and relationships between this information. The challenge is to suitability map these aspects. When the presentation design aspects are weighed against the interaction design aspects following questions arise:

1. Should screen dimensions have priority over the concept that nodes are atomic units ? 2. 3. 4. Should or can a node be split into several smaller nodes. Can additional navigation be an alternative to scrolling ? how should complex behavior of user interface and portability be balanced against each other ? The particular technology blend has implications in terms of navigational semantics, portability and usability. The different approaches can be differentiated as:

1. The entire node is sent to the user as HTML.

2. The entire node is sent to the user as one large HTML page without scripts. 3. A partial view to the node is sent to the user.

Navigation Design Navigation design gives two-fold result: the elements user can access and the navigational structure. Elements become nodes in the simplest situation. The structure defines the relationships between nodes. Designing a link representation: Anchor Anchors are visible correspondences of URLs

Designing link Internals: URL Navigation processes are triggered by activating anchors in the interface. These anchors represent links or URLs in HTML.

Navigation and Orientation Navigation tools should help limit the cognitive stress for users. The three basic strategies to achieve this goal: Navigation Organization- determines the entire navigational structure. Orientation Aid- it addresses the questions like where am I ? and where was I ? under interaction aspects of presentation design. Link Perception- it is concerned with the issue related to the association of links to motivation and consequence.

Structured Dialog for Complex Activities Complex web applications have extensive processes that user should activate. The activity can extend over several pages. Three categories of forward navigation can be identified:

1. An action is triggered as a result of the navigation step. 2. The navigation calls only one additional page. 3. The navigation step leads to a node not directly involved in the activity

Functional Design Functional design takes into consideration technological aspects that have a strong impact on the web application under development. Integration Systems can be integrated on three levels, which are to be interpreted as sub-levels of functional design: data levels, application level and process level. Data Level- In integration on the data level it is made sure that the data between the representations of different applications are transformed and copied. Application Level- In integration on the application level, also called object level, the time and semantics are closely interleaved. Process Level- Integration on process level is seen as the highest level, because it models business models independently of the infrastructure used.