Designing Effective Webpages Online 2006 Masterclass


Published on

This is a presentation to supplement a class/workshop at the Online Conference in London, November 28-30 2006. It's only a brief presentation of 30 minutes so is quite short.

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

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

No notes for slide

Designing Effective Webpages Online 2006 Masterclass

  1. 1. Designing effective web pages Online Conference 2006 Phil Bradley
  2. 2. The challenge <ul><li>People and computers require different content </li></ul><ul><li>People like words and pictures </li></ul><ul><li>They have a limited attention span </li></ul><ul><li>People use a language </li></ul><ul><li>They like variety </li></ul><ul><li>They’re unpredictable </li></ul>
  3. 3. People… <ul><li>Scan more than they read </li></ul><ul><li>Are intelligent (mostly) </li></ul><ul><li>Have emotions </li></ul><ul><li>Are intuitive </li></ul>
  4. 4. Computers on the other hand… <ul><li>Like numbers </li></ul><ul><li>Like repetition </li></ul><ul><li>Are not interested in language </li></ul><ul><li>They’re predictable </li></ul><ul><li>They’re tireless </li></ul><ul><li>Pay close attention to detail </li></ul>
  5. 5. Computers <ul><li>Are essentially stupid </li></ul><ul><li>They’re emotionless </li></ul><ul><li>Have no inherent intuition </li></ul>
  6. 6. How is this reflected in page design? <ul><li>There is a need to balance a desire to write naturally, with a requirement to appeal to search engines. </li></ul><ul><li>Like it or not, we have to adapt to them in order to get a good ranking. </li></ul><ul><li>If we don’t, it is going to be much more difficult to be found. </li></ul><ul><li>If we’re not found – what’s the point? </li></ul>
  7. 7. How do search engines rank? <ul><li>Meta tags </li></ul><ul><li>Titles </li></ul><ul><li>First 250 words </li></ul><ul><li>Words contained in the <Hx> headers </li></ul><ul><li>Repetition </li></ul><ul><li>Keyword density </li></ul><ul><li>Links to the page </li></ul>
  8. 8. Ranking (2) <ul><li>Number of keywords found on the page </li></ul><ul><li>Proximity of search terms </li></ul><ul><li>Page rank (for Google) </li></ul><ul><li>… and about 100 other algorithms </li></ul>
  9. 9. Implications for text <ul><li>We sell hand held terminals for use in a wide variety of sales situations. The units are small and compact and can easily be used by all your staff to inventory the stock, and keep you closely informed about the current situation. Our products are strong and will not break, even if they fall on the ground or get wet! The item is easy to use and your colleagues can be quickly taught how to use them. The units come in a variety of sizes and colours and can be produced with your own logo on them. Buy some today!” (100 words) </li></ul>
  10. 10. Implications (2) <ul><li>The product itself is called: </li></ul><ul><li>‘ hand held terminals’ </li></ul><ul><li>‘ units’ </li></ul><ul><li>‘ products’ </li></ul><ul><li>‘ item’ </li></ul><ul><li>‘ some’ </li></ul>
  11. 11. Results <ul><li>“ Hand held terminals for use in a supermarket, shops, stores and your warehouse. Our hand held terminals are used by sales assistants, supermarket staff, warehouse keepers for stock auditing and stock inventory. The hand held terminals are robust, high quality, waterproof and durable. Training on the hand held terminals is easy, and your supermarket staff will learn quickly. The terminals can be customised to your specifications and the purchase price is competitive. If you wish to buy a hand held terminal we have another page on our price policy, and buying in bulk is cheap and affordable.” (97 words) </li></ul>
  12. 12. Results (2) <ul><li>‘ Hand held terminals’ (4) </li></ul><ul><li>‘ Hand held terminal’ </li></ul><ul><li>‘ supermarket’ (2) </li></ul><ul><li>‘ staff’ (2) </li></ul><ul><li>‘ terminals’ ‘customised’ </li></ul><ul><li>‘ shops’ ‘stores’ ‘warehouse’ ‘warehouses ’ </li></ul><ul><li>‘ training’ </li></ul><ul><li>‘ affordable’ ‘cheap’ ‘price’ ‘buying’ ‘purchase’ </li></ul><ul><li>‘ robust’ ‘high quality’ ‘waterproof’ ‘durable’ </li></ul>
  13. 13. All well and good but… <ul><li>You want people to find the site useful </li></ul><ul><li>You want people to come back to you </li></ul><ul><li>You want people to link to you </li></ul><ul><li>You want people to tell their friends </li></ul><ul><li>SO… </li></ul><ul><li>You need to further manipulate the page </li></ul><ul><li>And to do that, you need to … </li></ul>
  14. 14. Understand how people read web pages <ul><li>They don’t like to read from a screen </li></ul><ul><li>So they don’t read, they scan </li></ul><ul><li>They dip in and out, and jump around a site </li></ul><ul><li>They like pictures </li></ul><ul><li>They look for headlines in a page </li></ul><ul><li>They will scan/read the first sentence in a paragraph </li></ul>
  15. 15. Understanding how people read web pages (2) <ul><li>They don’t like to scroll or get lost </li></ul><ul><li>They want information and they want it now! </li></ul><ul><li>They have the power – they can leave your site as quickly as they found it – probably quicker! </li></ul><ul><li>Consequently, presentation becomes important. </li></ul>
  16. 16. Reading pages © Poynter Online
  17. 18. What does that page do? <ul><li>Works well with search engines </li></ul><ul><li>Loads quickly </li></ul><ul><li>Links are part of the text </li></ul><ul><li>Allows the user to get where they want to go quickly </li></ul><ul><li>Presents the subject to the viewer in a graphical format </li></ul>
  18. 19. Be inclusive! <ul><li>Not everyone can see your page </li></ul><ul><li>Not everyone can use a mouse </li></ul><ul><li>Include ALT tags for images (and ensure they make sense) </li></ul><ul><li>Provide various methods for moving around your site </li></ul><ul><li>Don’t include data in non-friendly formats </li></ul><ul><li>Test and validate your pages </li></ul>
  19. 20. SHOCK! HORROR! © Do I have to re-write all of my webpages then?
  20. 21. Not exactly, no… <ul><li>Certainly look at each page in turn: </li></ul><ul><li>How important is it to your site? </li></ul><ul><li>Does the page need to be found? </li></ul><ul><li>Is it being found already? </li></ul><ul><li>It may just require tweaking, particularly </li></ul><ul><ul><li>Title </li></ul></ul><ul><ul><li>Links </li></ul></ul><ul><ul><li>Keywords (Synonyms, repetition, positioning) </li></ul></ul>
  21. 22. What skill sets are needed? <ul><li>A good understanding of search engines </li></ul><ul><li>How to write good content </li></ul><ul><li>HTML skills </li></ul><ul><li>Competence in various new tools </li></ul><ul><li>Some design ability </li></ul><ul><li>An understanding of usability issues </li></ul><ul><li>Think beyond the confines! </li></ul>
  22. 23. Adding extra content <ul><li>A search box to allow people to find material on your site… </li></ul><ul><li>How about a subject or community search engine? </li></ul>
  23. 25. <ul><li>A map of where your visitors come from – via </li></ul>
  24. 26. <ul><li>A thumbnail of linked pages thanks to </li></ul>
  25. 27. <ul><li>Google gadgets for your webpage </li></ul>
  26. 28. <ul><li>Widgets from the </li></ul>
  27. 29. <ul><li>Embed slideshow presentations with </li></ul>
  28. 30. In conclusion <ul><li>WE understand information, keywords, concepts and search techniques </li></ul><ul><li>More importantly, we understand people </li></ul><ul><li>Consequently, we’re perfectly poised to write content better than anyone else </li></ul><ul><li>Don’t expect to get it right over night – it takes time – in some cases, months! </li></ul>
  29. 31. For more information: <ul><li> </li></ul><ul><li>[email_address] </li></ul><ul><li> </li></ul><ul><li> </li></ul>