User Interface Design/Prototype Creation

7.1 Introduction

A fundamental reality of application development is that the user interface is the system to the users. What users want is for developers to build applications that meet their needs and that are easy to use. Good user interface allows people who understand the problem domain to work with the application without having to read the manuals or receive training.

Interface design is important for several reasons. First of all the more intuitive the user interface the easier it is to use, and the easier it is to use the cheaper it is. The better the user interface the easier it is to train people to use it, reducing your training costs. The better your user interface the less help people will need to use it, reducing your support costs. The better your user interface the more your users will like to use it, increasing their satisfaction with the work that you have done.

7.2 Objectives

• Deeper understanding of User Interface Design/Prototype Creation.

• Practicing using any prototyping tool like NetBeans or Eclipse or any other prototyping tool.

7.3 Tasks

• Produce sample User Interface Designs and Storyboards for the intended information system of WAIPS;

7.4 Milestones

Below are the milestones (specific goals) to aim for during this week of the project. The intention is to tie in with coverage presented in lectures and tutorials. You will receive further milestones in subsequent weeks on Blackboard as well as other helpful information.

Milestone	X
1. Apply the above mentioned methods of designing User Interface Design/Prototype.
2. Create a sample Storyboard for WAPIS.
3. Create sample prototypes and storyboards for your project.

7.5 User Interface Design Tips and Techniques

In this section we will cover a series of user interface design tips that will help you to improve the object-oriented interfaces that you create.

1. Consistency, consistency, consistency. The most important thing that you can possibly do is make sure that your user interface works consistently. If you can double-click on items in one list and have something happen then you should be able to double-click on items in any other list and have the same sort of thing happen. Put your buttons in consistent places on all of your windows, use the same wording in labels and messages, and use a consistent color scheme throughout. Consistency in your user interface allows your users to build an accurate mental model of the way that it works, and accurate mental models lead to lower training and support costs.

2. Set standards and stick to them. The only way that youll be able to ensure consistency within your application is to set design standards and then stick to them. The best approach is to adopt an industry standard and then fill any missing guidelines that are specific to your needs. Industry standards, such as the ones set by IBM (1993) and Microsoft (1995).

3. Explain the rules. Your users need to know how to work with the application that you built for them. When an application works consistently it means you only have to explain the rules once. This is a lot easier than explaining in detail exactly how to use each and every feature in an application step by step.

4. Navigation between screens is important. If it is difficult to get from one screen to another then your users will quickly become frustrated and give up.

5. Word your messages and labels appropriately. The text that you display on your screens is a primary source of information for your users. If your text is worded poorly then your interface will be perceived poorly by your users. Using full words and sentences, as opposed to abbreviations and codes makes your text easier to understand.

6. Use color appropriately. Color should be used sparingly in your applications, and if you do use it you must also use a secondary indicator.

7. Use fonts appropriately Old English fonts might look good on the covers of William Shakespeares plays, but they are really hard to read on a screen. Use fonts that are easy to read, such as serif fonts like Times Roman.

8. Alignment of fields. When a screen has more than one editing field you want to organize the fields in a way that is both visually appealing and efficient. As shown in Figure 1. I have always found that the best way to do so is to left-justify edit fields, or in other words make the left-hand side of each edit field line up in a straight line, one over the other. The corresponding labels should be right justified and placed immediately beside the field. This is a clean and efficient way to organize the fields on a screen.