Seven UX Design Rules

Transcript

1. Seven UX Design Rules ... to help you and your users. leanmachine.se ▪ hello@leanmachine.se ▪ 2013-09-06
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. 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. 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. 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.
31. 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. 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. 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.
32. 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. 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. 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.
33. 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. 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. 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.
34. 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. 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. 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.
35. 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. 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. 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.
36. http://practicaltypography.com/typography-in-ten-minutes.html
37. 3 High Contrast
40. Which one is easier to read? Which one is easier to read?
41. Which one is easier to read? Which one is easier to read?
42. Which one is easier to read? Which one is easier to read?
43. Which one is easier to read? Which one is easier to read?
44. 4 Color Schemes
46. Example color scheme
47. https://kuler.adobe.com/ http://colorschemedesigner.com/ http://colourco.de/ Useful tools
48. 5 The Mind “Creates” Shapes That Aren’t Really There
49. Negative space
50. Patterns
51. Patterns
52. Patterns
53. Patterns
54. Extends lines and edges
55. Extends lines and edges
56. Extends lines and edges
57. 6 Simplify
62. Fewer form fields Shorter text Fewer choices Fewer clicks
63. 7 User Flow
64. A B
65. Think in terms of the user’s objectives, not in terms of UI building blocks.
66. 1 Rule of Thirds 2 Good Typography 3 High Contrast 4 Color Schemes 5 The Mind “Creates” Shapes 6 Simplify 7 User Flow
67. You may break the rules a!er you've mastered them.
68. leanmachine.se ▪ hello@leanmachine.se ▪ 2013-09-06