SlideShare a Scribd company logo
UX Design Fundamentals
Muhammad Ishfaq
Agenda
What is UX?
What is UX?
User experience is a term used to describe the overall experience and satisfaction a user
has when using a product or system. It most commonly refers to a combination of
software and business topics, such as selling over the web, but it applies to any result of
interaction design.
User Goals & Business Goals
Users always want something i.e info,
product or service
Facebook for fun
Linkedin for Professional Networking
Youtube for learning, fun and
professional
Every business has a reason to create
website/app
Money
Brand Awareness
New Member to community
Alignment User & Business Goals
Identify user problems and try to overcome
without harming business goals.
Providing an acceptable solution to user which
don’t ignore business goal and technological
constraints.
It involves a process:
Research to understand the users
Development of ideas (to solve users’ needs)
Clarity about needs of the business
Development of Solutions & measurement
Demo to client
UX Design (UXD)
The 5 Main Ingredients of UX
The 5 Main Ingredients of UX
Any one of these 5 Ingredients could
have a Crash Course of its own.
So I will be oversimplifying a bit.
How to Understand Users
"never blame the user"
How to Understand Users?
What is User Research? (Do it early, do it often)
How to Ask Questions (open, leading, closed/Direct)
User experiments
Intrusive surveys (leading to statistical analysis on usage and then deriving UX elements)
Creating User Personas
Designing for Devices
How to Ask Questions from users
1. Open Questions
This allows for a wide range of answers, and works well
when you want all the feedback you can get.
2. Leading Questions
This narrows the answers to a certain type.
3. Closed/Direct Questions
This type of question offers a choice. Yes or no.
Sample of User Persona
Designing for Devices (A user point of view)
Step 1: How does it like to be touched? (With your finger or your mouse)
Step 2: Starting from small resolution.
Step 3: What special powers does this device have?
Step 4: Consider the software / Operating system and their conventions.
Step 5: Be responsive.
Step 6: Think about more than one screen at a time.
Design Patterns
A design is not necessarily good just because it’s common. To be a “good” Design
Pattern, a solution must be common and usable.
Example:
Facebook’s “hamburger” button — which represents the hidden menu in many mobile
apps — has started appearing on full-size websites that have plenty of space for a menu.
It’s common because hiding the menu is easier than designing a nice one, not because
the results are better.
Information Architecture
Information Architecture
What is Information Architecture?
Flat or Deep Architecture
User Stories & Types of Information Architecture
What is a Wireframe?
Information Architecture
Ux design-fundamentals
What is WireFrame?
What is WireFrame?
1) Wireframes are not a basic sketch.
2) Good wireframes take time.
3) Wireframes aren’t presented in phases.
4) Wireframes should be taken seriously.
5) Wireframes are not meant for display.
WireFrame (Sample)
Visual Design Principles
Visual Weight, Contrast & Depth
Color has meanings
Line Tension & Edge Tension
Alignment & Proximity
Functional Layout Design
1. Visual Hierarchy & Patterns
2. Browsing vs. Searching vs. Discovery
3. The Axis of Interaction (Example)
4. Forms, Primary & Secondary Buttons
5. Calls-to-Action, Instructions & Labels (VERB + BENEFIT + URGENT TIME or PLACE)
Z-Pattern
F-Pattern
Value Addition in Confiz
UX process in Confiz
Strengthening UX Studio
Early Involvement of UX Studio
Addition in Service Portfolio
Uplifting Experience of On Going Project
UX Consultancy
Thanks for your time
Any Questions?
Useful links
http://www.goodui.org/
http://zurb.com/patterntap
http://www.mobile-patterns.com/
https://prezi.com/aafmvya6bk7t/understanding-information-architecture/
http://thehipperelement.com
http://designhooks.com/

More Related Content

PDF
UX design
PDF
UI UX in depth
PDF
What is UX?
PDF
What is UX?
PPTX
Fundamentals of UX Design
PDF
Good UX Bad UX
PPTX
The Importance of UX
PDF
What is a User Experience?
UX design
UI UX in depth
What is UX?
What is UX?
Fundamentals of UX Design
Good UX Bad UX
The Importance of UX
What is a User Experience?

What's hot (20)

PDF
UX/UI Design and How It Works
PDF
UX/UI Introduction
PDF
Simple Steps to UX/UI Web Design
PPTX
What is UX design?
PPTX
UX/UI design process - Studio CreativeMe
PDF
Ux design process
PDF
UX Design + UI Design: Injecting a brand persona!
PDF
Ui vs UX design
PPTX
UI UX Introductory session
PDF
UX/UI Design 101
PDF
What is UX Design?
PDF
UX Lesson 1: User Centered Design
PPTX
i/o extended: Intro to <UX> Design
PPTX
UI vs UX workshop
PPTX
UI/UX Fundamentals
PDF
Ux is not UI
PDF
UX RULES: 10 ESSENTIAL PRINCIPLES
PPTX
"What Are the Key Differences between UI and UX Design?"
PDF
How to Find a Good UI/UX Designer (or be one!)
UX/UI Design and How It Works
UX/UI Introduction
Simple Steps to UX/UI Web Design
What is UX design?
UX/UI design process - Studio CreativeMe
Ux design process
UX Design + UI Design: Injecting a brand persona!
Ui vs UX design
UI UX Introductory session
UX/UI Design 101
What is UX Design?
UX Lesson 1: User Centered Design
i/o extended: Intro to <UX> Design
UI vs UX workshop
UI/UX Fundamentals
Ux is not UI
UX RULES: 10 ESSENTIAL PRINCIPLES
"What Are the Key Differences between UI and UX Design?"
How to Find a Good UI/UX Designer (or be one!)
Ad

Viewers also liked (20)

PDF
How UX design is done
PDF
The Soft Skills That Get You Paid | UX Design
PDF
MULTIPLAYER UX DESIGN
PDF
The power of the dark side - Dark patterns and Mobile UX Design
PDF
The prehistory of UX design
PDF
Fórum 2016 - UX Design to increase conversion. The Hubspot way.
PDF
On Echo chambers, Dead loops, Product design and UX
PDF
What is UX?
PDF
Ux for Mobile Developers
PPTX
UI/UX Design Course Presentation
PDF
UX Design for the Responsive Web - UX London 2014 Workshop
PDF
What the #$%@ is UX Design?
PDF
Mastering UX Design: Learning the basics for future success
PDF
UX Design for Mobile Apps
PDF
Introduction to UX Design
PDF
Best practices for UI/UX in eCommerce
PDF
Elements of UX Design
PDF
The UX Design Pocess in Scrum by John Pagonis and Sotiris Sotiropoulos
PDF
UX Design Process 101: Where to start with UX
PDF
Stop guessing colors! A system to help you build a UX Design color palette.
How UX design is done
The Soft Skills That Get You Paid | UX Design
MULTIPLAYER UX DESIGN
The power of the dark side - Dark patterns and Mobile UX Design
The prehistory of UX design
Fórum 2016 - UX Design to increase conversion. The Hubspot way.
On Echo chambers, Dead loops, Product design and UX
What is UX?
Ux for Mobile Developers
UI/UX Design Course Presentation
UX Design for the Responsive Web - UX London 2014 Workshop
What the #$%@ is UX Design?
Mastering UX Design: Learning the basics for future success
UX Design for Mobile Apps
Introduction to UX Design
Best practices for UI/UX in eCommerce
Elements of UX Design
The UX Design Pocess in Scrum by John Pagonis and Sotiris Sotiropoulos
UX Design Process 101: Where to start with UX
Stop guessing colors! A system to help you build a UX Design color palette.
Ad

Similar to Ux design-fundamentals (20)

PPT
Usability principles 1
PPTX
The UX Toolbelt for Developers
PPTX
World Usability Day 2014 - UX Toolbelt for Developers
PPTX
User Experience Masterclass 101 with Mark Swaine
PPT
User Experience & Design…Designing for others…UED
PPTX
The UX Toolbelt for Developers
PPT
User Experience Distilled
PPTX
UI/UX Design
PDF
What ux is
PDF
UI DESIGN.pdf
PPTX
User Interface Analysis and Design
PPT
Building for People: 5 Practical Tip for Greating Great UX
DOCX
Importance of apps in marketing strategy my perspective - Ankit Shard
PPT
User Interface Design For Programmers
PPTX
Ux Overview
DOCX
Embry-Riddle Campus Solutions UX Design
PDF
Usability Presentation - IIS Brownbag 2013
PPTX
HoytUX Design Process 2016
PPT
User experience & design part 3
PDF
Uxpin web ui design patterns 2014
Usability principles 1
The UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
User Experience Masterclass 101 with Mark Swaine
User Experience & Design…Designing for others…UED
The UX Toolbelt for Developers
User Experience Distilled
UI/UX Design
What ux is
UI DESIGN.pdf
User Interface Analysis and Design
Building for People: 5 Practical Tip for Greating Great UX
Importance of apps in marketing strategy my perspective - Ankit Shard
User Interface Design For Programmers
Ux Overview
Embry-Riddle Campus Solutions UX Design
Usability Presentation - IIS Brownbag 2013
HoytUX Design Process 2016
User experience & design part 3
Uxpin web ui design patterns 2014

Recently uploaded (20)

PDF
Urban Design Final Project-Context
PPTX
Wisp Textiles: Where Comfort Meets Everyday Style
PPTX
rapid fire quiz in your house is your india.pptx
PPTX
An introduction to AI in research and reference management
PDF
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PPTX
Media And Information Literacy for Grade 12
PPTX
12. Community Pharmacy and How to organize it
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PPTX
areprosthodontics and orthodonticsa text.pptx
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PPTX
6- Architecture design complete (1).pptx
PPTX
joggers park landscape assignment bandra
PDF
The Advantages of Working With a Design-Build Studio
DOCX
The story of the first moon landing.docx
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PPT
UNIT I- Yarn, types, explanation, process
PPTX
Entrepreneur intro, origin, process, method
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
Urban Design Final Project-Context
Wisp Textiles: Where Comfort Meets Everyday Style
rapid fire quiz in your house is your india.pptx
An introduction to AI in research and reference management
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
DOC-20250430-WA0014._20250714_235747_0000.pptx
pump pump is a mechanism that is used to transfer a liquid from one place to ...
Media And Information Literacy for Grade 12
12. Community Pharmacy and How to organize it
YV PROFILE PROJECTS PROFILE PRES. DESIGN
areprosthodontics and orthodonticsa text.pptx
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
6- Architecture design complete (1).pptx
joggers park landscape assignment bandra
The Advantages of Working With a Design-Build Studio
The story of the first moon landing.docx
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
UNIT I- Yarn, types, explanation, process
Entrepreneur intro, origin, process, method
BRANDBOOK-Presidential Award Scheme-Kenya-2023

Ux design-fundamentals

  • 4. What is UX? User experience is a term used to describe the overall experience and satisfaction a user has when using a product or system. It most commonly refers to a combination of software and business topics, such as selling over the web, but it applies to any result of interaction design.
  • 5. User Goals & Business Goals Users always want something i.e info, product or service Facebook for fun Linkedin for Professional Networking Youtube for learning, fun and professional Every business has a reason to create website/app Money Brand Awareness New Member to community
  • 6. Alignment User & Business Goals Identify user problems and try to overcome without harming business goals. Providing an acceptable solution to user which don’t ignore business goal and technological constraints.
  • 7. It involves a process: Research to understand the users Development of ideas (to solve users’ needs) Clarity about needs of the business Development of Solutions & measurement Demo to client UX Design (UXD)
  • 8. The 5 Main Ingredients of UX
  • 9. The 5 Main Ingredients of UX Any one of these 5 Ingredients could have a Crash Course of its own. So I will be oversimplifying a bit.
  • 10. How to Understand Users "never blame the user"
  • 11. How to Understand Users? What is User Research? (Do it early, do it often) How to Ask Questions (open, leading, closed/Direct) User experiments Intrusive surveys (leading to statistical analysis on usage and then deriving UX elements) Creating User Personas Designing for Devices
  • 12. How to Ask Questions from users 1. Open Questions This allows for a wide range of answers, and works well when you want all the feedback you can get. 2. Leading Questions This narrows the answers to a certain type. 3. Closed/Direct Questions This type of question offers a choice. Yes or no.
  • 13. Sample of User Persona
  • 14. Designing for Devices (A user point of view) Step 1: How does it like to be touched? (With your finger or your mouse) Step 2: Starting from small resolution. Step 3: What special powers does this device have? Step 4: Consider the software / Operating system and their conventions. Step 5: Be responsive. Step 6: Think about more than one screen at a time.
  • 15. Design Patterns A design is not necessarily good just because it’s common. To be a “good” Design Pattern, a solution must be common and usable. Example: Facebook’s “hamburger” button — which represents the hidden menu in many mobile apps — has started appearing on full-size websites that have plenty of space for a menu. It’s common because hiding the menu is easier than designing a nice one, not because the results are better.
  • 17. Information Architecture What is Information Architecture? Flat or Deep Architecture User Stories & Types of Information Architecture What is a Wireframe?
  • 21. What is WireFrame? 1) Wireframes are not a basic sketch. 2) Good wireframes take time. 3) Wireframes aren’t presented in phases. 4) Wireframes should be taken seriously. 5) Wireframes are not meant for display.
  • 23. Visual Design Principles Visual Weight, Contrast & Depth Color has meanings Line Tension & Edge Tension Alignment & Proximity
  • 24. Functional Layout Design 1. Visual Hierarchy & Patterns 2. Browsing vs. Searching vs. Discovery 3. The Axis of Interaction (Example) 4. Forms, Primary & Secondary Buttons 5. Calls-to-Action, Instructions & Labels (VERB + BENEFIT + URGENT TIME or PLACE)
  • 28. UX process in Confiz Strengthening UX Studio Early Involvement of UX Studio Addition in Service Portfolio Uplifting Experience of On Going Project UX Consultancy
  • 29. Thanks for your time Any Questions?

Editor's Notes

  • #3: Most commonly, however the specific term ‘user experience’ is applied to that of software, web applications and digital devices whereas the more general user-product experiences are referred to as ‘experience design”.
  • #5: Many people mistakenly think that “UX” means a user’s experience, but it is actually about “doing” the process of User Experience Design. Most commonly, however the specific term ‘user experience’ is applied to that of software, web applications and digital devices whereas the more general user-product experiences are referred to as ‘experience design.’
  • #6: When you start a new UX project, before you design anything, you need to understand your goals. The real test of a UX designer is how well you can align those goals so the business benefits when the user reaches their goal. YouTube makes money via ads, and users want to find good videos. Therefore, putting ads in the videos (or on the same page) makes sense. But more than that, making it easy to search for videos and find similar videos will get users to watch more, which makes YouTube more money. Facebook users need fun on the other hand Advertisements and Paid campaign are source of money Linkedin is used for Professional Networking for users on the other hand linkedin earns money from Premium Services
  • #7: YouTube makes money via ads, and users want to find good videos.
  • #8: UX Design (also sometimes called UXD) involves a process very similar to doing science: we do research to understand the users, we develop ideas to solve the user's needs — and the needs of the business — and we build and measure those solutions in the real world to see if they work. http://thehipperelement.com/post/71886924188/daily-ux-crash-course-1-of-31
  • #10: User Psychology: What is the user’s motivation to be here in the first place? How does this make them feel? How much work does the user have to do to get what they want? What habits are created if they do this over and over? What do they expect when they click this? Are you assuming they know something that they haven’t learned yet? Is this something they want to do again? Why? How often? Are you thinking of the user’s wants and needs, or your own? How are you rewarding good behaviour? 2) Usability: Usability allows people to easily accomplish their goals. UX design covers more than that, it’s about giving people a delightful and meaningful experience. Satisfaction ought to be the norm, and delight ought to be the goal Focus on making it easy to be happy, and usability, user-experience and greatness will come all by itself Questions to focus: Could you get the job done with less input from the user? Are there any user mistakes you could prevent? (Hint: Yes, there are.) Are you being clear and direct, or is this a little too clever? Is it easy to find (good), hard to miss (better), or subconsciously expected (best)? Are you working with the user’s assumptions, or against them? Have you provided everything the user needs to know? Could you solve this just as well by doing something more common? Are you basing your decisions on your own logic or categories, or the user’s intuition? How do you know? If the user doesn’t read the fine print, does it still work/make sense? 3) Design UX, design is how it works, and it’s something you can prove; it’s not a matter of style. Do users think it looks good? Do they trust it immediately? Does it communicate the purpose and function without words? Does it represent the brand? Does it all feel like the same site? Does the design lead the user’s eyes to the right places? How do you know? Do the colours, shapes, and typography help people find what they want and improve usability of the details? Do clickable things look different than non-clickable things? 4) Copywriting Brand copy supports the image of the company Does it sound confident and tell the user what to do? Does it motivate the user to complete their goal? Is that what we want? Is the biggest text the most important text? Why not? Does it inform the user or does it assume that they already know what its about? Does it reduce anxiety? Is it clear, direct, simple, and functional? 5) Analysis Analysis is the main thing that separates UX from other types of design, and it makes you extremely valuable. It literally pays to be good at it. So, ask yourself: Are you using data to prove that you are right, or to learn the truth? Are you looking for subjective opinions or objective facts? Have you collected information that can give you those types of answers? Do you know why users do that, or are you interpreting their behaviour? Are you looking at absolute numbers, or relative improvements? How will you measure this? Are you measuring the right things? Are you looking for bad results too? Why not? How can you use this analysis to make improvements?
  • #13: Open Questions — “How would you describe this xyz project?” — This allows for a wide range of answers, and works well when you want all the feedback you can get. Leading Questions — “Which features you like the most?” — This narrows the answers to a certain type. Closed/Direct Questions — “Which data presentation model is better, Tabular or graphical?” — This type of question offers a choice. Yes or no. subjective research: Interviews , Observation, Focus Groups, Surveys , Card-Sorting, Google Ask the same questions, the same way, to everyone. Avoid interpreting questions or suggesting answers. People might lie to avoid embarrassment or if it seems like you prefer a particular answer. Take notes or record the interview. Do not rely on your memory, ever.
  • #14: Personas are ‘fictional’ characters. It describes the goals, expectations, motivations, and behaviour of real people. Why do they come to your site? What are they looking for? What makes them nervous? And so on.
  • #15: we spend more time on them and location becomes a factor Step 4: Consider the software. “Mac vs. PC” is more than a cute ad campaign. Read through the UX guidelines before you start. Also, iOS7 or Windows 8 look different than iOS6 or Windows Vista. Step 5: Be responsive. Is it on the web? Does it support a few different types of phones? What if Apple makes a new iPhone that is a little different?
  • #18: The Structural design of information Systems, interactive services, and user experience. The organisation, search, and navigation systems that help people to complete tasks, find what they need, and understand what they’ve found. IA is bridge between: Users and content Strategy and Tactics Units and Disciplines Platforms and Channels Research and Practice
  • #19: Useable, Desireable, Accessible, Credible, Findable, Valuable and Useful information. Types of IA include Categories (Big stores like Amazons, Wallmart), Tasks (), Search (news, Blogs, any other big site with a lot of categories etc), Time, (In box of your email) People (Social Media)
  • #20: Sites with a lot of products, like Wal-Mart, often need a deep architecture, otherwise the menus get ridiculous. Sites like YouTube, which only has users and videos to deal with, are usually more “flat”.
  • #22: Wireframe is a technical document that tells how to execute the architect’s plan. Wireframes are 90% thinking, 10% drawing. If a UI developer or UI designer can’t use your “wireframe” yet, it isn’t a wireframe. It’s a sketch. Keep going.
  • #24: The idea of visual weight is fairly intuitive. Some things look “heavier” than others in a layout. They draw your attention more easily. And that idea is valuable as a UX designer. The difference between light things and dark things is called contrast. The more different a light thing is compared to a dark thing, the “higher” the contrast. In the real world, we notice things that are close to us more than things that are far away. ------------------------------------------ Color has meaning. So as a designer we should remain in already described color pattern. The closeness or distance between two objects creates a feeling of those objects being related or unrelated. That distance is called “proximity”.
  • #25: Some designers think visual hierarchy is good because it looks better, but the truth is that it feels better because it is easier to scan. Browsing is when you go to Ikea to look at all the model rooms “just to get ideas” and you walk out with a bunch of random crap anyway. Searching is when you go to Ikea looking for a new sofa that will fit in your absurdly small apartment. Discovery is when you find the sofa you’re looking for, and also buy those clever little nested end-tables because they are so damn clever and nested. As if those are things you need in your life. The Axis of Interaction is the imaginary "edge" your eye follows naturally. Human attention is very limited. We can only focus on one thing at a time, like a squirrel or boobs or Duck Dynasty. So while we’re focusing on one chunk of content, the other chunks of content effectively become invisible.
  • #29: Strengthening UX Studio Trainings, workshops regarding subject UX Design Strategy user experience design User Experience Analysis uxd Flexible Design Skills ux design Content Strategy ue design Personas Presentation best user experience designSketching Workshop best uxdBusiness Analysis & Product Management UX Design Structure best ux designUsability Principles and Testing best ue design Information Architecture user experience designUser Flows uxd Navigation ux designMid-Course Presentations