SlideShare a Scribd company logo

Ux is not UI

•
•
Bruno Mendes
Bruno Mendes

Here I share some thoughts about the difference that exists between User experience (UX) and User Interface (UI).

Related slideshows

UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
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
 
1 of 23
Download to read offline
UX ≠ UI Based on the post UX is not UI by @Erik_UX
“UX is the intangible design of a strategy that brings us to a solution.”
The interface is not the solution. That’s the true heart of the battle between UX and those who only want UI – or don’t know the difference.
User Interface what people use interact the product User Experience how they feel while they do. UI UX
UIUser Interface what people use interact the product User Experience how they feel while they do.UX Technical Emotional
How UX people see UX?
You could be a researcher and persona writer in a senior UX role and never touch an interface design (or even have the skills to)
"Many UX designers have started to re-label themselves […] I think this is partially to help keep them from being marginalized as only interface designers"
UX Designers UX Architects, UX Engineers, or UX Strategists Experience Architect/Engineer/ Strategist equals equals
So what does UX actually mean?
What we want them to see Field research Face to face interviewing Creation and administering of tests Gathering, organizing, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders What they typically see Field research Face to face interviewing Creation and administering of tests Gathering, organizing, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders
UI design is a huge part of UX. Partially because its the visible part of the process
UI
UX is what it does and what it does is solve problems
ID = Interaction design (how the look and feel work, user behavior research) VD = Visual Design (look and feel, visual and graphic design research)
ID + VD = Interface The interface is the result of the “solution design” that came before it.
A skillful interface designer understands the importance of providing the user with a solution to a defined problem.
How you can get to an effective UI
Hypothetical Process 1. Identify the problem We presume the problem has been identified through the user/market/persona research. 2. User Stories User flows and stories are made, then trashed, then made again, then iterated on until the problem flow is clear. 3. Experiments with personas With an idea of ways to solve the problem, some rapid experiments are carried out to validate the assumptions with the personas. 4. Information Architecture Some IA work is done to break out the product/site into the logical areas and hierarchies. 5. Wireframes Various wireframes and sketches are drawn to start to organize where things could go on the screen. 6. Mockups With all the preceding research material and UX work, now mockups with UI included can be made with confidence. 7. Prototypes With mockups and a UI designed, they are user tested and iterated on through some prototypes or experiments. 8. UI Design After the mockups have been vetted, it’s now time to code up the interface – UI Design! 9. Production Once the usability of the UI has been honed, you can move it on to production – the place that people usually think of as the singular UI.
Hypothetical Process Where fits the UI process 1. Identify the problem We presume the problem has been identified through the user/market/persona research. 2. User Stories User flows and stories are made, then trashed, then made again, then iterated on until the problem flow is clear. 3. Experiments with personas With an idea of ways to solve the problem, some rapid experiments are carried out to validate the assumptions with the personas. 4. Information Architecture Some IA work is done to break out the product/site into the logical areas and hierarchies. 5. Wireframes Various wireframes and sketches are drawn to start to organize where things could go on the screen. 6. Mockups With all the preceding research material and UX work, now mockups with UI included can be made with confidence. 7. Prototypes With mockups and a UI designed, they are user tested and iterated on through some prototypes or experiments. 8. UI Design After the mockups have been vetted, it’s now time to code up the interface – UI Design! 9. Production Once the usability of the UI has been honed, you can move it on to production – the place that people usually think of as the singular UI.
So now, what is really UX?
"It’s a huge strategic process that aims to create a product or website that customers/users/visitors are drawn to, find easy to use, and quickly understand. Through the UX work we’ll arrive at the right interface conclusion."
Thank U @bruno2ms Feel free to Share if you like =D

More Related Content

Ux is not UI

  • 1. UX ≠ UI Based on the post UX is not UI by @Erik_UX
  • 2. “UX is the intangible design of a strategy that brings us to a solution.”
  • 3. The interface is not the solution. That’s the true heart of the battle between UX and those who only want UI – or don’t know the difference.
  • 4. User Interface what people use interact the product User Experience how they feel while they do. UI UX
  • 5. UIUser Interface what people use interact the product User Experience how they feel while they do.UX Technical Emotional
  • 7. You could be a researcher and persona writer in a senior UX role and never touch an interface design (or even have the skills to)
  • 8. "Many UX designers have started to re-label themselves […] I think this is partially to help keep them from being marginalized as only interface designers"
  • 9. UX Designers UX Architects, UX Engineers, or UX Strategists Experience Architect/Engineer/ Strategist equals equals
  • 10. So what does UX actually mean?
  • 11. What we want them to see Field research Face to face interviewing Creation and administering of tests Gathering, organizing, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders What they typically see Field research Face to face interviewing Creation and administering of tests Gathering, organizing, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders
  • 12. UI design is a huge part of UX. Partially because its the visible part of the process
  • 13. UI
  • 14. UX is what it does and what it does is solve problems
  • 15. ID = Interaction design (how the look and feel work, user behavior research) VD = Visual Design (look and feel, visual and graphic design research)
  • 16. ID + VD = Interface The interface is the result of the “solution design” that came before it.
  • 17. A skillful interface designer understands the importance of providing the user with a solution to a defined problem.
  • 18. How you can get to an effective UI
  • 19. Hypothetical Process 1. Identify the problem We presume the problem has been identified through the user/market/persona research. 2. User Stories User flows and stories are made, then trashed, then made again, then iterated on until the problem flow is clear. 3. Experiments with personas With an idea of ways to solve the problem, some rapid experiments are carried out to validate the assumptions with the personas. 4. Information Architecture Some IA work is done to break out the product/site into the logical areas and hierarchies. 5. Wireframes Various wireframes and sketches are drawn to start to organize where things could go on the screen. 6. Mockups With all the preceding research material and UX work, now mockups with UI included can be made with confidence. 7. Prototypes With mockups and a UI designed, they are user tested and iterated on through some prototypes or experiments. 8. UI Design After the mockups have been vetted, it’s now time to code up the interface – UI Design! 9. Production Once the usability of the UI has been honed, you can move it on to production – the place that people usually think of as the singular UI.
  • 20. Hypothetical Process Where fits the UI process 1. Identify the problem We presume the problem has been identified through the user/market/persona research. 2. User Stories User flows and stories are made, then trashed, then made again, then iterated on until the problem flow is clear. 3. Experiments with personas With an idea of ways to solve the problem, some rapid experiments are carried out to validate the assumptions with the personas. 4. Information Architecture Some IA work is done to break out the product/site into the logical areas and hierarchies. 5. Wireframes Various wireframes and sketches are drawn to start to organize where things could go on the screen. 6. Mockups With all the preceding research material and UX work, now mockups with UI included can be made with confidence. 7. Prototypes With mockups and a UI designed, they are user tested and iterated on through some prototypes or experiments. 8. UI Design After the mockups have been vetted, it’s now time to code up the interface – UI Design! 9. Production Once the usability of the UI has been honed, you can move it on to production – the place that people usually think of as the singular UI.
  • 21. So now, what is really UX?
  • 22. "It’s a huge strategic process that aims to create a product or website that customers/users/visitors are drawn to, find easy to use, and quickly understand. Through the UX work we’ll arrive at the right interface conclusion."
  • 23. Thank U @bruno2ms Feel free to Share if you like =D