Prototype is a plan, not just a sketch
When it comes to creating a webpage, app or data system, both big picture, as well as details, are important. On the one hand, all interest groups and final users should have a chance to express their points of view and wishes. On the other hand, it is necessary that all key aspects are formed into a single vision in the initial phase. The most common way to do that is prototyping.
PROTOTYPE CREATION PROCESS
Prototype creation consists of a number of stages. First, the page’s overall layout is determined; then gradually the information gets more precise. This makes it possible to test a number of versions before the system is actually sent into development. When it comes to the level of detail, prototypes can be classified as low-fidelity (lo-fi), mid-fidelity (mid-fi) and high-fidelity (hi-fi) prototypes.
One of the low-detail prototypes is a simple paper prototype. Creating and testing a paper prototype is a good and cost-efficient method to find out whether the future system’s design is moving in the desired direction. Devices can be paper prototyped as well.
Wireframe is the term used mostly when talking about low- and mid-fidelity prototypes. A wireframe conveys the object layout idea by displaying the page’s content in information blocs that show where and how various components are located (e.g. latest news, ads, services, contacts etc.).
A wireframe usually only uses lines, boxes and black, grey and white colours, but sometimes the frames are replaced with placeholders—images, videos and texts. In either case, the purpose and aim is not to show the page’s final appearance. This is a very early user interface design that does not pay close attention to visual and technical functions. Main focus is on the layout of various elements or placeholders. In general, it is still a colourless and content-free framework that provides an optically good overview of the future page’s or app’s appearance. It is reasonable to move beyond this stage only after it has been discussed, different versions compared and all involved parties have given their approval.
The wireframe explains what information can be obtained from where and how the design functions as a whole. Areas for ads or changing banners are also designated. Wireframes are made for various devices as well, in order to show how the information is displayed on a computer, tablet or smartphone screen.
A clickable prototype is a partially interactive user interface/app demo that closely simulates the future product. It may still lack in the department of functionality, but it gives a good overview of the details. It already gives good feedback both on the work of the elements as well as the logic and cooperation of the actions. The purpose of a clickable prototype is to offer a comprehensive user experience. Its tester or potential final user should have an opportunity to test the actual user interface and perform planned actions.
In the case of a clickable prototype, the order and logic of the steps and clarity of possible actions or functionalities (what the programmer does later) play an important role. It can be used to test under which conditions a user can click on a button or perform an activity, what happens as a result of said activity and how does the view change.
User interface prototype can be made as a conceptual (interactive wireframe without design) HTML prototype. This means that the user interface prototype includes all the important forms, data fields and their layout, command buttons and paths.
PROTOTYPE — A PLAN
out later. When all parties have had an opportunity to give feedback on the prototype, and the updated version of the prototype has nothing to complain about, it is time to begin work on first the graphic design and then the code.
A prototype is a plan, not a draft. The usability expert creates a prototype so that the client’s representative, actual final user and system creators or programmers and designers would understand the processes the same way. For example, what really happens when a client logs into the environment, which products can be ordered, how is the cost calculated and discount shown.
TOOLS AND EQUIPMENT
There are good methods and tools to make sure a final user’s ideas would make it first to prototype and then final products. Our upcoming post “Prototyping—more than just flying paper planes” will expand on that.
The easiest way to start a wireframe is to use a pen and paper. Even a blackboard or wall will do. For an interactive prototype, one needs a corresponding software; we use a number of tools, mainly Axure RP.
Even the simplest paper prototype is enough to test the work of a user interface on future users. The main thing is to have a plan.