Chapter 19

Chapter 19

Design Modeling for Web Applications

CHAPTER OVERVIEW AND COMMENTS

When most people think of “Web design,” they envision the aesthetic layout of a WebApp. But this is only one part of design in Web engineering. The intent of this chapter is to introduce students to the other important components of WebApp design.

Because students are so familiar with the Web, you should have little trouble getting a discussion of design started. Virtually everyone has an opinion on what constitutes a “good design” but few people understand the process through which a good design is achieved.

19.1     Design Issues for Web Engineering

The quality requirements shown in Figure 19.1 are a good catalyst for a discussion of WebApp design quality. Each of the five attributes presented in the figure should be discussed at some length. Poll your students for their interpretation of each attribute and ask for examples of actual WebApp that exhibit (or don’t exhibit) each attribute.

Spend a bit of time on the quality checklist presented in the sidebar in Section 19.1.1.

The design goals discussed in Section 19.1.2 should be discussed at some length. Again, examples of WebApps that meet (and don’t meet) these goals will help to solidify understanding.

19.2     The WebE Design Pyramid

WebE design encompasses six design activities, and each of these is introduced here.

19.3     WebApp Interface Design

If you haven’t already done so, have your students review Chapter 12. All of the information presented there is applicable to this discussion.

Spend some time on Dix’s questions, emphasizing that the interface design must actively help the user answer them.

In Section 19.3.1, Tognozzi’s principles and Nielsen and Wagner’s design guidelines should be considered at some depth. Try to provide examples that illustrate each.

The interface design workflow (Section 19.3.3) is worth covering in class. Be sure that your students understand the intent of each step. In many cases, reference is made to a specific UML diagram. It may be necessary to review these.

19.4     Aesthetic Design

Although this is an important topic, you may choose to cover it only peripherally if time is short. For major WebApps, aesthetic design is performed by graphic arts professional, not Web engineers. However, for smaller WebApps, the Web engineer may have to do it all. I recommend spending time on this subject to sensitize your students to the importance of aesthetics. At a minimum, have them visit one or more of the Web sites noted in the sidebar entitled “Well-Design Web Sites.”

19.5     Content Design

Although the notion of a content object (Section 19.5.1) should be relatively easy for your students to grasp, be certain that you provide additional examples to solidify the concept (already introduced in Chapter 18).

It’s not a bad idea to postpone a discussion of the browsing primitives presented in Section 19.5.3 until navigation design.

19.6     Architecture Design

If you haven’t already done so, have your students review Chapter 10. Much of the information presented there is applicable to this discussion.

The content structures presented in Section 19.6.1 should be covered during lecture. Use actual WebApps to illustrate these structures.

The MVC architecture (Section 19.6.2) has been discussed widely in the literature and should be emphasized during your discussion of architectural design. Use Figure 19.10 as a point of departure for your comments.

19.7     Navigation Design

Navigation design is pivotal to the success of a WebApp and yet, navigation for many Web sites sort of “just happens.” Emphasize to your students that navigation design must be explicit.

One way of accomplishing this is the use of NSUs (Section 19.7.1). This is a difficult concept for some students, therefore, it’s worth spending some time in lecture being certain that the NSU concept is understood.

Students will be quite familiar with navigation syntax (Section 19.7.2) and will undoubted have strong opinions on the best design approach in this area. Be certain to tie syntax to semantics, indicating how syntax can aid or hurt a user’s understanding of navigation.

19.8     Component-Level Design

If you haven’t already done so, have your students review Chapter 11. Much of the information presented there is applicable to this discussion.

19.9     Hypermedia Design Patterns

If you have adopted a patterns-based philosophy for software engineering, this section should be emphasized for Web engineering design. You should provide multiple examples for each patterns category. If time permits, have your student visit one or more Hypermedia Design Patterns Repositories (Sidebar) and present examples to the class.

19.10   Object-Oriented Hypermedia Design Method (OOHDM)

OOHDM is a reasonably comprehensive design method that is well-worth covering if time permits. I present only an overview in SEPA, so if you intend to present this topic in some detail, you’ll need supplementary materials and reading. See the SEPA Web site for OOHDM resources.

19.11   Design Metrics for WebApps

The intent of this section is to emphasize that measurement is important in WebE. The design metrics presented are representative of many that have been proposed in the literature. It is important to note that many of these metrics have not as yet been validated and should be used judiciously.