SlideShare uma empresa Scribd logo
1 de 27
Baixar para ler offline
Hello! Welcome to
User Experience
Shrutee Aneja - UX/UI Lead
April 5th 2020
1
2
I. User Experience (UX)
II. User Interface (UI)
III. User Expérience (UX) vs User Interface (UI)
IV. Solving problem the UX way
V. Integrating UX Design Process into Product life Cycle
VI. Methods of UX Process
VII. Integrating UX into Agile Development
VIII. Good UX vs Bad UX
IX. Benefits of the UX Design Process
X. UX design requirements, When & Why?
Agenda Embedding User Experience
in Product Lifecycle
Agenda
3
What is
User Experience
Design (UX)?
4User Experience (UX/UCD)
User experience" surrounds all aspects of the end-user's interaction with the company, its services, and its products.
It includes all the users' emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before,
during and after use.
UX Designers consider the Why, What and How of Product Use
Elements of UX/UCD:
• Active involvement of Users
• Clear Understanding of User Requirements, Task and Environments
• Allocation of Function between Users and Technology
• Iteration of Design Solutions
• Validation Testing with Users
User Experience is about Measuring and Improving:
• Effectiveness: Can user achieve what they need by using the product
• Ease of Learning: How fast can user who have never seen the interface learn to use it
• Efficiency of Use: How fast a user can complete a task
• Memorability: Can user remember enough to reuse the interface effectively
• Error prevention: Can user complete task without making errors
• Satisfaction: How much do users like using the product
5User Interface (UI)
User interface design or UI design refers to the visual layout of the elements that a user might interact with in a website, or technological product.
It focusses on the look, feel and presentation of a product
Parameters for the UI:
• Font Family
• Style of icons and images
• Color Schemes
• Highlighting the important things on screen
• Differentiating things we want the user to click versus things that can be clicked
• Replacing text with icons or images,
• Background textures
UI Developer
• A UI Developer is the bridge between presentation layer and the backend layer, who
understands both and creates the translational layer in between, so that both lives up
to its full potential and are not compromised because of each other.
• They create user interface by tech stack and frameworks such as, HTML, CSS,
JavaScript, Angular, ReactJS, VueJS, Typescript, AJAX, etc.
6User Experience (UX) vs User Interface (UI)
“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI is only small part of UX
A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper match
on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.”
Human –Centered Design
User Experience (UX)
ANALYTICAL & CREATIVE THINKING
User Interface (UI)
CREATIVE THINKING
Data
Research
Analysis
Personas
Task Flows
Scenarios
Information Architecture
Interaction Design
Wireframes
Low-Fedility Prototype
Testing
Visual Designer
Interface Design
Typography
Colours
Layout
Branding
Alignment
Consistency
Contrast
High=Fedility Prototype
7User Experience (UX) vs User Interface (UI) Example
8When & Why to Apply UX Design
• Ideally early or on Project Start.
• UX is also valuable at latter project stages and in future release.
When
• Build the right thing for right User
• Fulfill the user’s needs
• Improve efficiency
• Create Business Opportunities
Why
9Solving problem the UX way
Persona
Strategy
Problem Objectives
Features
Solution
Persona
Problem
Strategy
Objective
Features
Solution
Who has the Problem?
What is the Problem?
How will we solve the problem?
What will the solution achieve?
What features are required to accomplish the objectives?
What will the product look like and how it will function?
10Integrating UX Design Process into Product life Cycle
• Project Kick off
• Problem Statement
• Project Vision/Goal
• Brand Strategy
• Project Priority
Strategy Analysis
• Brainstorming
• Information Architecture
• Whiteboard
• Paper Prototype
• Low Fidelity Wireframing (SOS)
• Concept Testing
• Navigation/Screen Flow
• High Fidelity Design/Mockup
Design
• Front End
• Backend
• Quality Assurance/Testing
• Heuristic Evaluation
Implementation
• Beta Launch
• User Testing
Deployment
• Stakeholder Discussion
• Business Requirement
• User Analysis (SOS)
• User Research (SOS)
• User Roles
• User Personas
• Work/Task Flows
• User Stories
Collaborators
• Stakeholder
• Product Manager
Collaborators
• Stakeholder
• Sales
• Project Manager
• Product Manager
• Product Owner/BA
• UX Designer
Collaborators
• Project Manager
• Product Manager
• Product Owner/BA
• UX Designer
• UI Designer
• Development
• Quality Assurance
Collaborators
• Project Manager
• Product Manager
• Product Owner/BA
• UX Designer
• Development
• Quality Assurance
Collaborators
• Stakeholder
• Project Manager
• Product Manager
• Product Owner/BA
• UX Designer
• Development
• Quality Assurance
11Methods of UX Process |
User Roles and Personas
• A user persona is a fictional representation of your ideal customer. represent the needs of a larger group’s goals, requirements, and personal preferences.
• Personas describe customers while roles describe relationships between customers and the product or service.
A Persona is:
• Benchmark for User Stories and UX design
• Help everybody in the team have a common understanding about target user
• Help in developing informed wireframes and site architecture
• It is a “face” to the user story,
A Persona’s role is:
• Persona name, Photo
• Demographics (gender, age, location, marital status, family)
• A short description about the user
• The daily objectives and behaviors/Goals and Task
• Frustrations (or “pain points”)
• Technology
• other products the user likes
What should be included in a Persona?
9 basic steps to go through when developing user experience
• Roles correspond to specific classes of visitors interacting with your site. They are defined by their relationship to your Web site and call to action.
A User Role is:
12Methods of UX Process Contd.
Task Flow / Work Flow
• High-level steps that a User would take to get to a specific goal or end point
Eg: such as creating an account or going through a checkout process
A Task Flow is:
• Helps you built your product in a logical way (Navigation and Action)
• Helps in Content Strategy and Site Structure
• Helps in Wireframing and Prototyping
• Helps to improve User Experience
A Task Flow’s role is:
13Methods of UX Process Contd.
User Stories
• Descriptions of who the user is, what they want, and why
• It describes something that the user wants to accomplish by using the software product.
A User Story is:
• Help keep users always in the center of the design process
• Help to achieve cross-team clarity
• Help in defining the entire product
• Safeguards Against Feature Creep
A User Story role is:
• As a < type of user >, I want < some goal > so that < some reason >.
• Details can be added by two different ways
• By splitting a user story into multiple, smaller user stories.
• By adding “conditions of satisfaction” (Acceptance criteria)
User Story written in following format:
14Methods of UX Process Contd.
Information Architecture
• A science of organizing and structuring content of the Product/application
• IA may also include navigation, application functions and behaviors, content, and flows.
• Factors that are valued by information architects: Mental Modal, Cognitive Load, Decision Making
Information architecture (IA) is:
• Increases user satisfaction
• Help conversions or bring more sales
• Reduces user errors
• Decreases training costs
• Reduces customer support costs and time
A Good Information Architecture role is:
• Organization Schemes and Structures: How you categorize and structure information
• Labeling systems: How you represent information
• Navigation systems: How users browse or move through information
• Searching systems: How users look for information
Information architecture (IA) includes:
15Methods of UX Process Contd.
Whiteboard/Paper Prototype
• A prototype is an early sample, model or release of a product created to test a concept or process.
Prototype is:
• Easy to change
• Cost-effective
• No design or coding skills needed
• Rapid evaluation and testing
Paper Prototype Benefits:
• Early-stage conceptualizing in user-centered design process.
• Allows quickly visualize and test various ideas.
Paper Prototype is:
• Low-Fidelity Prototypes
• Paper Prototypes
• Wireframes
• High-Fidelity Prototypes
• Interactive prototypes
• Coded prototypes
Types of Prototype:
16Methods of UX Process Contd.
Navigation Flow
• Navigation plays an integral role in how users interact with your products.
• It is how your user can get from point A to point B and even point C in the least frustrating way possible.
• Navigation is about Where I am , What can I do, Where I can go from here
Navigation Flow is:
• Enhance a user’s understanding
• Give them confidence using your product
• Provide credibility to a product
• Tells users their location
• Provides access to information
Good Navigation can:
• Hamburger menu
• Tabs
• Vertical navigation
• Call-to-action button
• Breadcrumbs
Common Navigation Pattern:
17Methods of UX Process Contd.
High Fidelity Design/Mockup
• It is a mid to high fidelity static picture
• It is what your final project appearance and user experience will look like.
Mockup is:
• Mockups are realistic.
• Mockups are convincing
• No mockup – no markup estimate!
• No mockup – no HTML coding!
• No mockup – no investors!
• No mockup – no users!
Mockups Benefits:
• Content layout
• Color scheme
• Typography
• Spacing
• Navigation visuals
• Icons
• Image
Mockup Consist of:
Heuristic
Evaluation
Principles
Visibility of
system status
Match
between
system and the
real world
User control
and freedom
Consistency
and standards
Error
prevention
Recognition
rather than
recall
Flexibility and
efficiency of
use
Aesthetic and
minimalist
design
Help users
recognize,
diagnose, and
recover from
errors
Help and
documentation
18Methods of UX Process Contd.
Heuristic Evaluation
• It is a way to test whether a website is user friendly against the set of thumb rules
• It is a method for finding both major and minor problems in a user interface.
• Identify each issue and any associated recommendations or solution.
Heuristic Evaluation is:
• Improves a product’s UX
• Reduce mental effort needed to make decision
• Fast and accurate
• Help with problem solving
• Cost Efficient
Heuristic Evaluation Benefits:
• When you need to pinpoint the problems within your product
• Early stages of your design
• Before user testing
• Along with other tests
• Before redesigning
• Before releasing software
When to Use Heuristic Evaluation:
19Methods of UX Process Contd.
Usability Testing
• Process which enables you to evaluate your product or service with real users and enables you to create human-centric products.
Usability Testing is:
• Saves time for both the company and users
• Provides a better user experience
• Offers insight into how satisfied users are with the product
• Identifies problem areas within the product which may not have been obvious otherwise
• Provides an unbiased examination of the product
Usability Testing Benefits:
• Heuristic evaluation, relies on usability experts rather than target users whereas,
Usability testing involves actual target users and matches real-world experiences.
Difference between Heuristic Evaluation and Usability Testing?
• A/B testing
• Guerilla testing
• Eye Tracking
• Remote testing
Types of Usability Testing:
20Integrating UX into Agile Development
• UX should be included in a project as early as the ideation phase and involved through the project’s life cycle.
• UX should work in close cooperation with the product team and the stakeholders.
• Set clear roles and responsibilities
• Have design work on sprints in advance
• Plan adequately
• Have a developer present during UX deliverable discussions
Agile UX Process:
• Better understanding of the problem.
• Allows rapid testing and validation of story concepts before time consuming coding.
• Provides a clear, sociable visual representation of the project vision.
• Provides usability by stealth.
• Improves basis for estimation.
• Mitigates project risk.
Combined with Agile, User-centered design has the following benefits:
• Agile is usually a development-centric philosophy, espousing engagement with the business and using stories and code as the model for communication.
• User-centered design extends the approach, it uses visualization to articulate the solution.
• Through collaborative workshops, creating Persona, User stories then translating them into low-fidelity prototypes enables iterations to be showcased on a daily
basis. Engaging all stakeholders in the process ensures that when the developers start cutting code the focus will be on ensuring code quality,
Agile and UX:
21Good UX vs. Bad UX
Design Defect Information Architecture defect (Labelling)
22Good UX vs. Bad UX Contd.
23Good UX vs. Bad UX Contd.
Why it is bad UX
Looks more suspicious and awkward
Its not deleting, its blocking the message, may be they
can call it obscure this message”
24Benefits of the UX Design Process
More
Satisfied
Customers
Reduce
Design Time
And Cost
Reduced
Development
Time
Reduce Design
Defects
Reduction In
Support Costs
Increased
Conversion
And Revenue
User-centred design improves the customer experience associated with a product or a service.
When a project team is united in serving the needs of their users, they often find that they develop a far better solution as they are focused on a clear direction
throughout the project life-cycle.
25Less User Centered Design VS More User Centered Design
26UX design requirements, When & Why?
• it’ll help in flushing out the requirements. The diagram starts to identify what the user and the system need to do.
• It delineates a repeatable pattern of activity. It answers the question: “How do I _____________”.
Work Flow/Task Flow (Early Stage):
• They drive design decisions by taking common user needs and bringing them to the forefront of planning before design has actually started.
• Each primary persona requires a different user interface.
• Personas provide the team with a shared understanding of users in terms of goals and capabilities.
Defined User Roles & Persona (Early Stage):
• User Stories play a vital role in design process, It keeps users always in the center.
• Help designers focus only on the features that help users achieve there goals
• For each user story, it should be broken down into smaller, more specific stories.
• User stories help prevent feature creep and design dead-ends.
• They provide an essential foundation for the consequent stages of design.
User Stories (Early Stage):
Thank You
27

Mais conteúdo relacionado

Mais procurados

What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design GDGKuwaitGoogleDevel
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideBabajide Aroyewun
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui designShweta Joshi
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory sessionSooraj P R
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini CourseDigital Snack
 

Mais procurados (20)

UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
Ux & ui
Ux & uiUx & ui
Ux & ui
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
 

Semelhante a UX/UI Introduction

User Centered Design
User Centered DesignUser Centered Design
User Centered DesignShawn Calvert
 
UI UX DESIGN.pptx
UI UX DESIGN.pptxUI UX DESIGN.pptx
UI UX DESIGN.pptxRiniyaMary
 
Proof That UI UX Really Works
Proof That UI UX Really WorksProof That UI UX Really Works
Proof That UI UX Really WorksSamer Tallauze
 
Designing Experiences that Drive Consumer Engagement
Designing Experiences that Drive Consumer EngagementDesigning Experiences that Drive Consumer Engagement
Designing Experiences that Drive Consumer EngagementAshley Dzick
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience ExplainedSameer dwivedi
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User ExerienceTanya Zavialova
 
Ux strategy 112315c
Ux strategy 112315cUx strategy 112315c
Ux strategy 112315cBrad Briscoe
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleICS
 
Niiu digital - UX is your secret weapon
Niiu digital - UX is your secret weaponNiiu digital - UX is your secret weapon
Niiu digital - UX is your secret weaponNiiu Digital Inc.
 
What is user experience(ux) & ux designer
What is user experience(ux) & ux designerWhat is user experience(ux) & ux designer
What is user experience(ux) & ux designerMetricoid Technology
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiThanos Makaronas
 
Design Learnings
Design LearningsDesign Learnings
Design LearningsQuikr
 
Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Samantha Bailey
 
Few Words About User Experience Design
Few Words About User Experience DesignFew Words About User Experience Design
Few Words About User Experience DesignVlad Namașco
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team Guilherme Rodrigues
 

Semelhante a UX/UI Introduction (20)

User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
UI UX DESIGN.pptx
UI UX DESIGN.pptxUI UX DESIGN.pptx
UI UX DESIGN.pptx
 
Proof That UI UX Really Works
Proof That UI UX Really WorksProof That UI UX Really Works
Proof That UI UX Really Works
 
Mobile UX-COE
Mobile UX-COEMobile UX-COE
Mobile UX-COE
 
UX Explained
UX ExplainedUX Explained
UX Explained
 
Designing Experiences that Drive Consumer Engagement
Designing Experiences that Drive Consumer EngagementDesigning Experiences that Drive Consumer Engagement
Designing Experiences that Drive Consumer Engagement
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience Explained
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
 
Ux strategy 112315c
Ux strategy 112315cUx strategy 112315c
Ux strategy 112315c
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product Lifecycle
 
Niiu digital - UX is your secret weapon
Niiu digital - UX is your secret weaponNiiu digital - UX is your secret weapon
Niiu digital - UX is your secret weapon
 
User Experience Process
User Experience Process User Experience Process
User Experience Process
 
How to achieve the ux goals
How to achieve the ux goalsHow to achieve the ux goals
How to achieve the ux goals
 
What is user experience(ux) & ux designer
What is user experience(ux) & ux designerWhat is user experience(ux) & ux designer
What is user experience(ux) & ux designer
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful ui
 
Design Learnings
Design LearningsDesign Learnings
Design Learnings
 
Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012
 
What ux is
What ux isWhat ux is
What ux is
 
Few Words About User Experience Design
Few Words About User Experience DesignFew Words About User Experience Design
Few Words About User Experience Design
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team
 

Último

MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 

Último (20)

MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 

UX/UI Introduction

  • 1. Hello! Welcome to User Experience Shrutee Aneja - UX/UI Lead April 5th 2020 1
  • 2. 2 I. User Experience (UX) II. User Interface (UI) III. User Expérience (UX) vs User Interface (UI) IV. Solving problem the UX way V. Integrating UX Design Process into Product life Cycle VI. Methods of UX Process VII. Integrating UX into Agile Development VIII. Good UX vs Bad UX IX. Benefits of the UX Design Process X. UX design requirements, When & Why? Agenda Embedding User Experience in Product Lifecycle Agenda
  • 4. 4User Experience (UX/UCD) User experience" surrounds all aspects of the end-user's interaction with the company, its services, and its products. It includes all the users' emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use. UX Designers consider the Why, What and How of Product Use Elements of UX/UCD: • Active involvement of Users • Clear Understanding of User Requirements, Task and Environments • Allocation of Function between Users and Technology • Iteration of Design Solutions • Validation Testing with Users User Experience is about Measuring and Improving: • Effectiveness: Can user achieve what they need by using the product • Ease of Learning: How fast can user who have never seen the interface learn to use it • Efficiency of Use: How fast a user can complete a task • Memorability: Can user remember enough to reuse the interface effectively • Error prevention: Can user complete task without making errors • Satisfaction: How much do users like using the product
  • 5. 5User Interface (UI) User interface design or UI design refers to the visual layout of the elements that a user might interact with in a website, or technological product. It focusses on the look, feel and presentation of a product Parameters for the UI: • Font Family • Style of icons and images • Color Schemes • Highlighting the important things on screen • Differentiating things we want the user to click versus things that can be clicked • Replacing text with icons or images, • Background textures UI Developer • A UI Developer is the bridge between presentation layer and the backend layer, who understands both and creates the translational layer in between, so that both lives up to its full potential and are not compromised because of each other. • They create user interface by tech stack and frameworks such as, HTML, CSS, JavaScript, Angular, ReactJS, VueJS, Typescript, AJAX, etc.
  • 6. 6User Experience (UX) vs User Interface (UI) “User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI is only small part of UX A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper match on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.” Human –Centered Design User Experience (UX) ANALYTICAL & CREATIVE THINKING User Interface (UI) CREATIVE THINKING Data Research Analysis Personas Task Flows Scenarios Information Architecture Interaction Design Wireframes Low-Fedility Prototype Testing Visual Designer Interface Design Typography Colours Layout Branding Alignment Consistency Contrast High=Fedility Prototype
  • 7. 7User Experience (UX) vs User Interface (UI) Example
  • 8. 8When & Why to Apply UX Design • Ideally early or on Project Start. • UX is also valuable at latter project stages and in future release. When • Build the right thing for right User • Fulfill the user’s needs • Improve efficiency • Create Business Opportunities Why
  • 9. 9Solving problem the UX way Persona Strategy Problem Objectives Features Solution Persona Problem Strategy Objective Features Solution Who has the Problem? What is the Problem? How will we solve the problem? What will the solution achieve? What features are required to accomplish the objectives? What will the product look like and how it will function?
  • 10. 10Integrating UX Design Process into Product life Cycle • Project Kick off • Problem Statement • Project Vision/Goal • Brand Strategy • Project Priority Strategy Analysis • Brainstorming • Information Architecture • Whiteboard • Paper Prototype • Low Fidelity Wireframing (SOS) • Concept Testing • Navigation/Screen Flow • High Fidelity Design/Mockup Design • Front End • Backend • Quality Assurance/Testing • Heuristic Evaluation Implementation • Beta Launch • User Testing Deployment • Stakeholder Discussion • Business Requirement • User Analysis (SOS) • User Research (SOS) • User Roles • User Personas • Work/Task Flows • User Stories Collaborators • Stakeholder • Product Manager Collaborators • Stakeholder • Sales • Project Manager • Product Manager • Product Owner/BA • UX Designer Collaborators • Project Manager • Product Manager • Product Owner/BA • UX Designer • UI Designer • Development • Quality Assurance Collaborators • Project Manager • Product Manager • Product Owner/BA • UX Designer • Development • Quality Assurance Collaborators • Stakeholder • Project Manager • Product Manager • Product Owner/BA • UX Designer • Development • Quality Assurance
  • 11. 11Methods of UX Process | User Roles and Personas • A user persona is a fictional representation of your ideal customer. represent the needs of a larger group’s goals, requirements, and personal preferences. • Personas describe customers while roles describe relationships between customers and the product or service. A Persona is: • Benchmark for User Stories and UX design • Help everybody in the team have a common understanding about target user • Help in developing informed wireframes and site architecture • It is a “face” to the user story, A Persona’s role is: • Persona name, Photo • Demographics (gender, age, location, marital status, family) • A short description about the user • The daily objectives and behaviors/Goals and Task • Frustrations (or “pain points”) • Technology • other products the user likes What should be included in a Persona? 9 basic steps to go through when developing user experience • Roles correspond to specific classes of visitors interacting with your site. They are defined by their relationship to your Web site and call to action. A User Role is:
  • 12. 12Methods of UX Process Contd. Task Flow / Work Flow • High-level steps that a User would take to get to a specific goal or end point Eg: such as creating an account or going through a checkout process A Task Flow is: • Helps you built your product in a logical way (Navigation and Action) • Helps in Content Strategy and Site Structure • Helps in Wireframing and Prototyping • Helps to improve User Experience A Task Flow’s role is:
  • 13. 13Methods of UX Process Contd. User Stories • Descriptions of who the user is, what they want, and why • It describes something that the user wants to accomplish by using the software product. A User Story is: • Help keep users always in the center of the design process • Help to achieve cross-team clarity • Help in defining the entire product • Safeguards Against Feature Creep A User Story role is: • As a < type of user >, I want < some goal > so that < some reason >. • Details can be added by two different ways • By splitting a user story into multiple, smaller user stories. • By adding “conditions of satisfaction” (Acceptance criteria) User Story written in following format:
  • 14. 14Methods of UX Process Contd. Information Architecture • A science of organizing and structuring content of the Product/application • IA may also include navigation, application functions and behaviors, content, and flows. • Factors that are valued by information architects: Mental Modal, Cognitive Load, Decision Making Information architecture (IA) is: • Increases user satisfaction • Help conversions or bring more sales • Reduces user errors • Decreases training costs • Reduces customer support costs and time A Good Information Architecture role is: • Organization Schemes and Structures: How you categorize and structure information • Labeling systems: How you represent information • Navigation systems: How users browse or move through information • Searching systems: How users look for information Information architecture (IA) includes:
  • 15. 15Methods of UX Process Contd. Whiteboard/Paper Prototype • A prototype is an early sample, model or release of a product created to test a concept or process. Prototype is: • Easy to change • Cost-effective • No design or coding skills needed • Rapid evaluation and testing Paper Prototype Benefits: • Early-stage conceptualizing in user-centered design process. • Allows quickly visualize and test various ideas. Paper Prototype is: • Low-Fidelity Prototypes • Paper Prototypes • Wireframes • High-Fidelity Prototypes • Interactive prototypes • Coded prototypes Types of Prototype:
  • 16. 16Methods of UX Process Contd. Navigation Flow • Navigation plays an integral role in how users interact with your products. • It is how your user can get from point A to point B and even point C in the least frustrating way possible. • Navigation is about Where I am , What can I do, Where I can go from here Navigation Flow is: • Enhance a user’s understanding • Give them confidence using your product • Provide credibility to a product • Tells users their location • Provides access to information Good Navigation can: • Hamburger menu • Tabs • Vertical navigation • Call-to-action button • Breadcrumbs Common Navigation Pattern:
  • 17. 17Methods of UX Process Contd. High Fidelity Design/Mockup • It is a mid to high fidelity static picture • It is what your final project appearance and user experience will look like. Mockup is: • Mockups are realistic. • Mockups are convincing • No mockup – no markup estimate! • No mockup – no HTML coding! • No mockup – no investors! • No mockup – no users! Mockups Benefits: • Content layout • Color scheme • Typography • Spacing • Navigation visuals • Icons • Image Mockup Consist of:
  • 18. Heuristic Evaluation Principles Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation 18Methods of UX Process Contd. Heuristic Evaluation • It is a way to test whether a website is user friendly against the set of thumb rules • It is a method for finding both major and minor problems in a user interface. • Identify each issue and any associated recommendations or solution. Heuristic Evaluation is: • Improves a product’s UX • Reduce mental effort needed to make decision • Fast and accurate • Help with problem solving • Cost Efficient Heuristic Evaluation Benefits: • When you need to pinpoint the problems within your product • Early stages of your design • Before user testing • Along with other tests • Before redesigning • Before releasing software When to Use Heuristic Evaluation:
  • 19. 19Methods of UX Process Contd. Usability Testing • Process which enables you to evaluate your product or service with real users and enables you to create human-centric products. Usability Testing is: • Saves time for both the company and users • Provides a better user experience • Offers insight into how satisfied users are with the product • Identifies problem areas within the product which may not have been obvious otherwise • Provides an unbiased examination of the product Usability Testing Benefits: • Heuristic evaluation, relies on usability experts rather than target users whereas, Usability testing involves actual target users and matches real-world experiences. Difference between Heuristic Evaluation and Usability Testing? • A/B testing • Guerilla testing • Eye Tracking • Remote testing Types of Usability Testing:
  • 20. 20Integrating UX into Agile Development • UX should be included in a project as early as the ideation phase and involved through the project’s life cycle. • UX should work in close cooperation with the product team and the stakeholders. • Set clear roles and responsibilities • Have design work on sprints in advance • Plan adequately • Have a developer present during UX deliverable discussions Agile UX Process: • Better understanding of the problem. • Allows rapid testing and validation of story concepts before time consuming coding. • Provides a clear, sociable visual representation of the project vision. • Provides usability by stealth. • Improves basis for estimation. • Mitigates project risk. Combined with Agile, User-centered design has the following benefits: • Agile is usually a development-centric philosophy, espousing engagement with the business and using stories and code as the model for communication. • User-centered design extends the approach, it uses visualization to articulate the solution. • Through collaborative workshops, creating Persona, User stories then translating them into low-fidelity prototypes enables iterations to be showcased on a daily basis. Engaging all stakeholders in the process ensures that when the developers start cutting code the focus will be on ensuring code quality, Agile and UX:
  • 21. 21Good UX vs. Bad UX Design Defect Information Architecture defect (Labelling)
  • 22. 22Good UX vs. Bad UX Contd.
  • 23. 23Good UX vs. Bad UX Contd. Why it is bad UX Looks more suspicious and awkward Its not deleting, its blocking the message, may be they can call it obscure this message”
  • 24. 24Benefits of the UX Design Process More Satisfied Customers Reduce Design Time And Cost Reduced Development Time Reduce Design Defects Reduction In Support Costs Increased Conversion And Revenue User-centred design improves the customer experience associated with a product or a service. When a project team is united in serving the needs of their users, they often find that they develop a far better solution as they are focused on a clear direction throughout the project life-cycle.
  • 25. 25Less User Centered Design VS More User Centered Design
  • 26. 26UX design requirements, When & Why? • it’ll help in flushing out the requirements. The diagram starts to identify what the user and the system need to do. • It delineates a repeatable pattern of activity. It answers the question: “How do I _____________”. Work Flow/Task Flow (Early Stage): • They drive design decisions by taking common user needs and bringing them to the forefront of planning before design has actually started. • Each primary persona requires a different user interface. • Personas provide the team with a shared understanding of users in terms of goals and capabilities. Defined User Roles & Persona (Early Stage): • User Stories play a vital role in design process, It keeps users always in the center. • Help designers focus only on the features that help users achieve there goals • For each user story, it should be broken down into smaller, more specific stories. • User stories help prevent feature creep and design dead-ends. • They provide an essential foundation for the consequent stages of design. User Stories (Early Stage):