UI Prototyping

Andreas Kraess, creation date: 12.12.2004

Introduction

Prototyping became an important part of the software development process. In the classical way of software engineering, prototyping is a tool for identifying requirements and for validation.

More and more software systems are developed with a highly interactive graphical user interface. Especially for this purpose user interface prototyping has become common. End users and principal have problems with abstract concepts. They often only can evaluate what they see. That’s also called IKIWISI (“I’ll know it when I see it”).

Prototyping is an excellent way for gaining new ideas about a user interface can be designed and it can help evaluate the quality of a solution at an early point of the project. Particularly when the commercial success of a software product depends on its usability, user interface prototyping has a high significance.

Reasons for prototyping

Creating prototypes is very useful for exploring ideas before you invest in them. In many industries engineers are building prototypes to get a first impression of the appearance and behaviour of a product, i.e. architects are building models, aeronautics engineers test models in a wind channel, software and web designers built mock ups to test interaction of users with the program.

In each case this process should save time and resources. The prototypes are only front ends. They are easy and inexpensive to create. So it’s possible to find with minimal investment usability and design problems. But there is still a problem with the evaluation of the result from such a study.

There exist 3 main tasks which a prototype can solve:

Proof of concept:

In some software development teams there are disagreements between the team members or the team and the principal about the future direction of a project. A prototype can help making decisions and test if an idea works, a new approach has a future or motivate the team members to think about the problems in another way.

Design exploration:

The only way for checking the interaction of a special design, is to built a mock up and interact with it. That can be combined with a usability study, where parts of the design are evaluated. Prototyping is a model for designer how something should work or look. Anyone in the project can make prototyping for testing design issues, but designers are the most skilled for that.

Technical exploration:

Developers test different coding techniques to see if they are useful for this problem. Each technology has different trade offs.

Prototyping scopes

Costumer needs

When identifying the key problems and needs of the users, it is possible to detect the parts which need most exploration.

Usability study tasks

If the prototype is built for a usability study, the tasks of the study has to be concerted with the usability engineer.

Costumer needs

When identifying the key problems and needs of the users, it is possible to detect the parts which need most exploration.

Usability study tasks

If the prototype is built for a usability study, the tasks of the study has to be concerted with the usability engineer.

Team input

The questions what’s reasonable, what’s possible and what is beyond consideration for the next release which are coming up with the prototype should be clarified with the key developers.

Breadth vs. depth

In larger projects the proceeding about determine the complexity of a prototype needs consideration. There are two possibilities. Each feature has little functionality or one feature has full options and functionality. Only one way should be chosen.

Wireframe vs. Visual design

The design quality of the prototype depends on the audience that should evaluate it. Sketches suffice for test users who are common with the material and who don’t need to impress. But when the prototype is presented to less experienced clients, certain executives or more technical audience a more robust and aesthetically prototype is necessary.

Return on Investment

The goal for a prototype is to invest as much as necessary for getting the information that are required but not more.

Classification of user interface prototypes

Exploratory prototyping is used for determining the requirements and potential solutions. Results are presentation prototypes and functional prototypes. Presentation prototypes show how an application may solve certain requirements. They are strongly focused on the user interface. Functional prototypes implement strategically important parts of both the user interface and the functionality of a planned application.

Experimental prototyping focuses on the technical realization of a special requirement. Results are functional prototypes and breadboards. Breadboards are used for determining technical aspects such as system architecture or functionality of a planned application. They are not designed for being evaluated by end users.

Evolutionary prototyping is a continuous process for a changing and adapting an application to fast changing requirements. In that process all kinds of prototypes can be used. Important for that proceeding are pilot systems. Pilot Systems are very mature prototypes that can be practically applied.

Prototyping in the software development process

There exists no certain time in a project where a prototype should be built. Depending on the scope of a prototype, it can be build at any time of the project. Often they are made on an early stage of the project, especially during the planning and specification phase, before developers create the code. At that time the need for study is most important. At a late point in the project progress, smaller prototypes can help solving design and technical issues.

User interface prototyping tools

Paper is most suitable for less interactive things and moderate complexity like usability studies and quick reviews. There paper is often the fastest way to create design idea. With an image editing software it is possible to create screens that represent the design and print them out on paper. With several screens it is possible to simulate walkthroughs and the test user can make choices. For simulating high interaction with the interface, paper prototypes are not adapted for.

Microsoft Visual Basic is the fastest method for creating Windows user interface prototypes. With the web browser object it is easy to integrate HTML UI with the Windows components. An experienced C/C++ developer still can be faster in creating a ui prototype but he needs high discipline not to reuse the quick and dirty code from the prototype for the production. This quickly generated code highly differs from high quality engineering.

Macromedia Director or Flash is the most important and popular prototyping tool for among designers. It’s the most useful tool for multimedia or not standard graphical user interface designs.

HTML Editors are a very fast way to built simple prototypes. To present an idea, it often suffices adding images to the web site that simulate the interaction. But there are the same doubts for web engineering as for user interface prototyping with C/C++. The developers should care that they don’t reuse the quick and dirty code for the final product for keeping quality.

Sources:

Josef Voss, Praktische Informatik III, FernUniverität Hagen, „Vorgehensweise und Werkzeuge für ein Ineinandergreifen von Modellierung und Prototyping”

Scott Berkun, „The Art of UI Prototyping“

Dirk Bäumer, Walter R. Bischofberger, Horst Lichter, Heinz Züllighoven, “User Interface Prototyping – Concepts, Tools, and Experience”

Gustav Pomberger, Walter Bischofberger, Dieter Kolb, Wolfgang Pree, Holger Schlemm, “Prototyping-Oriented Software Development – Concepts and Tools”