How to speak the language of prototyping

What is a website prototype?

Typically, a prototype involves creating a wireframe and a mock-up. However, website prototypes take it a step further because alongside being ‘a mock-up’ of what your website will look like live; they are also more advanced and are essentially an interactive demo of your website.

You could say that they are the first phase in which you can interact, play and see your creation in action – even if it is only slightly usable (because it is a demo).

And this is great, as it enables you to review usability and a user’s journey across your site, as well as gather feedback. For instance, you can unleash project stakeholders onto your site and let them experiment with it before it goes into final development.

Now website prototypes are usually delivered in a digital format using presentation software e.g. Power Point, clickable HTML coded pages or using prototyping software (which gives you a fake website).

However, it isn’t unheard of to see a prototype sketched on paper (instead of a high-quality design). This usually occurs when a client requires a prototype within a short space of time. The only downside to this design approach is that they’ll be forced to use their imagination (whilst they look at pages) AND they’ll have to act as the computer i.e. they will have to switch the paper around based on ‘user’ choices.

Typically though, web designers start off with a paper prototype before progressing to the following:

• Presentation software – this is a basic prototype done in PowerPoint and Keynote. They are quick and easy to make, and will link different pages together. However, they have limited interactivity.
• Coded prototypes – similar to coded mock-ups, this will save you time in the final stages. The only con is that your coding will have to be up to scratch to make it worthwhile.
• Specialised design apps – these apps come with all the tools you need. You can even add some interactivity with the option to create interactive wireframes (lo-fi prototypes).
• Website prototype – like we discussed above, the purpose of this is to give you an interactive site where you can navigate from page to page and play around with drop down menus etc., so you can determine what works and what may cause potential user problems.

NOTE: prototypes are NOT to be confused with wireframes.

When you see the phrase ‘wireframe’ what it means is that you’ll be presented with a basic site that has got limited functionality and is more focused on the structure of your future site. Prototypes differ because they incorporate advanced design and functionality. In other words, they are made to give you a realistic idea of how the interface is going to look once it is fully developed (alongside allowing you to review its user interface elements and usability).

What are the advantages of prototyping?

There are many reasons to incorporate prototyping into your website design strategy. However, if we had to surmise, we would advise you to consider each of the following advantages:

1.    Gives a detailed picture of user interface elements – you’ll be able to see and experience everything users will when they come across your website. And this is handy as you’ll quickly be able to identify what works and what needs changing before you go to final development.

Similarly, by opening the door to user testing, you can quickly gather data, assess usability problems (which need changing) and identify user preferences.

2.    Test and experiment with designs – continuing on from the point above, once you know what does and doesn’t work, you can make positive changes. You could say by making your website interactive and functional, you can try and test out new designs, ideas and theories until you find the right fit i.e. users engage with your website EXACTLY the way you want them to.

REMEMBER – website prototypes usually go through 2-3 rounds of usability testing before progressing further.

3.    Get feedback from stakeholders before your project goes into the development stage – remember – your opinion is not the only one that matters. Project stakeholders will want to impart their own suggestions, changes and advice. In this situation, offering them a demo of your site will enable them to gain a clear picture of what to expect from your website early on in the project life-cycle.

4.    Ensure it does what the client wants it to – when it comes to websites, you have got a limited window to make a positive impression. That is why it is important to make sure that your site goes in the right direction so you can get users to move through your website EXACTLY how you want them to.

5.    Attract more support and investment from stakeholders – the biggest perk to offering a website prototype is that by showing stakeholders exactly what is and isn’t possible; it may inspire them to offer more support and money into the creation of the final product. After all, they want the website to meet certain goals. So by showing them what they can get from their current investment, they’ll be more inclined to do more.

6.    Provides developers with a visual specification brief – making it easier and faster for them to develop the site. Think about it... by giving them a visual demo of how the site should work; they are less likely to misinterpret your wants or needs.

7.    They are critical to the project – whilst some might argue that wireframes and mock-ups can be skipped – we disagree on this front – there is no way to move forward without creating a prototype, as they enable you to unleash your site and ensure you thoroughly test every aspect of its functionality. Fail to put it through its paces - before it reaches users - and there is a high chance that it will fail.

8.    Will save you time and money - it is not uncommon for businesses to go straight to development; however, website prototyping can save you time and money in the long run. Consider this... if you don’t make the effort to work out the glitches, then you will lose users at the first hurdle because of the potential issues they’ll experience e.g. the website isn’t working the way they hoped it would.

Now, this doesn’t mean that website prototyping is perfect...

As you can already guess, it is a lengthy process that will require a lot of trial, error and patience before development can even take place. And as you can imagine, this waiting game could cause project managers and stakeholders to become worried about the project meeting its deadline.

However, by putting in the effort (from the start) and carefully planning out your website design; you can keep the creation of these prototypes to a minimum and even save time down the line. This is especially true when it comes to making the final product because they’ll know exactly what you want them to create.

What are the key terms you need to understand when prototyping?

Let’s be honest. Unless you’re in the business, much of the terminology you’ll come across will be confusing. That is why we have compiled the following list of key terms. By getting to grips with this vocabulary, there’ll be no mistaking what is happening and in turn, what you want to have done.

Similarly, by learning how to speak the language of prototyping, you can escape the jargon and ensure you are employing the right practices:

• Prototyping tools – these are usually apps/tools that enable you to build interactive website prototypes with minimal coding. Instead, you can use them to create a prototype that is close to its live version (in terms of functionality and usability).
• Wireframe – like we mentioned earlier, wireframes provide a low fidelity, basic website layout with structural guidelines so you can gain a visual idea of how your site will look by the end. This rough version of the screen design is particularly helpful to designers as they can experiment with layout options and gather feedback. NOTE: wireframes don’t usually include any form of decision making when it comes to colours, typography, etc.
• Fidelity – a concept used in wireframing and prototyping, low-fidelity (paper or digital) wireframes and prototypes provide you with a basic layout/blueprint of your design with links to each of your individual pages. At the same time, you’ll be able to see the main groups of content, as well as a visualisation of the user interface, and the information hierarchy. With high-fidelity versions, they will give you an in-depth peek into your sites functionality and a final visual.
• Prototype – involves an interactive mock-up of an app, website or device which is typically used to demonstrate a concept or to acquire feedback from users and stakeholders.

Prototypes have the advantage of being quick to build – without the need for engineers or developers – but also encouraging people to focus on its usability instead of its aesthetics. They also come in multiple forms: low fidelity (where the interface is sketched on paper) and high fidelity (includes final graphics).

• Mock-up – this is usually a mid-high fidelity static model of your design. It is a semi-functional version of the user interface model and comes with software development tools. Mock-ups allow users to visualise the basic layout, design and content of the UI, whilst showcasing the essential functionality (but in a static way).

Paper prototyping – as we mentioned earlier, paper prototyping involves creating sketched images of your various interfaces, and is often used in design sprints or in settings where rapid prototyping is required i.e. when you have got a short deadline.

• User Experience (UX) – this refers to the user experience itself, and not the ‘user experience design’.
• User Journey – this is exactly what it sounds like. It essentially describes the steps users go through when using the product. Formats can vary but normally this comes in the form of a diagram/map.
• User Interface – this is what users will see once they are on the website i.e. the front-end of the app/ website that users will be able to interact with on their device. At the same time, this term is often used to describe ‘how’ they are able to interact with the interface.
• Design validation – this term is used to depict the testing processes that are done to ensure that the design of the product/service meets user’s needs (as intended). Once it is decided that a design has met the needs required, it becomes ‘validated’.
• Card sorting – this exercise is often used to help businesses understand how people intuitively associate different items with one another. This is incredibly helpful when designing your navigation structure or whilst making decisions about your information architecture as you’ll have a better idea of how users will respond.

To perform this exercise, you will need to give participants a batch of cards to sort into different categories (based on their interpretation).

• Information architecture – this depicts the structure and the way information is organised on websites or an app. In UX design, this usually refers to the process of managing/organising content, whilst creating a logical navigation structure that is easy to understand and will get users to where they need to be.
• Navigation – if you’re not already familiar with this phrase, all it really means is the part of the user interface design which controls/manages how users move around your website/app i.e. from section to section or between features.
• Above/Below the fold – the content you find ‘above the fold’ is the content that you can clearly see when the page/screen first loads. Content you find ‘below the fold’ describes all of the content you’ll see once you scroll down i.e. it is hidden until the user starts scrolling.
• Breadcrumb – this depicts a small string of links that you’ll sometimes see when you’re browsing through a complex content structure. A good example of this is eBay where you may find the following trail: eBay > Clothes, Shoes & Accessories > Men’s Shirts. NOTE: these can usually be found on the top-left of the page.
• Call To Action – these can be a link to any visual or interface element that invites users to perform a specific action i.e. ‘buy now’ or ‘read more’. They are usually a small snippet of text followed by a button.
• Gestalt Principles – these are a set of visual principles that are grouped together based on the underpinning idea that their elements share a proximity or have features in common, and as such are believed to be related to each other.
• Grid – grids helps to decide the positioning of user interface elements on the screen/page. They play a key role in creating effective design systems.
• Landing page – these web pages are usually created as a means to direct users towards a specific action i.e. signing up to a newsletter or buying something. It is not to be confused with a homepage, as its goal is to offer users a range of possible actions and not just focus on the product/business/service.
• End User – this describes any user of an app or website, not just those who are customers. For example, end users can also consist of those within your company.
• Eye Tracking – this advanced method records where users are looking on the screen and for how long. This allows designers to recognise and assess the visual hierarchy of the information on the screen so that they can better optimise the design.
• Debt (Design Debt and Tech Debt) – when it comes to design and development, ‘debts’ occur as a result of shortcuts being taken in order to rapidly develop the first version of the product. In other words, they are design decisions that are made with the understanding that designers will need to go back and improve/expand upon them.
• Task-based User Testing – similar to card sorting, this involves getting users to complete a task/set of tasks. Whilst they are trying to finish them, users are observed and once finished are asked questions. This whole testing process is beneficial when trying to see how intuitive a product’s navigation and information architecture is. NOTE: the word ‘Testing’ generally describes people being asked to use a product with the intention of assessing its strength, weaknesses and performance so they can collate feedback.
• User Scenario – these involve story-like descriptions pertaining to specific situations or chains of events where a user might interact with the site. These scenarios are great for helping designers and developers to realistically view how the site is going to be used and spot any special constraints/opportunities.
• Iteration – this describes the process of repeatedly gathering feedback on design solutions, but acting on them in a bid to improve your site and progress towards a final design.
• Onboarding – this phrase describes the steps a user will go through when they first open an app or site. And this is an important part of the user experience because even if a site is user-friendly, users can still give up on it at the onboarding stage if they feel it is not up to speed.
• Floating Action Button (FAB) – this user interface element usually sits on top of the screen design in the bottom right hand corner. This button differs from most though as it doesn’t move when users scroll but stays within sight.
• Affordance – describes any user interface design pattern that gives a visual clue of how users are meant to engage with it. A good example of this in on-screen buttons. They usually look like buttons you see and use on physical products, thus prompting users to press them.

Truthfully, we could quote pages upon pages of design terms that will help you to navigate the web design world with ease. However, if you’re simply interested in learning more about the language of prototyping then all of the above terms will help you to build a solid foundation of knowledge.

This is especially true if you’re looking for a web design agency to perform the task for you. As by opening your mind to all of these prototyping phrases, you’ll know EXACTLY what they are doing to make your site dreams a reality.

For more information on about prototyping or website development, feel free to contact me directly or visit my website https://www.stunn.co.uk/.