UI Design That Converts Visitors to Buyers.

1,010 views

Published on

These slides elaborate the philosophy " Design is not just something designers do. Design is marketing." and tends to solve the most common problem site owner's face; "We are having plenty of Traffic but very few are buying."

Published in: Technology

UI Design That Converts Visitors to Buyers.

  1. 1. ProblemWe arehaving plentyof Traffic butvery few arebuying.
  2. 2. UI DesignThat Converts Visitors to Buyers Helaluzzaman Ayon Business Development Manager HashiMukh Dot Com
  3. 3. Design is not justsomething designers do. Design is marketing.
  4. 4. Web Design Principles1. Visual Hierarchy2. Divine Proportions3. Typography4. Hick’s Law5. Fitt’s Law6. Rule of Thirds7. Gestalt Design Laws8. White space and clean design9. Occam’s Razor
  5. 5. Visual Hierarchy
  6. 6.  Size  Important ObjectsVisual Hierarchy  Color  Business Objective
  7. 7. Size Without knowing ANYTHING about these circles, you were easily able to rank them. That’s visual hierarchy. 13
  8. 8. Certain parts of your website are more important than others. Forms Calls to action Value propositionImportant Objects If you website menu has 10 items, are all of them equally important? Where do you want the user to click? Make important links more prominent. 14
  9. 9. Hierarchy does not only come from size. Amazon makes the ‘Add to cart’ button more prominent by using color.Color 15
  10. 10. Business Objective 16
  11. 11. Web Design Principles1. Visual Hierarchy2. Divine Proportions3. Typography4. Hick’s Law5. Fitt’s Law6. Rule of Thirds7. Gestalt Design Laws8. White space and clean design9. Occam’s Razor
  12. 12. Golden ratio is a magical numberDivine Proportions 1.618 that makes all things proportioned to it aesthetically pleasing (or so it is believed).
  13. 13. Divine Proportions
  14. 14. Web Design Principles1. Visual Hierarchy2. Divine Proportions3. Typography4. Hick’s Law5. Fitt’s Law6. Rule of Thirds7. Gestalt Design Laws8. White space and clean design9. Occam’s Razor
  15. 15. Typography
  16. 16. As font sizes increase, line heights must also increase in order to maintain the geometric proportions of a paragraph. In other words: Font size and line height are proportionally related. As the line width gets longer, it becomes moreSize & Height difficult to perform a return sweep (the movement of the eyes from the end of one line to the beginning of the next) unless the line height is also increased to account for this effect. For any font size, the line height must increase as the line width increases. 26
  17. 17. Web Design Principles1. Visual Hierarchy2. Divine Proportions3. Typography4. Hick’s Law5. Fitt’s Law6. Rule of Thirds7. Gestalt Design Laws8. White space and clean design9. Occam’s Razor
  18. 18. Every additional choice increases the time required toHick’s Law take a decision. If you sell a huge amount of products, add better filters for easier decision making. 30
  19. 19. Web Design Principles1. Visual Hierarchy2. Divine Proportions3. Typography4. Hick’s Law5. Fitt’s Law6. Rule of Thirds7. Gestalt Design Laws8. White space and clean design9. Occam’s Razor
  20. 20. The bigger an object and the closer it is to us, the easier it is to use it. The size of a button should beFitt’s Law proportional to its expected frequency of use. You can check your stats for which buttons people use the most, and make popular buttons bigger (easier to hit). 36
  21. 21. Web Design Principles1. Visual Hierarchy2. Divine Proportions3. Typography4. Hick’s Law5. Fitt’s Law6. Rule of Thirds7. Gestalt Design Laws8. White space and clean design9. Occam’s Razor
  22. 22. An image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spacedRules of Third vertical lines, and that important compositional elements should be placed along these lines or their intersections. 38
  23. 23. Web Design Principles1. Visual Hierarchy2. Divine Proportions3. Typography4. Hick’s Law5. Fitt’s Law6. Rule of Thirds7. Gestalt Design Laws8. White space and clean design9. Occam’s Razor
  24. 24. People always see the whole ofyour website first, before theydistinguish the header, menu,footer and so on. 45
  25. 25.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 46
  26. 26.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 48
  27. 27.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 51
  28. 28.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 53
  29. 29.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 55
  30. 30.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 57
  31. 31.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 60
  32. 32.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 63
  33. 33.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 67
  34. 34.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 70
  35. 35.  Law of Focal Point (Visual attributes that control focus) Law of Proximity Law of Similarity Law of Common Region (Law of "Prägnanz (Good Form)") Law of Connectedness ("Law of Unity/Harmony") Law of Balance/Symmetry Law of Continuation Law of Closure Law of Figure-Ground Law of Isomorphic Correspondence Law of Simplicity 72
  36. 36. Web Design Principles1. Visual Hierarchy2. Divine Proportions3. Typography4. Hick’s Law5. Fitt’s Law6. Rule of Thirds7. Gestalt Design Laws8. White space and clean design9. Occam’s Razor
  37. 37. Web Design Principles1. Visual Hierarchy2. Divine Proportions3. Typography4. Hick’s Law5. Fitt’s Law6. Rule of Thirds7. Gestalt Design Laws8. White space and clean design9. Occam’s Razor
  38. 38. helpdesk@hashimukh.com

×