FM-AA-CIA-15 Rev.

0 10-July-2020

Study Guide in CC 106 – Application Development and Emerging Technologie Module No.__

STUDY GUIDE FOR MODULE NO. 4

CHAPTER 4: USER INTERFACE (UI) DESIGN

MODULE OVERVIEW

This module will cover the following topics: design issues, user interface design process, user interface
prototyping and interface evaluation and other related matters. Learn the best practices in UI designing or
how to make great UIs. Because the best interface is no interface, you should offer users the most direct,
accessible, comfortable control (and best experience) where they’ll forget they’re using your design.

MODULE LEARNING OBJECTIVES

At the end of this chapter, the student should be able to:

1. Identify some general design principles for user interface design

2. Understand different interaction styles and their use
3. Understand when to use graphical and textual information presentation
4. Identify the principal activities in the user interface design process

LEARNING CONTENTS (TOPIC 1: USER INTERFACE DESIGN)

WHAT IS USER INTERFACE DESIGN?

User interface (UI) design is the process designers use to build interfaces in software or computerized
devices, focusing on looks or style. Designers aim to create interfaces which users find easy to use and
pleasurable. UI design refers to graphical user interfaces and other forms—e.g., voice-controlled interfaces.

DESIGNING USER INTERFACES FOR USERS

User interfaces are the access points where users interact with designs. They come in three formats:

1. Graphical user interfaces (GUIs)—Users interact with visual representations on digital control
panels. A computer’s desktop is a GUI.

2. Voice-controlled interfaces (VUIs)—Users interact with these through their voices. Most smart
assistants—e.g., Siri on iPhone and Alexa on Amazon devices—are VUIs.

3. Gesture-based interfaces—Users engage with 3D design spaces through bodily motions: e.g.,
in virtual reality (VR) games.

THINGS TO PONDER:

• User interfaces should be designed to match the skills, experience and expectations of its anticipated
users.
• System users often judge a system by its interface rather than its functionality.
• A poorly designed interface can cause a user to make catastrophic errors.
• Poor user interface design is the reason why so many software systems are never used.

PANGASINAN STATE UNIVERSITY 1

FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CC 106 – Application Development and Emerging Technologie Module No.__

HUMAN FACTORS IN INTERFACE DESIGN

A. LIMITED SHORT-TERM MEMORY

- People can instantaneously remember about 7 items of information. If you present more than this, they are
more liable to make mistakes.

B. PEOPLE MAKE MISTAKES

- When people make mistakes and systems go wrong, inappropriate alarms and messages can increase
stress and hence the likelihood of more mistakes.

C. PEOPLE ARE DIFFERENT

- People have a wide range of physical capabilities. Designers should not just design for their own capabilities.

D. PEOPLE HAVE DIFFERENT INTERACTION PREFERENCES

- Some like pictures, some like text.

IMPORTANT NOTES:

 UI design must take account of the needs, experience and capabilities of the system users.
 Designers should be aware of people’s physical and mental limitations (e.g. limited short-term memory)
and should recognise that people make mistakes.
 UI design principles underlie interface designs although not all principles are applicable to all designs.
Figure 4.1 shows the UI design principles that could help you in this process.

Figure 4.1 User Interface Design Principles

1. USER FAMILIARITY - The interface should be based on user-oriented terms and concepts rather than
computer concepts. For example, an office system should use concepts such as letters, documents, folders
etc. rather than directories, file identifiers, etc.

2. CONSISTENCY - The system should display an appropriate level of consistency. Commands and menus
should have the same format, command punctuation should be similar, etc.

PANGASINAN STATE UNIVERSITY 2

FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CC 106 – Application Development and Emerging Technologie Module No.__

3. MINIMAL SURPRISE - If a command operates in a known way, the user should be able to predict the
operation of comparable commands

4. RECOVERABILITY - The system should provide some resilience to user errors and allow the user to
recover from errors. This might include an undo facility, confirmation of destructive actions, 'soft' deletes, etc.

5. USER GUIDANCE - Some user guidance such as help systems, on-line manuals, etc. should be supplied

6. USER DIVERSITY - Interaction facilities for different types of user should be supported. For example, some
users have seeing difficulties and so larger text should be available

DESIGN ISSUES IN USER INTERFACE

Two problems must be addressed in interactive systems design:

• How should information from the user be provided to the computer system?
• How should information from the computer system be presented to the user?

User interaction and information presentation may be integrated through a coherent framework such as a user
interface metaphor.

BEST PRACTICES

To design UIs best, you should consider:

1. Users Judge Designs Quickly And Care About Usability And Likeability

o They don’t care about your design, but about getting their tasks done easily and with minimum effort.
o Your design should therefore be “invisible”: Users shouldn’t focus on it but on completing tasks: e.g.,
ordering pizza on Shakey’s app.
o So, understand your users’ contexts and task flows (which you can find from, e.g., customer journey
maps), to fine-tune the best, most intuitive UIs that deliver seamless experiences.

2. UIs Should Also Be Enjoyable (Or At Least Satisfying and Frustration-Free

o When your design predicts users’ needs, they can enjoy more personalized and immersive
experiences. Delight them, and they’ll keep returning.
o Where appropriate, elements of gamification can make your design more fun.

3. UIs Should Communicate Brand Values and Reinforce Users’ Trust

o Good design is emotional design. Users associate good feelings with brands that speak to them at all
levels and keep the magic of pleasurable, seamless experiences alive.

HOW TO MAKE GREAT UIs?

To deliver impressive GUIs, remember—users are humans, with needs such as comfort and a limit on
their mental capacities. You should follow these guidelines:

1. Make buttons and other common elements perform predictably (including responses such as
pinch-to-zoom) so users can unconsciously use them everywhere. Form should follow function.

PANGASINAN STATE UNIVERSITY 3

FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CC 106 – Application Development and Emerging Technologie Module No.__

2. Maintain high discoverability. Clearly label icons and include well-indicated affordances: e.g.,
shadows for buttons.

3. Keep interfaces simple (with only elements that help serve users’ purposes) and create an
―invisible‖ feel.

4. Respect the user’s eye and attention regarding layout. Focus on hierarchy and readability:
a. Use proper alignment. Typically choose edge (over center) alignment.
b. Draw attention to key features using:
 Color, brightness and contrast. Avoid including colors or buttons excessively.
 Text via font sizes, bold type/weighting, italics, capitals and distance between letters. Users
should pick up meanings just by scanning.

5. Minimize the number of actions for performing tasks but focus on one chief function per page.
Guide users by indicating preferred actions. Ease complex tasks by using progressive disclosure.

6. Put controls near objects that users want to control. For example, a button to submit a form
should be near the form.

7. Keep users informed regarding system responses/actions with feedback.

8. Use appropriate UI design patterns to help guide users and reduce burdens (e.g., pre-fill forms).
Beware of using dark patterns, which include hard-to-see prefilled opt-in/opt-out checkboxes and
sneaking items into users’ carts.

9. Maintain brand consistency.

10. Always provide next steps which users can deduce naturally, whatever their context.

INTERACTION STYLES

The figure below shows the different Interaction Styles.

4.2 Interaction Styles

PANGASINAN STATE UNIVERSITY 4

FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CC 106 – Application Development and Emerging Technologie Module No.__

Figure 4.3 shows an example of multiple User Interface of Linux OS.

Graph ical user Unix sh ell

inter face inter face
(Gnome/KDE) (ksh/csh)

X-windows GU I Command
mana ger langua ge
interpreter

Linux o perating system

Figure 4.3 Multiple User Interface of Linux

LIBSYS: Sea rch

Cho ose collection All

Keyword or phrase

Search using Title

Adjacent wo rds Yes No

Search Reset Cancel

Figure 4.4 Example of Interaction Style / Search Form of a Library System

LEARNING CONTENTS (TOPIC 2: INFORMATION PRESENTATION)

WHAT IS INFORMATION PRESENTATION?

Information presentation is concerned with presenting system information to system users. The information
may be presented directly (e.g. text in a word processor) or may be transformed in some way for presentation
(e.g. in some graphical form).

Figure 4.5 Information Presentation

PANGASINAN STATE UNIVERSITY 5

FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CC 106 – Application Development and Emerging Technologie Module No.__

The Model-View-Controller approach is a way of supporting multiple presentations of data.

Figure 4.6 Model – View - Controller

STATIC INFORMATION VS. DYNAMIC INFORMATION

Information can be presented in a static or dynamic way.

 Static Information

- Initialised at the beginning of a session. It does not change during the session.
- May be either numeric or textual.

 Dynamic Information

- Changes during a session and the changes must be communicated to the system user.
- May be either numeric or textual.
-

ANALOGUE VS. DIGITAL PRESENTATION

 Digital Presentation

• Compact - takes up little screen space;

• Precise values can be communicated.

 Analogue Presentation

• Easier to get an 'at a glance' impression of a value;

• Possible to show relative values;
• Easier to see exceptional data values.
•

WHAT IS DATA VISUALIZATION?

Data Visualization is concerned with techniques for displaying large amounts of information. Visualisation
can reveal relationships between entities and trends in the data.

• Possible data visualisations are:

PANGASINAN STATE UNIVERSITY 6

FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CC 106 – Application Development and Emerging Technologie Module No.__

- Weather information collected from a number of sources;

- The state of a telephone network as a linked set of nodes;
- Chemical plant visualised by showing pressures and temperatures in a linked set of tanks and
pipes;
- A model of a molecule displayed in 3 dimensions;
- Web pages displayed as a hyperbolic tree.
-

COLOUR DISPLAYS

Colour adds an extra dimension to an interface and can help the user understand complex information
structures. Colour can be used to highlight exceptional events. Common mistakes in the use of colour in
interface design include:

• The use of colour to communicate meaning;

• The over-use of colour in the display.

So, here are colour use guidelines to avoid these mistakes and improve the colour display of the user
interface design:

1. Limit the number of colours used and be conservative in their use.

2. Use colour change to show a change in system status.
3. Use colour coding to support the task that users are trying to perform.
4. Use colour coding in a thoughtful and consistent way.
5. Be careful about colour pairings.

ERROR MESSAGES

Error message design is critically important. Poor error messages can mean that a user rejects rather than
accepts a system. Here are some tips to have a good error message:

1. Messages should be polite, concise, consistent and constructive.

2. The background and experience of users should be the determining factor in message design.

Also, consider the contributing factors in message wording as shown in the figure 4.7 below.

Figure 4.7 Design Factors in Message Wording

PANGASINAN STATE UNIVERSITY 7

FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CC 106 – Application Development and Emerging Technologie Module No.__

Assume that a nurse misspells the name of a patient whose records he is trying to retrieve.

Please type the patien t’s n ame in the bo x th en c lic k o n OK

Patient’s name
MacDon ald, R.

OK Cancel

Figure 4.8 User Error

Figure 4.9 shows an example of a bad and good message design for the user error above.

Figure 4.9 Good and Bad Message Design

LEARNING CONTENTS (TOPIC 3: THE USER INTERFACE (UI) DESIGN PROCESS)

UI design is an iterative process involving close liaisons between users and designers. The 3 core activities in
this process are:

- User Analysis - Understand what the users will do with the system;
- System Prototyping - Develop a series of prototypes for experiment;
- Interface Evaluation - Experiment with these prototypes with users.

1. USER ANALYSIS

- If you don’t understand what the users want to do with a system, you have no realistic prospect of designing
an effective interface. User analyses have to be described in terms that users and other designers can
understand. Scenarios where you describe typical episodes of use, are one way of describing these analyses.

PANGASINAN STATE UNIVERSITY 8

FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CC 106 – Application Development and Emerging Technologie Module No.__

Figure 4.10 The Design Process

Analysis Techniques:

• Task analysis
- Models the steps involved in completing a task.
• Interviewing and questionnaires
- Asks the users about the work they do.
• Ethnography
- Observes the user at work.

2. USER INTERFACE PROTOTYPING

- The aim of prototyping is to allow users to gain direct experience with the interface. Without such direct
experience, it is impossible to judge the usability of an interface. Prototyping may be a two-stage process:

• Early in the process, paper prototypes may be used;

• The design is then refined and increasingly sophisticated automated prototypes are then
developed.

Here are some Prototyping Techniques:

a) Script-driven prototyping
- Develop a set of scripts and screens using a tool such as Macromedia Director. When the
user interacts with these, the screen changes to the next display.

b) Visual programming
- Use a language designed for rapid development such as Visual Basic.

c) Internet-based prototyping
- Use a web browser and associated scripts.

3. USER INTERFACE EVALUATION

- Some evaluation of a user interface design should be carried out to assess its suitability.
- Full scale evaluation is very expensive and impractical for most systems.
- Ideally, an interface should be evaluated against a usability specification. However, it is rare for such
specifications to be produced.

PANGASINAN STATE UNIVERSITY 9

FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CC 106 – Application Development and Emerging Technologie Module No.__

Here are some evaluation techniques:

• Questionnaires for user feedback.

• Video recording of system use and subsequent tape evaluation.
• Instrumentation of code to collect information about facility use and user errors.
• The provision of code in the software to collect on-line user feedback.

LEARNING ACTIVITY 4.1

Individual Activity 4.1

Instruction: In a piece of paper, design or make a paper prototyping of any applications that you want to
develop. That should cover the login page, the main page or the dashboard of the user and at least 3
transaction pages.

SUMMARY / KEY LEARNINGS

• User interface design principles should help guide the design of user interfaces.
• Interaction styles include direct manipulation, menu systems form fill-in, command languages and natural
language.
• Graphical displays should be used to present trends and approximate values. Digital displays when
precision is required.
• Colour should be used sparingly and consistently.
• The user interface design process involves user analysis, system prototyping and prototype evaluation.
• The aim of user analysis is to sensitise designers to the ways in which users actually work.
• UI prototyping should be a staged process with early paper prototypes used as a basis for automated
prototypes of the interface.

REFERENCES

https://www.interaction-design.org/literature/topics/ui-design
th
Ian Sommerville, Software Engineering, 7 Edition

PANGASINAN STATE UNIVERSITY 10