UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development

University of Antique
Office of the Vice President for Academic Affairs
Sibalom, Antique

MODULE IN ITHCI 5: EFFECTIVE INTERFACES DEVELOPMENT

Effective: 1ST Semester, 2020-2021

Introduction
This course provides a comprehensive study of techniques in design and implementation of
effective user interfaces. It includes the foundation of human-computer interaction and
interface related to software lifecycle, building a graphic user interface engineering,
interaction devices and technologies, human-computer dialogue, cognitive models,
usability, the design and development process, user interface management systems (UIMS),
interface style and techniques, user learning, and diversity in interaction styles. Major
research and the building of a working graphic user interface are included.

Chapter 1

Stimulating Learning
To be able to learn and understand the meaning of Good Interface Designs and different
concepts from unique theories. To be able to understand the Principles involved in the
good interface design.

Lesson 1: Introduction of the Effective Interface Design

The user interface is the most important part of any computer system. Why? It is the system
to most users. It can be seen, it can be heard, and it can be touched. The piles of software
code are invisible, hidden behind screens, keyboards, and the mouse. The goals of interface
design are simple: to make working with a computer easy, productive, and enjoyable.

User Interface (UI) Design focuses on anticipating what users might need to do and ensuring
that the interface has elements that are easy to access, understand, and use to facilitate
those actions. UI brings together concepts from interaction design, visual design, and
information architecture.

Ryan Ercel O. Paderes P a g e 1 | 13

UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development

Choosing Interface Elements

Users have become familiar with interface elements acting in a certain way, so try to be
consistent and predictable in your choices and their layout. Doing so will help with task
completion, efficiency, and satisfaction.

Interface elements include but are not limited to:

Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes,
toggles, date field
Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
Informational Components: tooltips, icons, progress bar, notifications, message boxes,
modal windows
Containers: accordion

There are times when multiple elements might be appropriate for displaying content. When
this happens, it’s important to consider the trade-offs. For example, sometimes elements
that can help save you space, put more of a burden on the user mentally by forcing them to
guess what is within the dropdown or what the element might be.

Best Practices for Designing an Interface

Everything stems from knowing your users, including understanding their goals, skills,
preferences, and tendencies.  Once you know about your user, make sure to consider the
following when designing your interface:

 Keep the interface simple. The best interfaces are almost invisible to the user. They avoid
unnecessary elements and are clear in the language they use on labels and in messaging.

Create consistency and use common UI elements. By using common elements in your UI,
users feel more comfortable and are able to get things done more quickly.  It is also
important to create patterns in language, layout and design throughout the site to help
facilitate efficiency. Once a user learns how to do something, they should be able to transfer
that skill to other parts of the site.

Be purposeful in page layout.  Consider the spatial relationships between items on the page
and structure the page based on importance. Careful placement of items can help draw
attention to the most important pieces of information and can aid scanning and readability.

Strategically use color and texture. You can direct attention toward or redirect attention
away from items using color, light, contrast, and texture to your advantage.

Use typography to create hierarchy and clarity. Carefully consider how you use typeface.
Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and
readability.

Ryan Ercel O. Paderes P a g e 2 | 13

UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development

Make sure that the system communicates what’s happening.  Always inform your users of
location, actions, changes in state, or errors. The use of various UI elements to communicate
status and, if necessary, next steps can reduce frustration for your user.
Think about the defaults. By carefully thinking about and anticipating the goals people bring to
your site, you can create defaults that reduce the burden on the user.  This becomes particularly
important when it comes to form design where you might have an opportunity to have some
fields pre-chosen or filled out.

Lesson 2: What is Software Quality

Software quality is defined as a field of study and practice that describes the desirable
attributes of software products. There are two main approaches to software quality: defect
management and quality attributes.

Software quality is an abstract concept. Its presence can be difficult to define, but its
absence can be easy to see instantly. Thus, in the quest for improving software quality, we
must first understand the software quality definition. Wikipedia describes software quality
as follows:

“In the context of software engineering, software quality measures how well software is
designed (quality of design), and how well the software conforms to that design (quality of
conformance). It is often described as the ‘fitness for purpose’ of a piece of software.”

There are many variations to the definition of software quality, but if you examine the
definition above, “fitness for purpose” questions whether or not the software fulfills its
purpose, or in layman’s terms, “Does it do what it’s supposed to do?” Those are the
characteristics that we see as end users. Quality of design and quality of conformance to
that design are related to internal aspects of the software, some of which we may see, like
the user interface’s navigation, placement of controls and so on. Others, we would not
normally see, like code architecture, code quality and code security.

Quality in Software Engineering

In broader terms, the software quality definition of “fitness for purpose” refers to the
satisfaction of requirements. But what are requirements? Requirements, also called user
stories in today’s Agile terms, can be categorized as functional and non-functional.
Functional requirements refer to specific functions that the software should be able to
perform. For example, the ability to print on an HP Inkjet 2330 printer is a functional
requirement. However, just because the software has a certain function or a user can
complete a task using the software, does not mean that the software is of good quality.
There are probably many instances where you’ve used software and it did what it was
supposed to do, such as find you a flight or make a hotel reservation, but you thought it was
poor quality. This is because of “how” the function was implemented. The dissatisfaction
with “how” represents the non-functional requirements not being met.

Ryan Ercel O. Paderes P a g e 3 | 13

UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development
For this purpose, the International Organization for Standardization (ISO) developed ISO
25010 [1] as a model for specifying non-functional requirements. The model shown below
illustrates the categorization of non-functional requirements.

Figure 1- [1] ISO/IEC CD 25010 Software engineering — Software product Quality

Requirements and Evaluation (SQuaRE) — Quality model and guide, 2011.

At first glance, you may think that the left most characteristic, Functional Suitability, is
equivalent to a functional requirement, but it is not. Sub-characteristics functional
completeness, functional correctness and functional appropriateness apply to functions that
have been implemented and are characteristics of those functions. For instance, functional
completeness is defined as the degree to which the set of functions covers all the specified tasks
and user objectives. So, “Print from HP Inkjet 2330 Printer” could have been implemented from
a functional requirement point of view. But how was it implemented? Was it complete for all
options? Did it have double-sided printing? If not, then it might not be good quality from a
functional completeness point of view.

Why Non-Functional Quality Components Are Important

Satisfying non-functional requirements such as performance, ease of use and learnability

first requires specifying and defining. Only then can they be satisfied and satisfying them can
be even more difficult than satisfying functional requirements. So what does this mean for
you? Let us examine the following non-functional characteristics using the same printing
example: Functional Suitability (functional appropriateness) – Does the function facilitate
the completion of the user’s task(s) and objectives? If the user does not want to print on
that printer or wants to print a PDF but is not given those options, then maybe not.

Lesson 3: Why Non-Functional Quality Components Are

Important
Satisfying non-functional requirements such as performance, ease of use and learnability
first requires specifying and defining. Only then can they be satisfied and satisfying them can

Ryan Ercel O. Paderes P a g e 4 | 13

UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development
be even more difficult than satisfying functional requirements. So what does this mean for
you? Let’s examine the following non-functional characteristics using the same printing
example: Functional Suitability (functional appropriateness) – Does the function facilitate
the completion of the user’s task(s) and objectives? If the user doesn’t want to print on that
printer or wants to print a PDF but isn’t given those options, then maybe not.

 Performance Efficiency (time behavior) – Does the printer function respond within

three seconds?
 Compatibility (interoperability) – Can the user print over a variety of networks and
printers and on computers with different operating systems (Windows and Mac)?
 Usability (learnability) – Can the user figure out how to print or will it take a rocket
scientist?
 Reliability (recoverability) – When the printer is unplugged in the middle of printing
a task, is the user notified?
 Security (non-repudiation) – Is there a record that the printer printed the file
successfully?
 Maintainability (testability) – Can test criteria be specified for the print function?
 Portability (adaptability) – Can the software automatically adapt to new printer
models, or an update in printer driver software? Can the print function provide
shortcuts for highly sophisticated users?

Now that we have an understanding of non-functional requirements, let’s examine the

quality lifecycle in the diagram below. Looking at the three circles below, internal quality
represents quality that you wouldn’t see and is measured by internal properties such as
code quality. External quality represents what we have discussed above in the non-
functional quality model and is typically measured by actual execution of the code and
examination of software behavior.

Software Quality Lifecycle

Figure 2: Quality in the lifecycle ISO 9126

Here is yet another model: quality lifecycle. This model may be closer to how you perceive
quality. That is, quality from an end user viewpoint when they are actually using the
software in real life and not in a lab. That’s what “contexts of use” means. For example,
software quality testing can happen on a test server and have perfect test results, but users
in their environment may have different results. They may not be able to find a button or

Ryan Ercel O. Paderes P a g e 5 | 13

UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development
control as easily as a tester would, or maybe they want to print directly from a place in the
application that you never thought of.

Also important to note in the Figure is the use of the arrows and dotted lines. You’ll notice
that there is a relationship between internal quality, external quality and quality in use.
Namely, internal quality has an influence on, but not a direct correlation with, external
quality and that external quality depends on internal quality. Let’s think about this. This
means that you can have great code quality (internal quality) and still have poor external
quality (software behavior). This makes sense in reverse too. The software might work okay,
but the internal quality could be terrible.

Figure 3: The characteristics of quality in use

As you can see from the chart, the characteristics of quality in use (effectiveness, efficiency,
satisfaction, freedom from risk and context coverage) cover how the user completes their
task in a real-life situation. Tying it together, operability (as a sub-characteristic of usability)
could be measured internally as in conformance to the Apple Human Interface Guidelines
on Navigation Bars. This would contribute to or influence the operability measured
externally, whereby users can navigate through a user story. Then, the ability of users to
complete a user story would be measured by quality in use. Can they do it in four seconds
(efficiency)? Do they make mistakes seven out of 10 times (effectiveness)?

Using the same application of arrows and dotted lines as in the quality lifecycle diagram,
you can see that product quality depends on process quality and process quality influences
product quality. The reason for using the magic word “influences” is that even if you have
fantastic, repeatable and improving software quality testing processes, it doesn’t mean that
the processes are geared toward solving the right problem or even building the right
product. So, while you may have excellent processes, you might still have mediocre
products. Conversely, you could have great product quality, but poor processes. Remember
the history of CMMI, developed by the Software Engineering Institute at Carnegie Melon,
with funding from the Department of Defense. They were tired of getting poor quality
Ryan Ercel O. Paderes P a g e 6 | 13
UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development
product. Their hypothesis was that better processes (and hence requiring CMMI
certification) would result in better product. However, this didn’t always happen.

Factors Involving Software Quality

The following factors play a vital role in determining the quality of software.
Reliability
Reliability deals with the way the software performs in the longer run. When a user uses a
software, there are certain expectations associated with it. These expectations are present due
to the behavior of the software in the past. Reliable software should be able to perform the
same way and with the same precision and pattern.

Efficiency
Efficiency is the measure of how well the resources are managed by the designed software. An
efficient software should be able to perform the best of its capabilities with the least utilization
of resources. In other words, no extra execution time, memory space or delays should be
present.

Conciseness
Conciseness is the measure of how well the software is designed and developed by considering
the necessary information only. Concise software doesn’t present additional information or
excessive lines of coding that are un-necessary.

 Portability
Portable software should be able to run on varied platforms without any problem.

 Consistency
Consistency is the measure of how the software maintains a similar code for notations,
abbreviations and naming conventions throughout.

 Maintainability
As the software and hardware keep on getting updated from time to time, maintainable
software should be able to upgrade according to the recent requirements. For this matter, we
need proper documentation to enhance the design, and consistent and well-written code in
order to make the development level changes.

 Understandability
At the end of the day, the software must be understood by the user, otherwise, it will not
present the intended benefits. An understandable design should not only be usable by the user
but also well documented and consistent that the modifiers of the design should feel no
problem in understanding the actual system.

Importance of Software Quality

The understanding and implementation of the software quality factors is extremely
important for the success of a system that is delivered in the market. Non- compliance with

Ryan Ercel O. Paderes P a g e 7 | 13

UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development
these factors can cause serious harm to the reputation and credibility of the developer and
designer.

In the software market, we see many products that are appreciated and used widely
around the world. If we take a closer look at the products, we will find out that these
products are designed and developed by keeping all software quality factors in mind.

Delivering a low-quality product means that in one way or the other; the user will not be
satisfied and hence feel discouraged to use the software again for the purposes that it was
designed for. Many next versions will not be able to restore the lost trust of the intended
user in the product. Sometimes, the design as well as the development is crucial, and its
impact is serious, for the user. E-commerce is again a good example. If a user is unable to
get the precise and concise information, within an understandable system, he might not use
the application in future. The result will be a loss to the company and consequently to the
software product.

Lesson 4: User Interface (UI) Design and Software Quality

In order to represent the software and all its intended objectives, the UI design plays a
crucial role. Software will not be communicated to the user for its possible benefits if the UI
design is not created with relevant and significant amount of information.

Many other factors that are used to measure how well the UI design has been created will
be discussed in the subsequent sections. However, for ensuring the software quality, it is a
key factor that the user should be able to understand the system fully for utilization. Hence,
the UI design is the only face of the software which is visible to the user and hence, if the
user is unable to understand and make use of it fully then he will not be able to use the
developed software at all. In addition to this, for any good quality software, its UI design
should clearly show what are the main features and functionalities of the system. Therefore,
it holds an important place for the quality of the software.

As already discussed above, UI design and software quality are closely knit together.
Therefore, in order to understand whether a UI design is good or bad, we will be studying
various aspects by keeping in view the software quality factors in the following section.

As already discussed above, UI design and software quality are closely knit together.
Therefore, in order to understand whether a UI design is good or bad, we will be studying
various aspects by keeping in view the software quality factors in the following section.

System Status Visibility

It is important to understand that the involvement of a user is extremely crucial to the
success of a UI design. A typical user is interested in knowing the system status at all times
during the correspondence and communication. This aspect is very sensitive in terms of
online transactions where the truncation, cancellation and refreshing a transaction can
cause real time damage to the end user. Therefore, the system status visibility will be
Ryan Ercel O. Paderes P a g e 8 | 13
UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development
studied in order to check whether the updated information is available to the user or not.
However, criticality of this feature will be studied under the light of the fact that whether
the system status can cause damage to the user or not.

System Consistency
Consistency is an extremely important feature for the positive impact on a UI design of the
system. Consistency has to be maintained for a single system across all the UIs as well as in
terms of platforms. All the UIs developed for a single system should have the similar kind of
design, choice of colors and platform. The UI should follow the certain theme and objective
of the larger software system, so that the proper message and intention of the system can
be communicated to the user.

Error Handling
It is important for a UI design to provide the end-user with a convenience that the run-time
errors can be handled. In this context, even if the user is unaware of the errors that are
possible to occur at the back-end of the system still the UI design should be capable of
catching as well as providing a solution for these errors.

These errors can be of two categories run-time and compile time errors, but for a UI design
the run-time errors are of utmost significance. The UI design should cater all possible forms
of inputs that a user can enter and a design should be finalized after testing the UI for all
possible error types.

Feedback System
With the growing utility of the online content and systems, the users are getting involved in
running the businesses as well as general online surfing. The awareness of the end-user
about the system at hand is growing as each day progresses. In this scenario, it is important
for a designer to consider that the UI design is basing its updates as well as construction on
the user feedback. For this matter a constant involvement of the end-users should be made
sure during the designing process. Even after the final product should be launched, still the
improvements and later versions of the UI should be based on the feedback it has got from
its potential users. This process helps in constructing and designing the UI in such a way that
it becomes more user friendly. The feedback system generally helps the organization as well
for developing more user-oriented UIs so that their company aims and mission is
highlighted.

Memory Loading
The size of a particular UI plays a vital role in issues related to the web space as well as cost
of the entire website. It should be kept in mind during the design that even if high resolution
images are appended in the UI still, it should always present the lowest possible memory
size. It should waste unnecessary web space just for making the UI more attractive.
Sometimes, if the images are too large or there is too much scrolling on the page, the users
also get weary of the concept. Therefore, it is important to consider how much extra space a
UI is taking, so that the system does not have to compromise a lot on the cost for something
that is hardly necessary.

Ryan Ercel O. Paderes P a g e 9 | 13

UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development
Promptness of Action Against Request
For a UI design the most important thing the user is interested in its speed or promptness.
No matter what the speed of the connection of internet is that the user is using, he would
always want the response to be fast. Many users are found to be engaging themselves in
the websites that are not very attractive looking but provide faster access. A very good
example is Google Mail. The interface is plain, simple and loads at a higher speed than many
of the other systems. The result is the higher number of joining users for Google Mail.

It is important to note at this point that even if the system running behind a UI has a high-
speed server, still the user and the internet connection is slow, it shows the same result. To
avoid this situation a UI should be tested by keeping in view the worst-case scenario in
which the user has slowest possible connection. An alternative strategy could be displaying
the time that is required for a page to be loaded with respect to different internet speeds
available. In the latter strategy however, the information gets redundant across pages and
the user gets tired after getting the repeated information. Therefore, the former should be
used for the design.

Another important consideration in this context is the appropriateness of the displayed

content. The UI should not have a lot of redundant and meaningless images that increase
the loading and response time for the user.

Efficiency
The efficiency of the UI is measured in terms of the amount of related information it brings
to the user. If a user visits a particular page, he has certain requirements and expectations in
his mind. An efficient system will bring to the system all the requirements that he wishes
and most of where he wishes.

The placement of information in the light of a user’s requirements plays a vital role in
making the system efficient. Only the UI that has the best sorted information will provide it
to the user in ideal time and with precision.

The implications are very huge to the software system. If a UI fails to provide the
information that the user is expecting from it, then it will be a negative impact to the system
as users will get discouraged to use the system in future.

Availability of Documents and Manuals

As for the development of software, working beforehand is important. Similarly, it is
extremely important to visualize and document all the steps that are involved in the
construction and design of the UI system. There are two stages in which the UI system has
to be documented. The first stage is when the UI is being designed and visualized. The
second step is when the UI design is being implemented. In both the scenarios, the
documentation plays a very important role. In order to maintain a UI design one needs to
refer to the documentation for knowing the strategy and reasoning behind its particular way
of implementation. For the same reason, at all steps of a UI design this documentation
should be an integral part of the process.

Ryan Ercel O. Paderes P a g e 10 | 13

UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development
In addition to the documentation, the user manuals and help options are extremely
important. A system can encounter a variety of users ranging from new users to experts. But
normally if we take the average user, still the help option and user manual for the UI is a
very important part of a UI design. There should be proper content prepared for each
problem that the user will encounter during usage of the system. It is again very important
here for the designer team to point out the mistakes that a user can occur and all the
possible scenarios for eliminating these mistakes.

Compliance of UI Design with Software Objectives

The UI design should clearly show and depict the software system objectives. The user
should be able to distinguish between the websites he is visiting. For an e-commerce
website, the design should clearly show the user what the website is about. In this way, the
user will be able to surf faster and extract the related information quickly without having to
go through the entire text, just to find out what the website or the system is all about.

In addition to this, the objective of the system has to be kept in mind during the design of
the UI. The user should be shown what the system supports and what it does not support.
For a political website, it should clearly show that it is meant for political purposes and not
some general public opinion. So that the user is not mislead by the displayed information
and gets the benefit that was intended by the system during its formation. Another way of
showing this is to clearly indicate the objectives of the UI so that the user is aware of the
issues related to it.

Compatibility with Varied Platforms

During the UI design it is important to consider if the UI is compatible at a variety of
platforms. Sometimes a user views the information presented in the UIs using different
browsers. This normally occurs when the system is web based and not installed on the
user’s computer. In this way, sometimes due to the different adjustments of the browsers,
the compatibility is lost. A good UI design should be tested across varied platforms to see if
it is displayed in the same way or not.

Proper Amount of Displayed Information

A user is always looking for the proper amount of information that is being displayed on the
UI. If too little information is displayed, a user might get tired in looking for the relevant
information. If there is too much information displayed, a user might get perplexed in
accessing the relevant portion. The result, at the end, is the bad impression of the system
for which the UI was designed.

Therefore, it should be kept in mind that how much information should be provided and
how many UIs should be generated on a single subject. If the user must traverse across a
wide number of pages, it causes frustration. Also, if the system’s relevant information is too
much for the user, he might try to switch to another website that presents the information
in an organized manner.

Therefore, for the benefit of the users and the system at the larger scale, a UI should display
the right amount of information that is required by a user. Again, over here as well, the user

Ryan Ercel O. Paderes P a g e 11 | 13

UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development
has to be involved in the process of designing. So that the information is gathered by
keeping in view how much of it is necessary for the particular end-user. A UI will only be
accepted by the end-user if they find it matching to their requirements.

User Involvement During Design

It is important to involve the user and get proper feedback at all stages during the design of
the UI. Even after the design has been deployed, it is important to know what the users are
expecting with the growing information about varied systems across the internet and
otherwise. Especially, this scenario is important after the deployment of the system, if the
users are suggesting to improve or change a certain field or property of a UI, and then this
should be catered in the later versions of the design so that the UI is always as per the
intended user wanted. The result will always be a positive impact towards the system that
the UI is representing. As the users will see the UI evolving according to their expectations
and requirements, they will engage themselves more and more into the process and the
system will have more responses in future for changes as well as improvements.

Relevance of Content
It is important that a UI design has only the relevant material shown. A user is always
looking for the right amount of information displayed in a right manner. But there is not any
certain definition of the ‘right amount’ itself. Therefore, the UI design has to be tested for
feedback in all stages to know if the required content has been displayed to the user or not.

In addition to this, it should be decided before the design what appropriate content has to
be displayed; this process should be done under the light of the main objectives of the
system.

Appropriate Outlook
If we have a UI design that is not displayed in a proper format, using the appropriate colors
and choice of outlook, a user will get distracted. Sometimes a combination or a contrast is
chosen for a website that is irritating to the eyes of the users. Such sharp contrasts should
be avoided so that the user does not ignore the relevant content just because of the way it
is displayed. Normally the user is interested in the UI if it displays the information in a
simple and minimalistic form. In this way the maximum impact can be obtained because the
user is not confused by too flashy a layout.

For a software system to achieve its planned spectrum of achievements, it should always
present the best available outlook keeping in view the feedback and requirements of the
user.

Chapter Activity

Chapter Quiz

Ryan Ercel O. Paderes P a g e 12 | 13

UA –Main Campus-BS Information Technology HCI PELEC 5: Effective Interfaces Development

REFERENCES:
1. Ravi Chandra Chaitanya Guntupalli, User Interface Design – Methods and Qualities of
a Qood Quality Design.
http://www.divaportal.org/smash/get/diva2:215020/fulltext01
2. Suzanne Martin, Effective Visual Communication for Graphical User Interfaces.
https://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
3. Ian Sommerville. Software Engineering Ninth Edition

Ryan Ercel O. Paderes P a g e 13 | 13