Having established a map for our application in the week before, this week we were introduced to prototyping and conducted an in-session practice of our chosen tool. Due to the circumstances related to the ongoing pandemic of Covid-19, this session was carried out via a remote video conference.
Before creating a successful prototype for our application, it is of essential importance to be familiar with the purpose of a prototype and what it means to the application to be prototyped. A prototype, in general,
- Presents the target stakeholders a sample of the final product
- Allows the stakeholder to familiarise themselves with the product
- Can be used to check for any significant issues that need to be taken care of for further development.
The term ‘prototype’ itself is ambiguous and broadly defined given the wide range of different products that need to be prototyped – there can be interactive prototypes as well as static ones. In our case, the prototype will need to be interactive, as our product is a mobile application which is designed to be heavily interacted with by the intended clients. An interactive prototype will allow the user to
- Directly interact with the application and discover its functions
- Determine the quality of implemented functions and suitability to the end user.
During the session, we were presented various methods of prototyping, as well as a range of different tools that can used for it, each with their advantages and shortcomings. When choosing an appropriate tool for creating our prototype, several essential factors need to be considered, including the points regarding an interactive prototype above:
- Fidelity – this determines the proximity of a prototype to the final product; high fidelity means greater proximity to the final product in terms of appearance and functionality
- Functionality – what functions does the tool offer and can those be used to achieve the intended working of the application
- Flexibility – the range of the tool’s usability, e.g. whether the tools requires certain systems or specific software to be working
Based on these, we have decided to use a web-based program called ‘Figma’. It neither requires to be run on a certain operating system nor a specific program to be installed except for a browser, thus allowing to be run by a wide range of users. ‘Figma’ comes with numerous design tools that allow the creation of customisable visual assets, as well as a prototype function enabling to draw interactive connections between elements which can be tested using the presentation mode of the program. These make ‘Figma’ a high-fidelity prototyping program that can be used to test designs for mobile applications, and it also provides various aspect ratios, e.g. that of various mobile phones, tablet computers, to test the prototype on.
Furthermore, ‘Figma’ allows a prototype design to be shared with others using invitations per E-Mail for anyone to view, edit, or interact.
There are a few steps remaining for us to complete the prototype of our application, which are
- Finalising the storyboard of our app, including the creation of a persona
- Decide upon which aspects of our design we want to prototype – consider the main objectives of our application while also considering the stakeholders that will use it
- Refine the prototype design based on the focus aspects – flesh out navigational structure and user interface design.
Bibliography
Houde, S., Hill, C. (1997) What do Prototypes Prototype? In M. Helander, T.K. Landauer, and P. Prabhu, Handbook of Human-Computer Interaction 2nd Edition (1-16). Available from: https://hci.stanford.edu/courses/cs247/2012/readings/WhatDoPrototypesPrototype.pdf [Accessed 10th April 2020]
Thanks all. It communicates that you have been thinking about the nature of prototypes and the different approaches available. Note that there is also the difference between an ‘interactive’ and a ‘functional’ prototype. The important difference is that in an ‘interactive’ prototype any functionality is simulated or suggested through animationg techniques (e.g. setting hyperlinks to various images). In a functional prototype, key functionality would be coded by a software developer.