How good UI becomes good UX @GDGlisbon

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