The Evolution Of Software Prototyping

A rise in rapid prototyping is one of the strongest trends software developers can expect. The unpredictable nature of modern software development means that developers must constantly innovate. Prototyping rewards innovation and creates avenues for development that wouldn’t be readily available with other methodologies. While prototyping often makes use of modern tools, developers can also practice this approach with surprisingly simple methods.

DevOps

A greater frequency in release cycles has remained a consistent trend in software for years, culminating in the routine use of DevOps during the last decade. The defining characteristic of DevOps is that it eliminates the distinction between development and operations that exists in traditional data centers. DevOps will likely become the default approach to IT in 2022, regardless of an organization’s size.

The merging of development and operations supports the continuous delivery of software, allowing developers to deploy code to production whenever they want. This Agile practice can make software development more efficient by allowing developers to identify and fix bugs more quickly. It also supports the use of prototyping, which makes it easier for developers to maintain a version of code that’s always deployable. The use of prototyping for even large software projects is thus closely tied to the increasing popularity of DevOps.

Software Development Models

The waterfall and prototyping models are two of the best known approaches to software development, but other methods such as Agile and DevOps also exist. However, a comparison between waterfall and prototyping is the most useful because they’re at opposite ends of the spectrum with respect to making unexpected changes. As far as developers are concerned, each model represents another tool in their tool belt that allows them to solve more problems.

Waterfall Model

The waterfall model is the oldest technique for developing software and was initially referred to as such in a 1970 lecture by Dr. Winston W. Royce. Dr. Royce discussed a template for developing large software systems, based on his experience with software development in the aerospace industry.

These clients place an exceptionally high priority on ensuring that projects produce software that’s operational, on time and within budget. In contrast, prototyping excels in projects that involve customer interviews and market research. Furthermore, the user requirements were well-defined at the beginning of a project and wouldn’t change during development. While some prototyping might have been useful during the early stages of development, the waterfall model was still the better choice for these projects.

The “waterfall” model is so-named because each phase of this process has a sequential flow such that developers complete each phase before beginning the next one. As a result, the waterfall model is a more structured approach than other development methods. The following diagram shows the general process flow for the waterfall model:

Figure 1: Waterfall Model

Note how the diagram above resembles a series of waterfalls, one for each phase. While the waterfall model is often sharply criticized, there are many types of applications for which it’s the best approach. For example, software with clearly defined requirements or those that need hardware upgrades typically benefit from the waterfall model.

However, its rigidity also creates disadvantages. Requirements must be locked before development can begin, which is increasingly difficult in a modern environment with continually changing requirements and technology. Furthermore, the waterfall model requires changes to be pushed into a controlled process, which usually causes delays. In addition, all the testing must be done at the end of the project, which many developers strongly oppose. The waterfall model requires a hard completion date, which more difficult to meet when individual phases run over their deadline. As a result, developers often must shorten the testing phase.

Prototyping Models

Another flaw with the waterfall model is that developers don’t get feedback from quality assurance (QA) or other stakeholders early in the project. Prototyping doesn’t have this problem since the development team creates preliminary models of the software for this very purpose. While early prototypes lack the complete functionality of the final product, they can provide stakeholders with its look and feel. The following diagram illustrates the development process with the prototyping model:

Figure 2: Prototyping Model

Note how the design, prototype, evaluation and review phases are a continual cycle under the prototyping model. One of the disadvantages of prototyping is that showing early prototypes to customers can give them the false impression that the software is nearly complete. Good prototypes appear as if the software is mostly working, but developers often need to write it from scratch even after completing the prototyping phase. As a result, the prototyping model often requires developers to work harder in managing customer expectations.

Prototyping Methodologies

Software prototyping techniques can generally be classified into three broad categories, including throwaway prototyping, evolutionary prototyping, incremental prototyping and extreme prototyping.

Throwaway Prototyping

Developers generally discard the prototypes in throwaway prototyping after completing the project design, as the name suggests. This technique is also known as rapid prototyping, since it typically requires less time than other types of prototyping. Designers can quickly create ideas in the design phase that often include key functionality. The prototype may be completely discarded or reused to some extent, resulting in quick feedback for a low amount of effort.

Evolutionary Prototyping

The evolutionary prototyping technique allows the prototype to evolve over multiple iterations. This prototype is considerably more functional than a throwaway prototype, which focuses only on design. An evolutionary prototype includes some primary features from the beginning, and more functionality is added to over successive iterations as needed by the client. The interfaces in evolutionary prototyping contain actual code, allowing users to interact with the prototype as if it were the final product.

Incremental Prototyping

The name may sound as if incremental prototyping were similar to evolutionary prototyping, but the two techniques are quite distinct. Evolutionary prototyping begins with basic functionality and builds on it through each iteration, while incremental prototyping breaks the complete functionality into separate modules that developers work on individually. Each module has its own prototype, which developers eventually merge to create the final product.

Extreme Prototyping

Extreme prototyping is a technique that’s most often used for web applications. It breaks software development into three sequential phases, including static prototyping, coding and implementation. Extreme prototyping is so-named because it develops fully functional interfaces before implementing the underlying code.

Static prototyping primarily consists of creating the HTML pages. The coding phase involves writing the code behind these pages to make them fully functional while using an additional architectural layer to simulate services for those pages. The implementation phase in extreme prototyping implements the actual services.

Process

Software developers usually follow a fixed process for prototyping, just like they do for the entire development process. The main phases of prototyping include the following:

• Design

• Prototyping

• Evaluation

• Refinement

Design

Identifying the problems to solve and developing detailed solutions for them is the first step in developing software, regardless of the specific methodology used. This phase generally involves developers gathering requirements by asking users detailed questions about the software’s desired functionality. Developers may also provide their own ideas about its design during this phase.

Issues that developers commonly explore during the design phase include the color palette to use, which is often driven by brand identity. The items that should appear on the home page should also be a topic of discussion early in this phase. Users may want to specify more technical details such as the number of pages or screens that an app should have, which can help developers understand the desired product more thoroughly. The design phase establishes the foundation of the software, making it the most crucial phase in software development.

Prototyping

The first prototypes usually focus on the software’s general appearance and functionality as described by the client. They often begin with low-fidelity methods that provide an informal outline of the software’s overall structure. They may also highlight a few basic functions and describe typical flows across the software.

Prototype creation methods include hand drawings, wireframes and clickable prototypes in increasing order of fidelity. Some developers deliver prototypes as part of a pre-project assessment. This process generally consists of project discovery and testing ideas before the development phase.

Hand Drawings

Hand-drawing are the most rudimentary method of creating a prototype, but sketching an idea on paper is often the best way to begin bringing it to life. Remember that these drawings are only a prototype rather than the final design, so artistic ability isn’t important. The goal is to simply make a vague idea more concrete like the types of inputs and other buttons to use. Hand drawings can also help developers make key decisions about the project such as features to include or exclude in the initial scope. Developers can easily share hand drawings between each other.

The images below show what hand drawings for a mobile app prototype might look like:

Figure 3: Handmade Drawing

The hand drawings above show the app’s interface with instructions, indicating the general flow of the app. The pre-formatted paper simulates the screen, helping to visualize what the software will look like.

Wireframes

Wireframes are a low-fidelity design technique. T software application like Adobe, Figma, Invision or Sketch renders as them as two-dimensional skeletal outlines, which a design team uses to represent an initial concept for the product. Wireframes provide minimal details on features like color, graphics and style, making them similar to blueprints in appearance.

The image below shows a series of wireframes for a teacher’s mobile app:

Fig. 4: Wireframes

The wireframes above show four screens for the app, including instructions, buttons and other inputs.

Wireframes focus on functionality, user flow and the screens’ relation to each other. They should only include key elements, so developers can change them quickly and easily. This technique is an effective means of eliciting feedback from users without needing to write any code. Furthermore, wireframes don’t require any special skills to create, so everyone on the design team can contribute to the process of forming ideas. Their simple appearance makes it clear that developers are still defining features, which also encourages participation.

Clickable Prototypes

Clickable prototypes are an interactive set of screens that are linked together, thus mimicking a working application. Users can interact with them on a computing device, typically the same type of device that the final product will run on. These interactions include clicking on buttons and other controls and navigating between screens as if the prototype were real software. However, nothing is occurring in the background since, since it doesn’t have any code.

Developers often convert wireframes into clickable prototypes. The primary advantage of doing this is to provide a better visualization of the final product. Developers often obtain approval of clickable prototypes from users before writing any actual code, which helps ensure that all stakeholders are on the same page with respect to the software’s vision. Clickable prototypes are also a great tool for testing the software on future users since they’re already fully designed.

Furthermore, development teams can share clickable prototypes and obtain candid feedback on them while still making changes easily. Team members can also use prototyping tools to generate more advanced interface designs, resulting in a more comprehensive model of the software.

Evaluation

Once the development team has created the prototypes, the next step is to get feedback on them from the users. The primary purpose of the evaluation phase is to minimize the risk of making major changes to the software later in the development process. This means that developers should get as much input from the users as possible, allowing developers to learn exactly what users expect in the final product.

Refinement

During the refinement phase, developers incorporate the feedback from the evaluation phase into the prototype. This phase completes the cycle in the prototyping development model, bringing the prototype closer to the user’s intended vision. Developers typically must repeat this cycle many times before receiving the client’s approval to begin development because it’s effectively impossible to meet all the users’ expectations with the first prototype. This is largely because real-world problems are too complex to easily understand from a single reading of the user’s requirements. Furthermore, those requirements routinely change during the prototyping cycle.

Benefits

The benefits of prototyping over other approaches to software development include the early testing of designs, obtaining buy-in from project stakeholders and ease of use.

Prototypes allow designers to test and validate their designs early in the development process. This is primarily because prototypes provide a visual representation of the product without writing any code. The ability to iteratively improve the design allows designers to quickly develop the design that best meets user requirements.

Software developers also use prototypes to impress stakeholders, especially investors. A working prototype can help describe the ideas behind the software during fundraising efforts much more effectively than a verbal explanation. Furthermore, a prototyping is a comparatively low risk method of determining if an idea has any value to stakeholders.

A prototype’s ease of use is the most obvious advantage for developers. The ability to quickly make a prototype allows them to explore many ideas without spending much time or effort. This advantage provides developers with greater confidence that they’re spending resources on the right functionality.

Summary

Modern software development is commonly characterized by changes in requirements during the design phase, often due to market volatility or technological advances. This environment encourages the use of agile practices such as prototyping, which includes many specific approaches to development. Regardless of the specific methods developers use, the idea behind prototyping is to quickly provide users with a visual representation of the intended product. This strategy allows developers to align their design with the customer’s vision without investing too much effort in the wrong design.

About Baytech

Baytech is passionate about the technology we use to build custom business applications, especially enterprise solutions that optimize business processes. We’ve been delivering software solutions in a variety of technologies since 1997. Our success is due to the skill and efficiency of our senior staff, which includes software engineers, project managers, and DevOps experts. All of our engineers are onshore, salaried staff members.

We focus on the quality, usability, and scalability of our software and don’t believe in mitigating cost at the risk of quality. We manage project costs by implementing an efficient development process that’s completely transparent and uses the latest standards and practices to build software right the first time. Contact us today to learn more about how we can help your business. Find us online at https://www.baytechconsulting.com/contact.