The Human Touch: Human factors and digital communications  —  findings and best practices Gayle Christopher, PhD April in ...
Basic Principles for Successful Web Communications <ul><li>Branding Matters </li></ul><ul><li>Search/SEO Matters </li></ul...
What You Know <ul><li>Information presentation </li></ul><ul><li>SEO & “Findability” </li></ul><ul><li>Information Archite...
Scanning and Skimming “ F pattern”  http:// www.useit.com/eyetracking /
Research Says that Users: <ul><li>Visit a web site with a task in mind </li></ul><ul><li>Scan and skim content </li></ul><...
<ul><li>Users scan and skim content. Make it easy for them.  </li></ul><ul><li>Write interesting and creative headlines. S...
<ul><li>Write informally, if possible.  </li></ul><ul><li>Use brief summaries with links to more detail. </li></ul><ul><li...
http://infographiclabs.com/infographic/search-engine-history/
Rank High or Go Home http:// www.youtube.com/watch?v =3cwUxYvpmfw
Search Behavior <ul><li>26% 3 word phrases </li></ul><ul><li>17% 4 word phrases </li></ul><ul><li>19% 2 word phrases </li>...
Optimize for Humans (optimized for Google) http://www.coolinfographics.com/blog/2010/4/20/the-visual-faq-of-seo-infographi...
Wear a White Hat http://www.coolinfographics.com/blog/2010/4/20/the-visual-faq-of-seo-infographic.html
Who You Know <ul><li>Social media </li></ul><ul><ul><li>Know your user by media platform </li></ul></ul><ul><ul><li>Know u...
Social Studies <ul><li>Social media drives awareness and engagement. Includes forums, blogs, social networks. </li></ul><u...
 
http:// blog.kissmetrics.com /social-media-by-demographic/
http:// blog.kissmetrics.com /social-media-by-demographic/
http:// blog.kissmetrics.com /social-media-by-demographic/
Relationship based Best to post 1 per day Post in the morning for best results Keep posts short to medium length Broadcast...
Community Behavior
Linking http://www.coolinfographics.com/blog/2010/4/20/the-visual-faq-of-seo-infographic.html
First Impressions Count <ul><li>Visuals/Layout </li></ul><ul><ul><li>Identity/Navigation </li></ul></ul><ul><ul><li>Rule o...
First Impressions http://www.columnfivemedia.com/wp-content/uploads/2010/09/color-purchases-lrg.png
 
The Need for Speed <ul><li>Initial impression formed in 50 ms </li></ul><ul><li>For each 1 sec delay in page loading 10% o...
Pages are more complex http://mashable.com/2011/04/06/site-speed/
The Need for Speed http://mashable.com/2011/04/06/site-speed/
Visuals - Color <ul><li>Human eye can perceive about 2.8 million colors.  (Pointer & Attridge, 1998) </li></ul><ul><li>Not...
http://www.columnfivemedia.com/wp-content/uploads/2010/09/color-purchases-lrg.png
http://itsasmallweb.wordpress.com/2011/03/21/color-gender/
Male Female http://itsasmallweb.wordpress.com/2011/03/21/color-gender/
 
Brands and Color Red:  power, bold, love, passion, hot, anger Brands associated with red:  Coca-Cola, Target Orange:  warm...
Color distribution: Top 100 Brands http://www.colourlovers.com/business/blog/2010/09/15/the-most-powerful-colors-in-the-wo...
Visuals – Chunking <ul><li>Foveal vision is acute, color vision </li></ul><ul><li>16:9 orientation is more natural, orient...
Best Practices: <ul><li>Use no more than 3 typefaces per page </li></ul><ul><li>Size body copy at 14 px or better </li></u...
<ul><li>Use fonts designed for the screen </li></ul><ul><li>Optimize images, use alt tags, naming conventions </li></ul><u...
Presented by Gayle Christopher, PhD http://gaylechristopher.com Twitter: @gchristo April in Auburn, Auburn University, 4/1...
Resources: http://www.tripwiremagazine.com/2011/02/the-dos-and-donts-of-online-copywriting-how-to-write-effective-website-...
Upcoming SlideShare
Loading in …5
×

Human factors and digital communications - findings and best practices.

2,383 views

Published on

The Human Touch: Human factors and digital communications - findings and best practices. Presented at April in Auburn, Auburn University, 4/16/2011

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Human factors and digital communications - findings and best practices.

  1. 1. The Human Touch: Human factors and digital communications — findings and best practices Gayle Christopher, PhD April in Auburn, Auburn University, 4/16/2011
  2. 2. Basic Principles for Successful Web Communications <ul><li>Branding Matters </li></ul><ul><li>Search/SEO Matters </li></ul><ul><li>Usability Matters </li></ul><ul><li>Credibility and Trust flow from: </li></ul><ul><ul><li>What You Know </li></ul></ul><ul><ul><li>Who You Know </li></ul></ul><ul><ul><li>Presentation </li></ul></ul>> Credibility & Trust
  3. 3. What You Know <ul><li>Information presentation </li></ul><ul><li>SEO & “Findability” </li></ul><ul><li>Information Architecture </li></ul>“ Content is infinite but attention is finite.”
  4. 4. Scanning and Skimming “ F pattern”  http:// www.useit.com/eyetracking /
  5. 5. Research Says that Users: <ul><li>Visit a web site with a task in mind </li></ul><ul><li>Scan and skim content </li></ul><ul><li>Want to feel active rather than just reading passively </li></ul><ul><li>Have a short attention span that is further reduced by parallel browsing (tabs) </li></ul><ul><li>Hate scrolling horizontally, they will tolerate limited vertical scrolling </li></ul><ul><li>Skip flash intros (splash pages are generally useless) </li></ul><ul><li>Do not necessarily enter your site via the home page </li></ul>
  6. 6. <ul><li>Users scan and skim content. Make it easy for them. </li></ul><ul><li>Write interesting and creative headlines. Spur curiosity. </li></ul><ul><li>Add engaging thumbnail images. </li></ul><ul><li>Emphasize quality, not quantity. </li></ul><ul><li>Use keywords in subheads and bullet points. </li></ul>Online readers consume about 77% of story text they choose to read. Best Practices:
  7. 7. <ul><li>Write informally, if possible. </li></ul><ul><li>Use brief summaries with links to more detail. </li></ul><ul><li>Use images to engage users. </li></ul><ul><li>Tell stories, use testimonials, appeal to emotions and as many senses as possible. </li></ul><ul><li>Focus on design elements and key actions in top 500 px of the page. </li></ul><ul><li>Front load stories with the most important stuff – lead with conclusions. </li></ul><ul><li>Keep a user focus: WIIFM principle. </li></ul>Best Practices:
  8. 8. http://infographiclabs.com/infographic/search-engine-history/
  9. 9. Rank High or Go Home http:// www.youtube.com/watch?v =3cwUxYvpmfw
  10. 10. Search Behavior <ul><li>26% 3 word phrases </li></ul><ul><li>17% 4 word phrases </li></ul><ul><li>19% 2 word phrases </li></ul><ul><li>14% 1 word phrases </li></ul><ul><li>Search query length has been increasing as users become more savvy. But the data suggests that behavior varies with sector. </li></ul>
  11. 11. Optimize for Humans (optimized for Google) http://www.coolinfographics.com/blog/2010/4/20/the-visual-faq-of-seo-infographic.html
  12. 12. Wear a White Hat http://www.coolinfographics.com/blog/2010/4/20/the-visual-faq-of-seo-infographic.html
  13. 13. Who You Know <ul><li>Social media </li></ul><ul><ul><li>Know your user by media platform </li></ul></ul><ul><ul><li>Know usage patterns by platform </li></ul></ul><ul><li>Community </li></ul><ul><ul><li>Participate, engage and develop </li></ul></ul><ul><li>Linking </li></ul><ul><ul><li>Guilt or honor by association </li></ul></ul>
  14. 14. Social Studies <ul><li>Social media drives awareness and engagement. Includes forums, blogs, social networks. </li></ul><ul><li>Benefits: more site traffic, more time spent on site, more incoming links, better search engine placement, more interaction with users </li></ul><ul><li>Behaviors can be categorized </li></ul>
  15. 16. http:// blog.kissmetrics.com /social-media-by-demographic/
  16. 17. http:// blog.kissmetrics.com /social-media-by-demographic/
  17. 18. http:// blog.kissmetrics.com /social-media-by-demographic/
  18. 19. Relationship based Best to post 1 per day Post in the morning for best results Keep posts short to medium length Broadcast publishing Post often Post late in the day Don’t forget weekends Ask questions, engage Maintain Follower hygiene Leave ~20 characters for Retweet Best Practices:
  19. 20. Community Behavior
  20. 21. Linking http://www.coolinfographics.com/blog/2010/4/20/the-visual-faq-of-seo-infographic.html
  21. 22. First Impressions Count <ul><li>Visuals/Layout </li></ul><ul><ul><li>Identity/Navigation </li></ul></ul><ul><ul><li>Rule of Thirds (Golden Ratio) </li></ul></ul><ul><li>Speed </li></ul><ul><li>Color </li></ul>
  22. 23. First Impressions http://www.columnfivemedia.com/wp-content/uploads/2010/09/color-purchases-lrg.png
  23. 25. The Need for Speed <ul><li>Initial impression formed in 50 ms </li></ul><ul><li>For each 1 sec delay in page loading 10% of users leave the site. (4 tags = 1 sec delay) </li></ul>
  24. 26. Pages are more complex http://mashable.com/2011/04/06/site-speed/
  25. 27. The Need for Speed http://mashable.com/2011/04/06/site-speed/
  26. 28. Visuals - Color <ul><li>Human eye can perceive about 2.8 million colors. (Pointer & Attridge, 1998) </li></ul><ul><li>Noticeable difference in color is greatest in the blue-green to yellow range. (1nm) </li></ul><ul><li>For red to blue range, the detectable </li></ul><ul><li>difference is 10 nm. </li></ul><ul><li>People like color combinations </li></ul><ul><li>to be simple and coherent. </li></ul>
  27. 29. http://www.columnfivemedia.com/wp-content/uploads/2010/09/color-purchases-lrg.png
  28. 30. http://itsasmallweb.wordpress.com/2011/03/21/color-gender/
  29. 31. Male Female http://itsasmallweb.wordpress.com/2011/03/21/color-gender/
  30. 33. Brands and Color Red: power, bold, love, passion, hot, anger Brands associated with red: Coca-Cola, Target Orange: warm, Fall, energy Brands associated with orange: Home Depot Yellow: happy, Summer, friendly, fun Brands associated with yellow: McDonald’s, Ikea Green: environment, organic, money, refreshing Brands associated with green: Whole Foods, Starbucks, Animal Planet, BP Blue: cool, dependable, trustworthy, calming Brands associated with blue: Facebook, Walmart, Ford Purple: royal, elegant, eclectic, spiritual Brands associated with purple: Crown Royal, Yahoo Brown: rustic, earthy, simplistic, wholesome Brands associated with brown: UPS Pink: flirty, feminine, playful, fun, romantic Brands associated with pink: Victoria’s Secret, Barbie, T-Mobile
  31. 34. Color distribution: Top 100 Brands http://www.colourlovers.com/business/blog/2010/09/15/the-most-powerful-colors-in-the-world
  32. 35. Visuals – Chunking <ul><li>Foveal vision is acute, color vision </li></ul><ul><li>16:9 orientation is more natural, orient content wider than tall </li></ul><ul><li>Peripheral vision is black and white and detects motion </li></ul><ul><li>We look at chunks of data at a time with foveal vision. The periphery provides context or feeling. Brain fuses the chunks with the context to establish meaning. </li></ul>
  33. 36. Best Practices: <ul><li>Use no more than 3 typefaces per page </li></ul><ul><li>Size body copy at 14 px or better </li></ul><ul><li>Line length should be 45 - 65 characters, max </li></ul><ul><li>Line spacing should be at least 1.2 to 1.8x font size </li></ul><ul><li>Keep paragraphs short </li></ul><ul><li>Keep headlines to less than 65 characters </li></ul><ul><li>Use keywords in headlines, calls to action, and title tags </li></ul><ul><li>Use bulleted lists </li></ul><ul><li>Use bold text for importance </li></ul>
  34. 37. <ul><li>Use fonts designed for the screen </li></ul><ul><li>Optimize images, use alt tags, naming conventions </li></ul><ul><li>Use lowercase letters in URLs, use keywords, no numbers </li></ul><ul><li>Focus on design elements above the fold, detail copy below the fold </li></ul><ul><li>Use the Rule of Thirds </li></ul><ul><li>Simplify, minimize cognitive load </li></ul><ul><li>Usability test new designs </li></ul><ul><li>Analyze site traffic. Delete elements that don’t work. </li></ul>Best Practices:
  35. 38. Presented by Gayle Christopher, PhD http://gaylechristopher.com Twitter: @gchristo April in Auburn, Auburn University, 4/16/2011 Human factors and digital communications — findings and best practices
  36. 39. Resources: http://www.tripwiremagazine.com/2011/02/the-dos-and-donts-of-online-copywriting-how-to-write-effective-website-content.html http://www.talentzoo.com/digital-pivot/blog_news.php/Type-on-the-Web-Top-10-Dos-and-Donts/?articleID=9479# http://www.imediaconnection.com/content/28354.asp http://sixrevisions.com/content-strategy/user-friendly-seo/ http://yoast.com/site-structure-seo/ http://www.adamsherk.com/social-media/twitter-tips-for-publishers/ http://www.sciencedaily.com/releases/2011/01/110105194848.htm http://www.talentzoo.com/beneath-the-brand/blog_news.php/Why-Color-Matters/?articleID =8810 http://www.sciencedaily.com/releases/2010/11/101101151724.htm http://www.smashingmagazine.com/2010/06/21/applying-interior-design-principles-to-the-web/ http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design / http://searchengineland.com/caution-reported-trends-in-search-query-length-may-be-misleading-41641

×