Designing UI Prototype

25 April 2017   |   Startup, Blogs
Prototyping has quickly become the hottest word in design recently.

Prototypes are one of the most important steps in the design process, yet still confusing for some designers and project teams. No wonder it’s unclear—a prototype can be almost anything, from a series of sketches representing different screens to a pixel-perfect prelaunch interface. Prototypes are an essential part of designing user flows and interfaces. They allow designers to show their design through an interactive and engaging product, resulting in a better understanding of the design for everyone involved. Instead of using static screens to gather feedback, stakeholders and potential customers are able to click through a sample of a product on the device that it is intended to be viewed on. Prototypes can be created at any stage of the design process to help demonstrate ideas that might be difficult to express with words alone.

The most basic definition of prototype is, “A simulation or sample version of a final product, which is used for testing prior to launch.” The goal of a prototype is to test products (and product ideas) before sinking lots of time and money into the final product. Prototyping is essential for resolving usability issues before launch. It can also reveal areas that need improvement. Once a draft of your product idea is in the hands of real users, you’ll finally see how they want to use the product. You can then go back and adjust your initial guesswork.

Prototypes have their own importance which can be understood by their following features

Representation — The actual form of the prototype, i.e., paper and mobile, or HTML and desktop.
Precision — The fidelity of the prototype, meaning its level of detail, polish, and realism.
Interactivity — The functionality open to the user, e.g., fully functional, partially functional, or view-only.
Evolution — The lifecycle of the prototype. Some are built quickly, tested, thrown away, and then replaced with an improved version (this is known as “rapid prototyping”). Others may be built and improved upon, ultimately evolving into the final product.

One of the most common misconceptions about prototyping is that it only needs to be done once or twice at the end of the design process. This is not true. Here's a little tip - “test early and test often.” You should prototype every possible iteration of your design—even your first, most basic idea. Prototypes aren’t simply beta tests that have the look of the final version; they are any version of your product that can be used for testing. As long as it gives you new insights into how people will naturally use the product, it doesn’t matter whether it’s paper, low-fidelity, high-fidelity, or HTML.

1. Low Fidelity - Paper Pencil and paper are the best tools for getting ideas out quickly and with minimal cost. During the initial design stages, rough user flows and wireframes can be enough to show off various screen states and get an idea across. To make them even better, designers can use a software like POP to take photos of their paper sketches and turn them directly into interactive prototypes in very little time.

“So what is a prototype? The answer: it’s a simulation of the final product. It’s like an interactive mockup that can have any degree of fidelity. The main purpose of building prototypes is to test whether or not the flow of the product is smooth and consistent”


2. Medium Fidelity - Clickable Prototypes After defining user flows and creating a mockup of the initial screens, it’s time to link them together to create a clickable prototype that will look close to the intended final design. These don’t have to be incredibly detailed, just enough to let the user get a feel for the final design while testing out the flows to see if they are clear and easy to understand. InVision is a great product for this stage of prototyping, as it allows designers to set hotspots on pages that can be clicked to proceed to the next stage of the flow without worrying about detailed animations.

3. High Fidelity - Advanced Interactions & Transitions After user flows have been tried and tested, it’s time to create and fine tune those gorgeous animations to show off to the development team. For these, designers need more control than simple transitions, so apps like Principle and Framer (if you know a bit of coding) are two good options to start with.

LLets look at some of the benefits of prototyping. 1. Speed - Prototyping saves time. It allows designers to quickly test out multiple ideas before committing to having developers code them. It also reduces the need for written explanations of a design. A prototype is worth a thousand static pages with documentation on how they’re supposed to work.
2. Reexamine user flows & evaluating design decisions - User flows are the steps required to get from point A to B in an application or website. They show the order of screens that a user would take to complete a specific task. Prototypes are the perfect place to examine if the user flow of the design is smooth or needs to be refined. By watching users click through a prototype, designers can quickly identify any difficulties the user might be having with their design.

3. Gather feedback- “Prototyping is also an impactful way to present to your client. People know how to interact with products. Demonstrating interactions with a prototype helps to spark well-informed discussions with clients and can lead to better design more quickly.” (UXmag) By placing an actual product in the hands of the users, designers can quickly see where there may be flaws in the original design flow that they might not have noticed without the use of an interactive prototype.

By now, you must be confused between wireframes and prototypes. Just hang in a little bit

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the lorem ipsum generators on the internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like aldus pagemaker including versions.

Lets summarize what is a wireframe.

A wireframe is a low-fidelity way of showing a design. It’s the graphic representation of an app or a website containing the most essential elements and the content. A wireframe is like a blueprint of a building. When someone wants to build a massive building, they don’t start right away, right. Instead, they sketch, draw, make the blueprints, calculate, etc. The same happens with website and app design. You cannot just start right away because you may undergo the risk of overlooking something or missing a vital element. In this respect, a wireframe will help gather things together and see the big picture. A few characteristic features of a wireframe are the following:
1. It shows the main chunks of content,
2. It draws the outline and the layout structure,
3. It depicts the most basic UI
One huge advantage of creating a wireframe is that it is not expensive and it fast to complete. You can show it to potential users and ask for feedback which is great because people will pay more attention to the functionality and user experience than the aesthetics. You are going to fine-tune the aesthetics later on anyways.

And now look at mockups.

A mockup is a visual way of representing a product. While a wireframe mostly represents a product’s structure, a mockup shows how the product is going to look like. But still, a mockup is not clickable (just like the wireframe). As opposed to a wireframe, a mockup is either a mid or high-fidelity display of design. A mockup helps you make final decisions regarding a product’s color schemes, visual style, typography. With a mockup, you can allow yourself to experiment with the visual side of the product to see what looks the best. Here again, you can ask your potential users for feedback and make the necessary changes right away. This will save you way more time than getting back and making adjustments to the UI after you have launched the product.

Finally, lets come back to prototypes and summarize it.

A prototype is often a high fidelity representation of the final product which is meant to simulate user interaction. Unlike the previous two, a prototype is clickable and thus allows the user to experience content and interactions in the interface. In fact, a prototype is very much like the final product itself. But it’s not the final product! The difference between the final product and the prototype is mainly that the interface and the backend are not often tied together in the case of a prototype. This is done to reduce development costs until the UI is approved. Once the prototype is tested, the team can go on with coding. One of the advantages of a prototype is that it’s highly interactive allowing the users to experience the interface and find out what they like or dislike about it.