Principles of Website Design - Customer Experience and Usability IDM

4,351 views

Published on

Part of the IDM Professional Diploma in Digital Marketing from The Institute of Direct and Digital Marketing: The IDM
Delivered by Katrina gallagher of Digitangle.co.uk March 2014.

Published in: Marketing
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,351
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Principles of Website Design - Customer Experience and Usability IDM

  1. 1. IDM Professional Diploma in Digital Marketing Principles of Web Design Customer experience and usability Presented by Katrina Gallagher of Digitangle Ltd Learning objective: Understand the different facets of web design needed to create an effective customer experience and business returns.
  2. 2. Schedule for this session 11.30 11.45 11.55 12.00 12.05 12.10 12.15 12.20 12.25 12.45 12.55 Introductions The principles of effective website design for marketing Briefs for website creation and enhancement Reviewing agency creative for sites or microsites Alternative approaches to website design Usability and accessibility Information architecture Principles of effective website design Persuasion design principles Discussion: Examples Questions & your actions based on today.
  3. 3. Introductions • Your name • Organisation • Experience or how web design relates to you.
  4. 4. Principles of effective website design for marketing      Function Content Aesthetics Conversions Development
  5. 5. Briefs for website creation and enhancement • • • • • • Budget Timescales Objectives Design (examples, ideas) Functional specification Assets: • Content • Copy • Images • Brand guidelines
  6. 6. Reviewing agency creative for sites or microsites • • • • Objectivity Appropriate to the stage of the project Constructive, specific feedback Clarity of communication and record keeping • Appropriate stakeholders involved http://clientsfromhell.net/
  7. 7. Alternative approaches to website design Flash, HTML5, SEO/PPC Landing pages JavaScript, PHP, ASP eCommerce User centred design Templates and Opensource Conversion rate optimisation
  8. 8. OpenSource • What is OpenSource software? http://opensource.com/resources/what-open-source • Pros • Don’t spend time/money reinventing the wheel. • Not tied in to one agency/developer. • Cons: • May be inappropriate for the purpose (e.g. very complicated/integration with offline systems or at the other end of the spectrum – could be overkill if just a landing page is required) • Some of the main platforms: • WordPress content management system - http://wordpress.org formerly blog software. • Magento eCommerce - http://magento.com/ now owned by eBay • Joomla - http://www.joomla.org/ popular, a variant of Mambo. • Drupal - https://drupal.org/ powerful, began as a message board.
  9. 9. Wordpress
  10. 10. Magento
  11. 11. Templates Start with a design that is close to your desired outcome. Then customise it with the help of a designer/developer. • http://themeforest.net • http://youtemplates.com • http://www.templatemonster.com
  12. 12. Usability and accessibility Consider: • Intuitive design • Users with varying abilities • Different devices, browsers and screen sizes Tools: • http://validator.w3.org/unicorn/ • http://www.cynthiasays.com/
  13. 13. Usability and accessibility: Tools & Resources Test in different browsers: • http://browsershots.org/ • http://www.browserstack.com/ • https://browserlab.adobe.com/en-us/index.html# • https://saucelabs.com/ Research on the effectiveness of carousels (homepage banner sliders): • http://searchengineland.com/homepage-sliders-are-bad-for-seo-usability-163496 • http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/ • http://www.nngroup.com/articles/auto-forwarding/ What draws people’s attention: • http://www.nngroup.com/articles/photos-as-web-content/ • http://www.webdesignerdepot.com/2013/11/4-essential-ux-rules-taught-by-eye-tracking-research/ • Eye tracking: https://uxmag.com/articles/quantitative-research-and-eye-tracking Collect and analyse user feedback on screens or mock-ups: • http://verifyapp.com/ • http://fivesecondtest.com/ Split testing: • http://whichtestwon.com/ • https://qualaroo.com/ • https://www.optimizely.com/ab-testing • https://support.google.com/analytics/answer/1745147
  14. 14. Information architecture
  15. 15. Information architecture Home About Team Locations Services Contact Service 1 Service 2 Structure and hierarchy of information. Common tools used to plan include: • Wireframes (see left) • Sitemaps (above)
  16. 16. Principles of effective website design 1. 2. 3. 4. 5. Clarity Visual appeal and conventions Visual hierarchy (prominence of important information) Maintain attention: • People (particularly eyes) • Contrast and colours • White space • Novelty. Calls to action.
  17. 17. Principles of effective website design Consider: • Standard conventions • Colour and contrast • Readability • Clarity http://blog.kissmetrics.com/leave-a-website/ http://blog.kissmetrics.com/trustworthy-e-commerce-website/?wide=1
  18. 18. Persuasion design principles 1. 2. 3. 4. 5. 6. 7. Reciprocation Commitment Social Proof Authority Scarcity Framing Salience
  19. 19. Persuasion design principles: Reciprocation Cultural anthropologists argue that the “web of indebtedness” is the foundation for such diverse human practices as the division of labour, exchange of goods & services, evolution of experts, & other interdependencies that connect humans into more efficient cooperative units. We are trained from an early age to comply with the rule of reciprocity. Influence: the psychology of persuasion http://www.media-studies.ca/articles/influence.htm
  20. 20. Persuasion design principles: Commitment/Consistency “Once we have publicly committed to something or someone, then we are so much more likely to go through and deliver on that commitment” Ask visitors to commit to something small and usually free-of-charge, e.g. guide or a whitepaper. This increases the likelihood that they will eventually see themselves as customers, which allows you to follow up with an offer to buy their products or join their services. http://conversionxl.com/how-to-use-cialdinis-6-principles-of-persuasion-toboost-conversions/
  21. 21. Persuasion design principles: Social Proof 1. 2. 3. 4. 5. 6. 7. Reciprocation Commitment Social Proof Authority Scarcity Framing Salience http://www.youtube.com/watch?v=uuvGh_n3I_M People look to others for cues on what is acceptable, what they should do. Consider: • Customer reviews • Video testimonials • Enabling sharing • Social media stats • “People who looked at this bought…” • Highlighting most popular
  22. 22. Persuasion design principles: Authority “We feel a sense of duty or obligation to people in positions of authority.” Key principles of influence by Robert Cialdini Consider: • Celebrity endorsements • Logos of well known customers • Research, statistics, quotes • Accreditations, awards
  23. 23. Persuasion design principles: Scarcity Products appear more attractive when their perceived availability is rather limited. • “10 people viewed this holiday in the past hour.” • Time limit (countdown) • Unit limit • Buy now, use later
  24. 24. Persuasion design principles: Framing “ People aren’t very good at estimating the absolute value of what they are buying. People make comparisons, either against the alternatives you show them or some external benchmark.” http://uxdesign.smashingmagazine.com/2 010/11/29/persuasion-triggers-in-webdesign/ • • • • Don’t confuse with too much choice Consider the order Highlight the favourite/best value The Goldilocks effect More examples: http://ui-patterns.com/blog/Persuasivepurchase-behaviour-Understanding-thepower-of-the-Goldilocks-Effect
  25. 25. Persuasion design principles: Salience (Relevance) “The seducible moment can happen only when users have completed at least part of their original quest. It’s difficult to lure users away until they’ve reached this (self-defined) point; before that, they will simply ignore distractions.” http://www.uie.com/articles/seducible_moments/ http://www.uie.com/articles/seductive_design/ Consider: • Targeting and segmentation • Remarketing • Upselling/cross selling • Removing distractions
  26. 26. Discussion: The Jockey Club
  27. 27. Discussion: Netdespatch Ltd
  28. 28. Discussion: RBWM
  29. 29. Discussion: Natural Windows
  30. 30. Discussion: BearingPoint
  31. 31. Discussion: Phones 4u
  32. 32. Discussion: The IDM
  33. 33. Discussion: CCL Academy
  34. 34. Discussion: Nelsons
  35. 35. Discussion: Redweb Limited
  36. 36. Questions & Actions • Some questions for you to recap on what we’ve learned today. • What will you apply based on today? • Do you have any questions?
  37. 37. Thank you for listening! For further information, or follow-up questions after this event, please contact: Jessica Bowskill Course and Events Coordinator jessicabowskill@theidm.com 020 8614 0207 The Institute of Direct and Digital Marketing 1 Park Road, Teddington, Middlesex TW11 0AR, United Kingdom +44 (0)20 8977 5705 www.theidm.com
  38. 38. Image credits http://www.behance.net/Gallery/Illustrated-type/258535 http://kairi-at-imke.blogspot.co.uk/2012/05/book-review-dont-make-me-think.html http://alidavies.com/why-to-do-list-killing-results/ https://moz.com http://www.time-to-change.org.uk/pledgewall www.conversion-rate-experts.com http://www.shoptab.net/blog/how-to-create-a-product-promotion-in-facebook/ http://www.smartinsights.com/conversion-optimisation/landing-page-optimisation/perfect-landingpage/ http://members.dodo.net.au/~peter_b/ia/info2b.htm http://blog.kissmetrics.com/trustworthy-e-commerce-website/ http://blog.kissmetrics.com/leave-a-website/ http://diegoguevara.com/blog/2011/05/04/clients-from-hell/ http://www.kreativekicks.com/latest-projects/ http://simplyadammann.com/blog/2013/2/5/5rsdlgz9b3fp5n4mm1ntxtnhuffqfu http://www.topappreviews101.com/design-brief-2-ipad-app-765.html http://thewebsitemanagers.com/ http://youtemplates.com/espresso-a-wordpress-theme-for-restaurants.html http://themeforest.net/ http://dribbble.com/shots/1069015-K-Template-GIF http://devsbuild.it/resources/type/article/four-proven-ways-boost-online-sales-using-social-proof

×