View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

UI DESIGN and UI EVALUATIONS - Lawrence Jarvis

UI Design and UI Evaluations are two of the most important aspects of development. In this class and in the professional world the GUI is what the end user will see and experience. Therefore, it must be developed in a way to ensure the overall quality and of the product. It must also be developed with the user in mind which aids in improving the experience for the end user. There are several phases and processes in the user interface design some of which are more tedious and time consuming tasks. However, the tasks are the most important in the implementation of the GUI. Picking the design and evaluating are the most important things that go in User Interface design.

Implementing a user friendly, easy to navigate, and visually appealing user interface is the goal in UI design. Developers must work together to build a product that meets and all of the aforementioned characteristics.

When developing a UI the developers must first answer these key questions:

1.) How do you create user interface software that you can maintain, is well designed, object-oriented, is easy to build, and is easy to change?

2.) What would the user want the system to do?

3.) What interface look & feel styles appeal to the user?

4.) How would the system fit in with the user's normal workflow or daily activities?

5.) How do you create user interfaces that people can actually use?

6.) How technically savvy is the user and what similar systems does the user already use?

For developer's product to have those aforementioned characteristics it is necessary for them to keep the user in mind and mostly follow certain principles in UI design. One of these principles is Norman's Formative rules

Create effective mental models - Properly visualize and draw mock-ups of the end product

Make appropriate functionality visible - Ensuring that the design all functions associated with it are clear and concise.

Natural mappings - Predictable link between action in the world and the consequences

Use affordances - Relationship between person and object and interaction. They are a combination of good visibility, natural mapping, constraints, feedback

Use constraints - Convey possible/appropriate actions

Provide feedback - As the developer you use ask for feedback about your design as well as provide feedback about your design decisions.

Design with errors in mind - A developer must design their product with the possibility of errors existing and trying to account for them

UI design requires a good understanding of what the user needs and wants. It requires that you as a developer gather a list of the functionality required of the system to accomplish the goals of the project and the potential needs of the users. As a developer you should conduct an analysis of the potential users of the system your building if possible. It is very important get feedback and input from those who may and will be using the product. You could attempt to gain user feedback through various outlets including surveys, focus groups, or interviews if possible.

Prototyping or the development of a framework is very beneficial in UI design. It can be done in the form of paper prototypes or simple interactive screens which is what we did with our M5 screen mock-ups that I attached at the bottom of the section. These prototypes are not the final visuals but they provide a foundation for what our GUI will appear as so that we could get feedback from our TA. The purpose of the screen mock-ups is not really to focus on content but more so most to concentrate on the interface.

Useful links:
This site provides a lot of useful background information about choosing your styles and colors. It also has more information on how you should rate your product according to visual appeal and usability:

The following site provides a lot of useful tips for developers to keep in mind while developing their UI. These tips will help reduce a lot of the common errors an evaluator will find in the UI:

Our Initial UI Design:


UI evaluations are a major part of user interface design. They provide a way of ensuring the quality and soundness of a product. Evaluations should be done at different intervals throughout the design cycle to improve the product as it being completed. They also ensure that you the developer have followed all principles for UI design and Norman's formative rules for design.

There are three main forms of UI Evaluations

1.) Heuristic Evaluations-

This evaluation involves having a small set of evaluators independently examine an interface. Their goal is to judge its compliance with recognized usability principles. Developers conduct this form evaluation so that any usability issues that are identified can be addressed as part of the iterative design process. This process returns the developers mainly qualitative and formative data which they can use to change various aspects of their UI.

The procedure to conduct a Heuristic Evaluation is:

1. Gather inputs - This requires the individuals evaluating to familiarize themselves with domain, establish heuristics and then rating scales. They then need to storyboard scenarios for them to test when exploring UI.

An example of a heuristics is error dialog or some form of a error notification which notifies users of errors within the program. Anything that allows
or helps users recognize and recover from errors. As testers should develop a list of heuristics when my group conducted our UI Evaluation we used this list

2. Independent evaluation - This where each individual user begins evaluating the UI on their own and writing down the issues they find to bring up in the next portion of the process. They are judging the UI based upon the heuristics they listed in step 1.

3. Debriefing/Collection - This is where the group members come back together to compile and discuss all issues that they have uncovered. They share their opinions and then they separate the issues into categories.

4. Severity rating - This is where you rate the problems you filtered out in step 3. You can rate them based upon
frequency (how often might this occur)
impact (what is the business effect of this problem)
persistence (how does it impact users i.e. 1 time problem then learn work around, or constant bother)

As a developer at the end of the cycle make sure you clarify every problem your evaluators identify. It is a good idea to ask them questions so that you understand the specific nature of the difficulties they encountered.Remember that their is no such thing as a User error at the end of the evaluation.

A helpful site for conducting the heuristic evaluation:

My group actually conducted this form of evaluation with our project and below you can find our results.
Our Usability Plan:

Our Response to the Usability Report:

Our Usability Report:
Usability Report.doc

Our Heuristic Checklist:
heuristic checklist.doc

2.) Cognitive Walkthrough - Through this evaluation a user evaluates a design for ease of learning
primarily through exploration of the interfaces code. It requires a fairly detailed description of prototype
It is also categorized as a code walkthrough.

The procedure is to:

1.) Define inputs - Define user goals and interaction tasks. As the evaluator you would need to identify users
along with what knowledge & experience needed to operate the interface. Create questions to answer throughout your walkthrough.
Also try to decompose tasks into action sequences must know how interface looks for each step.

2.) Walk through action sequences for task - locate code that initiates action sequence and verify that it meets all necessary scenarios
and provides answers to the questions created in part 1.

3.) Record critical information - write down areas that need improvement

3.)Think Aloud This form of evaluation requires the evaluator to try and become the user. The evaluator should use the interface and pretend to be a complete novice while stating all issues that appear as they go through the design. This often what developers do while testing themselves.

More information on UI Evaluation can be found here:

Links to this Page