When Web-based applications are developed for a large number of users, who will interact with them in different ways, the user interface(UI) and user experience(UX) becomes the backbone of the application.

While the user interface(UI) is the visual aspect of your website or app, such as the placement of buttons, sidebars, menus, pages, etc., the user experience(UX) goes a little deeper and encompasses the entire journey the customer takes from start to finish on an app or website. UX includes the process by which the user learns to use the website/app, their emotions and thoughts while navigating the site/app, and the opinion a user has about the overall experience of using the site or app.

What is a mock-up?

One of the most important tools used by agile teams is a mock-up of user interfaces. A mock-up is a static wireframe that includes stylistic and visual details to represent a realistic model of what the final page or application will look like. It outlines the basics of user flow, or the many different ways a user will be able to click buttons and navigate from screen to screen.

Mock-ups are used as a tool to validate requirements interpretation with stakeholders. Without mock-ups, it becomes incredibly difficult for stakeholders to be sure they have realized all the requirements that will be relevant to them in a finished product. Missed requirements will then emerge in User Testing after development (usually the next time stakeholders see the project). Changes at this stage require code revisions and additional QA. With mock-ups, you can quickly run ideas through with stakeholders so they can participate in the solution process. Misunderstandings caused by ineffective communication can be quickly detected and corrected. Testers can then use the approved mock-ups to design test scenarios.

In addition to being used for requirements validation and documentation purposes, the mock-ups can also be used for usability testing before the application is built.

If you put the mock-up in front of an audience of users, you can test the design (UI) and usability (UX). Sometimes you just test what a mock-up looks like. Does the website look cluttered or sleek? Is the main menu easy to find? Users can imagine how they feel as they navigate through your app or website. Before you develop a mock-up, you may have a good idea of what your goals are, but you don’t know how users will interact with it. Seeing these interactions is what makes the mock-up phase so important for testing.

The mock-ups ensure that the testing phase is defined at the front of the QA process. This term is called Shift Left Testing.

Author: Oana