Your SlideShare is downloading. ×
0
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
#SEJSF: Conversion Optimization and Site Usability
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

#SEJSF: Conversion Optimization and Site Usability

719

Published on

"Top 10 Conversion Factor Trends, Backed by Science" …

"Top 10 Conversion Factor Trends, Backed by Science"
As with most tactics in digital marketing, your sure-fire methods from last year may be a total flop today. Benu will walk through what's working now, along with supporting case studies and data. From the Searchmetrics conference "SEO, Content Marketing & Analytics
The Three Pillars of Online Marketing Success in 2014" held at the Hotel Vitale in San Francisco.

Published in: Marketing, Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
719
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Milestone Confidential Conversion Optimization and Site Usability
  • 2. 2 www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Milestone Confidential Milestone at a glance Drive online revenue and profitability for our clients Silicon Valley ~ Chicago ~ India 180 employees ~1500 Clients Digital marketing software and services for hospitality
  • 3. 3Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Conversion Optimization by Improving Usability Information Architecture Color & Images Speed & Performance Legibility & Eyetracking
  • 4. 4Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Key Component of Conversion Optimization Conversion Optimization by Improving Usability Information Architecture Page Layout Categorization Organization Labeling Prioritization Navigation Primary Secondary Third Level Footer Utilities Site Search Bread Crumbs Eyetracking/Legibility Legible Scannable Eyetracking Heat Maps Colors & Images Geography Gender Psychology Legibility Speed and Performance Speed Avoid flash Avoid too many images Avoid image text Avoid too many scripts Performance Devices – I, Preview, Mobile, Handheld, Print Browser CMS Social & Natural Search
  • 5. 5Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Usability  Usability tests measure:  Whether or not participants complete a desired task or a series of tasks.  How quickly can a visitor book a hotel?  How quickly can a visitor book a package?  How participants navigate and use a website?  Can visitor find the information they need: things to do, location and directions, who to contact, etc
  • 6. 6Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Case study Good Design Bad Design
  • 7. 7Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg What is the point of usability? Target your audience Improve Conversions Deliver USP
  • 8. 8Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Jacob Nielsen Usability Study
  • 9. 9Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Usability Testing Audience Navigation Content Distractions Design Implementation
  • 10. 10Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Information Architecture - Navigation  Types of Navigations  Primary navigation  Home, Location, Accommodation, Services & Features, Things to Do, Meeting or Dining, Contact Us  Secondary navigation  Specials & Packages, Manager’s Special  Tertiary level navigation  Photo Gallery, Emap, Email Offers, Guest Reviews Primary Tertiary SecondarySecondary
  • 11. 11Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Expectations Company logo is expected to be on the top, left hand side.
  • 12. 12Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Information Architecture - Page Layout  Categorization – classification, arranged in a hierarchical structure.  Organization - arranged by Task, topic, audience  Labeling – unique, easy to understand and scannable.  Prioritization – Number of links you will put in navigation. 2 2 1 3
  • 13. 13Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Pass the 6-foot test  Usability tip:  Headline,  Hero shot (image/video)  CTA should be legible CTA Headline Hero shot
  • 14. 14Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Pass the 5-second test  Who is the company?  Do they appear credible?  What are they offering?  What’s the call to action? Credibility and Company USP Call to Action?
  • 15. 15Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg CTA – What and Why  Always present a CTA with both “what” and “why”. A good CTA completes this sentence:  What/Why CTA lines can be interchangeable Why? What?
  • 16. 16Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Information Architecture  When information is not properly architected  Banner blindness  Mismatched priority - too many types of interface elements  Unclear terminology  Leads to task failure 1 2 3
  • 17. 17Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Distractions
  • 18. 18Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Links on the right look like ads -> ignored by visitors
  • 19. Milestone Confidential Eyetracking /Legibility
  • 20. 20Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Legibility  Legibility refers to the clarity of visually-presented text, affected for instance by:  Size of the text  Contrast between similar letters  Quality of printing or display (whether the text is damaged or blurred)  Line spacing  Word spacing  Shape and style of individual letters
  • 21. 21Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Scannable Text  highlight keywords;  use meaningful subheadings;  use bulleted lists;  include one idea per paragraph;  use “inverted pyramid” style, starting with the conclusion;  half the word count or less of conventional writing;
  • 22. 22Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Break up paragraphs into scannable chunks
  • 23. 23Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg How people spend time? – Eyetracking Eyetracking – How Do People Spend Time?
  • 24. 24Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Ultimate Heat Map – People Looking for Content
  • 25. 25Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Superfluous Images: Nielsen, J. and Pernice, K. (2010). Eyetracking Web Usability. Berkeley, CA: New Riders. Page 198. Users are ignoring the large graphic images and focusing on site navigation and text.
  • 26. Milestone Confidential Colors & Images
  • 27. 27Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Colors  Geography  India, Yellow = Success  Gender  Men – Blue, Green, Black, Red  Women – Blue, Purple, Green, Red  Psychology  Blue - Dignified, trustworthy, professional  Black - Powerful, sophisticated, strong, sexy  Orange - Energy, cheerfulness, activity, excitement  Legibility  Black/White offers highest contrast  Target Audience  Primary colors are often used for midscale and tertiary or complex colors are used for upscale 1 3 6 5
  • 28. 28Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Colors Colors associated with trust: Colors associated with high quality: Colors associated with cheap/inexpensive: Colors associated with fun:
  • 29. 29Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Psychology of Colors Color name Meanings Black Powerful, sophisticated, strong, expensive Blues Dignified, trustworthy, professional, secure, Browns Natural, durability, reliability, warmth, comfort Greens Nature, growth, fruitfulness, freshness, renewal Grays Dignified, intelligent, high tech, neutral Oranges Energy, cheerfulness, activity, excitement Purples Spirituality, mysticism, magic, faith, dignity Reds Energy, warmth, strength, impulse, powerful White Pure, spiritual, clean, sterile, truthful, peaceful Yellows Cheerfulness, hope, vitality, luminosity
  • 30. 30Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Colors  Best Practices  Think about target audience and message you like to communicate before deciding colors  Try to limit use of two to three colors on the site. Too many colors can create clutter or confusion  Consider your target audience - Geography, Gender, Psychology and Culture  Use color consistently. For example, if you use a shade of blue to communicate clickable text, do not use that same color (or formatting) to communicate unclickable text.  Use colors judiciously. For example, the colors orange or yellow can be used to display sale prices or specials on a travel site.
  • 31. 31Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Complementary color for CTA  My rule: “clockwork conversion color”. Do not use color within 15 minutes (+/-7) on color wheel “clock” to ensure it stands out.  Use true color for CTA. Tints (+white) and shades (+black) for all other Complimentary color
  • 32. 32Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Images  Images Best Practice:  Choose images that are highly relevant to the focus of each page  Original images preferred
  • 33. Milestone Confidential Speed and Performance
  • 34. 34Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Speed & Performance Minimize HTTP requests ( Reduce number of requests going to the server to improve page performance) Minify JS & CSS (Source code on page should be kept minimum to reduce download time) Optimized images (Reducing size of images reduces load time and increase page load speed) GZIP components (Gzipping files reducing the size of the files sent from your server, reducing sizes of pages by up to 70%) Just one second delay in page-load can cause 7% loss in customer conversions!
  • 35. 35Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Page Speed  Fast and optimized pages lead to  Visitor engagement  Retention  Conversions  Tools to measure site’s speed  Page Speed  Yslow  WebPagetest  Google Webmaster
  • 36. 36Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Milestone Client Site Minify CSS Optimized images Minify JavaScript
  • 37. 37Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg High Performance Site – 14 Rules  Tracking Web Performance  Where is time spent?  The Performance Golden Ruleshttp://stevesouders.com /hpws/rule-min-http.php  Rule 1: Make Few HTTP Request  Rule 2: Use a Content Delivery Network  Rule 3: Add an Expire Header  Rule 4: Gzip Compression  Rule 5: Put Stylesheets at the Top  Rule 6: Put Scripts at the Bottom  Rule 7: Avoid CSS Expressions  Rule 8: Make Javascripts and CSS External  Rule 9: Reduce DNS Lookup  Rule 10: Minify Javascript  Rule 11: Avoid Redirects  Rule 12: Remove Duplicate Scripts  Rule 13: Configure Etags  Rule 14: Make Ajax Cacheable
  • 38. 38Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Crawlability HTML CSS < > xml HTML validation performed on W3C to make sure page complies with HTML standards and helps cross-browser, cross- platform and future compatibility CSS validation to ensure no errors found in style sheets and all browsers aim towards compliance with the existing standards Link checker to ensure no broken links on pages and all links are properly working Canonical tags to avoid duplicate content issues and penalties Sitemap XML for website & images submitted to Google Webmaster
  • 39. 39Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Milestone Client Site HTML validation CSS validation Sitemap submission Link checker
  • 40. 40Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Relevant Fresh Engaging Search Optimized Content Optimized meta tags are structured tags that go in page head section so the browser can understand it Heading tags – H1, H2, H3 are present in body content Photos, images and map optimized and indexed for image and map search meta <h1> Schemas for semantic web is micro data and rich snippets that helps search engine index most critical data fast and helps improve click-through rates
  • 41. 41Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Responsive Websites - Desktop, Mobile, Tablet Versions DESKTOP SITE TABLET SITE MOBILE SITE  New Gestures  Jquery Swiping (photo gallery)  Pixel Width of average finger
  • 42. Milestone Confidential Case Studies
  • 43. 43Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Event Form
  • 44. 44Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Sort and Simple Forms  Cut any questions that are not needed.  Don't make fields mandatory unless they truly are.  Support autofill to the max by avoiding unusual field labels (just use Name, Address, etc.).  Set the keyboard focus to the first field when the form is displayed. This saves a click.  Allow flexible input of phone numbers, credit card numbers, and the like.
  • 45. 45Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Navigation
  • 46. 46Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Clear Navigation
  • 47. 47 www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Milestone Confidential Millwood Inn 2.4 %
  • 48. 48 www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Milestone Confidential
  • 49. 49Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Implementation
  • 50. 50Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Key take aways  Understand what your customer want  Optimize your site - Images, Colors, Download time  Focus on your Site Architecture and Page layout - Simple, Easy  Set up conversion funnels and goals  A/B testing will humble even the greatest optimizers  Remember, if it is good for user, it is good for search engines
  • 51. 51Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Thank You Questions? www.milestoneinternet.com blog.milestoneinternet.com http://twitter.com/milestonemktg http://www.facebook.com/Milestoneinc
  • 52. 52 www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Milestone Confidential Know Great People? http://jobs.milestoneinternet.com  Director of Client Services (Chicago)  Recruiter (Chicago)  Sr. Manager, Paid Search (Chicago)  Account Managers (Chicago and Santa Clara)  Social Media AM (Chicago)  Social Media Account Manager (Chicago) Top Reasons to Work for Milestone  Great place to learn with phenomenal growth opportunity  Work with a fun, amazing, talented team  Benefits: Medical, dental, vision, 401K, vacation, sick and holiday pay  Exciting and innovative work environment  Breakfast and Happy hour every Friday  Monthly events and quarterly outings
  • 53. 53 www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Milestone Confidential Back ups
  • 54. 54Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Information Architecture  Best practices:  Site navigation should reflect the site’s information architecture  Navigation labels should be distinguishable and look clickable  Show locational breadcrumbs for current page  Use descriptive links in body text  Distinguish visited and unvisited links  Implement clear and consistent visual affordance (clickable elements should look clickable and non-clickable elements should not look clickable)  Rule of thumb: Things that look alike should act alike
  • 55. 55Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Images  Images Best Practice:  Choose simple images with a single focus. Avoid busy pictures or busy backgrounds
  • 56. 56Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Culture has an effect Red Yellow Green Blue White China Happiness Birth Wealth Power Ming Dynasty Heavens Clouds Heavens Clouds Death Purity France Aristocracy Temporary Criminality Freedom Neutrality Peace India Life Creativity Success Prosperity Fertility Krishna Spirituality Death Purity Japan Anger Danger Grace Nobility Future Youth Energy Villainy Death USA Danger Stop Cowardice Caution Safety Go Masculinity Purity Galitz, W.O. (1998) The Essential Guide to User-Interface Screen Design. New York: Wiley.
  • 57. 57Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Images  Images Best Practice:  Use compelling images of real people doing real things
  • 58. 58Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Images  Best Practice:  Choose images that are highly relevant to the focus of each page and use them purposefully to enhance the message you are trying to communicate.  Choose simple images with a single focus. Avoid busy pictures or busy backgrounds (especially important with small thumbnails) so the focus and purpose is explicit and easy to recognize  Use compelling images of real people doing real things  Original images preferred  Less is more with images (Use the white space)
  • 59. 59Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Optimization Parameters Value Proposition Relevance Clarity Anxiety Distraction Urgency
  • 60. 60Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Analysis example Clarity: Reservations box does not stand out Clarity: Telephone number is not very visible Distraction: Rotating banner Anxiety: few reviews Relevance: Free high speed wifi – is. Clarity: Hotel amenities are not clearly defined
  • 61. 61Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Target your audience
  • 62. 62Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg After re-design Target the audience What is important to them?
  • 63. 63Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Most Valuable Links on Home Page
  • 64. 64Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg All Pages
  • 65. 65Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Filtered All Pages
  • 66. 66Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Special Packages
  • 67. 67Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Segment: Visits with Conversions
  • 68. 68Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Advanced Bed and Breakfast Whimsical Winter: $0.00 / $0.57 Spring Super Saver: $0.00 / $0.49 Bed & Breakfast: $4.49 / $0.57 Total Turtle Package: $0.00 / $0.23 Dora & Diego Adventure Package: $0.00 / $0.33
  • 69. 69Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Conversions
  • 70. 70Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Five Simple Rules of Web Design  Easy To Read Content  Easy to Navigate  Easy To Find  Consistency of Design & Layout  Download / Perception
  • 71. 71Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Process  Look at the website.  Home Page  Specials and Packages  Main product pages (weddings, meetings, retreats, etc.)  Evaluate content in Analytics  Content -> Site Content -> All Pages  Navigation  Distractions  Look at user activity in Analytics  User Flow  Conversions  Site Search
  • 72. 72Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg Conversion Flow First Interaction Second Interaction Third Interaction Home Starting pages Rooms Specials Things to Do Ameniti es Locatio n BOOK Benefits  We can find places in the site where we are losing traffic  We can find the best path to conversion  We can see what type of content is effective  We can gauge this data across all tested sites to look for trends  Update content, page layout, meta, navigation anchors  Product suggestions
  • 73. 73Milestone Confidential www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg

×