16 User Interface Design

R. Baskaran

DESIGN USER INTERFACE DESIGN

User Interface design is the effective design and development of the user interface of a system. The user interface must be user friendly and easy to use else users tend to avoid usage of the system.

USABILITY

Usability is the degree of ease to use a particular system. Usability focuses on the following motives such as:

· Ease of learning

· Ease of use

· Ease of remembering

· Subjective satisfaction

· Efficiency of use

· Effectiveness of use

USABILITY ENGINEERING

Usability Engineering (UE) processes to build “Usability” into products. Various methods can be used throughout the design lifecycle and these methods are incorporated into design process easily. Methods maintain focus on user throughout design.

Usability Engineering though incorporates ease of use for the clients; it is not done regularly as developers believe

· it takes too long

· is too expensive

· is not critical to development

· they can afford to learn about user problems during “live” use

· Also developers may not know how to do it

TYPICAL WEB-SITE USABILITY PROBLEMS

Some of the website usability issues include:

· Navigation through the website o Knowing where you are o Finding what you want

· Structure of web site

· Layout

o Needs sufficient white space

o Use of large graphics

USER CENTERED DESIGN

UCD is a dialog between the customer and the designer. Rules of thumb for user centered design:

· Get to know and understand the users.

· Build an application, applying usability principles.

· Test designs by observing users in a real work setting (environment and work load).

User centre design process starts with the idea for innovation, do research and understand the needs of the users. After understanding the needs and specification of the users, uses case for the system is developed and the interactions between the modules are defined. The UI for the system is designed using prototyping and they are evaluated for their effectiveness. After the design phase, the system is developed and tested by deploying it in real work environment.

USABILITY PRINCIPLES

GUI DESIGN IS MULTI DISCIPLINARY

A team comprises of analyst, designer, technology expert, graphic artist, social and behavioral scientist, programmer

Basic Principles

The basic principles while designing a GUI encompasses the assumption that users,

· Have not read the manual

· Have not attended training

· Do not have external help readily at hand

Based on the assumptions, all controls should be clear, understandable and placed in an intuitive location on the screen.

USABILITY DESIGN PROCESS

Usability design process involves the following phases:

· Use, scenario development.

· Interface structure design

· Interface standards design

· Interface design prototyping

· Interface evaluation

Use Scenario Development

· Use cases for the scenario are developed.

· Use scenarios – are just a single thread through a use case.

UI Structure/Flow of Control

UI Structure or the flow of control provides the flow or the navigation through a system. The structure of the system must be organized for ease of use and access by the users. The following example gives an overview for window navigation.

Interface Standards Design

The interface standards are the basic design elements that are common across the screens, forms, and reports within the system.

Interface Design Prototyping

Interface design prototyping comprises of the following techniques such as,

· Storyboard

· HTML Prototype

· Language Prototype

· Interface Evaluation

o Heuristic

o Walkthrough

o Interactive

· Formal Usability Testing

A good practice for creating UI prototype involves creating low-fidelity prototypes. Some examples are paper prototype, Visio/HTML/PPT prototypes.

Interface/Dialogue Design

The team needs to focus on the following while interface/Dialogue design:

· Layout (of buttons, text, table data, …)

· Structuring data entry (tab order)

· Controlling data input (validation and format controls)

· Feedback (prompting, status, warning, and error messages)

· Dialogue sequencing

Dialogue is a sequence of interactions between the system and a user. Dialogue design involves:

· Designing a dialogue sequence

· Building a prototype

· Assessing usability

GUI Design Guidelines involves the following activities such as User in control, Consistency, Personalization & Customization, Forgiveness, Feedback and Aesthetics & Usability.

User in Control

The user’s perception of control is the objective while designing a GUI. The users should be in control of the interface. There is no mothering principle; the user should feel that they initiate actions. Feedback from the users is necessary for this to work.

Consistency

The conformity is based on the GUI vendor’s standards. A GUI developer must not be too creative and innovative in the interface design. The conformance to the naming, coding and other GUI-related standards developed are done internally by the organization. This includes the naming and coding of menus, action buttons, screen fields, etc. It also includes standards for the placement of screen objects and consistent use of other GUI elements across applications.

Personalization & Customization

GUI personalization is customization for personal use. E.g. A user reorders and resizes columns in a grid display and saves these changes as preferences. GUI customization is an administrative task of tailoring the software to different groups of users. E.g. when the program operates differently for novice and advanced users.

Forgiveness

A good interface allows users to experiment and make mistakes in a “forgiving” way. Forgiveness encourages interface exploration because the user is allowed to take erroneous routes that can be “rolled back” (even to the starting point if necessary). Forgiveness implies facilities such as a multi-level undo operation and the ability to cancel long-running actions.

Feedback

The feedback guideline is a spin-off of the first guideline – the user in control. The term to be “in control” involves knowing what is going on when the control is temporarily with the program. The developer should build visual and/or audio cues for every user event. e.g. hourglass, wait indicator to let the user known about the progress visually.

Aesthetics & Usability

Aesthetics is about visual appeal. Usability is about the ease, simplicity, efficiency, reliability in using the interface. Simplicity is an additional and related guideline to keep the interface simple and easy to use by the users.

The issues to consider regarding aesthetics and usability include:

· the fixation and movement of the human eye,

· the use of colors,

· the sense of balance and symmetry,

· the alignment and spacing of elements,

· the sense of proportion,

· the grouping of related elements, etc.

· the responsiveness of the system

Symmetry: Law of Proximity

The law of proximity allows us to group elements which are in close proximity. It provides better understanding of the information.

The law of closure allows us to see meaning where none existed before. E.g. the IBM logo.

Ten Golden Usability Rules

A great set of guidelines created by Jakob Nielsen in his book Usability Engineering.

1. Use simple and natural dialog/language.

User interfaces should be simplified as much as possible, since every additional feature or item of information on a screen is one more thing to learn, one more thing to misunderstand, and one more thing to search through. And the GUI should not overdo it with color (= Less is more).

2. Use language that fits the user group.

The language should be based on user’s language and not on the system-oriented terms. Translation from one language to another is more than just words. Time, currency, phrases, metaphors, measurements, etc. must fit the culture of the user group.

3. Minimize the load on short-term memory.

Users should not have to remember information from one part of the dialogue to another. Instructions to the use of the system should be visible or easily retrievable whenever appropriate.

4. Make the graphical user interface coherent and consistent.

The same action should always have the same effect. Users will feel confident in using the system, and they will be encouraged to try out exploratory learning because they already have part of the knowledge needed to operate new parts of the system.

5. Give the ability to use shortcuts.

Accelerators – unseen by the novices, may often speed up the interaction for the expert users, such as: function keys, command keys, macros, etc.

6. Give feedback to the user’s actions.

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

0.1 sec user feel the system is responding immediately;
1 sec. is about the limit users flow of thought will stay interrupted.
10 seconds is about the limit to keep users attention focused on the dialogue; so if the user has to wait longer the system should give feedback about the waiting time.

7. Avoid error situations.

Ask the user if she/he really wants to do the action especially if the action leads to serious consequences. Avoid having too similar commands in the interface. Commands whose actions are opposite should not be placed close to each other.

8. Give clear exit marks.

Users often choose actions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Cancel should be offered when the operation will take a long time. In the navigation bars, the users should be able to back up.

9. Give clear and understandable error messages.

The error messages displayed should be clear and understandable by the users. The messages should be phrased clearly and should avoid obscure codes. The messages should be precise, not vague or general. The messages should constructively help the user with the system. The messages should be polite and not intimidate the user or put the blame explicitly on the user For example: “ILLEGAL, FATAL ACTION, JOB ABORTED!” phrases should not be used.

10. Give clear help and understandable documentation.

Information should be easy to search; it should be focused on the user’s task. The concrete steps that should be carried out must be listed. The help manual should not be too large, it should be precise and easy to understand.

Web Links

https://en.wikipedia.org/wiki/User_interface_design
https://www.usability.gov/what-and-why/user-interface-design.html
https://careerfoundry.com/en/blog/ui-design/how-to-become-a-ui-designer/

Supporting & Reference Materials

Roger S. Pressman, “Software Engineering: A Practitioner’s Approach”, Fifth Edition, McGraw Hill, 2001.
Pankaj Jalote, “An Integrated Approach to Software Engineering”, Second Edition, Springer Verlag, 1997.
Ian Sommerville, “Software Engineering”, Sixth Edition, Addison Wesley, 2000.