Save 37% off PRO during our Black Friday Sale! »

How good UI becomes good UX @GDGlisbon

D80292db63e8f98456643790085db373?s=47 dizparada
March 31, 2017

How good UI becomes good UX @GDGlisbon

D80292db63e8f98456643790085db373?s=128

dizparada

March 31, 2017
Tweet

Transcript

  1. HOW A GOOD UI BECOMES A GOOD UX What is

    UX and how can designers improve it creating effective and aesthetic UIs at same time.
  2. GOOD UI VS BAD UI “If an interface have a

    good visual design it will be simple and easy to use” Common misconceptions
  3. GOOD UI VS BAD UI Craigslist - 60 million users

    ugly beautiful
  4. GOOD UI VS BAD UI Wikipedia - daily average page

    views 267 million ugly beautiful
  5. GOOD UI VS BAD UI Reddit - 542 million monthly

    visitors (234 million unique users) ugly beautiful
  6. GOOD UI VS BAD UI deviantart - 26 million members

    ugly beautiful
  7. GOOD UI VS BAD UI Facebook - 1.86 billion monthly

    active users ugly beautiful
  8. GOOD UI VS BAD UI “If an interface is easy

    to use it has good user experience.” Common misconceptions
  9. GOOD UI VS BAD UI I've clicked on the "mark

    as read" button and this is what happened. ugly beautiful
  10. AESTHETICS IN DESIGN is the last priority on a product

    / service design Design for aesthetics Design for interaction Design for order and structure Design for organization Design for speed Design for reliability
  11. First, you have to create and design a consistent product

    Design for aesthetics Design for interaction Design for order and structure Design for organization Design for speed Design for reliability AESTHETICS IN DESIGN
  12. USER EXPERIENCE is getting in USER’s shoes 1. What problem

    this product /service is trying to solve? 2. Who are my product / service users? 3. What are their (the users) expectations ? 4. What qualities they value ? 5. What do they expect ? 6. How/ When they use the product / service?
  13. USER EXPERIENCE is getting in USER’s shoes User stories “As

    a user , I want this new feature so that could allows me to do….”
  14. USER EXPERIENCE is getting in USER’s shoes The type of

    user your product has. Personas
  15. USER EXPERIENCE is getting in USER’s shoes Task Analysis Observing

    your users and how they interact with your product
  16. USER EXPERIENCE and knowing how to better achieve their needs

    Sitemap Brainstorming Card sorting
  17. USER EXPERIENCE and knowing how to better achieve their needs

    Wireframing Prototyping Sketching
  18. USER EXPERIENCE and knowing how to better achieve their needs

    Page/screen flows
  19. Usability : 10 Heuristics USABILITY & USER EXPERIENCE 1. Visibility

    of system status 2. Match between system and real world 3. User control and freedom 4. Consistency and standards 5. Error prevention
  20. Usability : 10 Heuristics USABILITY & USER EXPERIENCE 6. Recognition

    rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognise, diagnose and recover from errors 10. Help and documentation
  21. USABILITY & USER EXPERIENCE Are both essential to a product

    success • Usability goal is to make an interface simple and easy to use. • Usability tries to minimize the user effort to complete a task. Usability is an important step to achieve a Good User Experience
  22. USABILITY & USER EXPERIENCE Are both essential to a product

    success • User experience goal is to emphasise the ‘feels like home’ sensation.
 • Is when an interface becomes pleasurable. • Is to add value to a product by establishing an emotional connection with the user.
  23. USER EXPERIENCE is about all the process of making a

    successful product
  24. UX & UI better together

  25. UX & UI better together Visual (UI) Design is the

    use of imagery, color, shapes, typography, and form to enhance usability and improve the user experience.
  26. UX & UI better together Visual (UI) Design is an

    important step to achieve a Good User Experience
  27. Give users visual feedback • Communicating the results of an

    interaction shows the user that the interface has been updated with his action.
 • This makes the user feels in control. UX & UI how can we improve “the experience”
  28. Give users visual feedback UX & UI how can we

    improve “the experience”
  29. Give elements some extra space • White space can make

    the content more discoverable and readable. how can we improve “the experience” UX & UI
  30. Use responsive layouts • to avoid scrollable elements for example

    how can we improve “the experience” UX & UI
  31. But content is an important element too • UI can

    be warmer and less mechanical with a human tone in the copy. • Good copy also could be used to guide and help the user. • Good copy is conversational instead of being directive.
 • Good copy use sense of humor sometimes. UX & UI how can we improve “the experience”
  32. But content is an important element too
 • Good copy

    use sense of humor sometimes. UX & UI how can we improve “the experience”
  33. In the end: • Don’t rely on visual design alone

    to save a bad experience. • Don’t ignore visual design! 
 • Visual Design is the User’s first impression of your product Visual design can be the strategic differentiator that encourages users to value one application over another equally usable. UX & UI better together
  34. UI the evolution - based on our needs (as users)

  35. UI The evolution - from skeumorphism to flat design

  36. UI The evolution - from skeumorphism to flat design

  37. UI The evolution - from skeumorphism to flat design

  38. UI The evolution - material design

  39. UI Complexion reduction

  40. UI Complexion reduction

  41. UI Complexion reduction

  42. UI Complexion reduction

  43. UI Complexion reduction • The ideia is the more we

    can do with a tool, the more the interface has to get out of the way. • This isn’t just a simplification of interface, it’s a complete shift in how we design our digital tools.
  44. THANK YOU Obrigada a todos!
 twitter.com/dizparada dizparada.com

  45. is hiring!! https://www.360imprimir.pt/Home/Carreiras
 ana.parada@360imprimir.pt