SRI RAMAKRISHNA ENGINEERING COLLEGE

[Educational Service: SNR Sons Charitable Trust]

[Autonomous Institution, Reaccredited by NAAC with ‘A+’ Grade]
[Approved by AICTE and Permanently Affiliated to Anna University, Chennai]
[ISO 9001: 2015 Certified and all eligible programmes Accredited by NBA]
VATTAMALAIPALAYAM, N.G.G.O. COLONY POST, COIMBATORE – 641 022.

Department of Computer Science and Engineering

SUBJECT CODE & TITLE : 20CS2E45 – UI/UX

YEAR & BRANCH : III BE – CSE

COURSE Co-ORDINATOR : Dr. R. MADHUMATHI, AP/CSE

07/12/24 UI/UX 1
 Course Description
COURSE OUTCOMES
On successful completion of the course, students will be able
to

CO1 : Summarize all stages of the UI/UX development process.

CO2 : Experiment with various visual design aspects.

CO3 : Theme the visual look and feel of the user experiences.
CO4: Create effective and compelling screen based experiences.

07/12/24 UI/UX 2
 Module I
FOUNDATIONAL ELEMENTS OF UI/UX

User Interface - The Relationship Between UI and UX - Roles

in UI/UX - A Brief Historical Overview of Interface. Formal
Elements of Interface Design - Design Before Design - Look
and Feel - Language as a design tool – Active Elements of
Interface Design - Static to Active - Functionality - Speed and
Style - Composition and Structure - Composing the Elements of
Interface Design.

07/12/24 UI/UX 3
 Module - II
USER EXPERIENCE DESIGN FOUNDATIONS

Ideation, Articulation, Development - Planning, Testing,

Researching, Mapping - Mapping Content –Mapping
Interaction -Non-Visual Paper Prototyping - Non-Visual User
Testing -Look and Feel/Visual Research. What Goes Where:
Getting real: Wireframes and Interfaces - Nielsen's Usability
Heuristics - Consistency and Details - Wireframe Map - Visual
Direction - Developing UI - Refining UI.

07/12/24 UI/UX 4
 Module - III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

The User Experience Process - User-centric design - The

UX Phases - Waterfall vs. Agile - Web vs. App.
Determining Strategy: User Research - Inspiration -
Analytics - User Needs and Client Needs - Target Audience
- What is in and What is Out: Outlining Scope - Content and
Functionality. The Sitemap: Introduction to Sitemaps -
Information Architecture - Sitemap Concerns - annotated
process - Elements - Treejack Introduction – Treejack
Analysis.

07/12/24 UI/UX 5
 Module - IV
WEB DESIGNS: WIRE FRAMES TO PROTOTYPES

Introduction to Wireframes - Responsive Design:

Introduction and Primary navigation - Secondary and utility
navigation - Related content, inline links, indexes, and
search - Wayfinding - Common Form Elements – Homepage
Content Strategies - Examples of Homepage Content
Strategies - Wireframing Tools. The Mockup Phase: Visual
Mockups - Design Principles - Using whitespace to style a
form - Web Fonts - Web Typography: Creating Visual
Mockups. Putting it all Together: Clickable Prototypes -
Invision - Exporting Assets - Importing Assets and Creating
Hotspots - Hotspot Templates.

07/12/24 UI/UX 6
 LABORATORY EXPERIMENTS

1. Analyze an existing app and defining your app's functions step-by-

step
2. Experiments with Non-Visual Prototyping & User Testing
3. Create a generic prototype of any application both in Web vs. App
4. Test your sitemap using Treejack
5. Exploring Navigation Systems, Common Design Patterns, Design
Principles/Whitespace, Web Typography.

07/12/24 UI/UX 7
 Books
TEXT BOOKS
1. Buxton, B., Sketching User Experiences: Getting the Design Right and the Right
Design. Morgan Kaufmann, (2007).
2. Jesse James Garrett, The Elements of User Experience: User-centered Design for the
Web, New Riders; 2nd edition2010.

REFERENCES
1. Russ Unger, Carolyn Chandler, A Project Guide to UX Design: For User Experience
Designers in the Field Or in the Making, New Riders; 2nd edition, 2012.
2. Don Norman, The Design of Everyday Things, Basic Books; 2nd edition, 2013.
3. Everett N. McKay, UI is Communication: How to Design Intuitive, User Centered
Interfaces by Focusing on Effective Communication, Morgan Kaufmann; Illustrated
edition, 2013.
4. Dr. Erich Gamma, Ralph Johnson, Richard Helm and John Vlissides, Design Patterns:
Elements of Reusable Object - Oriented Software, Pearson, 2008.

07/12/24 UI/UX 8
 Reference Links
WEB REFERENCES
1. https://www.coursera.org/specializations/ui-ux-design
2. https://learnux.io/
3. https://www.sketch.com/

07/12/24 UI/UX 9
07/12/24 10
 Module I
FOUNDATIONAL ELEMENTS OF UI/UX

User Interface
User Interface design is a subset of a field of study called Human-
Computer Interaction (HCI).

HCI is the study, planning and design of how people and

computers work together so that a person’s needs are satisfied in the
most effective way.
UI provides fundamental platform for human-computer interaction.

User interface is part of software.

User interface is the front-end application view -> user interacts in
order to use the software.

07/12/24 UI/UX 11
 Module I
USER INTERFACE DESIGN CONCEPTS
 Usercan manipulate and control the software as well as
hardware by means of user interface.

 Today, user interface is found at almost every place where

digital technology exists, right from computers, mobile phones,
cars, music players, airplanes, ships etc.

 The user interface is the part of a computer and its software that
people can see, hear, touch, talk to, or otherwise understand or
direct.

07/12/24 UI/UX 12
 User Interface Components
 UI mainly performs two functions:
◦ Accepting the user’s input
◦ Displaying the output
 The user interface has essentially two components: input and
output.
 Input is how a person communicates his or her needs or
desires to the computer -> keyboard, mouse, touch screens,
etc.
 Output is how the computer conveys the results of its
computations and requirements to the user -> display
screen.

07/12/24 UI/UX 13
 Importance of Good Design
A well-designed interface and screen is important to the users.
 It is their window to view the capabilities of the system.

A screen’s layout and appearance affect a person in a verity of

ways:
◦ If they are confusing and inefficient, people will have greater difficulty
in doing their jobs and will make mistakes.
◦ Poor design may even chase some people away from a system.
◦ It can also lead to aggravation, frustration and increased stress.
◦ Ex: one person - > due to extreme exasperation and anger -> dropped
his PC out of his upper-floor office window.

07/12/24 UI/UX 14
 User Interface Features
The software becomes more popular if its user
interface is:
Attractive
Simple to use
Responsive in short time
Clear to understand
Consistent on all interfacing screens.

07/12/24 UI/UX 15
User Interface Features

07/12/24 UI/UX 16
 Benefits of Good Design
 Customer confidence
◦ Good UI design will give the potential customers confidence in the company and
about the brand.
◦ If elements of your site don’t work properly, they will interpret this as a direct
reflection on your company.
◦ If you can’t deliver a good looking website, how can you deliver a great product
or service?
 Increased customer engagement and retention.
 Customer Satisfaction
 Navigation is a breeze
◦ Poorly designed websites are frustrating.
◦ If a visitor arrives at your site and can’t easily find what they’re looking for,
they’re simply going to leave and look for that information elsewhere.
◦ One of the major benefits of UI design, based on UX insight and best practice, is
that it helps the audience to locate exactly what they’re looking for, even if they
aren’t entirely sure what that thing is.

07/12/24 UI/UX 17
 Benefits of Good Design
 Capitalise on a clear competitive advantage
◦ Top of the list of UI design benefits is the ability to convert customers with
ease.
 Optimal on-screen experience
◦ There are so many mobile devices on the market and your audience could be browsing the
internet on everything from a pocket-sized smartphone to a large-scale desktop screen.
◦ Ideally start with mobile UI design first, then progressively enhance the experience as the
on-screen space available increases. You need to know that your site is delivering the
optimum level of performance to every visitor if you want to ensure they keep coming
back again and again.
 Retain that custom
◦ If you design something that people want to engage with, they will continue to want to
engage with it.
◦ In a competitive marketplace, retaining loyal customers should be at the top of every
brand’s to-do list.

07/12/24 UI/UX 18
 Benefits of Good Design
 Increased productivity.
 Reduced support costs
◦ everything they need to do online without additional help.
 Lower development costs.
 Lower customer support costs.
 Development times are impressive
◦ It’s a sad reality that far too many hours of precious (and expensive)
web development time are spent fixing problems that could have been
avoided in the first place.
 Design for a variety of users
◦ Not all internet users are equally as familiar with engaging with the
online world
◦ ensure that your site or app works for everyone.

07/12/24 UI/UX 19
 Benefits of Good Design
 Simplify everything
◦ Engaging with your website should be a pleasure, not a chore.
Simplifying your processes will mean that your users won’t have to re-
enter information they have already provided or navigate their way
through a complex network of pages to make an enquiry or purchase a
product.
 Everything will be exactly where it should be
◦ Part of good design is predictability.
 Interaction acknowledgement
◦ For every action there should be a meaningful reaction.
◦ For example, when a user interacts with a button, having it change colour will
communicate to the visitor that their action has been acknowledged and successfully
completed.
 Growth of the Company

07/12/24 UI/UX 20
 Benefits of Good Design
 Productivity Enhancement
◦ A great app or website helps its user to increase productivity. And the usability of the
product increases when it gives a positive vibe in times of interaction.
 Brand Awareness
 Cost-Effectiveness
 Brand Awareness
 Vision
◦ Companies hire UX and UI designers at the early stage of product development to set
their vision and mission, and in the long run, they can communicate with the audiences
properly.
 Increase customer acquisition and loyalty
 Maximize revenue generation opportunities
 Optimize resources, development time and costs

07/12/24 UI/UX 21
 UX/UI
 UX refers to the term User Experience while UI stands for User
Interface. But despite their closeness, there are lot more to their execution
process and design discipline.

 UX design relates to the overall user interaction and experience with an

application or a website. It is well known that great user experience results
in return customers and great app usage.
 User interface (UI) is the specific asset users interact with.

 For example, UI can deal with traditional concepts like visual design
elements such as colors and typography.

 It can also look at the functionality of screens or more unconventional

systems like those that are voiced-based.

07/12/24 UI/UX 22
 UX/UI

 Typically, the UX Design process include research, design, prototyping,

testing and measurement. Lot of factors influence UX process such as
usability, utility, accessibility, design/aesthetics, performance,
ergonomics, overall human interaction and marketing.

 On the other hand, User Interface (UI) is more about visual design and
information design around screens. Though a lot of process go into this
graphical element, UI as the name implies, about the things the user will
actually see and interact. It delivers tangible results and focuses on how an
app or product surface look and functions.

07/12/24 UI/UX 23
UX/UI

07/12/24 UI/UX 24
UX/UI

07/12/24 UI/UX 25
UX/UI

07/12/24 UI/UX 26
UX/UI

07/12/24 UI/UX 27
Types of UIs

07/12/24 UI/UX 28
Brief History of the Human-Computer Interface

07/12/24 User Experience Design 29

A Brief History of Screen Design

07/12/24 UI/UX 30
A Brief History of Screen Design

07/12/24 UI/UX 31
 Graphical User Interface
 In a graphical interface, the primary interaction mechanism is a pointing device of some
kind.

 This device is the electronic equivalent to the human hand. What the user interacts with is
a collection of elements referred to as objects.

 They can be seen, heard, touched, or otherwise perceived.

 Objects are always visible to the user and are used to perform tasks.
 They are interacted with as entities independent of all other objects.
 People perform operations, called actions, on objects.

 The operations include accessing and modifying objects by pointing, selecting, and
manipulating.

 All objects have standard resulting behaviors.

07/12/24 UI/UX 32
 Popularity of Graphics
 Information floated in windows, small rectangular boxes seemed to rise above
the background plane.
 Controls appeared to rise above the screen and move when activated.
 Information could appear, and disappear, as needed, and in some cases text could
be replaced by graphical images called icons.
 These icons could represent objects or actions.
 Screen navigation and commands are executed through menu bars and pull-
downs.
 Menus “pop up” on the screen. In the screen body, selection fields such as
radio buttons, check boxes, list boxes, and palettes coexisted with the reliable old
text entry field.
 More sophisticated text entry fields with attached or drop-down menus of
alternatives also became available.
 Screen objects and actions were selected through use of pointing
mechanisms, such as the mouse or joystick, instead of the traditional keyboard.

07/12/24 UI/UX 33
 Direct Manipulation
 The system is portrayed as an extension of the real world.
 It is assumed that a person is already familiar with the objects
and actions in his or her environment of interest.
 The system simply replicates them and portrays them on a
different medium, the screen.
 A person has the power to access and modify these objects,
among which are windows.
 A person is allowed to work in a familiar environment and in
a familiar way, focusing on the data, not the application and
tools.
 The physical organization of the system, which most often is
unfamiliar, is hidden from view and is not a distraction.

07/12/24 UI/UX 34
 Indirect Manipulation
In practice, direct manipulation of all screen objects and actions may
not be feasible because of the following:
The operation may be difficult to conceptualize in the graphical
system.
The graphics capability of the system may be limited.
The amount of space available for placing manipulation
controls in the window border may be limited.
It may be difficult for people to learn and remember all the
necessary operations and actions.

Indirect manipulation substitutes words and text, such as pull-down
or pop-up menus, for symbols, and substitutes typing for pointing.

07/12/24 UI/UX 35
 Advantages of Graphical Systems
 Symbols recognized faster than text.
 Faster learning.
 Faster use and problem solving.
 Easier remembering.
 More natural.
 Exploits visual/spatial cues.
 Fosters more concrete thinking.
 Provides context.
 Fewer errors.
 Increased feeling of control.
 Immediate feedback.
 Predictable system responses.

07/12/24 UI/UX 36
 Drawbacks of Graphical Systems
 Greater design and complexity.
 Lack of experimentally-derived design guidelines.
 Inconsistencies in technique and terminology.
 Learning still necessary.
 Working domain is the present.
 Not always familiar.
 Human comprehension limitations.
 Production limitations.
 Inefficient for touch typists.
 Inefficient for expert users.
 Not always the preferred style of interaction.
 Not always fastest style of interaction.
 Increased chances of clutter and confusion.

07/12/24 UI/UX 37
 Characteristics of GUI
 Sophisticated Visual Presentation
 Pick-and-Click Interaction
 Restricted Set of Interface Options
 Visualization
 Object Orientation
 Use of Recognition Memory
 Concurrent Performance of Functions

07/12/24 UI/UX 38
 GUI Design
 Simple GUI design activity

07/12/24 UI/UX 39
 General Principles
 Compatibility -Provide compatibility with the following:
— The user
— The task and job
— The product
■Adopt the user’s perspective.
 Comprehensibility – A system should be easily learned and understood. A user should
know the following:
— What to look at
— What to do
— When to do it
— Where to do it
— Why to do it
— How to do
 Clarity - The interface should be visually, conceptually, and linguistically clear, including:
— Visual elements
— Functions
— Metaphors
— Words and text

07/12/24 UI/UX 40
 General Principles
 Aesthetically Pleasing – Provide visual appeal by following these presentation
and graphic design principles:
— Provide meaningful contrast between screen elements.
— Create groupings.
— Align screen elements and groups.
— Provide three-dimensional representation.
— Use color and graphics effectively and simply.

 Configurability - Permit easy personalization, configuration, and

reconfiguration of settings.
 — Enhances a sense of control.
 — Encourages an active role in understanding.

07/12/24 UI/UX 41
 General Principles
 Consistency - A system should look, act, and operate the same throughout.
Similar components should:
— Have a similar look.
— Have similar uses.
— Operate similarly.
■The same action should always yield the same result.
■The function of elements should not change.
■The position of standard elements should not change.
 Control - The user must control the interaction.
— Actions should result from explicit user requests.
— Actions should be performed quickly.
— Actions should be capable of interruption or termination.
— The user should never be interrupted for errors.
 Directness - Provide direct ways to accomplish tasks.
— Available alternatives should be visible.
— The effect of actions on objects should be

07/12/24 UI/UX 42
 General Principles
 Efficiency - Minimize eye and hand movements, and other control actions.
— Transitions between various system controls should flow easily and freely.
— Navigation paths should be as short as possible.
— Eye movement through a screen should be obvious and sequential.
■Anticipate the user’s wants and needs whenever possible.
 Familiarity
- Employ familiar concepts and use a language that is familiar to the user.
■Keep the interface natural, mimicking the user’s behavior patterns.
■Use real-world metaphors.

 Flexibility - A system must be sensitive to the differing needs of its users, enabling a
level and type of performance based upon:
— Each user’s knowledge and skills.
— Each user’s experience.
— Each user’s personal preference.
— Each user’s habits.
— The conditions at that moment.

07/12/24 UI/UX 43
 General Principles
 Forgiveness –
Tolerate and forgive common and unavoidable human errors.
■Prevent errors from occurring whenever possible.
■Protect against possible catastrophic errors.
■When an error does occur, provide constructive messages
 Predictability - The user should be able to anticipate the natural progression of
each task.
— Provide distinct and recognizable screen elements.
— Provide cues to the result of an action to be performed.
■All expectations should be fulfilled uniformly and completely.
 Recovery –
A system should permit:
— Commands or actions to be abolished or reversed.
— Immediate return to a certain point if difficulties arise.
■Ensure that users never lose their work as a result of:
— An error on their part.
— Hardware, software, or communication problem

07/12/24 UI/UX 44
 General Principles
 Responsiveness - The system must rapidly respond to the user’s requests.
■Provide immediate acknowledgment for all user actions:
— Visual.
— Textual.
— Auditory.

 Simplicity - Provide as simple an interface as possible.

■Five ways to provide simplicity:
— Use progressive disclosure, hiding things until they are needed.
• Present common and necessary functions first.
• Prominently feature important functions.
• Hide more sophisticated and less frequently used functions.
— Provide defaults.
— Minimize screen alignment points.
— Make common actions simple at the expense of uncommon actions being made harder.
— Provide uniformity and consistency.

07/12/24 UI/UX 45
 General Principles
 Transparency –
◦ Permit the user to focus on the task or job, without concern for the mechanics of the interface.
◦ — Workings and reminders of workings inside the computer should be invisible to the user.

 Trade-Offs –
◦ Final design will be based on a series of trade-offs balancing often-conflicting design principles.
◦ ■People’s requirements always take precedence over technical requirements.

The main function of user-interface is to

A. Convert program/ programs into machine language
B. Connect users with an application through graphical options like icon, menu, text.
C. Transmit data to a remote location

07/12/24 UI/UX 46
 The User Interface Design Process
Obstacles in the Development Path

 Nobody ever gets it right the first time.

 Development is chock-full of surprises.
 Good design requires living in a sea of changes.
 Making contracts to ignore change will never eliminate the need for
change.
 Even if somebody have made the best system humanly possible, people
will still make mistakes when using it.
 Designers need good tools.
 One must have behavioural design goals like performance design goals.

07/12/24 UI/UX 47
 Pitfalls in the Development Path
Pitfalls in the design process exist because of a flawed design process, including a
failure to address critical design issues, an improper focus of attention, or
development team organization failures.
Common pitfalls are:
No early analysis and understanding of the user’s needs and
expectations.
A focus on using design features or components that are “neat”.
Little or no creation of design element prototypes.
No usability testing.
No common design team vision of user interface design goals.
Poor communication between members of the development
team.

07/12/24 UI/UX 48
 Designing for People: The Five Commandments
 Gain a complete understanding of users and their tasks.
 Solicit early and ongoing user involvement.
 Perform rapid prototyping and testing
 Modify and iterate the design as much as necessary.
 Integrate the design of all the system components.

07/12/24 UI/UX 49
 Designing for People: The Five Commandments
 Perform rapid prototyping and testing –
◦ Prototyping and testing the product will quickly identify problems and allow you to develop
solutions.
◦ The design process is complex and human behavior is still not well understood.
◦ While the design guidelines that follow go a long way toward achieving ease of use, all problems
cannot possibly be predicted.
◦ Prototyping and testing must be continually performed during all stages of development to uncover all
potential defects.
 Modify and iterate the design as much as necessary –
◦ While design will proceed through a series of stages, problems detected in one stage may force the
developer to revisit a previous stage.
◦ This is normal and should be expected.
◦ Establish user performance and acceptance criteria and continue testing and modifying until all
design goals are met

07/12/24 UI/UX 50
 Designing for People: The Five Commandments
 Integrate the design of all the system components –
 The software, the documentation, the help function, and training needs are all
important elements of a graphical system or Web site and all should be developed
concurrently.

07/12/24 UI/UX 51
 Usability
 Usability describes the effectiveness of human performance
 The capability to be used by humans easily and effectively
 easily = to a specified level of subjective assessment
 effectively = to a specified level of human performance

07/12/24 UI/UX 52
 Common Usability problems
1. Ambiguous menus and icons.
2. Languages that permit only single-direction movement through
a system.
3. Input and direct manipulation limits.
4. Highlighting and selection limitations.
5. Unclear step sequences.
6. More steps to manage the interface than to perform tasks.
7. Complex linkage between and within applications.
8. Inadequate feedback and confirmation.
9. Lack of system anticipation and intelligence.
10. Inadequate error messages, help, tutorials, and documentation.

07/12/24 UI/UX 53
 Practical Measures of Usability
Provide a balanced design team, including specialists in:

Are people asking a lot of questions or often reaching for a

manual?
Are frequent exasperation responses heard?
Are there many irrelevant actions being performed?
Are there many things to ignore?
Do a number of people want to use the product?

07/12/24 UI/UX 54
 Some Objective Measures of Usability
How effective is the interface? Can the required range of tasks be accomplished:
At better than some required level of performance (for example, in terms of
speed and errors)?
By some required percentage of the specified target range of users?
Within some required proportion of the range of usage environments?

How learnable is the interface? Can the interface be learned:

Within some specified time from commissioning and start of user training?
Based on some specified amount of training and user support?
Within some specified relearning time each time for intermittent users?

07/12/24 UI/UX 55
 Some Objective Measures of Usability
How flexible is the interface? Is it flexible enough to:
Allow some specified percentage variation in tasks and/or environments beyond
those first specified?

What are the attitudes of the users? Are they:

Within acceptable levels of human cost in terms of tiredness, discomfort,
frustration,
and personal effort?
Such that satisfaction causes continued and enhanced usage of the system?

07/12/24 UI/UX 56
 The Design Team
A balanced design team includes specialists
in:
Development
Human factors
Visual design
Usability assessment
Documentation
Training

07/12/24 UI/UX 57
 Know Your User or Client
To create a truly usable system, the designer must always do the
following:

Understand how people interact with computers.

Understand the human characteristics important in design.
Identify the user’s level of knowledge and experience.
Identify the characteristics of the user’s needs, tasks, and jobs.
Identify the user’s psychological characteristics.
Identify the user’s physical characteristics.
Employ recommended methods for gaining understanding of
users.

07/12/24 UI/UX 58
 Understanding How People Interact with
Computers

 Why People Have Trouble with Computers

 Responses to Poor Design
 People and Their Tasks

07/12/24 UI/UX 59
 Why People Have Trouble with Computers
Use of jargon
◦ Systems often speak in a strange language
◦ Words that are completely alien to the office or home environment or used in different contexts.
◦ Learning to use a system often requires learning a new language.

Non-obvious (not easily discovered, seen, or understood ) design

◦ Complex or novel design elements are not obvious
◦ Operations may have prerequisite conditions that must be satisfied before they can be accomplished,
or outcomes may not always be immediate, obvious, or visible.

Fine distinctions
◦ Different actions may accomplish the same thing, depending upon when they are performed, or
different things may result from the same action.
◦ Often these distinctions are minute and difficult to keep track of.

07/12/24 UI/UX 60
 Why People Have Trouble with Computers
Disparity in problem-solving strategies
◦ People learn best by doing.
◦ They have trouble following directions and do not always read instructions before taking an action.
◦ Human problem solving can best be characterized as “ error-correcting” or “trial and error,”
whereby a tentative solution is formulated based on the available evidence and then tried.
◦ This tentative solution often has a low chance of success, but the action’s results are used to modify
one’s next attempt and so increase the chance of success.

Design inconsistency
◦ The same action may have different names: for example, "save” and “keep,” “write” and “list.” The
same command may cause different things to happen.
◦ The same result may be described differently: for example, “not legal” and “not valid.” Or the
same information may be ordered differently on different screens.
◦ Meaningful or conceptual learning becomes very difficult.

07/12/24 UI/UX 61
 Responses to Poor Design

Psychological
Confusion - Meaningful patterns are difficult to discover, and the
conceptual model or underlying framework cannot be understood or established.
Annoyance –
◦ Inconsistencies in design,
◦ slow computer reaction times,
◦ difficulties in quickly finding information,
◦ outdated information,
◦ and visual screen distractions are a few of the many things that may annoy users.

Frustration - an inability to easily convey one’s intentions to the

computer, or an inability to finish a task or satisfy a need can cause frustration.
Inflexible and unforgiving systems are a major source of frustration.

07/12/24 UI/UX 62
 Responses to Poor Design
Psychological
Panic or stress - Unexpectedly long delays during times of severe or
unusual pressure may introduce panic or stress
Boredom - Boredom results from improper computer pacing (slow
response times or long download times)

07/12/24 UI/UX 63
 Responses to Poor Design
Physical
Abandonment of the system (an act or instance of leaving a person or

thing permanently and completely) - The system is rejected and other information sources are
relied upon.
Partial use of the system - Only a portion of the system’s
capabilities are used, usually those operations that are easiest to perform or that
provide the most benefits
Indirect use of the system - An intermediary is placed
between the would-be user and the computer.
Modification of the task - The task is changed to match the
capabilities of the system.

07/12/24 UI/UX 64
 Responses to Poor Design
Physical
Compensatory activity - Additional actions are performed to
compensate for system inadequacies.
Misuse of the system - The rules are bent to shortcut operational
difficulties
Direct programming - The system is reprogrammed by its user to
meet specific needs. This is a typical response of the sophisticated worker

07/12/24 UI/UX 65
 People and Their Tasks
 The user, while being subjected to the everyday pressures of
the office and home, frequently does not care about how
technically sophisticated a system or Web site is.
 The user may even be computer illiterate, and possibly even
antagonistic.
 He or she wants to spend time using a computer, not learning
to use it.
 His or her objective is simply to get some work done, a
task performed, or a need satisfied.
 Today, many users have also learned to expect certain level of
design sophistication.

07/12/24 UI/UX 66
 Important Human Characteristics in Design
 Perception -
Perception is our awareness and understanding of the elements
and objects of our environment through the physical sensation of our various
senses, including sight, sound, smell, and so forth.
◦ Perception is influenced, in part, by experience.
◦ perceptual characteristics include
 Proximity
 Similarity
 Matching patterns
 Closure
 Unity.
 Continuity.
 Balance
 Expectancies
 Context
 Signals versus noise

07/12/24 UI/UX 67
 Important Human Characteristics in Design
 Memory - Memory is not the most stable of human attributes
◦ Short-term, or working, memory receives information from either the senses or longterm
memory.
◦ In performance, research indicates that a greater working memory is positively related to increased
reading comprehension, drawing inferences from text, reasoning skill, and learning technical
information.
◦ Long-term memory contains the knowledge we possess. Information received in short-
term memory is transferred to it and encoded within it, a process we call learning.

 Other general ways to reduce user memory loads, reduce the need for mental
integration, and expand working memory, thus enhancing system usability
include:
◦ Presenting information in an organized, structured, familiar, and meaningful way.
◦ Placing all required information for task performance in close physical proximity.
◦ Giving the user control over the pace of information presentation

07/12/24 User Experience Design 68

 Important Human Characteristics in Design
 Sensory Storage - Sensory storage is the buffer where the automatic
processing of information collected from our senses takes place.
◦ It is an unconscious process, large, attentive to the environment, quick to detect changes, and
constantly being replaced by newly gathered
 Visual Acuity - The capacity of the eye to resolve details is called visual
acuity.
 Foveal and Peripheral Vision - Foveal vision is used to focus directly on
something; peripheral vision senses anything in the area surrounding the location
we are looking at
 Information
Processing
 Mental Models - decisions, do something, or interact with another person.
Mental models also enable a person to predict the actions necessary to do things if
the action has been forgotten or has not yet been encountered

07/12/24 User Experience Design 69

 Important Human Characteristics in Design
 Movement Control - The time to acquire a target is a function of the
distance to and size of the target.
◦ This simply means that the bigger the target is, or the closer the target is, the faster it will be reached.
The implications in screen design are:
◦ Provide large objects for important functions.
◦ Take advantage of the “pinning” actions of the sides, top, bottom, and corners of the screen.

 Learning -
A design developed to minimize human learning time can greatly
accelerate human performance.
◦ Skill - The goal of human performance is to perform skillfully. To do so requires linking inputs and
responses into a sequence of action.
◦ Skills are hierarchical in nature

 Individual Differences - In reality, there is no average user.

07/12/24 User Experience Design 70

 Human Considerations in Design

 The User’s Knowledge and Experience

 The User’s Tasks and Needs
 The User’s Psychological Characteristics
 The User’s Physical Characteristics

07/12/24 User Experience Design 71

 Human Considerations in Design
 The User’s Knowledge and Experience

07/12/24 User Experience Design 72

 The User’s Tasks and Needs
 Mandatory or Discretionary Use
 Frequency of Use
 Task or Need Importance
 Task Structure
 Social Interactions
 Primary Training
 Turnover Rate
 Job Category
 Lifestyle

07/12/24 User Experience Design 73

 Human Considerations in Design
 The User’s Tasks and Needs

07/12/24 User Experience Design 74

 The User’s Tasks and Needs
Mandatory or Discretionary Use
Characteristics of mandatory use :
The computer is used as part of employment.
Time and effort in learning to use the computer are willingly invested.
High motivation is often used to overcome low usability characteristics.
The user may possess a technical background.
The job may consist of a single task or function.
Frequency of Use
Frequency of use affects both learning and memory.
People who spend a lot of time using a system are usually willing to spend more time
learning how to use it in seeking efficiency of operation.
They will also more easily remember how to do things.
Occasional or infrequent users prefer ease of learning and remembering, often at the
expense of operational efficiency.

07/12/24 User Experience Design 75

 The User’s Tasks and Needs
 Task or Need Importance
◦ How important is the task or need for the user?
◦ People are usually willing to spend more time learning something if it makes the task being performed
or need being fulfilled more efficient.

 Task Structure
 Social Interactions
 Primary Training
◦ Will the system training be extensive and formal, will it be self-training from manuals, or will
training be impossible?
 Turnover Rate
 Job Category
 Lifestyle

07/12/24 User Experience Design 76

 The User’s Psychological Characteristics
 Attitude and Motivation
 Patience
 StressLevel
 Expectations
 Cognitive Style

07/12/24 User Experience Design 77

The User’s Psychological Characteristics

07/12/24 User Experience Design 78

 The User’s Physical Characteristics
Age
Hearing
Vision
Gender
Handedness
Disabilities

07/12/24 User Experience Design 79

 The User’s Physical Characteristics
Age - Are the users children, young adults, middle-aged, senior citizens, or
very elderly.
Young adults (aged 18–36), in comparison to older adults (aged 64–81)
 Use computers and ATMs more often.
 Read faster.
 Possess greater reading comprehension and working memory capacity.
 Possess faster choice reaction times.
 Possess higher perceptual speed scores.
 Complete a search task at a higher success rate.
 Use significantly less moves (clicks) to complete a search task.
 Are more likely to read a screen a line at a time.

07/12/24 User Experience Design 80

 The User’s Physical Characteristics
Older adults, as compared to young adults:
Are more educated.
Possess higher vocabulary scores.
Have more difficulty recalling previous moves and location of previously
viewed information.
Have more problems with tasks that require three or more moves (clicks).
Are more likely to scroll a page at a time
Respond better to full pages rather than long continuous scrolled pages.

07/12/24 User Experience Design 81

 The User’s Physical Characteristics
Hearing - As people age, they require louder sounds to hear, a noticeable
attribute in almost any everyday activity.

07/12/24 User Experience Design 82

 The User’s Physical Characteristics
Vision
Older adults read prose text in smaller type fonts more slowly than younger adults
(Charness and Dijkstra, 1999). For older adults they recommend:

14-point type in 4-inch wide columns.

12-point type in 3-inch wide columns.

Ellis and Kurniawan (2000) recommend the following fonts for older users:

San serif (Arial, Helvetica, and Verdana).

Black type on a white background.

Ellis and Kurniawan (2000) and Czaja (1997) suggest Web links should be:
Distinct and easy to see.

Large (at least 180 22 pixels for a button).

Surrounded by a large amount of white space.

07/12/24 User Experience Design 83

 The User’s Physical Characteristics
Gender
A user’s sex may have an impact on both motor and cognitive performance.

Women are not as strong as men, so moving heavy displays or controls may be
more difficult.

Women also have smaller hands than men, so controls designed for the hand size of
one may not be used as effectively by the other.

Significantly more men are color-blind than women, so women may perform better
on tasks and screens using color-coding.

07/12/24 User Experience Design 84

 The User’s Physical Characteristics
Handedness
A user’s handedness, left or right, can affect ease of use of an input mechanism,
depending on whether it has been optimized for one or the other hand.

Research shows that for adults:

87 percent are right-handed.
13 percent are left-handed or can use both hands without a strong preference for
either one.
No gender or age differences exist.
There is a strong cultural bias, in China and Japan only 1 percent of people are left-
handed..

07/12/24 User Experience Design 85

 The User’s Physical Characteristics
Disabilities
Blindness, defective vision, color-blindness, poor hearing, deafness, and motor
handicaps can affect performance on a system not designed with these disabilities in
mind.

People with special needs must be considered in design.

This is especially true for systems like the Web that permit unlimited user access..

07/12/24 User Experience Design 86

 Human Interaction Speeds
Reading
Listening
Speaking
Keying

07/12/24 User Experience Design 87

Human Interaction Speeds

07/12/24 User Experience Design 88

 Methods for Gaining an Understanding of
Users
 Visituser locations
 Talk with users
 Observe users working
 Videotape users working
 Learn about the work organization
 Try the job yourself

07/12/24 User Experience Design 89

 Understanding Business functions

 Perform a business definition and requirements analysis.

 Determine basic business functions.
 Describe current activities through task analysis.
 Develop a conceptual model of the system.
 Establish design standards or style guides.
 Establish system usability design goals.
 Define training and documentation needs.

07/12/24 User Experience Design 90

 Requirement analysis
A requirement is an objective that must be met.
 A product description is developed and refined, based on
input from users or marketing.
 There are many techniques for capturing information for
determining requirements.
 Before beginning the analysis, the developer should be aware
of the policies and work culture of the organization being
studied.
 He or she should also be familiar with any current system or
process the new system is intended to supplement or replace.

07/12/24 User Experience Design 91

 Direct Methods
 Individual Face-to-Face Interview
 Telephone Interview or Survey
 Traditional Focus Group
 Facilitated Team Workshop
 Observational Field Study
 Requirements Prototyping
 User-Interface Prototyping
 Usability Laboratory Testing

07/12/24 User Experience Design 92

 Indirect Methods
 MIS Intermediary
 Paper Survey or Questionnaire
 Electronic Survey or Questionnaire
 Electronic Focus Group
 Marketing and Sales
 Support Line
 E-Mail or Bulletin Board
 User Group
 Competitor Analysis
 Trade Show
 Other Media Analysis
 System Testing

07/12/24 User Experience Design 93

 Determining basic Business functions
A detailed description of what the product will do is prepared.
 Major system functions are listed and described, including
critical system inputs and outputs.
 A flowchart of major functions is developed.
 The process the developer will use is summarized as follows:
 Gain a complete understanding of the user’s mental model
based upon:
 The user’s needs and the user’s profile.
 A user task analysis.
 Develop a conceptual model of the system based upon the user’s
mental model. This includes:
 Defining objects.
 Developing metaphors.

07/12/24 User Experience Design 94

 Understanding the User’s Mental model
 The next phase in interface design is to thoroughly describe the expected
system user or users and their current tasks.
 A goal of task analysis, and a goal of understanding the user, is to gain a
picture of the user’s mental model.
 A mental model is an internal representation of a person’s current
conceptualization and understanding of something.
 Mental models are gradually developed in order to understand, explain,
and do something.
 Mental models enable a person to predict the actions necessary to do
things if the actions have been forgotten or have not yet been encountered.
 User activities are precisely described in a task analysis. Task analysis
involves breaking down the user’s activities to the individual task level.

07/12/24 User Experience Design 95

 Developing Conceptual Models
 The output of the task analysis is the creation, by the designer,
of a conceptual model for the user interface.
 A conceptual model is the general conceptual framework
through which the system’s functions are presented.
 Such a model describes how the interface will present objects,
the relationships between objects, the properties of objects,
and the actions that will be performed.
 A conceptual model is based on the user’s mental model.

07/12/24 User Experience Design 96

 Defining Objects
 Determine all objects that have to be manipulated to get work done.
 Describe:
— The objects used in tasks.
— Object behavior and characteristics that differentiate each kind of object.
— The relationship of objects to each other and the people using them.
— The actions performed.
— The objects to which actions apply.
— State information or attributes that each object in the task must preserve,
display, or allow to be edited.
 Identify the objects and actions that appear most often in the workflow.
 Make the several most important objects very obvious and easy

07/12/24 User Experience Design 97

 Developing Metaphors
 Choose the analogy that works best for each object and its
actions.
 Use real-world metaphors.
 Use simple metaphors.
 Use common metaphors.
 Multiple metaphors may coexist.
 Use major metaphors, even if you can’t exactly replicate them
visually.
 Test the selected metaphors.

07/12/24 User Experience Design 98

 General Principles
 A detailed description of what the product will do is prepared.
 Major system functions are listed and described, including critical system
inputs and outputs.
 A flowchart of major functions is developed.
 The process the developer will use is summarized as follows:
 Gain a complete understanding of the user’s mental model based upon:
 The user’s needs and the user’s profile.
 A user task analysis.
 Develop a conceptual model of the system based upon the user’s mental
model. This includes:
 Defining objects.
 Developing metaphors.

07/12/24 User Experience Design 99