Software Engineering

Lecture 10

[These slides are adapted from Cornell University, William Y. Arms,

Software Engineering: A Practitioner’s Approach, Roger S. Pressman © 2015]
 Usability &
User Interfaces
Lecture Outcomes
• Understanding of:
– User experience (UX), development of user interface and usability tools
– Mental Model vs Computer Model
– User Interface Principles
– Model View controller (MVC)
Terminology
User experience (UX)
The user experience is the total of all the factors that contribute to the usability of a
computer and its systems.
Human computer interaction (HCI)
Human computer interaction is the academic discipline that studies how people
interact with computers.
Most universities offer a series of courses in Human Computer Inter action and have
major research programs in this area.
The Importance of the User Experience
A computer system is only as good as the experience it provides to its users
•If a system is hard to use:
 users may fail to find important results, or mis-interpret what they do find
 users may give up in disgust
• Appropriate functionality, easy navigation, elegant design, and fast response
times make a measurable difference to a system’s effectiveness
• Usability is more than user interface design.
Good support for users is more than a cosmetic flourish
• Developing good user interfaces needs skill and time.
 The Importance of the User Experience
The definition of User Experience (UX):

It is the personal, internal experience customers go through when using a product's interface.

User Experience refers to the feeling users experience when using a product, application, system, or service. It is a
broad term that can cover anything from how well the user can navigate the product, how easy it is to use, how
relevant the content displayed is etc.

Let's take as an example an e-commerce website. If a customer finds the buying experience to be long, complex
and complicated, then his /her UX will be a bad one.
 UI & UX
• UI refers to the screens, buttons, toggles, icons, and other visual elements that users interact with when using a
website, app, or other electronic device
.
• UX refers to the entire interaction you have with a product, including how you feel about the interaction. "User
Experience", often abbreviated "UX", is the quality of experience a person has when interacting with a specific
design.

• Developing a product that people love often requires both good UI and good UX.
• For example, you could have a banking app that looks great and has intuitive navigation (UI). But if the app loads
slowly or makes you click through numerous screens to transfer money (UX), it doesn’t matter how good it looks.
You’re probably not going to want to use it. On the other hand, a website could be loaded with unique, helpful
content organized in a logical and intuitive way. But if it looks dated or you can’t easily figure out how to move
between screens or scroll through options, you’re likely to click away from the site.
 Usability
• Usability is a quality attribute that assesses how easy user interfaces are to use.
• The word "usability" also refers to methods for improving ease-of-use during the design
process.
• Usability refers to the quality of a user's experience when interacting with products or
systems, including websites, software, devices, or applications. Usability is about
effectiveness, efficiency and the overall satisfaction of the user.
 Usability
• It is important to realize that usability is not a single, one-dimensional property of a product,
system, or user interface. ‘Usability’ is a combination of factors including:
• Intuitive design: A nearly effortless understanding of the architecture and navigation of the site
• Ease of learning: How fast a user who has never seen the user interface before can accomplish
basic tasks
• Efficiency of use: How fast an experienced user can accomplish tasks
• Memorability: After visiting the site, if a user can remember enough to use it effectively in future
visits
• Subjective satisfaction: If the user likes using the system
Tools for Usability Requirements and Evaluation
Initial Mock-up Prototype
Client's opinions   

Competitive analysis 

Expert opinion   

Focus groups  

Observing users  
Tools for Usability Requirements: Focus Group
A focus group is a group interview
•Interviewer
•Potential users typically 5 to 12
•Structured set of questions
•May show mock-ups
•Group discussions
•Repeated with contrasting user groups
 Accessibility Requirements
Accessible design is a design process in which the needs of people with disabilities are
specifically considered (e.g., poor eyesight, lack of hearing, poor manual dexterity),or
limited knowledge of English, etc.

Requirements about accessibility are most likely to arise in the user interface.
 Why is Facebook Blue?
According to The New Yorker Magazine, the reason is simple. It’s because Mark
Zuckerberg is red-green colorblind.
This means that blue is the color Mark can see the best. In his own words Zuck says:

“Blue is the richest color for me; I can see all of blue.”
As Zuckerberg has red-green color blindness, Facebook's logo is blue.
He had once told a reporter that blue is the 'richest' color for him.
The Analyze/Design/Build/Evaluate Loop
Whatever process you use to develop a software system, the development of the
user interface is always iterative.

Analyze Design
requirements

User testing
Build
Evaluat
e
Development Processes for User Interfaces
It is almost impossible to specify an interactive or graphical interface in a
textual document
•Requirement benefit from sketches, comparison with existing systems, etc.
•Designs should include graphical elements and benefit from a mock-up or other
form of prototype.
•User interfaces must be tested with users.
•Expect to change the requirements and design as the result of testing.
•Schedules should include user testing and time to make changes.
Whatever process you use to develop a software system, the development of the user
interface is always iterative.
Paper Prototypes
Wireframe A wireframe is a two-dimensional illustration of a
page's interface that specifically focuses on
space allocation and prioritization of content,
functionalities available, and intended activities.
For these reasons, wireframes typically do not
include any styling, color, or graphics.
Tools for Usability Requirements: Mock-up
A mockup is a static representation of a product, showing
users and stakeholders how it may look and be used. It
contains elements such as the typography, logos,
images, color schemes, and navigation visuals that will
make up the final design and user experience.

Typography: the style and appearance of printed matter.

Mockups are used to present medium to high fidelity versions of a

design during the product development process. They demonstrate
a realistic layout to decision-makers and allow teams to determine
which aspects of the product work well from a user’s perspective,
and which do not.
Prototypes Prototyping is an experimental
process where design teams
implement ideas into tangible
forms from paper to digital.
Teams build prototypes of varying
degrees of fidelity (reliability) to
capture design concepts and test
on users. With prototypes, you
can refine and validate your
designs so your brand can
release the right products.
Mental Model Vs Computer Model
Mental Models
• Mental Model:
– Mental model refers to the internal representation or understanding that individuals develop in their minds
about how something works or how a system operates.

– It is a cognitive framework that individuals create based on their knowledge, experiences, and interactions
with the world around them.

– Mental models help individuals predict and interpret the behavior of a system or interface, guiding their
expectations and actions.

– Mental models are subjective and can vary from person to person, as they are shaped by individual
perception, beliefs, and prior knowledge.
• Computer Model:
– Computer model refers to the digital representation or simulation of a system or interface implemented in
software or hardware.

– It is the actual implementation of a system, designed and developed by engineers and developers.

– Computer models are objective and follow a set of predefined rules and logic, typically programmed by
humans.

– Computer models are created to mimic or represent real-world systems, processes, or interfaces, providing
functionality and interactions through software or hardware components.
 Mental Model Vs Computer Model
• The mental model look like the way the user thinks the machine or software
works.
• It represents information for the human mind as opposed to a computer
information is aggregated into meaningful concepts such as visuals, graphs,
colors, metaphors and buttons
• User interfaces should be based on user mental models rather than
implementation models.
 Model View Controller (MVC)
The Model-View-Controller (MVC)
is an architectural pattern that
separates an application into three
main logical components: the
model, the view, and the controller.

Each of these components are built to

handle specific development aspects
of an application.
Model View Controller
Model View Controller
 Model View Controller
• Car driving mechanism is another example of the MVC model.
• Every car consist of three main parts.
• View :User interface : (Gear lever, steering wheel, brake, etc.)
• Controller: Mechanism (Engine)
• Model- Storage (Petrol or Diesel tank)
Design from a System Viewpoint
• The user experience is more than user interface design.
Mental Model
A mental model is what a user thinks is true about a system, not necessarily what is
actually true.
• A mental model should be similar in structure to the system that is represented.
• A mental model allows a user to predict the results of his/her actions.
• A mental model is simpler than the represented system.
• It includes only enough information to allow reasonable predictions.

A mental model is also called a conceptual model.

User Interface Design

The user interface is the appearance on the screen and the actual
manipulation by the user
•Fonts, colors, logos, key board controls, menus, buttons
Interface Functions

The interface functions determine the actions that are available to the user:
•Select part of an object
•Search a list or sort the results
•View help information
•Manipulate objects on a screen
•Zoom
Same Functions, Different Interface
There may be alternative user interface designs for the same interface functions,
The user interface design is different from the functionality provided.
Example :
• Close button -- left of window (Macintosh)
right of window (Windows)
Data and Metadata
Example: Game Program - Undo Move
Model: Separation of Content from View
 Computer Systems and Networks

The performance, reliability and predictability of computer systems and networks are
crucial factors.
 Principles of User Interface Design
The 6 principles of user interface design are :

1.The Structure Principle

2.The Simplicity Principle
3.The Visibility Principle
4.The Feedback Principle
5.The Tolerance Principle
6.The Reuse Principle

The user should feel in control

 Principles of User Interface Design
• The structure principle: The structure principle is concerned with overall user interface architecture. This principle
emphasizes organizing the user interface in a meaningful and clear way. It suggests grouping related elements and
separating unrelated ones. Example: In a software application, all file-related actions (open, save, close) are
grouped under a "File" menu. This grouping helps users find and access functions related to file management easily.

• The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in
the user's own language, and providing good shortcuts that are meaningfully related to longer procedures.
• Example: A mobile phone's home screen typically features icons for common tasks like making calls, sending
messages, and accessing the camera. These icons use universally recognized symbols for simplicity.

• The visibility principle: The design should make all needed options and materials for a given task visible without
distracting the user with redundant information. Good designs don't overwhelm users with alternatives or confuse
with unneeded information. Example: A website's navigation menu is usually placed prominently at the top or side
of the page, ensuring that users can easily see and access essential sections like "Home," "About Us," and
"Contact."
 Principles of User Interface Design
• The feedback principle: Feedback keeps users informed about their interactions with the system. It's crucial to provide clear
and timely feedback to users. Example: When a user submits a form on a website, a message should appear, confirming the
submission. If there's an error in the form, clear messages should indicate what needs correction.

• The tolerance principle: Tolerance in design means being forgiving of user mistakes and allowing users to easily recover
from errors. It also means accommodating various input styles. Example: Auto-correct in typing applications tolerates spelling
errors by suggesting corrections as the user types. Undo and redo functions in software allow users to reverse their actions.

• The reuse principle: This principle promotes the reuse of consistent design elements and behaviors throughout an interface.
Example: In a suite of office software (e.g., Microsoft Office), the toolbar and ribbon interface is consistent across different
applications (Word, Excel, PowerPoint). Users familiar with one application can easily use others because of this design consistency.

• https://medium.com/@kalyanicynixit/ui-design-tips-for-healthcare-industry-96f484b31587
Avoid the Fancy
Simple is Good
Simple is Good
Information Presentation
Simple is often better than fancy
•Text
precise, unambiguous
fast to compute and transmit
•Graphical interface
simple to comprehend / learn,
but icons can be difficult to recognize
uses of color
variations show different cases
Thank you