Seven UX Design Rules

Transcript

1. Seven UX Design Rules ... to help you and your users. Erik Frisk ▪ ef@erikfrisk.com ▪ 2013-10-30
2. Why?
3. Art vs Design Expression Communication
4. Concrete Abstract
5. 1 Rule of Thirds
11. 1 : 1.62 The Golden Ratio
14. The eyes scan an image the fastest when it is shaped as a golden-ratio rectangle.” — Adrian Bejan “
15. In the end, it’s just a guide.
17. 2 Good Typography
18. Font size Measure—text width Leading—line height
19. Font size 15–25px ideally
20. The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality. Measure—text width
21. Measure—text width abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcd The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality. 2–3 alphabets in length, i.e. 52–78 characters
22. Good—63 char The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality. Bad—96 char The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality. Bad—43 char The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality.
23. Leading—line height The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality.
24. p { font-size: 15pt; line-height: 1.4; } Leading—line height
25. Leading—line height ca 1.4 x font-size less for large headings: ca 1.1–1.4 x font-size
26. Good—1.3x The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality. Bad—1.0x The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality. Bad—1.8x The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality.
27. Leading—line height Longer measure greater leading
28. Good—1.2x The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality. Good—1.5x The mouth of the storm lunged toward them, and Liet closed the cover plate, hoping the ancient meteorological apparatus would hold together. He trusted his father's intuition to a certain extent, but not his practicality.
29. Higher Cognitive Ease Like what you see Better mood Believe what you read
30. http://practicaltypography.com/typography-in-ten-minutes.html
31. 3 High Contrast
34. Which one is easier to read? Which one is easier to read?
35. Which one is easier to read? Which one is easier to read?
36. Which one is easier to read? Which one is easier to read?
37. Which one is easier to read? Which one is easier to read?
38. 4 Color Schemes
40. Example color scheme
41. https://kuler.adobe.com/ http://colorschemedesigner.com/ http://colourco.de/ Useful tools
42. 5 The Mind “Creates” Shapes That Aren’t Really There
43. Negative space
44. Patterns
45. Patterns
46. Patterns
47. Patterns
48. Extends lines and edges
49. Extends lines and edges
50. Extends lines and edges
51. 6 Simplify
56. Fewer form fields Shorter text Fewer choices Fewer clicks
57. 7 User Flow
58. A B
59. Think in terms of the user’s objectives, not in terms of UI building blocks.
60. 1 Rule of Thirds 2 Good Typography 3 High Contrast 4 Color Schemes 5 The Mind “Creates” Shapes 6 Simplify 7 User Flow
61. You may break the rules after you've mastered them.
62. @erikfrisk • ef@erikfrisk.com touch-and-tell.se leanmachine.se Erik Frisk