Web Marketing Week4


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • - 燈光 - 指引(help you find what you want) - 貨架高度、走道寬度 - 促銷 - 結帳速度
  • - 燈光 - 指引 (help you find what you want) - 貨架高度、走道寬度 - 促銷 - 結帳速度
  • - Pull - Push before Pull - Which side? Push or pull?
  • - Click logo to go home (home means home page) - Inbox is where mails locates, recycle bin means trash can - Warning & OK
  • - You are here - Current location & quick links - Unread and forwarded
  • Or use color
  • - People from Russia, China, Brazil... They might buy. But are we willing to spend $5,000 bandwidth fee to sell 5 more copies? - Optimization for mobile may be much more important to a restaurent than software
  • 便利商店 : Cross selling: 便當 + 飲料 Up selling: 滿 $79 送一點
  • Web Marketing Week4

    1. 1. Internet Marketing Practices Week 4: Converting Visitors to Customers Alan Chen, 2011
    2. 2. Start from a need or event Find Reallusion Find the right product Convinced by the web page Find the page and start download Complete download and install Happy with the product! Find the purchase page Paid It's about these
    3. 3. Price/Package might be the Key <ul><li>How much 1 st time users want to pay? (e.g. $39)
    4. 4. How much users willing to pay per order? (e.g. $99)
    5. 5. How much users consider it a bargain? (e.g. 50%)
    6. 6. What kind of package are popular? (e.g. AP+3 rd party AP, or AP+content) </li></ul>
    7. 7. Price is not the only key <ul><li>e.g. 7-11 vs. Costco
    8. 8. e.g. Starbucks vs. 7-11
    9. 9. e.g. Pchome vs Yahoo! Bid
    10. 10. Usability is no less important than price </li></ul>
    11. 11. Users can leave a store because: <ul><li>They can't find the product
    12. 12. They don't see the benefit
    13. 13. They don't want to wait
    14. 14. They don't like the product display
    15. 15. And other reasons... </li></ul>Price issue can be neutralized by other factors, e.g. convenience, service, brand, trust, etc
    16. 16. In terms of Design Principle In terms of Development
    17. 17. We and visitors communicate only through web pages (We don't even have a chance to ask them “Why you leave”)
    18. 18. <ul><li>Visibility: how to interact with the device, and the mapping between actions and operations
    19. 19. Affordance
    20. 20. Knowledge in the head/in the world
    21. 21. Cognitive aids
    22. 22. Natural mapping </li></ul>Source Source Source: Don't make me think (book)
    23. 23. <ul><li>Visibility
    24. 24. Affordance: Let users know how to operate it
    25. 25. Knowledge in the head/in the world
    26. 26. Cognitive aids
    27. 27. Natural mapping </li></ul>Source Source
    28. 28. <ul><li>Visibility
    29. 29. Affordance
    30. 30. Knowledge in the head/in the world: what users have learned, in the virtual world and real world
    31. 31. Cognitive aids
    32. 32. Natural mapping </li></ul>
    33. 33. <ul><li>Visibility
    34. 34. Affordance
    35. 35. Knowledge in the head/in the world
    36. 36. Cognitive aids (memory aids): visual clues on what you are doing, or what to do
    37. 37. Natural mapping </li></ul>
    38. 38. <ul><li>Visibility
    39. 39. Affordance
    40. 40. Knowledge in the head/in the world
    41. 41. Cognitive aids
    42. 42. Natural mapping: the relationship between controls and effects. Labels can be faulty </li></ul>Source: The design of everyday things
    43. 43. In terms of Design Principle In terms of Development
    44. 44. Element of the Web Digital representation of documents Formatting documents a) Display b) Searching Linking Documents Monash University: Web-based Systems Development The Web Connecting Computers
    45. 45. Connectivity <ul><li>Geo-location </li><ul><li>Can people all over the world can access? Should they share the same bandwidth? </li></ul><li>Device </li><ul><li>How many people using Mobile device to your site? </li></ul><li>Speed: browsing and downloading </li><ul><li>Not all countries have cheap broadband </li></ul><li>Scalability </li></ul>
    46. 46. Source: Akamai
    47. 47. Cloud and CDN (Content Delivery Network) <ul><li>Scalability
    48. 48. Better download experience </li></ul>Source: Akamai Speed is one of SERP ranking criteria- Google incorporating site speed in search rankings (Matt Cutts)
    49. 49. <ul><li>Mechanism load-balancing, in multiple ISP
    50. 50. Site performance monitoring and warning </li></ul>
    51. 51. <ul><li>Can users operate without multimedia? </li><ul><li>Alt text, also for SEO </li></ul><li>Browser support </li><ul><li>HTML 5 does has built-in video player, but not all features are standardized and supported by all browsers? </li></ul><li>Reasonable trade-off between quality and file size
    52. 52. Video length </li><ul><li>Download time (streaming?) and user patience </li></ul></ul>Multimedia
    53. 53. <ul><li>If each thumbnail file size can be reduced from 40KB to 20KB, it can saves almost 50% of download in total
    54. 54. From 10 sec to 5 sec, or 30 sec to 15 sec </li></ul>46KB 21KB 8KB
    55. 55. <ul>Many web sites tune their performance to hundreds ms e.g. CSS sprite , Yahoo! </ul>
    56. 56. Rich Content vs. Users' Patience <ul><li>Google has many intro videos
    57. 57. Most of them are about or shorter than 2 mins
    58. 58. If your visitors do not have patience to watch the video, your effort will be in vain </li></ul>
    59. 59. <ul><li>Link maintenance </li><ul><li>Avoid dead links </li></ul><li>Easiness of navigating the site </li><ul><li>Mainly usability issue </li></ul><li>Clear navigation aids
    60. 60. Meaningful hypertext label
    61. 61. Do you remember the importance of anchor text in SEO? </li></ul>Linking Documents
    62. 62. <ul><li>Clear actions
    63. 63. Ambiguous actions </li></ul><ul><li>But readability might be an issue, especially to our readers </li></ul>
    64. 65. (No value to SEO) (Almost No value to SEO) Customize Avatar Customize Your Avatar Now
    65. 66. <ul><li>Color, layout, font-size, etc
    66. 67. Common layout standard </li><ul><li>Navigation hierarchy </li></ul><li>Consistency
    67. 68. Optimal screen size </li></ul>Document Display
    68. 69. Starting from iClone home
    69. 70. Many people use wide-screen, and their computer are too old to run our AP. Can we design for bigger screen resolution?
    70. 71. <ul><li>Use too less space is better than too much
    71. 72. Let's see some more facts </li></ul>
    72. 73. <ul><li>This is what a 1024*768 user will see in CTA page... </li></ul>
    73. 74. Document for Search
    74. 75. Document for Search What users want/need? Do we provide enough contents in the right type/theme?
    75. 76. <ul><li>Up-selling and cross-selling: reduce search effort, shorter decision making process, increase order value </li></ul>Up-selling Cross-selling
    76. 77. <ul><li>Cross-selling </li><ul><li>Lunchbox + drinks </li></ul><li>Up-selling </li><ul><li>集點換贈品
    77. 78. e.g 7-11. From $77, to $60, to $66
    78. 79. Not by average because most order are under $30
    79. 80. 掌握中間選民 </li></ul></ul>
    80. 81. How can Usability Make Difference?
    81. 82. a Podcast from Julie Zhuo Facebook's Design Manager
    82. 83. Facebook's experiments <ul><li>Problem: Less than half of Facebook users were able to successfully upload photos.
    83. 84. Solution: switching from java/flash file selector to the browser native file selector which increased uploads by 11%. </li></ul><ul><li>Problems: The team found that of 85% who uploaded a photo would only upload one photo.
    84. 85. Solution: Perhaps people don't know how to hold down shift and select multiple photos to upload. The added a tip before the upload process begin on how to select multiple photos. The metric dropped from 85% to 40% </li></ul>
    85. 86. Facebook's experiments <ul><li>Problems: The team wanted to improve content sharing and turned to the composer for an answer.
    86. 87. Solution: </li><ul><li>The team added more features on the composer to make it easy to perform those actions .
    87. 88. The team thought maybe people will update their status more if they saw their last status when they signed in. Added that change in.
    88. 89. The team then thought perhaps it takes too much to have to click composer to update your status so they made the composer active by default. </li></ul><li>Not much Changed </li></ul>
    89. 90. Facebook's experiments <ul><li>Problems: a really boring deactivation page when you close your account which said – “ We're sorry you're leaving. Tell us why Facebook was not useful.”
    90. 91. Solution: “like leaving summer camp (you know a place which has all your friends, and you don't want to leave.)”
    91. 92. Reduced the deactivation rate by 7% </li></ul>
    92. 93. How we grew a web app’s sales by 33%
    93. 94. PhotoShelter's Experiments <ul><li>Improve the offer </li><ul><li>PhotoShelter already had a free version, but it had limited features
    94. 95. Split test was carried out using Google Website Optimizer </li></ul></ul>
    95. 96. PhotoShelter's Experiments <ul><li>Communicate it better </li><ul><li>Reworded table of benefits, prioritizing features
    96. 97. Expressing benefits in words that users would understand </li></ul></ul>
    97. 98. PhotoShelter's Experiments <ul><li>Getting new customers to engage with the product ASAP </li><ul><li>Removing distractions: we changed the user journey to encourage customers to take the vital next steps </li></ul></ul>
    98. 99. PhotoShelter's Experiments <ul><li>Slightly change the architecture of the site </li><ul><li>Viewing examples of other photographers’ PhotoShelter websites had persuaded them to get their own
    99. 100. Added the Examples page to the global navigation bar
    100. 101. A split test confirmed it had increased the site’s overall sales by 12% </li></ul></ul>
    101. 102. Reallusion's Landing Page Example http://www.reallusion.com/crazytalk/animator http://crazytalk.reallusion.com
    102. 103. <ul><li>Reducing search time
    103. 104. Avoiding distraction & Giving direction
    104. 105. SEO! </li></ul>
    105. 106. Landing Page Optimization <ul><li>Clear title & description (SEO)
    106. 107. Persuasive ones & Review
    107. 108. Plus creditable review & testimonial
    108. 109. Big action button, and a few supplementary links </li></ul>
    109. 110. More Usability Researches <ul><li>E-Commerce Checkout Design : at least 59.8% of potential customers abandon their shopping cart (MarketingSherpa puts it at 59.8%, SeeWhy at 83% and MarketLive at 62.14%) </li></ul>
    110. 111. <ul><li>Your Checkout Process Should Be Completely Linear
    111. 112. Add Descriptions To Form Field Labels
    112. 113. Avoid Contextual Words Like “Continue” </li><ul><li>“ Continue Shopping” or “Continue to Checkout” </li></ul><li>Visually Reinforce All Sensitive Fields On The Payment Page </li></ul>
    113. 114. <ul><li>Don’t Use An “Apply” Button In Your Form
    114. 115. Format Field For Expiration Date Exactly As It Appears On Credit Card
    115. 116. Use Only One Column For Form Fields </li></ul>
    116. 117. <ul><li>Use Shipping Address As Billing Address By Default
    117. 118. Use Clear Error Indications
    118. 119. Registration Should Be Optional
    119. 120. Don’t Require Seemingly Unnecessary Information </li></ul>
    120. 121. Try your best to help users find the info and achieve the goal, quickly, easily, and SUCCESSFULLY Availability and Reliability is the key to TRUST, which is the most important key on the Internet
    121. 122. Feedback from Last Week
    122. 123. Notes for Lottery Example <ul><li>Someone take 2*B </li><ul><li>At beginning or mid </li></ul><li>2* (A+B)
    123. 124. No one take B </li></ul><ul><li>Someone like B in particular?
    124. 125. A+B is the most popular package
    125. 126. Not enough B </li></ul>
    126. 127. What Kind of A/B Testing might be Useful? <ul><li>Home Page: Flash and Image as main banner </li><ul><li>Whether Flash really more attractive? </li><ul><li>Not so device-friendly
    127. 128. Increase load time </li></ul><li>Home page is the main landing page </li><ul><li>Most cost-effective
    128. 129. Best place to test, and gain experience on improving usability </li></ul></ul></ul>
    129. 130. What Kind of A/B Testing might be Useful? <ul><li>Consolidate promotional buttons </li><ul><li>One button vs. multiple buttons
    130. 131. Clue or confusion? </li></ul></ul>Why not make box click-able?
    131. 132. What Kind of A/B Testing might be Useful? <ul><li>Different approach </li><ul><li>Benefits vs. Promotional package </li></ul><li>Different message and position
    132. 133. Different design style </li><ul><li>Promotional vs. elegant design </li></ul></ul>
    133. 134. <ul><li>Make another &quot;Download Now&quot; button
    134. 135. &quot;Free&quot; can be good and bad to us </li></ul>
    135. 136. That's all for today, any question?
    136. 137. What will we do next time? <ul><li>Week 5: Retaining Customers
    137. 138. Exercise: One example that you would improve in terms of usability, may be but not limited to Reallusion web site or products </li></ul>
    138. 139. More material if you are interested in Conversion... <ul><li>Don't Make Me Think (Book) </li><ul><li>http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ </li></ul><li>The Design of Everyday Things (Book) </li><ul><li>http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107 </li></ul><li>Landing Page Optimization (Book) </li><ul><li>http://www.amazon.com/Landing-Page-Optimization-Definitive-Conversions/dp/0470174625/ </li></ul><li>“ Useit.com” Web site </li><ul><li>http://www.useit.com/ </li></ul></ul>