.
Rapid Prototype UI Design

Hala 🤩

Prototype, if you are sketching on paper it is a prototype. if you are working on the animations of interaction it is a prototype also. when we talk about such long & wide stage of design, we should think deeper to understand how could we do it easy, adapt the work-flow for better results.

Let’s start with Wiki definition of the prototype, A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.

This definition might fit the overall idea of the prototype, but for a deeper understanding of the prototype, I would like to mix the prototype definition with the prototyping process itself, so personally, I would define both of it like that:

Prototyping is this process where we build the look and feel of a product concept features or specific functions for testing or producing purposes. Prototypes could be in many different levels of qualities (fidelity) and could be done through many different techniques/methods. to be communicated and tested with different circles of feedback.

such definition covers almost all aspects we should know about prototyping, so I will discuss the highlighted parts of this definition on the next few lines.

Fidelity Multidimensional

Roughly, We use Fidelity to define the quality and shape. you are familiar with something like Lo-Fi prototypes, Hi-Fi prototypes. it is good, but Fidelity has many dimensions that measure the quality of the prototype.

The Look and Feel


The Look means how it looks like, it is about the theme and the style of layout. it includes all the visual aspects such as typography, colors, effects, and styles, etc.

The Feel means how it interacts, it is about the actions and the feedbacks. it includes all the animation aspects such as the transition between pages, micro-interactions events and different status of interactional elements, etc.

Features and Functions

Prototype quality can be measured through the (breadth)vertical and (depth)horizontal, and here we dig in details.

Prototype Breadth (Horizontal prototypes)

The Breadth refers to the features. simply it could be mentioned by the percentage of features covered in the prototype out of the entire concept features. it is common in early stages of prototyping to cover the breadth more the depth of features.

Prototype Depth (Vertical prototypes)

The Depth refers to the degree of functionality. here we talk about the depth of a specific feature functions interactions levels till the achieving the micro-interactions.

an example to clarify those two points, when a user needs to publish a new article in a CMS product, for example, he will click on add new post button, it will open the add new post page and then he will be able to add a new post. when we take the feature from a high-level overview like this, we use the horizontal prototype modal. but if we take another layer of interactions which happens while the user is adding the content of the post and edit typography such as adding headlines, bold text, image, and videos, etc. when we deeply think about the feature functions till the micro-interactions we use the vertical prototype modal.

Prototype Quality

As mentioned before, we are familiar with Hi-Fi, Lo-Fi Prototypes. those two definitions are widely used to define how the prototype is close to the final product look and feel. from this standpoint, we can define two qualities for any prototype:

Lo-Fi Prototype:

Here we focus on the experience itself, ex, how the user will interact with this part of the product. we don’t use colors usually to avoid building opinions based on the art direction. we usually start our prototyping process with this kind.

I would like to mention the definition here from mobgen.com

A lowfidelity prototype is a quick and easy tangible representation of a concept, a use flow, or an information structure created for getting quick feedback and improving the product

Hi-Fi Prototype:

Here, and after reviewing the experience by the Lo-Fi prototype, we start to define the final look and feel of the product. we try to show the experience mixed with the look and feel. the ultimate goal for this kind of prototypes is to get the final decisions and to test how might our users interact with the features in the real world.

I would like to mention this part form this article by Trista Liu

High-fidelity prototyping — is highly-functional and interactive prototyping which is quite close to the final product, with lots of functionality and details included. This is often used in the later usability evaluation to discover the potential issues that may exist in the workflow, interactivity and so on.

Now let’s move to another point and we gonna talk about the techniques of prototyping.

Techniques of prototype

now we have a clear idea about the fidelity part of any prototype, when we start prototyping we should define the goal, then we define the fidelity and then we can decide which techniques we gonna use. roughly talk, there are two main techniques the paper one, and the digital one. here we will dig deeper into those two types trying to clarify why we use it, its Pros & Cons so let’s start with Paper prototype.

Paper Prototype

the best solution for the early stages of a prototype. basically, you just use white a4 and pen. if you want to make it looks much better you could use some tools from the next list:

There are many tools might help for a better paper prototyping. the simple example of a white paper contains sketch for mobile app screens or even a website page will not be helpful to get a better feedback (since as we said before, the goal of the prototype is to validate a concept or a specific feature). so you will need in many cases to mix our tools to make it work with user testing sessions. here is a great example for testing a paper prototype with real users please watch it.

This will let you know that you can test paper prototypes even with children. after viewing this video I’m pretty sure that you have a clear idea of what you might need to build. and why all these materials might help through a paper prototyping.

Other interesting samples:

Note that you need to define which part or feature you gonna test, and the best way is to rely on vertical and horizontal prototypes.

I would like to share with you Jakob Nielsen recommendations

  • If an interface features forms, use a transparency sheet or correction tape, so you do not need multiple copies of the form.
  • Use well visible and mid-tip pens. Draw up your prototype in black and white. Colors can come in at a later stage of your process.

How to test a paper prototype?

we need 3 Team members, the computer man, the facilitator, and the observer. here we talk

Computer

The one who will respond to the user interactions. who will change the screens and he will arrange the papers based on the user behavior.

  • Simulates prototype
  • Doesn’t give any feedback that the computer wouldn’t

Facilitator

The one who will ask the user to do some actions, presents the interface and tasks, keeping the user in the flow.

  • Presents interface and tasks to the user
  • Encourages the user to “think aloud” by asking questions
  • Keeps user test from getting off track

Observer

Note-taker, the man who will record the entire session with details so you can understand in depth what went wrong later.

  • Keeps mouth shut, sits on hands if necessary
  • Takes copious notes

Okay, now let’s see the Pros and Cons of the paper prototype.

Cons of Paper prototype:

  1. The Limited interactivity and context.
  2. The difference of people’s interaction behavior between papers and digital screens.
  3. The Usability session moderation is so hard.
  4. Unexpected Clicks on an unplanned interactions parts.

Pros of Paper prototype:

  1. Easy to build and edit.
  2. Faster iterations and bug fixes.
  3. Coast and time.
  4. no-limitations, you can draw anything.

Personally, I use paper prototypes every single day. even if I’m adding a small component on a website I’ll sketch it on a paper first before anything.

It’s important to read Paper prototyping is a waste of time by Jake Knape. you do not have to follow his own ideas, but to try to avoid the worst cons of prototypes and to get another point of view as well.

By the way, Design sprint – concept model (day 2 and 3) is all about paper prototype and sketches. now let’s move for the digital prototype.

Computer Prototype

Computer prototypes – aims to simulate and visualize before you start production. I would like to mention this definition  from one of MIT classes

A typical computer prototype is a horizontal prototype. It’s high-fi in look and feel, but low-fi in depth – there’s no backend behind it. Where a human being simulating a paper prototype can generate new content on the fly in response to unexpected user actions, a computer prototype cannot.

Computer prototypes have sub-types such as Storyboard, and forms. I don’t recommend following this idea or classifications since it looks really old for our nowadays, however, it is good to know at least.

Since this kind of definitions / even labels becomes old in web and mobile Apps field, it might be much better for you to understand in depth the Digital Prototype.

Digital Prototype

A Digital prototype would present the real interactions in most of the cases, however, the quality of the prototype should not be hi-fi in all cases, it can be a lo-fi, for example, the prototype which you can build with tools such as uxpin.

You have many choices if you want to build a computer prototype, you can use whatever you like, and for example here are some computer prototype tools:

  1. UXPin
  2. Just In Mind
  3. Invision
  4. Sketch
  5. Framer
  6. Marvel
  7. Atomic
  8. Flinto
  9. Principle

and many more. it is not a big deal, but keeps in mind the collaborative features with your team members. an interesting video from Google for Entrepreneurs talks about Digital Prototypes, it will be really helpful for you

How to test a Digital Prototype?

Digital prototype gives us a wider range of testing options and opportunities. unlike paper prototypes, you can run distance user testing for digital prototypes and you can record the user interactions / track the mouse with some techniques and even use advanced techniques such as eye-tracking.

The best setup for a Digital Prototype – typically will be:

Facilitator

The one who will ask the user to do some actions, presents the interface and tasks, keeping the user in the flow.

  • Presents interface and tasks to the user
  • Encourages the user to “think aloud” by asking questions
  • Keeps user test from getting off track

Observer

Note-taker, the man who will record the entire session with details so you can understand in depth what went wrong later.

  • Keeps mouth shut, sits on hands if necessary
  • Takes copious notes

For Digital prototyping, the test part needs a dedicated article, I’ll try to cover Usability Testing on the next few Posts InShaaAllah. now let’s move the Pros and Cons!

Pros of Digital Prototype

your users will interact as if they use a real product. and since you will not do any code stuff you will not waste your time in building it. also, you will be able to share the design with your team members in most of the cases. and you can extract more data with less-efforts out of the usability sessions since you can record and track the user behavior and interactions.

  • Realistic interactions.
  • Flexibility.
  • The speed (with some tools).
  • Team Collaboration.
  • Testing anywhere, any time.
  • Record Testing session with much more details.

Cons of Digital Prototype

it might take time till you are familiar with the apps which you will use, you have to learn first the right way to use the app. and that might limit your ideas at the beginning by the way. also, for transitioning to code is another problem you might face if you did not prepare your components aligned with the design guidelines of any of popular design systems.

  • Learning curve.
  • limitations.
  • Transitioning to code.

Further reading, I suggest this article from UX Matters – Prototyping: Paper versus Digital. Till now we covered the major kinds of Prototype, also you can search for Oz PrototypeStoryboard and Form builder. and Now let’s move to the last part of our article, it is the circles of feedback.

Circles of Feedback

There is a direct relation between the quality of the prototype, and the circle of feedback you target to test your prototype with. for example, if you are going to test a Lo-Fi prototype you might test it with your team and friends or Stakeholders if they have a technical background. even if it is not the only possible circle you test with, but it’s the best circle for that kind of prototype.
Udacity – Rapid prototyping represent the idea of circles of feedback in a very simple way, please watch this video

Circles of feedback:

  • Team + Friends: The product team. As well as other people within your company or social circle. These people are very easy to find and interact with but are too close to the project to give accurate feedback as a customer. They’re ideal for low fidelity prototypes.
  • Experts: Subject matter experts. These are people who know something about the market in which the product will be deployed. But are not working on the product with you. They are also good for low fidelity prototypes and can give you a decent insight into medium-fidelity prototypes.
  • Customers: Your customers, these are people who are in your target market, and who you can reasonably expect to want your app. They give great feedback once the prototype is of a fidelity they can actually interact in a perfect for medium and high fidelity prototypes.
  • Customer’s Customers: The last circle, only applies to some apps but is really vital for those apps. These are your customer’s customers. They’re really important to get feedback from and are perfect for the same types of prototypes as the customers are.

Conclusion

Together, we discussed important ideas like that prototypes are Multidimensional, we expressed how to measure the fidelity of a prototype through the look and feel, features or specific functions, levels of qualities. also, we talked about techniques/methods, and finally, we looked at the circles of feedback.
First, we define the circle of feedback, and features we need to test. then we can decide which technique and fidelity will match our target audience.

Thanks for being here for this long time, and you can check the next references:

  • http://web.mit.edu/6.813/www/sp16/classes/10-prototyping/
  • http://groups.csail.mit.edu/graphics/classes/6.893/F03/lectures/L6.pdf
  • https://medium.com/digital-experience-design/a-guide-to-paper-prototyping-testing-for-web-interfaces-49e542ba765f
  • https://www.nngroup.com/reports/paper-prototyping-training-video/
  • https://www.interaction-design.org/literature/article/prototyping-learn-eight-common-methods-and-best-practices
  • https://www.uxpin.com/studio/blog/paper-prototyping-the-practical-beginners-guide/
  • https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9
  • https://it.toolbox.com/blogs/craigborysowich/prototyping-types-of-prototypes-030607
  • https://www.slideshare.net/emanabedalwahhab/prototyping-34600987
  • https://www.uxmatters.com/mt/archives/2017/05/prototyping-paper-versus-digital.php

Salamat ✌🌹


Also published on Medium.

You May Like,

What about my blog ? Topics may you like.