1 Pixel to the Left: Why Visual Design Details Matter
•
45 likes•5,248 views
Although we have all heard someone passionately declare, “UX is not UI,” visual design is a fundamental part of the user experience. Good design is in the details. It builds trust. It creates hierarchy of information. It makes buttons look clickable. It has the power to transform a functional experience into a delightful experience. So how we can ensure that the visual details we design are brought to life as intended? Can moving an object 1 pixel to the left really make a difference? In an attempt to find a common language between designers and developers, we will discuss what details are worth fighting for versus when to let go.
Report
Share
1 Pixel to the Left: Why Visual Design Details Matter
- 1. 1 Pixel to the Left: ! Why Visual Design Details Matter Emily Rawitsch @rawitsch #MadPlusUX
- 2. Strategy + Research + Design! @rawitsch
- 5. Can you spot the difference?
- 7. The characters and events depicted in this story are fictitious. Any similarity to " actual persons, living or dead, is purely coincidental.
- 12. Before After
- 13. ?
- 16. ?
- 18. Wrong font!!! Text should be #333333 Text should not be all caps Where are the round corners? Too small Align left Spacing does not match the comp Align left Alignment point
- 19. VS!
- 20. Why do visual design details matter?! How can designers and developers work together more effectively?!
- 21. Who cares if the little design details are a bit off?
- 22. Aesthetics have a direct impact on the user experience and the success of businesses.
- 23. “ Attractive things work ! "better. Pleasing things are " easier to learn and" produce a more " harmonious result.” DON NORMAN Norman, D. A. (2002). Emotion and design: Attractive things work better. Interactions Magazine, ix (4), 36-42.
- 24. Negative Affect Easy tasks feel difficult Positive Affect Difficult tasks feel easy
- 26. 50 milliseconds! Lindgaard, Fernandes, Dudek, & Brown, 2006
- 30. The role of visual complexity and prototypicality regarding first impression of websites. Tuch, Alexandre ; Presslaber, Eva ; Stöcklin, Markus ; Opwis, Klaus ; Bargas-Avila, Javier. International Journal of Human-Computer Studies, 2012, Vol.70(11), pp.794-811 Simple (low complexity) Familiar (high prototypicality)
- 31. Create Account Create Account
- 32. Easier to Read Lorem ipsum dolor sit amet, consesur adipiscing elit. Praesent in porta feugiat non a sapien curabitur semper. • Nunc fermentum ligula lectus bibendum commodo. • In dium mauris eget arcu aliquet scelerisque. • Cras commodo risus dui, ut aliquet arcu pulvinar. Harder to Read Lorem ipsum dolor sit amet, consesur adipiscing elit. Praesent in porta feugiat non a sapien. Curabitur semper mollis neque. Nunc fermentum ligula lectus bibendum commodo. In dium mauris eget arcu aliquet scelerisque. Cras commodo risus dui, ut aliquet arcu pulvinar eget. Curabitur eu laoreet nibh.
- 34. $ $ $!
- 35. 63 companies identified as effective users of design outperformed the FTSE 100 index by 200%! The Design Council, The Impact of Design on Stock Market Performance: An Analysis of UK Quoted Companies 1994-2003, 2004
- 36. How can designers and developers work together more effectively?
- 37. VS!
- 41. Photoshop HTML & CSS Add Context! EXPLAIN WHY!
- 42. ≠! HTML ! + CSS! Empathize! UNDERAND EACH OTHER’S LANGUAGE!
- 43. ≠! “Like”!Design! Empathize! UNDERAND EACH OTHER’S LANGUAGE!
- 44. Design specs + deliverables should be easy to use. Make it Easy! REFINE THE PROCESS!
- 46. UI Style Guide
- 49. Co-Design (work together in person)
- 50. Use Actual HTML and CSS
- 51. Visual details matter — when they matter. Stay Objective! THINK BIG PICTURE!
- 52. Your Browser Stats! Chrome Desktop! 22.4%! Firefox Desktop! 22.2%! Safari iPad! 14.9%! IE Desktop! 14.0%! Safari Desktop! 9.9%! Site Analytics
- 53. Reality often astonishes theory and assumption
- 54. A-B Testing
- 57. 1px!
- 58. Remember: - Details influence usability, first impressions and perceptions - Experience should be easy for users and developers - You can’t over-communicate - Data is your friend
- 60. user!