UI DesignerUser interfaces design, usability and UX evaluation
1 2 3 4 5
Web interfaces Web interfaces Mobile interfaces Mobile Icons Icons UX evaluation UX evaluation Theory of Usability Theory About me About me

[5] page: 5.1




Main page   /   Theory   /   Prototyping of interfaces


User interfaces prototyping
Prototyping is creation of the working model of user interface.

Drafting and testing of the product�s models on the engineering stage, i.e. prior to the product�s development, helps to set more concrete requirements towards functionality and user interface parameters of the future product.

Prototype development always calls for less sizable investment, than development of the product�s functional elements.

I prepare several product prototypes based on different concepts in order to compare them vs. each other and vs. competitors. Comparison helps to identify the optimal version to be used for engineering of the final user interface.

At this point, the closer is the prototype to the final product, the more precise are results of the Usability investigation.

Any prototype has two precision standards � by visual design and technological precision.

Accuracy by visual design

It goes without saying that the more visual design of the prototype fits the final visual design of the product, the more relevant are results of Usability testing.

Consequently, the change of prototype�s visual design after the development stage might dramatically affect Usability of the final product.

Testing of the prototype�s Usability attributes should take place only after development of the visual design.

In case if testing is launched after development of compositional design, the interface revision (which took place at the stage of visual design development) might either enhance or worsen the product�s Usability.

Simultaneous testing of Usability attributes of two prototypes of various visual design can identify optimal quality solutions, help to evaluate usability of various visual solutions and choose the optimal one.

I engineer both - visual design and interface and test prototypes with a perfect visual precision.

Accuracy of technology

Accuracy of technology helps to identify how close the prototypes� technology is to one of the final product, i.e. whether it comprises all necessary limitations and capabilities.

There are three methods of prototype creation: paper prototypes, emulators and interactive prototypes.

Paper prototypes

It is a method widely used in the West. It enables to create prototypes without application of sophisticated technologies. Creators of paper prototypes might not even know how to make more sophisticated emulators or interactive prototypes.

In this case a piece of paper models a computer screen. The information or functional elements of a paper prototype are square - they are painted on a piece of paper and cut out. The squares in question have special labels and are arranged and stuck on paper-screens. A separate paper-screen stands for each page of the structure. Each �click� is followed by a �turn� of a paper-screen.

As a rule, this method is applied for design of the structure and navigation of compositional design. It serves mainly for brainstorming by the development team and quick testing of results by a small number of respondents in order to identify the apparent interface disadvantages.

Strong points: designers of such prototypes are not necessarily aware of the technical side of prototype development; fast creation of paper prototypes
Weak points: the drawn solutions are sometimes hard or impossible to implement technically. Poor relevance of testing results. Impossible to record metrics. Only a partial checking of only structural and navigation and compositional layer of the design can be conducted.


Emulators are virtual duplicates of the product created through special programs or technologies. They help to model independent interactive communication between the user and the product�s prototype. At this point, the user can get response to his/her actions.

Creation of prototypes through emulators does not call for deep technology awareness.

At the same time emulators always have certain limitations, compared to real technologies. That is why they prevent from creating the product�s prototype, which would be equal to the final product by functions and usability. However, this method is far more reliable and precise, than paper prototypes.

Examples: prototypes of computer interface and websites created through Axure Pro, Flash, MS Visio, Adobe InDesign etc.
Examples of mobile interface: computer emulator for Nokia WAP sites.

Strong points: designers of such prototypes are not necessarily aware of the technical side of prototype development, it is possible to record metrics during usability evaluation
Weak points: the created solutions are sometimes hard or impossible to implement technically. Poor relevance of testing results. Impossible to develop interface prototype with a visual design layer. Only a partial checking of only structural and navigation and compositional layer of the design can be conducted.

Interactive prototypes

The most precise product�s models are those fully reflecting the product�s functioning pattern and identifying all benefits and limitations of applied technologies and solutions.

Strong points: metrics recording, high degree of relevance to technologies of the actual product, relevance of testing results, creation of prototypes with visual design
Weak points: designers of such prototypes are to be aware of the technical side of prototype development

While designing interfaces I create prototypes:

WEB To develop interactive website prototypes I apply HTML, CSS and Javascript. In other words, these prototypes fully meet technologies and visual design of the final product.
At this point we apply Javascript server emulator.

WAP To create interactive prototypes of WAP sites I apply XHTML MP and WCSS or WML, which can be tested through mobile phones, i.e. fully meet technologies and visual design of the final product (Read more...).

PC To create prototypes of computer programs I apply their emulators based on dHTML (HTML, CSS, Javascript). Thus, they are highly precise and fully meet visual design of the final product.

JAVA To develop prototypes of mobile applications I apply two emulators, each of them having error for precision of the interactive model. The program is modeled through XHTML MP-based WAP site. The product is tested through a mobile phone. The respondents hold phones featuring the tested interface in their hands (provided if one is not to test scenarios presupposing selection of menu option though side buttons). The program can also be modulated through a special computer dynamic emulator enabling to trace the logic of scenarios application with a better precision and applying all menu options. Such an emulator boasts all fixes for other ergonomic parameters (those typical of a PC, rather than of a mobile interface).

In both cases it is possible to create prototypes with visual design.

IVR IVR interface, i.e. interface for platforms with voice services have own engineering specifics.
For example, voice services are to provide information successively and the user follows only a successive string of scenarios. In contrast with a computer screen, where the user faces multiple alternative scenarios at the same time, the voice service prevents the user from hearing all menu options at the same time.

Design of voice services is described by the ISO-13714 applied in our company � �User interface to telephone-based services: Voice messaging applications�.

My know-how enables to create IVR menu prototypes through high-precision emulator, which can be tested directly on mobile phones (however the list of phone models applicable for this purpose is limited).

< | Further: Usability evaluation

User interface design | Usability evaluation | Usability testing