Executive Summary

         The focus of this paper is the design and consideration of the user in the design of user interfaces.

             ·  It will examine the Traditional Lifecycle Model of Systems Development.

             ·  Offer an alternative Lifecycle Model that focuses on the user being the central part of the design.

             ·  The use of questionnaires to capture the wants and needs of an unseen web audience.

             ·  Hardware considerations of the web audience.

             ·  A definition of Mystery Meat Navigation and why it fails as a navigational tool.

             ·  Reasons not to use free backgrounds.

             ·  What not to do with fonts, colors and why Drop Shadow should be refrained from.

             ·  The conclusion.

         This paper will research and highlight key ingredients that make for an excellent user interface design and what makes for a poor design (compare and contrast). There are many people today who must rely on computers to complete various tasks in their professional and personal lives for which the computer is not their passion in life, but merely a tool to complete various tasks. These people are not computer engineers, computer scientists, nor are they information scientists and their desire is to have interfaces that are easy to navigate combined with relatively low learning curves, so that they may complete tasks quickly without having to know a tremendous amount about computers. All too often, we run into interfaces that were designed by computer scientists, which are much too cumbersome for the average person to use or navigate. Computer scientists seem to forget that not everyone is at their level of expertise and that what is intuitive for them is not necessarily intuitive to everyone else. "An information system that has not included the user in the design process will most likely not be successful. Such a system will leave users frustrated and possibly unable to achieve their goals." (Preece et al. Human-Computer Interaction).

         Focusing on web development, a process currently being used is a User-centered Web Development Design Process. By utilizing this process the web site is designed to meet the needs of the user, By following this process the web site is designed to meet the needs of the user. Users are satisfied with a web site if it is easy to use and when they can complete their tasks with relative ease. This will ensure that the user will return to the site. The Technology Acceptance Model (TAM) through research has determined users want web sites that are easy to use, have a minimum download time, with a minimal amount of frustration and must provide meaningful information and/or must be interactive for the user.

Thesis

The Process:

·  Define the users/Determine who is the audience-

        ·  Web sites do have a defined population of target users. It may be targeting children, college students, senior citizens, one particular gender or may be designed for everyone to use.

·  Gather Requirements-

        ·  By gathering requirements, more can be learned about the targeted end user population and this knowledge will influence the web design.

·  Involve the user-

        ·  The web site may have great information for the user, but if the front end is too technologically advanced or too confusing, the user will quickly surf away from the web site.

·  Design the site-

        ·  Once the targeted audience has been determined and information has been gathered on their requirements, the next step is to design navigation and page design.

·  Testing and maintenance-

        ·  The web site has to be tested for ease of navigation, compatibility with various browsers, browser versions, and functional links.

Return to the top of the page

Traditional Lifecycle Model of Systems Development:

1) Project Identification and Selection

        ·  An organization's overall IS needs are analyzed.

2) Project Initiation and Planning

        ·  A potential IS project is presented and a detailed plan is developed.

3) Analysis

        ·  The current system is studied and replacement systems are proposed.

4) Logical Design

        ·  All functional features of a potential system are described.

5) Physical Design

        ·  The logical design is turned into technology-specific details.

6) Implementation

        ·  The IS is developed, tested, and implemented in the organization.

7) Retirement

        ·  The old IS system is now cycled down and arrangements for its removal are made.

         "User input is traditionally included during the requirements gathering, testing, and implementation phases. A number of design models have been presented that focus more on user input into the system design" (Preece et al. Human-Computer Interaction). Web development projects face obstacles that were not a consideration in traditional information systems projects. "Web sites must be designed so that they are accessible from a number of different browsers (e.g., Internet Explorer, Netscape Navigator, AOL, Opera) and a number of different browser versions (e.g., versions 2.0, 3.0, 4.0, 5.0, 6.0)" (Niederst). "With web sites, the user may be accessing a web site on an infrequent basis, the site must be easy to use" (Mayhew). Therefore, users will not spend a lot of time trying to learn the interface of the web site.

         A tricky tightrope to walk as a web developer is meeting the client's needs and the web site users needs. The clients are not the same as the users. Clients are the people or organization that has hired you to create the web site. Clients can only provide you with their perceptions of what users want and need. The two may conflict with each other. An example of this is which is quite common is the user wants quick download times, while the client wants a tremendous amount of the latest bells and whistles on their web site to be impressive. Here the two needs are in direct conflict. It will be necessary to convince your client that you are satisfying their needs while also stressing the importance of satisfying the users needs.

Return to the top of the page

User Needs At the Center of A Lifecycle Model:

((The Jonathan Lazar User Centered Web Development Lifecycle)

1) Define the mission of the web site and the user population

        ·  The reason for creating the web site needs to be determined.

        ·  Who is the targeted audience of the web site.

2) Collect the User requirements for the web site

        ·  It is necessary to know what is the technological savvy of the users.

        ·  Need to know what is their typical connection speed.

        ·  Need to know what the majority of users are using as far as monitor size and resolution.

        ·  Will need to know what content and information would the users require.

        ·  Need to know what would cause this audience to return on a periodical basis.

3) Create the conceptual design of the web site

        ·  Navigation of the site must be decided upon.

        ·  How the pages will be laid out becomes important.

        ·  Color schemes must be decided upon.

        ·  Useful content will have to be developed.

4) Create the physical design of the web site

        ·  Developers would create the coding for the web site.

5) Perform usability testing on the web site

        ·  Java scripts are checked for functionality.

        ·  Download times for pages are determined.

        ·  People from the target audience ideally should be brought in to determine what they like and don't like about the web site.

        ·  Provisions should be made for a return email address to contact the webmaster for feedback.

6) Implement and market the web site

        ·  The web site goes on-line and made accessible.

        ·  Marketing of the web site needs to be made through traditional means, such as T-shirts, posters, radio & television advertising.

        ·  Listings on web search engines.

7) Evaluate and improve the web site

        ·  Monitoring through web counters and email.

        ·  Links and content maintained to be up to date.

         The primary difference between the two lifecycles is that the user is an integral part of the entire lifecycle of the system. By obtaining feedback on the web site by having testers from the targeted audience and through email ensures that the web site is on target. It ensures that the created web site satisfies the needs of its users.

Return to the top of the page

Questionnaires:

         I am a big advocate for the use of questionnaires. Questionnaires can be well thought out and ask the primary questions of the audience you intend to target. Questionnaires can be mailed through traditional means or they can also be conducted through web sites that perform such functions.

         A few sites that offer free web based surveys are:

Alxnet.com	http://www.alxnet.com
FreePolls	http://www.freepolls.com
GigaPoll	http://www.gigapoll.com
NetVotes	http://www.netvotes.com
Pollcat	http://www.pollcat.com

Note: These URL's were tested on 10/4/2001 and were found to be functional at that time.

         Judicial use of the answer "other"_________________ and providing a place for a hand written answer as one of the choices will make you the web developer aware of choices and preferences that may have been overlooked or not considered. In addition, a statistical analysis can be performed to determine what are the majority of people using for hardware, software, what they feel comfortable with using and then designing the site around the mean of these statistics. When using questionnaires, remember to keep in mind that the more questions you ask the less likely you are to get responses. A great deal of people get annoyed when there's too many questions and they become cynical as to what the information is going to be used for, especially when it involves the Internet. Try to prevent from using "yes/no" type questions because most questions go further than a simple Boolean. Try to provide degrees, such as, "Most Desirable", "Somewhat desirable", "Neither desirable nor undesirable", "Somewhat undesirable", "Least desirable". This way, the user is provided with choices and degrees because most things, especially on a web site, are not simply "Black or White". Remember that you can't please all of the people all of the time, but you can please some of the people most of the time.

Return to the top of the page

Hardware:

         An Australian friend of mine, who I will call Lucia, had a web site on Geocities and after a year of it being up decided to run her web site on her own server. The web site consisted of 120 pages of content and too many days to transfer to Lucia's server. Lucia was also painstakingly revising and up grading her pages. One day Lucia contacted me and informed me that someone had sent her an email complaining that he could not see the pages properly, some of the images were cut off. Lucia mentioned that she was receiving 5000 hits a week, which seemed excellent to me. I asked Lucia if the user mentioned which browser he was using and it was a common browser. I then I asked did he mention what resolution he was using? Lucia's response was that he had his computer set to 1600x1200. I told Lucia that was extremely high and that most web sites I have visited have a recommendation on the home page, "Best viewed at 800x600 resolution". I asked around at my workplace and a few people were using 1024x768, but there were only a few. I then asked Lucia how many complaints did she get? Lucia's response was just one, and that she had designed the pages to be viewed quite nicely from 600x400 to 1024x768. My recommendation to her was just to leave it. 1 out 5000 isn't all that bad. This just goes to show you won't be able to please everyone, but the web site does have to be useable by most users.

Return to the top of the page

Mystery Meat Navigation:

         This particular type of site navigation is based on JavaScript rollovers and it's confusing and risks alienating your customers.

         Shown above is an example of mystery meat navigation. This particular type of site navigation is based on JavaScript rollovers and it's confusing and risks alienating your customers. If this were a web page, the user would have to run their mouse over the graphic to find the page link that would be underneath. The reason designers like them is because it provides white space on the page and makes their pages less cluttered. "Web design is not about art, it's about making money (or disseminating information)" (Flanders). To make money, you don't want to design a site that might confuse someone. You want your visitors to quickly find what they're looking for and then write you a check. MMN confuses people because you have to find the navigational system and then mouse over each image to determine where it will take you. (It's the same with disseminating information.) Someone at the Web Design 99/Seattle conference said, "When you go to Wal-Mart and buy a microwave, they've got your money. When you're on the Web it's different because every click is a decision point and people are ruthless. If they don't like what they see or they're confused, they go somewhere else." MMN is confusing. Confusion is bad" (Flanders). "But there are also some sites that have forgotten one key aspect of a user interface - the user. Just as with HTML, there are some sites that are pretty painful to navigate or figure out. For highly-trafficked sites or corporate sites where people need to find information quickly, these sites can be an impediment and should consider even informal usability testing and doing research into making the site a pleasant experience" (J. Clark).

Return to the top of the page

Free Backgrounds:

         These images are not only horrible to look at, but many of them are large and take far too long to load. Remember that the user wants to actually read what you've written. So try to keep wallpaper simple and be sure that it downloads quickly.

Fonts, colors and drop shadows:

         This is an example of "Drop Shadow" text. It is just very difficult to read and yet it's used quite often on web sites. "The phrase "The Controversy" shows another overused font technique -- enlarged typewriter text. You'll usually find this on a page with a black background, but I've placed it here because, hey, let's mix and match fonts and colors -- another no-no" (Flanders). You want the user to be able to read the text comfortably. A prime example of really bad use of colors is http://www.hammondtoy.com/. The wallpaper is pure black, blood red text, and the hypertext links are in electric blue. Yes, it does make the text stand out, but so much that it's vibrancy actually hurts your eyes and after a short period of time the user's eyes are too irritated to read further.

Return to the top of the page

Conclusion:

         In conclusion there are a tremendous amount of resources that describe what makes for a good user interface design. With the explosion of the Internet stands are emerging that make for good user interfaces. The last point I would like to make is to create interfaces that most users can understand.

Return to the top of the page

References

Clark, Jeremy. http://www.were-here.com/forum/Articles/future_of_flash/page2.html

Flaatten, Per O., McCubbrey, Donald J., O'Riordan, P. Declan, Burgess, Keith. Foundations of Business Systems. Second Edition. Fort Worth, TX: The Dryden Press, 1992.

Flanders, Vincent. http://www.webpagesthatsuck.com.

Hoffer, Jeffery A., George, Joey F., Valacich, Joseph S. Modern Systems Analysis and Design. Third Edition. Upper Saddle River, New Jersey: Prentice Hall, 2002.

Lazar, Jonathan. User-Centered Web Development. Sudbury, MA: Jones and Bartlett Publishers, 2001.

Mayhew, D. The Usability Engineering Lifecycle. San Francisco: Morgan Kaufmann Publishers, 1999.

Niederst, J. Web Design in a Nutshell. Sebastopol, CA: O'Reilly and Associates, 1999.

Preece, J., Rogers, Y., Sharp, H. Benyon, D., Holland, S., Et Carey, T. Human-Computer Interaction. Wokingham, England: Addison-Wesley, 1994.

Return to the top of the page

The Integral Worm • Christopher Paul • Independent Senior Technical Writer/Editor

The Home Page ·  The Integral Worm ·  My Resume ·  My Show Car ·  My White Papers ·  Organizations I Belong To

Contact Me ·  FAQ ·  Useful Links

Return to the top of the page