$30 off During Our Annual Pro Sale. View Details »

How good UI becomes good UX @GDGlisbon

dizparada
March 31, 2017

How good UI becomes good UX @GDGlisbon

dizparada

March 31, 2017
Tweet

More Decks by dizparada

Other Decks in Design

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.

    View Slide

  2. GOOD UI VS BAD UI
    “If an interface have a good visual design it will be simple and easy to use”
    Common misconceptions

    View Slide

  3. GOOD UI VS BAD UI
    Craigslist - 60 million users
    ugly
    beautiful

    View Slide

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

    View Slide

  5. GOOD UI VS BAD UI
    Reddit - 542 million monthly visitors (234 million unique users)
    ugly
    beautiful

    View Slide

  6. GOOD UI VS BAD UI
    deviantart - 26 million members
    ugly
    beautiful

    View Slide

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

    View Slide

  8. GOOD UI VS BAD UI
    “If an interface is easy to use it has good user experience.”
    Common misconceptions

    View Slide

  9. GOOD UI VS BAD UI
    I've clicked on the "mark as read" button and this is what
    happened.
    ugly
    beautiful

    View Slide

  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

    View Slide

  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

    View Slide

  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?

    View Slide

  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….”

    View Slide

  14. USER EXPERIENCE
    is getting in USER’s shoes
    The type of user your product has.
    Personas

    View Slide

  15. USER EXPERIENCE
    is getting in USER’s shoes
    Task Analysis
    Observing your users and how they interact with your product

    View Slide

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

    View Slide

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

    View Slide

  18. USER EXPERIENCE
    and knowing how to better achieve their needs
    Page/screen flows

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  23. USER EXPERIENCE
    is about all the process
    of making a successful product

    View Slide

  24. UX & UI
    better together

    View Slide

  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.

    View Slide

  26. UX & UI
    better together
    Visual (UI) Design is an important step to
    achieve a Good User Experience

    View Slide

  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”

    View Slide

  28. Give users visual feedback
    UX & UI
    how can we improve “the experience”

    View Slide

  29. Give elements some extra space
    • White space can make the content more discoverable and readable.
    how can we improve “the experience”
    UX & UI

    View Slide

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

    View Slide

  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”

    View Slide

  32. But content is an important element too

    • Good copy use sense of humor sometimes.
    UX & UI
    how can we improve “the experience”

    View Slide

  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

    View Slide

  34. UI
    the evolution - based on our needs (as users)

    View Slide

  35. UI
    The evolution - from skeumorphism to flat design

    View Slide

  36. UI
    The evolution - from skeumorphism to flat design

    View Slide

  37. UI
    The evolution - from skeumorphism to flat design

    View Slide

  38. UI
    The evolution - material design

    View Slide

  39. UI
    Complexion reduction

    View Slide

  40. UI
    Complexion reduction

    View Slide

  41. UI
    Complexion reduction

    View Slide

  42. UI
    Complexion reduction

    View Slide

  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.

    View Slide

  44. THANK YOU
    Obrigada a todos!

    twitter.com/dizparada
    dizparada.com

    View Slide

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

    [email protected]

    View Slide