Chapter 2

UX Design Principles,
Practices, and Trends
Dr.Seema Al Raisi

Dr.Seema Al Raisi
User-Centered Design (UCD)
In the field of UX, we examine users’ needs with a series of
contextual methods known as a User-centered Design (UCD)
methodology.

This is a framework that enables us to engage with and listen to

our users to determine what they want. UCD is a design approach
that considers a user’s needs up front and throughout the design
and development process, to ensure that the final product is well
received.
UX Design Principles

UX Design Principles principles are used by a wide range

of professionals and organizations from different fields
who are involved in the design, development, and
evaluation of technology systems and products.
UX Design Principles
UX Design Principles are used to create technology
that is more user-friendly, accessible, efficient, and
satisfying to use.

UX Design Principles should be applied throughout

the entire lifecycle of designing, developing, and
evaluating technology systems and products.
 (Design for All )

Use it as it is
 Universal Design

The process of designing products so that they can be used by

as many people as possible in as many situations as possible.

Design that works for everybody in all scenarios

 ❑ Different cultural, background and countries
❑ Different Ages
As Many People ❑ Different Gender

❑ Different Education Level

❑ Temporary Disabilities

❑ Special Need people

❑ Different user preferences

❑ All users.
 Can everyone have the same
experience in using a product?

Is this achievable practically??

The design aims to at least provide an equivalent experience for all
users.

Ensure that no one is excluded through the choices a designer or a

developer makes. (The universal design tries to ensure that no one
is excluded)
Using the system without the need for adaptation (without adding the
features or specialized design, use it as it is )

The design is always made better for everyone.

 Seven (7) Principles of Universal Design
1. Equitable Use 5. Tolerance for Error
2. Flexibility in Use 6. Low Physical Effort
3. Simple, Intuitive Use 7. Size and Space for Approach & Use
4. Perceptible Information
01 Equitable Use The design is useful and marketable to people with diverse abilities.

The design accommodates a wide range of individual preferences

02 Flexibility in Use
and abilities.

Simple & Intuitive Use of the design is easy to understand, regardless of the user's
03
Use experience, knowledge, language skills, or current concentration
level.
Perceptible The design communicates necessary information effectively to
04 the user, regardless of ambient conditions or the user's sensory
Information
abilities.
Tolerance for
05 The design minimizes hazards and the adverse consequences of
Error accidental or unintended actions.
Low Physical The design can be used efficiently and comfortably and with a
06
Effort minimum of fatigue.

Size & Space for Appropriate size and space is provided for approach, reach,
07 manipulation, and use regardless of user's body size, posture, or
Approach & Use
mobility.
1‐ Equitable Use

▪ Designing things so that everyone, regardless of

their differences such as age, height, knowledge,
etc. , can use and access the system equally.

▪ The design does not disadvantage any group of

users.(The design should be fair to all users and not make
anyone's experience more difficult.)
 1‐ Equitable Use

Guidelines:

▪ Design should offer everyone the same way to interact,

and when that's not possible, it should make sure that
different methods are equally effective.

▪ Design should treat everyone fairly and equally.

 1‐ Equitable Use
Guidelines:

▪ Design should provide privacy, security, and safety in a

way that's equally accessible to everyone.

▪ Make the design appealing to all users

How we can apply Equitable in use to websites or
application
❑Ensure that your website's content and features are accessible to all users
❑Ensure that all users can access and interact with your website, regardless
of their abilities or disabilities.
❑Design with the goal of providing the same level of access ,security and
experience to everyone.
Yanko Design company designs a toe
mouse that can be operated with the
feet, ensuring that people with upper
body disabilities can use computers
conveniently, just like others.
Voice Commands: Integrating voice command functionalities into apps
allows users to navigate and interact with the app using their voice.
This benefits individuals with motor disabilities(refer to conditions that
affect a person's ability to control movement or coordination of muscles)
who may have difficulty using traditional touch or mouse input methods.
 2. Flexibility in use

▪ The design accommodates a wide range of individual

preferences and abilities.
▪ User can use same design in different ways depending
on the situation.(Offer multiple ways to use the system)
2. Flexibility in Use
Guidelines:
▪ Provide choice in methods of use
▪ Accommodate right- or left-handed access and use
▪ The design should help users do things correctly and
exactly as they intend, without causing mistakes
▪ Design should be flexible to fit the user's space and
needs
Rotating Computer Monitor
 Screen Rotation
option in mobile

Multi USB Charger cable can be

used for several devices.
Is this dashboard customizable?
Is this dashboard customizable?
Previous example
▪ Provide customization for dashboards of a system:
Depending on the user's various work tasks and needs, they
can select what they want to see on the dashboard and
how they want to use it.

▪ a website that allows users to choose graphic or text

versions
How we can apply Flexibility in use to websites
❑Offer multiple ways for users to navigate and interact with your website.
❑Allow users to customize their experience, such as font size adjustments
or alternative navigation methods.
❑ Make sure the website is responsive and works well on various devices
and browsers.
❑Responsive Design: The website's layout adjusts based on the screen
size.Design to provide the same level of access , security and
experience to everyone.
3. Simple, Intuitive Use
▪ Use of the design is easy to understand, regardless
of the user's experience, knowledge, language
skills, or current concentration level.
 Guidelines:

▪ Use clear and simple language: The system should use

language that is easy to understand, such as "checkout"
instead of technical terms like "point of sale".

▪ Consider what the user may be expecting.

▪ The system should use visual cues, such as product images
or icons, to help users understand what they are looking
and doing,
 Guidelines:

▪ Arrange information reliable with its importance.

▪ Provide effective prompts and feedback during and after task
completion.
▪ Use an easy-to-navigate interface: The system interface should be
easy to navigate with clear and concise menus and buttons that
lead the user to their desired destination.
intuitive use can be achieved by using
colors to help understand or providing
immediate help
intuitive use can be achieved by using pictures to help
understand or providing immediate feedback.
The app should use visual cues, such as product images or icons, to help
users understand what they are looking and doing
Provide feedback to the user, such as a confirmation message or a
progress bar, to indicate when an action has been completed.
How we can apply Simple and Intuitive Use to websites

❑Create a user interface that is straightforward and easy to understand.

❑Use clear and concise language, logical layouts, and intuitive navigation.
❑Keep the design clean and user-friendly.
❑ Use descriptive labels for links and buttons.
 4. Perceptible information
▪ Perceptible information ensures that content is designed
in a way that allows people to access and understand it
through different senses, such as sight, hearing, or touch.
The design is clear to the user of how to use it or
behave around it.

▪ The goal is to make information accessible to a different

user regardless of surrounding conditions or the user's
sensory abilities and considering various abilities and
preferences.

Making information easy to see, hear, understand.

 4. Perceptible Information

Guidelines:
▪ Use pictures, words, and touch to share important information in
multiple ways.
▪ Maximize ‘legibility’ of essential information (Make sure important
information is easy to read and understand for users
 4. Perceptible Information

Guidelines:
▪ Differentiate elements in ways that can be described (i.e. make it
easy to give instructions or directions)
▪ Provide compatibility with a variety of techniques or devices used
by people with sensory limitations.(Make sure your website
works well with different devices and techniques used by people
with sensory limitations
Enable users with hearing
impairments to watch videos
with Video Transcript ion
How we can apply Perceptible Information Use to websites
❑Present information in multiple formats to accommodate various sensory
abilities. Provide alt text for images, and offer transcripts and captions for
multimedia content.
❑Ensure that content is perceivable through text, images, audio, and
alternative media.

❑Ensure that all content can be perceived by users, including those with
visual or hearing impairments.
 Guideline Example
An educational website not only provides text-
Present Information in based lessons but also includes video tutorials,
Multiple Formats audio summaries, and interactive quizzes to cater
to different learning styles.
A news website includes descriptive alt text for
each image, allowing screen reader users to
Provide Alt Text for Images
understand the content and context of the
images.
A health and wellness blog features a podcast
Ensure Perceivability for All series with transcripts, ensuring that individuals
Users with hearing impairments can access the content
in text form.
▪ Perceptible Information focuses on making information accessible through
various sensory channels, ensuring that users can perceive and understand it
regardless of their abilities. (how information is presented and ensuring it's clear
and understandable to all users.

▪ Simple, Intuitive Use is about designing products and interfaces in a way

that is straightforward and easy to use, promoting a positive user
experience for everyone.

▪ Both principles contribute to creating a more accessible and user-

friendly design.
 5. Tolerance for Error
▪ The design minimizes the impact and hazards caused by mistakes
or unintended actions.

▪ Tolerance for Error making sure that if user make a mistake or do

something by accident, it won't cause big problems or be too difficult
to fix. It's about designing things in a way that's forgiving and user-
friendly, so people can use them without worrying too much about
making errors.
▪ Provide users a warning before something goes wrong, so they can
avoid mistakes or fix them easily. It's about preventing problems
before they happen.
 5. Tolerance for Error
Guidelines:

▪ Arrange elements to minimize hazards and errors:

• most used elements, most accessible;
▪ Provide warnings of hazards and errors.
▪ Provide fail–safe feature.
▪ Provide option to undo action.
▪ Stay alert in tasks that need attention; avoid acting without
thinking.
Undo button in windows Auto save feature
Message
Reduce submission error with Form Validation
Tolerance of error applied in
the SMS messages from Bank Muscat?
Bank Muscat warns users about
entering an invalid password. The
system will send an error message to
customer that he/she have made
unsuccessful attempts to login to
Internet and Mobile Banking account
and entering wrong password on 5th
time will lock his/her ID.
How we can apply Tolerance for Error use to websites

❑ Allow users to make mistakes without severe consequences or

outcome.
❑ Provide clear feedback and guidance to help users correct
errors.
❑ Create forms with clear error messages and validation checks.
❑ Allow users to review and correct their input before submitting.
❑ Avoid automatic timeouts that might frustrate users.
6. Low Physical Effort.
▪ The design can be used efficiently, comfortably, and
with a minimum of fatigue.
6. Low Physical Effort.
Guidelines:

▪ Allow user to maintain a neutral body position

▪ Use reasonable operation forces
▪ Minimize repetitive actions
▪ Minimize sustained physical effort
Minimalize mouse usage with Keyboard Shortcuts
How we can apply Low Physical Effort use to websites
1. Ensure that interactive elements like buttons and links are
easy to click or tap.
2. Support keyboard navigation and other input methods.
3. Use Keyboard Shortcuts
4. Ensure that your website is easy to operate without requiring too
much physical effort.
5. Provide voice command option
 Guideline Example
Large and well-spaced "Add to Cart" button on
Ensure Clickable Interactive Elements
an e-commerce site

News website allowing navigation with

Support Keyboard Navigation
keyboard arrow keys

Project management website using "Ctrl + N"

Use Keyboard Shortcuts for creating a new task or
"Ctrl + S" for quick saving in an app
Ensure Easy Operation without Physical Travel booking website with a simple and
Effort intuitive interface
A virtual assistant website lets users control
Provide Voice Command Option tasks effortlessly using voice commands: check
weather, set reminders, get news updates
 7.Size and Space for Approach & Use
Guidelines:

▪ Provide a clear line of sight to important elements for any

seated or standing user
▪ Make reach to all components comfortable for any seated or
standing user
▪ Accommodate variations in hand and grip size
▪ Provide adequate space for use of assistive devices or
personal assistant
Consider the Target Area of your website when it is on mobile
devices.
How we can apply Size and Space for Approach and Use
to websites

❑ Design your website to accommodate various input

methods, such as touchscreen, keyboard, or voice
commands.
❑ Allow sufficient spacing between interactive elements to
prevent accidental clicks or taps.
visit our https://www.hct.edu.om website and
discover seven principles of universal design not
followed in the websites?