UX & UI DESIGN

PRESENTER
ROWAN ESSAM ABBAS
WHAT IS UX?

• A User Experience (UX) designer is responsible for designing

the experience that users have when interacting with a product.
• UX designers focus on crafting products that are easy to use and
understand.
• UX designers always put users’ needs first when considering
design solutions in order to enhance customer satisfaction
WHAT IS UX?

• The fundamentals of UX design include:

– Defining a problem
– Understanding users
– Generating task and user flows
– Creating sketches, high and low fidelity wireframes, and prototypes
– Usability testing
WHAT IS UI?

• User Interface design, or UI, focuses on incorporating a visual

hierarchy into a design for the user to follow.
• UI designers make products joyful to interact with.
– Color scheme
– Typefaces
– Iconography
– Layout
 UX VS. UI

• While UX and UI designers work together to create a final end product, there are several
key differences between the two that we will explore below.
1. UX designers tend to focus on creating a product that solves a problem, while UI
designers work on the design patterns and microdetails of the product.
2. UX designers think extensively about how best to make a product easy to use, while UI
designers think extensively about how best to make a product delightful and enjoyable to
use.
3. UX is what we, as users, experience, while UI is what we see while using a product.
4. UX design generally comes before UI design in an ideal design process.
 USABILITY

• A usable system is:

Easy to use
 USABILITY

• A usable system is:

Easy to learn

Easy to remember how to use

 USABILITY

• A usable system is:

Enjoyable to use
Effective to use : produce the result that you want
 Efficient to use : Produce the result without wasting time
 EXERCISE
FIND THE GOOD AND BAD DESIGN ACCORDING TO
USABILITY
 INFORMATION OVERLOAD

• Parking Sign
EXAMPLES(CONT.)
EXAMPLES(CONT.)
NIELSEN’S 10 USABILITY HEURISTICS FOR USER
INTERFACE DESIGN
1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognise, diagnose and recover from errors
10. Help and documentation
1. VISIBILITY OF SYSTEM STATUS

• The system should always keep users informed about what is going on through feedback
within reasonable time.
2. MATCH BETWEEN SYSTEM AND REAL WORLD

• The system should speak the users' language, with words, phrases and concepts familiar
to the user not system-oriented terms.
3. USER CONTROL AND FREEDOM

• Users often choose system functions by mistake

• They will need a clearly marked "emergency exit" to leave the unwanted state without
having to go through an extended dialogue
• Example: Support undo and redo.
4. CONSISTENCY AND STANDARDS

• The system has to follow consistent rules and conventions so that users can anticipate
how to interact without having to wonder how to do it or learn new actions.
5. ERROR PREVENTION

• The system should not encourage user errors. On the contrary, it should try to prevent
them in every possible way
6. RECOGNITION RATHER THAN RECALL

• Make objects, actions, and options visible

• The user should not have to remember information from one part of
the dialogue to another
7. FLEXIBILITY AND EFFICIENCY OF USE

• Accelerators -- unseen by the novice user -- may often speed up the interaction for the
expert user such that the system can cater to both inexperienced and experienced users
8. AESTHETIC AND MINIMALIST DESIGN

• Information that is not very relevant or rarely used should not be included in the
interface.
• Instead, show only the elements necessary for the action to be carried out.
• This way, you will create interfaces that are easier to understand and to use and you will
allow the users to focus on what is really important to them.
9. HELP USERS RECOGNISE, DIAGNOSE AND
RECOVER FROM ERRORS

• Error messages should:

• be expressed in plain language (no codes)
• precisely indicate the problem
• constructively suggest a solution
9. HELP USERS RECOGNISE, DIAGNOSE AND
RECOVER FROM ERRORS
10. HELP AND DOCUMENTATION

• It is better if the system can be used without documentation

• But it may be necessary to provide help and documentation it should:
• be easy to search
• be focused on the user's task
• list steps to be carried out
• not be too large
WHY GOOGLE USE 2 STEP GMAIL SIGNUP PROCESS?
 ANSWER

• Establishing a singular point of focus :

• The single form fields enable the user to focus on a single interaction
point on the screen
• i.e. first the login and second the password without getting distracted.
 PRACTICE TIME

Open Figma and

start design your
first interface