Prototype The User Interface Design

Let us first define what is a user interface prototype. A prototype is like an early sample, model, or release of a product which has been built to test a concept or process so as to define its success. This term is used in a variety of contexts like semantics, design, electronics, application development and software programming. You will see that a prototype is generally used to evaluate a new design to enhance precision by system analysts and users.

What is a user interface prototype in app and software development?

Whether you hire iPhone app developers, Android developers, software programmers or DevOps, each one of them, if experienced and agile, will focus on prototyping as much as development itself.

You can say that a prototype is a simple experimental model of a proposed solution used to test or validate ideas, design speculations and many other aspects of the core conceptualisation efficiently and cheaply. This helps the designer and the developer make appropriate refinements or possible changes in direction of the final product.

The prototypes we are discussing here can take many forms. A thing in common the various forms have is that they are all tangible forms of your core cognitive ideas. You don’t need to define them as primitive versions of an end product, but they are far from it.

You surely might have seen or created plain simple sketches or storyboards in order to illustrate a proposed experiential solution, or might have made rough paper prototypes of digital interfaces, or sometimes even conducted role-playing to act out a service offering an idea are some of the best examples of prototypes. Don’t think of prototypes to be full products. You can easily prototype a part of a solution to test that specific part of your solution as a whole.

You will find many types of prototypes. They can range from anywhere between the below set of extremes:

  • Single page vs. multi page with bloated amount of menus, screens, and click targets that the user can completely finish a task
  • They can be realistic and detailed vs. hand-sketched on a piece of paper
  • Prototypes can be Interactive (clickable) vs. static (requiring a person to manipulate different pages and act as a “computer”)

The major area of focus for us will be two types of prototypes here:

  • High fidelity prototypes
  • Low fidelity prototypes

To define them we can say that the fidelity of the prototype refers to how closely it matches the look-and-feel of the final system. They vary in three different areas viz. Interactivity, Visuals, and
Content and commands. Here is a table that explains what high and low fidelity mean in each of these areas.

HIGH-FIDELITY PROTOTYPELOW-FIDELITY PROTOTYPE
Interactivity
Clickable links and menusYes: Many or all are clickable.No: Targets do not work.
Automatic response to user’s actionsYes: Links in the prototype are made to work via a prototyping tool (e.g., InVision, PowerPoint).No: Screens are presented to the user in real time by a person playing “the computer.”
Visuals
Realistic visual hierarchy, priority of screen elements, and screen sizeYes: Graphics, spacing, and layout look like a live system would look (even if the prototype is presented on paper).No: Only some or none of the visual attributes of the final live system are captured (e.g., a black-and-white sketch or wireframe, schematic representation of images and graphics, single sheet of paper for several screenfuls of information). Spacing and element prioritization may or may not be preserved
Content and Navigation Hierarchy
ContentYes: The prototype includes all the content that would appear in the final design (e.g., full articles, product-description text and images).No: The prototype includes only a summary of the content or a stand-in for product images.
Source: Nielsen Group

You will find that prototypes can be quick and rough at the same time. They can be useful for early-stage testing and learning and can also be fully formed and detailed. They are most commonly put to use for testing or pilot trials near the end of the project.

It is all about bringing conceptual or theoretical ideas to life and exploring their real-world impact before finally executing them. There are times when design teams arrive at ideas without enough research or validation and expedite them to final execution. There is no final certainty about their viability or possible effect on the target group, but they may still go on strong with the idea, with their hunch.

This is where prototyping comes in because research that is conducted during the early stages of your Design Thinking project cannot clearly tell you all that you need to know in order to create the optimal solution. It does not matter if you have researched thoroughly and gathered a large body of information, or even if your ideation sessions have resulted in what many perceive as a world-changing solution. It is imperative to understand that testing is still crucial for success.

Chances are high that design teams can easily become fixated on the research artefacts they have gathered during the earlier phases of exploration. This creates a bias towards their ideas. Prototyping and then testing those prototypes helps them reveal assumptions and biases they might have towards the ideas, unveiling the insights about your users that you can use to improve your solutions or create new ones.

You should utilize prototyping as a form of research right before all the other phases in the Design Thinking process of your project. It allows you to explore the pain areas in interfaces, products or services, and spot areas for improvement or innovation.

Conclusion

In business and entrepreneurship that deals with end customers, many times we tend to invest in exciting new ideas, brainstorming, and planning for their implementation, failing to realise that those brilliant designs had no traction with the users after the initial launch. As a business, you cannot afford to not test prototypes. The design should be and will be tested, whether you plan for it or not.


written by for UI/UX Designing section(s).