What is time-based prototyping

UI prototyping

Ana Monika Ticaloiu December 12, 2004

When developing new product concepts and expanding old products, mistakes are often made and wrong decisions made, which can have devastating consequences. In order to prevent such wrong decisions from wasting a huge amount of time and money, UI prototyping is often used. The following essay aims to provide information about various prototyping concepts and tools.

In the course of product development, UI prototyping can be used at different points in time. The more advanced the product development, the more similar the prototype becomes to the end system in terms of design and functionality. At the beginning, demonstration prototypes can be used to check whether a developed concept is feasible and makes sense. You only implement little functionality for this. They help to determine and visualize advantages and disadvantages, so that new ideas can be generated and incentives for a new perspective can be given. Subsequently, the partial aspects of the system can be implemented using functional prototypes and the design and interaction of a product can be evaluated. For this purpose, mock-ups, with and without functionality, are developed, which are tested for appearance and usability. From this information can be obtained as to which interaction options, such as keyboard, volume control and mouse, are required and how the graphical user interface should look. It can also be determined which functionalities are necessary, which are desired and which are superfluous. Using laboratory samples (breadboards), the technical aspects such as system architecture and functionality are examined in order to find out which technologies should be used for the implementation. Pilot systems (evolutionary prototypes) represent system previous versions and can be further developed into target systems.

To ensure successful UI prototyping, a few basic principles should be followed; Unnecessary functionality should never be implemented, on the one hand to keep costs as minimal as possible and on the other hand so that it is clear at all times which goal is being pursued with the respective prototype, i.e. which problem it is to solve applies. When aiming for a prototype, various aspects can be used. Above all, it is important to always keep the wishes and requirements of the users in mind. In addition, the benefits of the prototype must always be compared to the costs it causes. The lifespan of a prototype should be clearly defined. Certain milestones, such as team meetings or presentations, are recommended here. As soon as the goals pursued with the prototype have been achieved, it should be set aside and not developed further. Each prototype should only represent part of the system and therefore not realize all of the functionality. For prototypes with more functionality, it is also important to determine whether the functionality is implemented more broadly, and thus many features, or more deeply, and thus a few features with a lot of functionality are implemented, goes.

There is a large number of tools for the presentation and development of the various prototype types. A distinction can be made between tools for paper-based prototypes and tools for computer-based prototypes. Paper-based prototypes are paper mock-ups that are intended to simulate the appearance of the system, or a slide show that is intended to show how to navigate in the system and the design of the graphical user interface. Paper mock-ups are prototypes that are completely developed on paper. Attempts are also made to implement check boxes, drop-down menus and tabs using post-its and different-colored paper. The slide show represents a sequence of images from the interface and is intended to show a predetermined path through the system. Tools for this are Photoshop, CorelDraw, PowerPoint, HTML, paper, pens and scissors.

Paper prototyping is characterized by the fact that it is not very time-consuming and cost-intensive. In addition, it enables usability problems to be discovered at a very early stage. Paper prototypes are mainly used when there are different ideas for the design of the system. In this case, the prototypes with the different designs can be tested very easily by users. Another reason for using paper prototypes is when one is still unclear about important points. These can be eliminated with the help of a prototype. Paper prototypes can also be used if completely new terminology is to be incorporated into the UI. This can be tested for usability before a lot of work is invested in it. Although paper prototyping seems very simple and intuitive, a few rules make sense here too. Before you start to depict the future design of the UI, you should make a list of the most important and common requirements for the user. This point is followed by the illustration and finally the system should be tested by users.

Computer-based prototypes are more advanced than paper-based prototypes and are intended to simulate the user interface in terms of both design and functionality. They should be able to be developed very quickly and inexpensively. A distinction can be made between icon-based, map-based and timeline-based tools. The icon-based systems include Macromedia's Authorware and Aim Techs IconAuthor. The concept of such programs is to represent interaction between different objects through icons. These icons, which symbolize the individual elements of the display, can be dragged from a selection palette with predefined icons into a flowchart. Parameters can be set individually for each icon. This type of tool enables the prototype to be developed very quickly, but unfortunately the functionality is limited by the programming logic of the predefined icons.

The second type of tools are the map-based tools. The most popular programs in this category are Hypercard from Apple and SuperCard from Allegiant. With such programs, individual states of the display are shown by a map on which there are buttons and graphics. The jump to another map is intended to simulate a change in the screen. Therefore, the navigation through the system is like a slideshow. Better interaction can also be achieved by implementing a scripting language. Map-based tools are comparable to HTML editors, which have a static concept. Here too, documents are linked to one another using links.

The third type of tools are time-based, such as Macromedia's Flash and Director. The concept here is that the individual images represent the display at a specific point in time. Although both programs were intended for animation with a linear time sequence, they provide robust scripting languages ‚Äč‚Äčthat also allow interaction that is not linear in the time sequence. Which of the two tools is the right choice depends on the restrictions of the system to be developed, on the bandwidth requirements and on the requirement for expandability.

Overall, it should be said that not every form of UI prototyping makes sense for every product development.