SlideShare a Scribd company logo
UI & UX ENGINEERING
S.A.A.D.C.I Athukorala
Sabaragamuwa University of Sri-
Lanka
Physical Sciences & Technology
What is UX Design
 The field of user experience design has roots in human
factors and ergonomics.
 In 1990 ‘Donald Norman ’ declared that ‘User Experience
encompasses all aspects of the end-user's interaction with
the company, its services, and its products.’
 UX Design is the process of enhancing customer
satisfaction and loyalty by improving the usability, ease of
use, and pleasure provided in the interaction between the
customer and the product.
1/9/2016UI & UX Engineering2
Elements of UX Design
 User Centered Design
 User Centered Design refers to a class of methodologies
where design decisions are based on some tangible user
model.
 That user model must be based on the research of the users
of the application.
 Visual Design
 Visual Design refers to the design of the visual appearance
of software, advertising, or other commercial products.
 Visual Design focuses a bit more on esthetics.
 Visual Designers are often NOT User Centered Designers.
1/9/2016UI & UX Engineering3
Elements of UX Design
 Information Architecture
 Information Architecture refers to the structuring of
information.
 An Information Architecture professional is often
considered a counterpart to an Interaction Designer.
 Interaction Designers focus on how people use computers
to accomplish work, and Information Architects focus on
how people leverage information to support goals.
1/9/2016UI & UX Engineering4
Elements of UX Design
 Interaction Design
 Interaction Design refers to the specific choices of user
interactions we make to allow users to meet their goals in
the software.
 Interaction Designers are generally User Centered
Designers.
 Interaction Designers:
Creating the layout of the interface
Defining interaction patterns best suited in the context
Effectively communicating strengths of the system
Making the interface intuitive by building affordances
Maintaining consistency throughout the system
1/9/2016UI & UX Engineering5
Elements of UX Design
Usability
 Usability refers to the ability of a specific type of
user to be able to effectively carry out a task
using a product.
 Usability is usually measured through testing.
Given a number of test subjects that reflects the
type of user that will use the application:
how many successfully complete a task.
on average how quickly do they complete that
task
on average how many user errors are made while
attempting to complete that task. 1/9/2016UI & UX Engineering6
Elements of UX Design
 HCI
 Human-Computer or Computer-Human interaction refers
to the study of how humans and computers interact.
 An HCI professional may be a researcher, a designer, a
psychologist, or anyone who might focus on human-
computer interaction as part of their work or study.
1/9/2016UI & UX Engineering7
Responsibilities of UX Design
 At the beginning of the project
 Competitor Analysis
 Customer Analysis
 Product Structure/Strategy
 Content Development
 While the project is underway
 Wireframing
 Prototyping
 Testing/Iteration
 Development Planning
1/9/2016UI & UX Engineering8
Responsibilities of UX Design
 Execution and Analysis
 Coordination with UI Designer(s)
 Coordination with Developer(s)
 Tracking Goals and Integration
 Analysis and Iteration
1/9/2016UI & UX Engineering9
General design process
 Collecting information about the problem.
 Getting ready to design
 Design
 Test and Iterate
1/9/2016UI & UX Engineering10
Critics of UX Design
 User experience design is a buzzword for an existing best
practice.
 A user experience cannot be fully designed.
 A user experience cannot be fully measured.
1/9/2016UI & UX Engineering11
What is UI Design?
 User Interface Design is responsible for the transference of
a brand’s strengths and visual assets to a product’s interface
as to best enhance the user’s experience.
 User Interface Design is a process of visually guiding the
user through a product’s interface via interactive elements
and across all sizes/platforms.
 User Interface Design is a digital field, which includes
responsibility for cooperation and work with developers or
code.
1/9/2016UI & UX Engineering12
UI Design principles
 User familiarity
 The interface should use terms and concepts which are
drawn from the experience of the people who will make
most use of the system.
 Consistency
 The interface should be consistent in that, wherever
possible, comparable operations should be activated in the
same way.
 Minimal surprise
 Users should never be surprised by the behaviour of a
system.
1/9/2016UI & UX Engineering13
UI Design principles
 Recoverability
 The interface should include mechanisms to allow users to
recover from errors.
 User guidance
 The interface should provide meaningful feedback when
errors occur and provide context-sensitive user help
facilities.
 User diversity
 The interface should provide appropriate interaction
facilities for different types of system user.
1/9/2016UI & UX Engineering14
UI Design process
 UI design is an iterative process involving close liaisons
between users and designers.
 The 3 core activities in this process are:
 User analysis: Understand what the users will do with the
system.
 System prototyping: Develop a series of prototypes for
experiment.
 Interface evaluation: Experiment with these prototypes
with users.
1/9/2016UI & UX Engineering15
The design process
1/9/2016UI & UX Engineering16
Responsibilities of UI Designer
 Customer analysis
 Interactivity and animation
 UI prototyping
 Implementation with the developer
 Design research
 Branding and graphic development
 Documentation
 User guides
1/9/2016UI & UX Engineering17
UI evaluation
 Some evaluation of a user interface design
should be carried out to assess its suitability.
 Full scale evaluation is very expensive and
impractical for most systems.
 Ideally, an interface should be evaluated against a usability
specification. However, it is rare for such specifications to
be produced.
1/9/2016UI & UX Engineering18
Evaluation techniques
 Questionnaires for user feedback.
 Video recording of system use and subsequent tape
evaluation.
 Instrumentation of code to collect information about facility
use and user errors.
 The provision of code in the software to collect on-line user
feedback.
1/9/2016UI & UX Engineering19
Difference between UI and UX
 UI refers to the term ‘User Interface’ and UX stands for
‘User Experience’.
 Both are crucial to a product and work closely together.
 But the roles of them are different.
 UX design is more analytical and technical field.
 UI design is closer to graphic design.
1/9/2016UI & UX Engineering20
Similarities between UI & UX
 Have a primary objective of improving customer
satisfaction.
 Focus on the user and his/her interaction with a
product/service.
 Can be applied to any product.
1/9/2016UI & UX Engineering21
THANK YOU
1/9/2016UI & UX Engineering22

More Related Content

PPTX
UI UX DESIGN.pptx
PDF
Look at UI/UX Design Process
PDF
Understanding UI/UX Design by Aroyewun Babajide
PDF
UI & UX Design for Startups
PDF
UX & UI Design - Differentiate through design
 
PDF
Simple Steps to UX/UI Web Design
PDF
Why User Experience Matters | By UX Professionals from Centerline Digital
PDF
UX Design + UI Design: Injecting a brand persona!
UI UX DESIGN.pptx
Look at UI/UX Design Process
Understanding UI/UX Design by Aroyewun Babajide
UI & UX Design for Startups
UX & UI Design - Differentiate through design
 
Simple Steps to UX/UI Web Design
Why User Experience Matters | By UX Professionals from Centerline Digital
UX Design + UI Design: Injecting a brand persona!

What's hot (20)

PDF
Brand Identity in UI/UX Design
PDF
UX RULES: 10 ESSENTIAL PRINCIPLES
PDF
UX/UI Introduction
PDF
UI and UX Design for Startups - Matin Maleki
PDF
Ux is not UI
PPTX
UI UX Introductory session
PDF
UI UX in depth
PDF
Intro to UX: Enterprise UX
PPTX
A UI and UX training presentation
PPTX
UX/UI design
PDF
Introduction to UX Design
PDF
Ui vs UX design
PDF
UI / UX Design Processes
PDF
UX/UI Design and How It Works
PDF
UX Lesson 1: User Centered Design
PPTX
UI vs UX workshop
PPTX
The Importance of UX
PPSX
UX Explained
PPTX
UX Design process, #UX, #Design Process, #Agile UX
PPTX
UI/UX Fundamentals
Brand Identity in UI/UX Design
UX RULES: 10 ESSENTIAL PRINCIPLES
UX/UI Introduction
UI and UX Design for Startups - Matin Maleki
Ux is not UI
UI UX Introductory session
UI UX in depth
Intro to UX: Enterprise UX
A UI and UX training presentation
UX/UI design
Introduction to UX Design
Ui vs UX design
UI / UX Design Processes
UX/UI Design and How It Works
UX Lesson 1: User Centered Design
UI vs UX workshop
The Importance of UX
UX Explained
UX Design process, #UX, #Design Process, #Agile UX
UI/UX Fundamentals
Ad

Viewers also liked (15)

PDF
8th pre alg -l52
PDF
ಪ್ರತಿಯೊಂದು ವಸ್ತುವಿನ ಕುರಿತೂ ಅರಿವುಳ್ಳವನಾಗಿದ್ದಾನೆ
PDF
Iran, l'Italia riparte da energia e infrastrutture
PPTX
Efecto antiguo jennifer unigarro
PDF
7th pre alg -l68
PDF
Experiencias innovadoras de las tic en el aula
PPTX
Weird & Fun
PDF
Carbonare Nicolas - Zusammenfassung MA
PPTX
Business Services: Success In Value Creation
PPT
Meninges Y L
PPTX
1.biyolojinin konusu ve biyolojik kavramlar
PDF
Megatrends by HP: 2017 Update
DOCX
Neurocraneo
PPTX
PPTX
Meet&Greet #1 - Product design
8th pre alg -l52
ಪ್ರತಿಯೊಂದು ವಸ್ತುವಿನ ಕುರಿತೂ ಅರಿವುಳ್ಳವನಾಗಿದ್ದಾನೆ
Iran, l'Italia riparte da energia e infrastrutture
Efecto antiguo jennifer unigarro
7th pre alg -l68
Experiencias innovadoras de las tic en el aula
Weird & Fun
Carbonare Nicolas - Zusammenfassung MA
Business Services: Success In Value Creation
Meninges Y L
1.biyolojinin konusu ve biyolojik kavramlar
Megatrends by HP: 2017 Update
Neurocraneo
Meet&Greet #1 - Product design
Ad

Similar to UI & UX Engineering (20)

PPTX
UI & UX Engineering
PPTX
UI & UX Engineering
PPTX
How We Work In UI And UX. User Interface (UI) and User Experience (UX)
PDF
The Fundamentals of UI and UX Design - Cuneiform
PPTX
PRINCESAHANIPKSppt.pptxghghhfdreg ttr ty
PDF
UIUX-Crafting-Seamless-Digital-Experiences (1).pdf
PPTX
Game interface design part 1
PPTX
toroforotoltlfflrvuhdgvyuwdgvyugvuiwrehgfuiorwgfuihfuoho.pptx
PDF
What is the difference between UI and UX 2024 Guide Jamtech.pdf
PDF
PPTX
editegygty u yiuuiiy h dt loi yr6viyb7bo8u0nnpt.pptx
PPTX
Intro_UI _UX Design Unit 1 Introduction.pptx
PDF
Proof That UI UX Really Works
PPTX
Get to know about UI/UX designing
PPTX
User Interface Design: Definitions, Processes and Principles
PDF
What is user experience(ux) & ux designer
PDF
Top 10 Skills For UI/UX Designers
PPTX
What is the difference between UI and UX design_.pptx
PDF
Desain Grafis 4 - UI/UX
PDF
What ux is
UI & UX Engineering
UI & UX Engineering
How We Work In UI And UX. User Interface (UI) and User Experience (UX)
The Fundamentals of UI and UX Design - Cuneiform
PRINCESAHANIPKSppt.pptxghghhfdreg ttr ty
UIUX-Crafting-Seamless-Digital-Experiences (1).pdf
Game interface design part 1
toroforotoltlfflrvuhdgvyuwdgvyugvuiwrehgfuiorwgfuihfuoho.pptx
What is the difference between UI and UX 2024 Guide Jamtech.pdf
editegygty u yiuuiiy h dt loi yr6viyb7bo8u0nnpt.pptx
Intro_UI _UX Design Unit 1 Introduction.pptx
Proof That UI UX Really Works
Get to know about UI/UX designing
User Interface Design: Definitions, Processes and Principles
What is user experience(ux) & ux designer
Top 10 Skills For UI/UX Designers
What is the difference between UI and UX design_.pptx
Desain Grafis 4 - UI/UX
What ux is

Recently uploaded (20)

PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PDF
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
PDF
Mark Klimek Lecture Notes_240423 revision books _173037.pdf
PPTX
Introduction to Child Health Nursing – Unit I | Child Health Nursing I | B.Sc...
PDF
Microbial disease of the cardiovascular and lymphatic systems
PPTX
BOWEL ELIMINATION FACTORS AFFECTING AND TYPES
PPTX
Institutional Correction lecture only . . .
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PDF
RMMM.pdf make it easy to upload and study
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PPTX
Cell Structure & Organelles in detailed.
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PDF
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PDF
Insiders guide to clinical Medicine.pdf
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PDF
O7-L3 Supply Chain Operations - ICLT Program
PDF
VCE English Exam - Section C Student Revision Booklet
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
Mark Klimek Lecture Notes_240423 revision books _173037.pdf
Introduction to Child Health Nursing – Unit I | Child Health Nursing I | B.Sc...
Microbial disease of the cardiovascular and lymphatic systems
BOWEL ELIMINATION FACTORS AFFECTING AND TYPES
Institutional Correction lecture only . . .
102 student loan defaulters named and shamed – Is someone you know on the list?
RMMM.pdf make it easy to upload and study
human mycosis Human fungal infections are called human mycosis..pptx
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
Cell Structure & Organelles in detailed.
FourierSeries-QuestionsWithAnswers(Part-A).pdf
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
Pharmacology of Heart Failure /Pharmacotherapy of CHF
Insiders guide to clinical Medicine.pdf
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
Abdominal Access Techniques with Prof. Dr. R K Mishra
O7-L3 Supply Chain Operations - ICLT Program
VCE English Exam - Section C Student Revision Booklet

UI & UX Engineering

  • 1. UI & UX ENGINEERING S.A.A.D.C.I Athukorala Sabaragamuwa University of Sri- Lanka Physical Sciences & Technology
  • 2. What is UX Design  The field of user experience design has roots in human factors and ergonomics.  In 1990 ‘Donald Norman ’ declared that ‘User Experience encompasses all aspects of the end-user's interaction with the company, its services, and its products.’  UX Design is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product. 1/9/2016UI & UX Engineering2
  • 3. Elements of UX Design  User Centered Design  User Centered Design refers to a class of methodologies where design decisions are based on some tangible user model.  That user model must be based on the research of the users of the application.  Visual Design  Visual Design refers to the design of the visual appearance of software, advertising, or other commercial products.  Visual Design focuses a bit more on esthetics.  Visual Designers are often NOT User Centered Designers. 1/9/2016UI & UX Engineering3
  • 4. Elements of UX Design  Information Architecture  Information Architecture refers to the structuring of information.  An Information Architecture professional is often considered a counterpart to an Interaction Designer.  Interaction Designers focus on how people use computers to accomplish work, and Information Architects focus on how people leverage information to support goals. 1/9/2016UI & UX Engineering4
  • 5. Elements of UX Design  Interaction Design  Interaction Design refers to the specific choices of user interactions we make to allow users to meet their goals in the software.  Interaction Designers are generally User Centered Designers.  Interaction Designers: Creating the layout of the interface Defining interaction patterns best suited in the context Effectively communicating strengths of the system Making the interface intuitive by building affordances Maintaining consistency throughout the system 1/9/2016UI & UX Engineering5
  • 6. Elements of UX Design Usability  Usability refers to the ability of a specific type of user to be able to effectively carry out a task using a product.  Usability is usually measured through testing. Given a number of test subjects that reflects the type of user that will use the application: how many successfully complete a task. on average how quickly do they complete that task on average how many user errors are made while attempting to complete that task. 1/9/2016UI & UX Engineering6
  • 7. Elements of UX Design  HCI  Human-Computer or Computer-Human interaction refers to the study of how humans and computers interact.  An HCI professional may be a researcher, a designer, a psychologist, or anyone who might focus on human- computer interaction as part of their work or study. 1/9/2016UI & UX Engineering7
  • 8. Responsibilities of UX Design  At the beginning of the project  Competitor Analysis  Customer Analysis  Product Structure/Strategy  Content Development  While the project is underway  Wireframing  Prototyping  Testing/Iteration  Development Planning 1/9/2016UI & UX Engineering8
  • 9. Responsibilities of UX Design  Execution and Analysis  Coordination with UI Designer(s)  Coordination with Developer(s)  Tracking Goals and Integration  Analysis and Iteration 1/9/2016UI & UX Engineering9
  • 10. General design process  Collecting information about the problem.  Getting ready to design  Design  Test and Iterate 1/9/2016UI & UX Engineering10
  • 11. Critics of UX Design  User experience design is a buzzword for an existing best practice.  A user experience cannot be fully designed.  A user experience cannot be fully measured. 1/9/2016UI & UX Engineering11
  • 12. What is UI Design?  User Interface Design is responsible for the transference of a brand’s strengths and visual assets to a product’s interface as to best enhance the user’s experience.  User Interface Design is a process of visually guiding the user through a product’s interface via interactive elements and across all sizes/platforms.  User Interface Design is a digital field, which includes responsibility for cooperation and work with developers or code. 1/9/2016UI & UX Engineering12
  • 13. UI Design principles  User familiarity  The interface should use terms and concepts which are drawn from the experience of the people who will make most use of the system.  Consistency  The interface should be consistent in that, wherever possible, comparable operations should be activated in the same way.  Minimal surprise  Users should never be surprised by the behaviour of a system. 1/9/2016UI & UX Engineering13
  • 14. UI Design principles  Recoverability  The interface should include mechanisms to allow users to recover from errors.  User guidance  The interface should provide meaningful feedback when errors occur and provide context-sensitive user help facilities.  User diversity  The interface should provide appropriate interaction facilities for different types of system user. 1/9/2016UI & UX Engineering14
  • 15. UI Design process  UI design is an iterative process involving close liaisons between users and designers.  The 3 core activities in this process are:  User analysis: Understand what the users will do with the system.  System prototyping: Develop a series of prototypes for experiment.  Interface evaluation: Experiment with these prototypes with users. 1/9/2016UI & UX Engineering15
  • 16. The design process 1/9/2016UI & UX Engineering16
  • 17. Responsibilities of UI Designer  Customer analysis  Interactivity and animation  UI prototyping  Implementation with the developer  Design research  Branding and graphic development  Documentation  User guides 1/9/2016UI & UX Engineering17
  • 18. UI evaluation  Some evaluation of a user interface design should be carried out to assess its suitability.  Full scale evaluation is very expensive and impractical for most systems.  Ideally, an interface should be evaluated against a usability specification. However, it is rare for such specifications to be produced. 1/9/2016UI & UX Engineering18
  • 19. Evaluation techniques  Questionnaires for user feedback.  Video recording of system use and subsequent tape evaluation.  Instrumentation of code to collect information about facility use and user errors.  The provision of code in the software to collect on-line user feedback. 1/9/2016UI & UX Engineering19
  • 20. Difference between UI and UX  UI refers to the term ‘User Interface’ and UX stands for ‘User Experience’.  Both are crucial to a product and work closely together.  But the roles of them are different.  UX design is more analytical and technical field.  UI design is closer to graphic design. 1/9/2016UI & UX Engineering20
  • 21. Similarities between UI & UX  Have a primary objective of improving customer satisfaction.  Focus on the user and his/her interaction with a product/service.  Can be applied to any product. 1/9/2016UI & UX Engineering21
  • 22. THANK YOU 1/9/2016UI & UX Engineering22