UWP Computer Science and Software Engineering Technical Report

The University of Wisconsin – Platteville

Computer Science and Software Engineering Senior Seminar

Technical Bulletin

Volume 1

December 2004

Table of Contents

Author / Title / Page
Steve Stodo / User Interface Design / 3
Andrew Assarattanakul / Web Standards / 10
Adam Lewis / Web Development with Coldfusion / 23
Andrew Lueck / Navigation – From Past to Present / 31
Brandon Schroeder / The History of Prime Numbers as Related to
ComputerScience / 39
Curt J. Frey / Cyber-Crime and the Institutions and Methods
Used ToFight Cyber-Crime / 48
Cory Schmid / Software Distribution and Asset Management / 57
Christopher A. Wheeler / Email Server Features and the Reduction of Spam
Propagation / 66
Daniel Lorenz / Video Compression / 73
Dan Murphy / A Broad Glance at XML and its Uses / 80
Jarrod Hinkle / Vehicle Navigation: Using GPS / 87
Rob Dimmick / Multicast / Shoutcast / 95
Vance F. Koehler / Internet/Network Security / 102

All contributors have signed the following release. The signed originals are on file with Mike Rowe, , Computer Science and Software Engineering Department, University of Wisconsin – Platteville.

  • I will permit the publication of my paper in the UWP Computer Science and Software Engineering Technical Bulletin (UWPCSSETB).
  • If I embed an object copyrighted by a third party, permission was received by the third party to include the object with the understanding that the entire work may be included in the proceedings and that the copyright transfer applied only to my work but not to the third party's embedded object
  • I will be allowed to keep, distribute and point to electronic copies of the work.
  • The integrity of the content will be preserved and any reference to the UWP Computer Science and Software Engineering Technical Bulletin link will be credited as such.

User Interface Design

Steve Stodola

Department of Computer Science

University of Wisconsin Platteville

Platteville, WI53818

Abstract

With consumer choices in software constantly expanding, what will cause consumers to gravitate toward your product? More and more consumers are basing their decision on the usability of the software.

What can you do while developing the user interface to help your software succeed? Your software may have a great hook that makes users want to try it; but if it is not easy to use, then it can quickly fall out of favor. Developing a quality interface that is easy to learn and use is not something that can be ignored until the product is near completion. A good UI needs to be planned for from the start of a project and tested as thoroughly as the functionality of the software.

Introduction

User interfaces are all around us. We interact with them every day: from our alarm clock in the morning, to our car stereo, to our desktop PC, to the ATM where we get our money. Yet, how many of us consider them important when we begin a project? UI’s have been designed for computers since they were first invented. User interfaces began as switches and punch cards. As technology became more powerful, the power of the interface followed.

If we look into the past, we see that user interface concerns were mostly considered unimportant. Software was written for technical applications, where the users accepted a steep and technical learning curve in order to gain the benefits the software provided them. This changed though as computers started to weave their way into the daily lives of non-technical users. User interface design started to grow into something that was considered, but neglected until the end of a project.

As the interaction between people and computers has grown even more pervasive, many developers and companies are finding that considering the user interface from project inception is as important as planning the functionality of their software. In an ever increasingly competitive software market, a user interface can be the deciding factor for customers when choosing which software package or machine they wish to purchase. Some managers even bring in user interface professionals to assist with development.

UI design is a subsection of a much broader topic called Human Computer Interaction (HCI). HCI is defined as the study of how people interact with a computer and to what extent computers are or are not developed for successful interaction with human beings. HCI encompasses a wide variety of disciplines including but not limited to psychology, graphic design, technical writing, ergonomics, sociology, anthropometry, and computer science. User interface professionals generally arise from one of these disciplines.

Why UI Matters

One may ask, “Why does the UI of my product matter?” Implementing a well-designed UI from the start benefits both the customer and the developer. On the development side, it can lower the cost of support. Many support issues in software today are because someone cannot figure out how to use the interface provided. It also can help in competition and market acceptance of the product. Customers can look at a good UI and see a lower total cost of ownership. If the interface is elegant and easy to use, they can lower training costs by reducing the time to bring new employees up to speed with the product. [5] Lastly, the most important reason UI matters, is that it affects the customer’s mood. If a customer cannot make your product do what they think it should be doing, they will become unhappy and blame your software. When this happens, they will start looking for other ways to get their work done.

UI Professionals

A UI professional is usually brought into a project from an outside consulting company, but a large company may have one on staff. This person designs controls and the layout. Specifically they would build the general look of the program. Things such as graphics and icons would fall into the realm of graphic designers. A UI professional evaluates a program according to known human factors and UI standards. Some examples of what they may do are [2]:

  1. Reduce application commands from hundreds to 48
  2. Reduce windows from 23 to 11
  3. Eliminate half the mouse clicks to perform a task
  4. Check for consistency of phrases in menus (verb vs. noun)

Additionally, they will direct usability tests on the program at various times throughout the development process. If this individual comes from a programming background with an in-depth understanding of the user interface toolkit, they may code the GUI, but usually this is not the case and the actual implementation is integrated into the development process.

User Interface Design Process

Planning

The process for developing a “friendly” user interface very closely follows the functional development cycle of software. At the beginning of a project, the requirements need to be defined. Without goals, planning how to get to the end of the project can be very difficult. One goal that needs to be set is the target clients for the program. While marketing and sales departments would undoubtedly love the idea of targeting everyone, this is overly broad wishful thinking. Once the client is determined, specific requirements can be generated.

Some things that should be defined are [2]:

  1. Time for user to learn specific functions
  2. Speed of task performance
  3. Rate of errors by users
  4. User retention of commands over time
  5. Subjective user satisfaction

Testable requirements are the goal. Subjective user satisfaction is obviously not something that is testable, but the mood of the users when using the program can be surveyed at the least. Someone who has specific knowledge of the task domain should be part of the design or development team. Without this person, decisions become nothing more than an educated guess.

From this step, the process continues to the conceptual design phase. At this stage, user interface considerations are not addressed. The point here is to try to model the business without considering implementation. Next, the project should progress to the logicaldesign phase. This is when specifics should first be considered. Prototyping the user interface kicks this phase off. By determining what the client will do, the underlying functionality can be designed. The final stage of planning is the physicaldesign phase, where the tools to implement the logical design are chosen.

Implementing

The construction phase is the first step in implementing the UI. Here is when the client will actually get something in their hands. People change their minds all the time, so the earlier you can get the client a copy of what you have, the earlier you can identify any potential changes. If the client determines that a very basic component needs to be changed, a lot of re-designing may need to be done. Just as in the development of the functionality, the earlier problems are identified, the less costly it is to go back and fix them.

When the program has progressed far enough to have something ready for the client, a UI professional should conduct usability testing. There are many methods for doing this. Some UI consulting companies will use mobile labs to record user actions when using parts or features of a program. Others may use a lab environment with video cameras and microphones. In both cases though, test users are encouraged to think aloud about what they are doing and voice their frustration and praise of the software. This data is then evaluated and appropriate changes are rolled back into the design of the UI. Usability testing should not be held until the end of the development cycle. It needs to be done at stages throughout development.

Golden Rules

While not all UI professionals agree on their golden rules of user interface design, the following rules held some level of commonality:

  1. Strive for consistency. [1] The goal here is to keep layouts, fonts, and colors the same across the application. This rule is commonly violated. It happens more in large projects when multiple teams may be working on different sub-sections of a program.
  2. Cater to universal usability. [1] This rule applies to differentiating the target users between novice and expert. Novice users will need more explanations when using the program. Expert users will want shortcuts to allow them to complete their work quicker.
  3. Offer informative feedback. [1] Every user action should have some form of feedback. Frequent and minor actions should provide a subtle feedback to the user. Less common, major actions should have more substantial feedback, such as a dialog box.
  4. Design dialogs to yield closure. [1] Every sequence of actions has a beginning, middle, and end. Give feedback at the end of the sequence. Major e-commerce sites have implemented this well. They allow you to do your shopping. From there they move you to the checkout page. Finally, you arrive at a confirmation page.
  5. Prevent errors. [1] This may sound like wishful thinking, but as much as possible do not allow the users to make serious mistakes. Disable unavailable features; allow only the right data type in a field (i.e. digits vs. letters).
  6. Permit easy reversal of actions. [1] If a user makes an error (something we are trying to prevent), give them an undo option. This can relieve user stress and encourage exploration of the program.
  7. Support internal locus of control. [1] The user owns the interface. Make them feel like they are in charge of it. Surprising results and tedious series of actions could cause the user to become frustrated with the program.

“A user interface is well designed when the program behaves exactly how the user thought it would.” [3]

  1. Reduce short-term memory load.[1] Studies have shown that people can keep seven plus or minus two “chunks” of information in memory for about 25 seconds. This size of these chunks depends on how well the person knows the domain of the information. Keep things simple.

Function vs. Fashion

This is what most people consider the meat of user interfaces. How well does the program function vs. how good does the program look? One common thought on how users should interact with computers is called anthropomorphic design.

Anthropomorphic Design

Anthropomorphic design is defined as “suggesting human characteristics for animals or inanimate things.” [6] In the case of computer interfaces this means giving a human voice, face, or pseudo intelligence to a program; modeling the human-computer interaction on human-human interaction. Some examples of this are Microsoft Bob (failed), Clippy (not well received), and the Ananova newsreader (ultimately failed).

Obviously, computers are not people and do not have intelligence (yet). People operate and control computers. One study in the early nineties found that 24 of 29 computer science students believed that computers could have intentions or make independent decisions. 6 of 29 also held computers morally responsible for errors. [2]

Having a computer act in a human manner is entertaining initially, but becomes distracting quickly. Distractions cause errors. It can also produce feelings of anxiety in users because they feel like they have someone watching them. It does not allow the computer to become transparent to the task.

Error Messages

Error messages also make the computer less transparent to the task. This is something that is worked on in user interface design. Messages need to be more than just functional. [2] They should be specific. For example, an error stating, “Days of the week are Sunday thru Saturday,” compared to an error stating “Illegal Entry.” Error messages should also provide constructive guidance. After telling the user specifically what went wrong, tell them how to perform the action properly. Lastly, error messages need to be consistently presented. Upper case fonts are very eye catching, but studies have shown that people read mixed case passages quicker than all upper or all lower case passages. Only use upper case messages for serious warnings. Remembering that the user owns the interface is beneficial when designing error messages.

Color

Color is frequently used by graphic designers to draw attention to things. This is the same reason they would be used in a program. However, many colors can tend to creep into a program. This can happen for the same reasons as feature creep does in the functionality of a program. A lot of color is inviting and will make users take interest in the application, but it becomes difficult to read. One technique to use color effectively is to develop a system in monochrome first. [2] By doing this, logical groups will become readily apparent. Once the groups are laid out in a logical manner, color can be added later as needed to help the user accomplish their task more efficiently.

That being said color-coding has quite a few advantages. Colors help to improve boring displays and draw attention to warnings. They can also be used to for functional highlighting in a program. This allows users to speed up tasks by being able to quickly read and recognize the information they need from the program. Examples of this are air traffic control systems where planes above a certain altitude would be highlighted a certain color and development environments where function names are highlighted different colors than variables and other languages specific key words.[2] One of the researchers also alluded to the fact that colors can give your user a warm fuzzy feeling.

Conclusion

User interface design is something that every developer should consider for applications they are developing for distribution to other people. Good user interfaces are effective when they are well received by the potential users and allow the computer to become transparent to the task the user wants to perform. Implementing a plan to develop a well-designed interface should be trivial when it is considered up front in a project, because it so closely mirrors the process that many developers use for the functionality of the software. Some large companies even set interface standards for every piece of software they produce. Microsoft, Apple, and Sun all provide UI standards documents to anyone who is developing software using their tools or for their operating systems.

Just because a programmer uses a computer all day, it does not make them an expert in user interface design. We know what we like, but not necessarily the likes and needs of the users we are targeting with our applications. Layouts that make sense to programmers are not always what the user wants. It may not follow their actual flow of work or may be more distracting than helpful. That being said though, most programmers believe they are UI experts. Jeff Johnson sums it up nicely.

“I don’t entirely understand it but it is true: Highly skilled carpenters don’t get insulted when told they are not architects, but highly skilled programmers do get insulted when told they are not UI designers. [3]

References

  1. Cooper, Alan and Reimann, Robert. (2003). About Face 2.0: The Essentials ofInteraction Design. Indianapolis, IN:Wiley Publishing, Inc.
  1. Shneiderman, Bruce and Plaisant, Catherine. (2004). Designing the User Interface: Strategies for Effective Human-Computer Interaction. New York, NY:Addison Wesley.
  1. Johnson, Jeff. (2000). GUI Bloopers: Don'ts and Do's for Software Developers and Web Designers. San Francisco, CA:Morgan Kauffman.
  1. Raskin, Jef. (2000). The Humane Interface: New Directions for Designing Interactive Systems. New York, NY:Addison-Wesley Professional.
  1. Spolsky, Joel. (2001). User Interface Design for Programmers.

Berkeley, CA:APress.