• The opportunity may arise to exploit new business opportunities by opening up the legacy systems to the Internet.
• Extra functionality may be added at the Web interface rather than making costly changes to the legacy systems.
Development Tools Case Studies
MicroAge (http://www.software.ibm.com/casestudies)
MicroAge in Toronto, Canada, is a technology product distribution company.
It has developed systems in Java for the Internet that allow it to receive and process orders directly from customers. Once an order is accepted, the system sets up a schedule and tracks each step using a bar-coding scanning system.
This means the customer can monitor the status of the order online. In addi- tion, employees of MicroAge are automatically notified of delays and can respond to customer telephone inquiries with real-time order and delivery status.
The system was developed in a graphical development environment with Java (VisualAge for Java by IBM). The reasons given for choosing this product were that it offered an enterprise-wide perspective. The product also was con- sidered to have a solid class library that was platform independent. The benefits of extending the system to the Web have been significant. The time taken from order capture to delivery has been reduced by 25%. Processing costs per unit have decreased by 30%. A 100% increase in orders has been seen annually since the system was installed with only a 40% increase in staff.
CompHealth (http://www.software.ibm.com/casestudies)
In the United States, health professionals are required to have their credentials verified every 2 years. In the past, it was a time-consuming process that could take 2 weeks just to bring together the paperwork. CompHealth has developed a Web application called Apply.Net to move as much of the processing online as possible. The medical professionals submit their information online via the Internet to CompHealth and the details are verified. This means a process that used to take 2 weeks is completed in a few hours. There is no rekeying of infor- mation and the accuracy and completeness of the application is improved.
The Java development tool used to implement Apply.Net was selected for a number of reasons:
• It supported the current system platforms such as Windows NT, AS/400, DB2, and Lotus Domino.
• It encouraged and supported team development by providing a com- mon repository and strong versioning control.
• It is an object-oriented development language, which meant the organization had to make the shift to the new paradigm. In the future this should make maintenance easier as the system is based on objects.
The interface objects of Apply.Net have been developed separately
from the objects that access the data. Any changes to back-end connec- tivity objects should not require changes to the user interface.
• The developers of the Java tool provided strong technical support in the form of libraries of routines, especially for connecting with the corporate databases from the Web interface. This radically reduced development time.
Design Models
Web site models have been classified according to seven design structures [2]:
1. The poster/billboard model is basically just a small amount of infor- mation about the company and an e-mail address. It raises the profile of the company by having an Internet presence and the effect is like a company poster.
2. The online Yellow Pages model is a menu system with a hierarchy of information.
3. The cyber brochure model is more sophisticated still and looks like an online brochure.
4. The virtual storefront model has a transaction engine and is used for ordering and sales.
5. The subscription model is akin to an online magazine.
6. The advertising model is a site that is trying to raise revenue through advertising. Examples are the search engines that attract large num- bers of people and have lots of ads.
7. The 3.5.7 model is a multifunctional Web site that includes, for example, transaction facilities, marketing, public relations, and after- sales support.
Web Site Design
Working From the Requirements
The detailed design of a Web site is guided to a large extent by the require- ments that should have been defined in the analysis phase of the Internet Commerce Development Methodology. For the Web page design, the charac- teristics of the users, the functional requirements of the company, the company image that is required to be communicated, and the marketing strategies desired should all have been discussed. That is not to say that changes can- not be made to the requirements, but that the designers must have a clear
understanding of the key system issues and objectives so that appropriate designs can be created.
Principles of Good Design
Designing effective Web interfaces is both an art and a science. It is an art or a craft because a certain amount of creativity is sometimes required to develop Web systems that are functional yet aesthetically pleasing to look at and work with. At times, fashion and fun play a vital role in the design; a scientific, engineered, or more purely rational approach would not achieve the same level of success. However, people process and interpret information according to cognitive principles and adhering to these helps the designer to develop systems that communicate effectively. So a more scientific or engineered approach pro- vides a strong underlying set of principles that can serve as a framework for design. This and the following sections examine important design issues that need to be considered when designing Web applications.
Human computer interaction (HCI) is an important field within the IS/IT disciplines. It involves the theory and practice of how users interact with computer systems. It draws on cognitive psychology for principles on how peo- ple interpret information. Designing systems according to these principles generally leads to systems that have a higher level of usability.
Cognitive Psychology
Research in cognitive psychology tells us that in most situations humans are easily cognitively overloaded. For example, people find it difficult to remember much more than seven, plus or minus two, chunks of information. These could be instructions or digits or key words. Hence, designers should not expect users to remember a great deal of information or data from one Web page to another;
instead, this information should be repeated on each screen if it is important.
The brain processes information serially. This means that developing systems that have competing features is likely to distract the user from acquiring neces- sary information. Generally speaking, therefore, simplicity of design and layout is desirable for improving the degree of information communicated.
The designer works with Web pages that are displayed in a browser. Each Web page provides a design space where text, graphics, animation, and images can be arranged to maximum effect.
Layout
Space can be used on a Web page to separate features, whether text or graphics, and thereby communicate meaning and relevance without using lines or bor- ders that would add to the cognitive load on the user. The techniques of using space and position in design are evident, of course, in newspapers, magazines,
and books. Using space and screen real estate wisely creates a design that is both simple and effective (Figure 6.5).
Consistency
This is an easy principle to understand but one that is often forgotten. Consis- tency relates to the uniform application of terms or key words, the use of icons and graphics, the position of Web page features such as menu items, the use of color, and so on. The designer should work out a design strategy along with the details and stick to it! Users will then find it easier to navigate around the Web site.
Flow
Generally, people are used to reading top to bottom and left to right. What does this mean for Web designers? It is important to know how text should be arranged on the Web page for ease of reading. For example, examine the two sentences in Figure 6.6. The text on the right is definitely quicker and easier to read with its left-to-right orientation.
Figure 6.5 Home page showing plenty of white space.
Equally, designers need to remember the top-to-bottom rule (Figure 6.7).
The desire to create distinctive Web sites has led many developers to ignore cognitive principles. The resulting applications are then often distinctive for the wrong reasons.
Zoning
Browser windows or screens can be divided into zones. These are areas of the screen used for certain functions. For example, Figure 6.8 shows zones for the menu, advertisements, title, and the bulk of the screen area for displaying other information. Many different zone layouts can be used to great effect. The main advantage of zoning is that one page should have a similar structure to other pages and hence provide a consistent framework for the designer and the user.
Grouping
Logically related items should be grouped together. In this respect proximity conveys meaning. This could apply, for example, to links, icons, and menu items.
Text
The size of the text denotes its significance. For example, the heading for a Web page is usually larger than the other text on the page. A problem for designers is that HTML is so limited in terms of text sizes and fonts. An additional problem
This is the first sentence.
This is the second sentence.
This is the third and final sentence.
This is the first sentence.
This is the second sentence.
This is the third and final sentence.
Figure 6.6 Text left-to-right principle.
This is the first sentence.
This is the second sentence.
This is the third and final sentence.
This is the second sentence.
This is the third and final sentence.
This is the first sentence
Figure 6.7 Text top-to-bottom principle.
associated with headings in HTML is that they leave too much space below.
Hence, many designers use a text heading that has been created in a graphics package and saved as a GIF file. Headings can then be developed along the lines of a logo and their effect can contribute to the image branding of the site.
Subheadings can also be developed as GIFs or can be left in bold with no space following. Two levels of headings are usually enough for most designs; if you need another level you can always go to another page. Horizontal lines in any form to separate areas of the Web page should be avoided because they become noise, adding to the cognitive load without conveying useful informa- tion. A blank line is preferable in most cases.
Margins are effective for making the text stand out on the page. Tables are used to do this because there is no margin function in HTML. The first col- umn of the table is left blank, thus creating the margin effect. Long lines of text on a screen make reading difficult for the user. Approximately 10 to 12 words per line is a suitable line length to aim for, although much of the control, in terms of window size and font size, is determined by the user’s browser. Multi- ple columns of text should be avoided. It is a great deal of work for little reward because the user must scroll back up the window to see the next column.
Figure 6.8 A page with clear zoning.
Alternative text sizes can be used to capture the user’s attention (Figure 6.9).
Highlighting in bold or the use of a bright color can have the same effect.
Color
Inexperienced designers often make the mistake of designing Web pages using many different colors. It results in what is known as the “Christmas tree effect.”
Good design should not rely primarily on the use of different colors. Usually it is better to design in black and white to focus on layout and other features. The color can be built in where needed afterwards. When more than four or five colors are used in any Web page, there is a tendency to increase the cognitive load on the user.
A color scheme should be chosen that adds value to the design but does not become the overriding feature. Certain combinations of colors go well together; others contrast and are not aesthetically pleasing to the eye. Blue and dull white go together well, but purple and blue do not. Background and fore- ground colors need to be carefully chosen so that the text is easy to read. The background should not be too bright, such as a bright white, because it can strain the eye, but a dull white is a common background because black text shows up well against it.
Graphics and Use of Icons
Icons are used extensively in Web page design for a number of reasons. An icon can actually incorporate and convey a lot of information. The designer can use location (on the screen), color, space between icons, and the size, interior, and shape of icons to convey information to the user.
According to Lodding [3], three types of icons can be distinguished by their design and function (Table 6.2). An icon relates to an idea or concept on the basis of resemblance (picture), by analogy (symbol), or by being selected from a previously defined and learned group of arbitrarily designed images (sign). An iconic system is a structured set of related icons, and an iconic sen- tence is a spatial arrangement of icons from an iconic system. A visual language is a set of iconic sentences constructed with syntax and semantics [4].
7ways to
increase
your