User Interface Design

User Interface Design is a process of designing or fabricating the interfaces through which the user can communicate with the computer. The software engineer accomplishes the task of designing the user interface, and they ensure that the user interface is easy to understand, achieves goals, and is suitable, encouraging, and forgiving.

This section will briefly study user interface design and the rules considered while designing the user interface. We will also take note of the principles and guidelines considered while designing the user interface. Further, we will discuss the steps to design the user interface.

Content: User Interface Design

1. User Interface Definition
2. Golden Rules to Design UI
3. UI Design Principles and Guidelines
4. User Interface Design Steps
5. Key Takeaways

User Interface Definition

The user interface is a device or a program (application program) that facilitates the user to communicate with the computer to convey what they want to do or what they want from the computer. The user interface is what the users see when they use the computer. As in the image below, whatever you see on the computer screen is a user interface.

The user interface can be categorized into three types those are:

1. Command-line Interface
2. Menu-Based Interface
3. Graphical User Interface

1. Command Line Interface

The command-line interface was the only mode of interaction with the computer in the starting days of computing. Here, the user communicates with the computer using textual instructions or commands. For example, if one needs to delete a file from the system, the command would be:

del c:\file.txt

But, this kind of user interface is not user-friendly as it is hard to learn such commands. The commands can even be error-prone and unforgiving. Such interfaces may be irritating. So, the command line interface is not for the casual user, but the experienced users generally prefer the command-line interface.

Example: Unix operating system

2. Menu Based Interface

It is somewhat easier than the command line interface as users interacting with the menu-based interface ‘do not have to learn the command name’, nor do they have to put effort into writing the commands. Here, the user does not have to type the commands; thus, the syntax error is automatically avoided.

A very popular example of a menu-based interface is ATM. A user uses menu buttons to select the options from the menu.

3. Graphical User Interface (GUI)

Over a period of time, there has been a tremendous evolution in the computer’s user interface. Today’s computer has a high-resolution screen with pointing devices (mouse). The modern-day computer’s interface has windows, scroll bars, text boxes, buttons, icons, and menus. To pick and point out the elements of GUI, we have a mouse.

Graphical user interfaces are easy to learn as compared to the command-line interface. GUI provides multiple windows to the user simultaneously to interact with the system, and it even allows the user to switch between the windows.

Golden Rules to Design UI

Theo Mandel, an interface designer, has put up three golden rules in his book on ‘interface design’, which must be considered by software engineers while designing the user interface as it helps software engineers to design a user-friendly interface., an interface designer, has put up three golden rules in his book on ‘interface design’, which must be considered by software engineers while designing the user interface as it helps software engineers to design a user-friendly interface.

The golden rules are as follows:

1. Place the User in Control

An interface designer may enforce some constraints to simplify the creation of an interface, but it may result in an annoying interface. So, while introducing the restrictions and constraints, the designer should be intended to simplify the interface. There is much more to placing a user in control while interacting with the system.

• The interface must not force the user to perform undesired actions. Like, enabled spell check in a word processor should not restrict the user from editing a text between the spell check.
• Users must be allowed to choose their interaction mechanism while interacting with the user interface. The user must be free to interact via keyboard, mouse, digitizer pen, touch screen or voice recognition. But, we are aware that every interaction mechanism does not respond to every action. Like, we cannot draw a shape using the keyboard command.
• Users must be allowed to interrupt the interaction between the sequence of actions. For example, if a user interacts with a word processor, he can interrupt and switch to PowerPoint without losing his work. The user must also be able to undo his action.
• The user often performs the same sequence of actions during the interaction. So, the user must be allowed to personalize the interface or design a ‘macro’ to ease the interaction.
• The interface should not take a casual user into technical internals. Thus the application user should not worry about the operating system or file management.
• The user senses the control over the interface if he can interact with the objects directly. Like, changing the size of an object or dragging it to a different location makes the user interact directly with the object.

2. Reduce the User’s Memory Load

If the user has to remember more while interacting with the system, it will be more prone to the error. So, a designed interface must reduce the user’s memory load.

• A designed interface should remember the user’s past actions, inputs and results.
• The default elements of an interface must be designed to suit the average of users. But, the user must also be able to change the defaults. The reset option must be there.
• The interface should have shortcuts which are easy to remember.
• The visuals of the interface should be like a real-world scenario.
• The interface should progressively disclose the information. For example, if the user chooses to colour the text, it will select the ‘Font colour’ button, which will show a set of all colours available in a progressive way.

3. Make a Consistent Interface

All the visual interfaces of an application should retain throughout all the screen displays.

• Allow the user to recognize the context in which he is working.
• Make changes to the current interface only if you have a reason.

User Interface Design Principles and Guidelines

Overall there are three principles for a user interface design:

1. Learnability: The interface must be easy to learn and understand.
2. Flexibility: The interface must support a variety of interaction mechanisms.
3. Robustness: The interface must provide proper feedback to let the user understand what is going on in the system.

Guidelines

There is a huge list of guidelines but here we will discuss some examples of guidelines for designing the user interface:

• The user interface must alert the user before any destruction action.
• It must remember the amount of information between two actions must be minimal.
• It must demand fewer inputs from the user during interaction.
• The commands that are irrelevant to the current action, must be deactivated.
• The user interface must categorize different types of activities using separate windows.

And the developer must consider several guidelines while creating the interface

User Interface Design Steps

Designing the user interface is an iterative process defined with the help of a spiral model. The designing of an interface starts from the mid of the spiral.

The spiral model encompasses four different frameworks those are:

1. Interface Analysis and Modelling
2. Design
3. Construction
4. Validation

Interface Analysis and Modelling

Before designing any solution, you need to know what actually you have to design. In this framework, you have to study the user’s profile who will use this interface.

In this phase, the designer must understand the people who will interact with the system using the interface. What type of task the user has to perform to achieve the goal? Further, the designer must investigate the content that has to present as a part of the interface.

The designer must also analyze the environment where the user will interact with the system via an interface.

Interface Design

After completing the interface analysis, the designer identifies the task that the end-user requires. Interface designing is also an iterative process. The designer first identifies the objects and the operations performed on those objects.

The designer also has to define the events that would change the state of the user interface. Further, the designer has to outline each state of the user interface as it would appear to the end-user.

Interface Construction

After identifying the objects, operations and events the designer creates a prototype. This prototype helps in the evaluation of the real-world scenario. This process is also iterative and the construction continues till the prototype is approved for conducting real-world scenarios.

Interface validation

The validation phase is performed to see whether the interface can perform user tasks along with all the variations in the real world. Like, as to whether the interface can perform all general user tasks? Is it easy to use, and understand and we can accept it as a useful tool?

Key Takeaways