Wireframe/Prototype testing

What is a Wireframe?

A wireframe can be thought of as a structure that conveys the actual idea behind an actual website. It is also termed as prototyping.

It presents a static snapshot of the design of a webpage. It does not necessarily provide the functionality as the real website, but it helps to draw the picture of how a website should look like. It is a representation of the real website with all graphical components.

Just like we look at the architectural design of a building, it helps us to frame a picture in our minds of how the building is going to look. Similar is the case with wireframe/prototype in the context of software/website testing.

A pictorial depiction :

This is a prototype of a real website. While we are still in our development phase, or in the mid, making few amendments to the website, we prepare such a wireframe/prototype to be presented to the customers so that they have a clear understanding of how their requirements are implemented actually. It is a part of testing.

Relevance of Wireframe/Prototype Testing :

An interesting fact to be noted here is that, why do we need a dummy of a real product? The answer to that is, to foresee any risk involved in terms of defect. Quality assurance is the ultimate goal of the testing team, for this the prototyping activity is carried out to analyse if any risk factors are involved.

Benefits of Wireframe Testing :

Let's take up a real world scenario and look into the merits of carrying out wireframe testing. We have an online shopping website where we look for products of our choice. We have the option of clicking on buy to make a purchase, by logging in to the website. If one is not a registered user, then one can click on signup/regsiter to become a member. By creating a wireframe , we can assure the client that requirement specifications are met in accordance with his needs .

  • Wireframe testing helps to figure out the missing requirements, if any.
  • Find out any additional requirements.
  • We can analyse the use of the functionalities to be added into the software system to be developed, that is, what purpose will it serve and to what extent it shall be an advantage.
  • Helps in carrying out functional testing in a way that it shows to the user ,how the layout of a feature is designed, and what shall be the flow of execution.

Tools used for Wireframing :

  • Axure - Compatible with Windows and Mac operating systems. Offers cloud prototyping services too.
  • Balsamiq -Quite a popular tool. Enables sketching out a rough estimate of the design . Both online and offline versions are available.
  • Cacoo - It is a tool with the help of which one can draw diagrams such as UML diagrams, creating wireframes , flowcharts etc.
  • FlairBuilder - A tool that enables creation of a wireframe and further adding enhanced prototype features in it.
  • Gliffy - Primarily used for flowcharts,networks etc. It is a web based diagram editor.
  • HotGloo - Another easy to use wireframe tool with a great interface.
  • Iplotz - Meant specifically for website wireframing.
  • LovelyCharts - An online application for creating diagrams like flowcharts, sitemaps etc.
  • LucidChart - Lets one create flowchart, network diagrams, UML diagram. It's an online flowchart creator.
  • MockFlow - It is an online wireframing tool for software and websites. Offers web services which can be meticulously integrated by expert users.
  • Mockingbird - Enables sharing, linking and previewing prototypes of web applications.
  • MockupBuilder - Helps to get a quick overview of ideas on screen.
  • MockupTiger -comes with widgets which can be dragged and dropped to create a customized wireframe.
  • OmniGraffle - Has a collection of stencils. One can choose stencil options to create mobile apps and flowcharts.
  • PencilProject - It is a GUI prototyping and sketching tool that is greatly used by business analysts and GUI developers.
  • PowerMockup - Offers a collection of user interface elements and icons similar to PowerPoint shapes. Helps to create snapshots for mobile,web, desktop applications.
  • Simulify - A very simple tool that runs in editor and has a preview mode.
  • WireFrame Sketcher - As the name suggests, this tool enables one to create mockups of mobile, web apps for varied OS platforms. It has a sketchy look and feel.

Conclusion :

Prototyping is like drawing a picture in the mind. It is important in the context of wireframe testing just to ensure that a software product is being built correctly. Availability of tools eases the whole process of prototyping or wireframe testing.