UI Prototyping

Introduction to UI prototyping

Prototyping is all about modeling the system before the actual implementation. It helps the User interface designers cross-check with the user’s expected functions and get the user’s feedback on whether the system model is appropriate. The user interface prototype is first evaluated and then used for implementation. Only if the prototype passes the user acceptance in the evaluation round then only it is used as a base for actual implementation.

UI Prototyping Process

After designing the prototype, the resulting model is evaluated for quality. There are 4 different steps of models that are designed when UI is to be prototyped.

1. User model: It is the profile of all end users who will be using the system. In order to build a good interface, it is necessary to have data about the age, sex, physical capabilities, cultural background, educational level, and prosperity of the system users. Users of the system can be categorized based on interface knowledge:

• Novices: They don’t have any syntactic knowledge of how the system interface is designed but have little semantic knowledge about the interface.
• Knowledgeable and frequent users: They have good semantic and good syntactic knowledge of the system, which makes such users often look for shortcut and abbreviated modes of operation.
• Knowledgeable and intermittent users: They have enough semantic knowledge of the system but low syntactical knowledge as necessary to use the interface.

2. Design model: It is the design realization of the user model. This model should conform to all the user expectations specified in the requirement analysis phase

3. System perception Model: It represents the user’s mental view about how the interface looks and works like. It is about the view of the system that users carry in their minds.

4. System image model: It represents the system’s look and feel combined with supporting information like manuals and help files that describe the system’s interface syntax and semantics.

Users feel satisfied with the interface only when the system perception and system image models are coincident. And this coincidence is achieved only when the design model is developed to accommodate the user model’s information. All these models’ successful design is based upon the key elements – know the user and know the tasks.

User Interface Evaluation

Once the UI prototype is created through the above-defined modeling steps, the next step is the evaluation of the prototype model. Evaluation is done to find whether the model meets the user requirements are not. Some evaluation of the user interface design is carried out to judge its suitability. Full-scale evaluation is very costly and impractical for moat systems. An interface is actually evaluated against bits of usability attributes.

User Interfaces Evaluation Process

Steps involved in User interface evaluation are as follows

Step 1: User interface designers first create a preliminary design of the system

Step 2: After the design is created, a first level prototype for UI is created

Step 3: The users of the system then evaluate the UI prototype. They provide their feedback to the designers about the efficiency of the system interface

Step 4: The evaluation is done through formal methods kike questionnaires to get feedback from the users, rating sheets, video recording of the system use and subsequent tape evaluation, etc. Then the designers studies this evaluation feedback and extract information from this data.

Step 5: User interface designers make modifications based upon the user feedback, and the next level of UI prototype is developed.

This evaluation cycle continues until no further modifications are recommended by the user, i.e. until the user accepts the prototype.

Usability Attributes

• Robustness: This means how efficient the system is in tolerating user errors.
• Learnability: This means how long it takes for a new user to cope with the system
• Adaptability: This means how efficiently the system can cope with different user environments.
• Operating speed: This means how fast the system gives a response to the user’s request.
• Recoverability: This means how good the system is at recovering from user-made errors.

Evaluation Criteria

A number of evaluation criteria can be imposed in evaluating UI prototype

• A number of user tasks and an average number of actions in each task specified in the specification indicate the required interaction time and the system’s overall efficiency.
• Interface style, help facilities, and error handling facilities indicate that the complexity of the interface and the degree to which the users will accept it.
• A number of system tasks, actions, and system states indicate the system users’ memory load.
• The length and complexity of the system interface defined in the user requirements specification provide a clue about the amount of learning required by the users of the system.

Conclusion – UI Prototyping

Here in this article, we have discussed UI prototyping and its process in a stepwise manner. We have also added the concept of UI evaluation. I hope you enjoyed the article.

Recommended Articles

This is a guide to UI Prototyping. Here we discuss the UI Prototyping process along with User Interface Evaluation and its process. You may also have a look at the following articles to learn more –

1. UI Design Tools
2. UI Designer Interview Questions
3. What is Firebase?
4. Figma Alternatives