Prototyping

Introduction

Once the requirements analysis phase is completed, and all requirements have been identified and established, the next step is to begin designing. In general, there are two types of designs:

• Conceptual design: Focuses mainly on what the product will do, and how the product will work and behave.
• Physical design: Focuses mainly on the screen details such as icons, graphics, menu structures, interaction mode and style.

As we saw in the overview of the UEL model, designing is an iterative process. It iterates through a cycle of design, evaluation, and redesign. Before moving into the details of conceptual and physical design, let’s first introduce ourselves to different types of prototyping and learn to build a very basic prototype.

Prototyping

Have you ever been in a clothing store and been unable to explicitly describe the style of clothing you are looking for, but when the employee shows you some samples you can easily identify which pieces you want and which you don’t? This is exactly how prototyping helps in the software design process. Sometimes users fail to explain what they want, but, when a product is presented to them, they can easily tell what they want to change and what they like. There are two types of prototyping: low-fidelity and high-fidelity. Let’s take a closer look at each one of them.

Low-fidelity prototyping

Low-fidelity prototyping is used to design low-tech and simple ideas. This type of prototyping requires mainly paper and pen. Low-fidelity prototypes are cheap, simple, and quick to create or modify. This gives designers the opportunity to design multiple prototypes and get feedback on each from users. These prototypes are never intended to look exactly like an actual system. They are used to convey the basic ideas to the users, especially in the early stages of development, i.e. during the conceptual design process. Some techniques used in low-fidelity prototyping are:

• Sketching: Where a design is represented by sketching it. The users, icons, buttons, text, everything an interface may require are sketched and presented to the user.

• Storyboarding: Where a design is represented using scenarios. These sketches represent how the user will interact with the device and what actions will be performed to progress through a task.

• Index cards: Where each card represents a screen design or an element of a task. This technique is particularly common in website development. The user moves between cards while performing a task as they might when interacting with the actual product.

• Wizard of Oz: Where a design is in the form of small software. The software is connected to another system from where responses to the user actions will be generated by a human operator. The user will interact with this software and will receive responses just like the actual product will be expected to respond.

High-fidelity prototyping

High-fidelity prototypes are more like an actual product. They are expensive to build in terms of time and effort, and also require development tools to build. The preference is to first explore ideas, structure, concepts, and content completely in low-fidelity prototyping before moving on to high-fidelity prototyping. These prototypes should mainly be used to test the technical aspects of the system. There are two types of high-fidelity prototypes based on the content being covered in the prototypes:

• Vertical prototyping: This provides lots of detail but only for a few selective functions. Consider Facebook, one prototype of this application can have only the sign in and sign up functions but with each and every detail including the colors, icons, interaction style used, etc.
• Horizontal prototyping: This provides basic details but for a wide range of functions. For example, another prototype of Facebook could include the actions post a picture, contact a friend, and add a friend, but with limited details like just the interaction styles being used.