Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reviewing Screen Based Content: Demo Examples

8,709 views

Published on

Reviewing Screen Based Content: Demo Examples.
Supplementary examples to go with Rhonda Bracey's presentation at the AODC Conference 2006 (Cairns, Queensland), and ASTC (NSW) 2006 Conference (Sydney)
More supporting materials available from here: http://www.cybertext.com.au/10353.htm

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

  • Be the first to like this

Reviewing Screen Based Content: Demo Examples

  1. 1. Reviewing Screen-based Content: Demo examples Rhonda Bracey [email_address] http://www.cybertext.com.au
  2. 2. General Text <ul><li>Looks good; on a quick read it seems fine… but read closely… </li></ul>
  3. 3. Label Text Reference : Official Guidelines for User Interface Developers and Designers : http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14d.asp
  4. 4. Headings &quot;To&quot; headings Overview headings
  5. 5. Headings Mixing gerunds ('-ing' words) and imperatives
  6. 6. Readability: StyleWriter http://www.cybertext.com.au/editorsoftware/affiliate_index.html
  7. 7. Readability: Reading indexes http://juicystudio.com/services/readability.php
  8. 8. Fonts
  9. 9. Display Font at normal and resized to large
  10. 10. Colours Red background, yellow text, blue links…
  11. 11. Graphics
  12. 12. Structure: Page http:// www.ilovejack daniels.com /resources/view-page-structure/
  13. 13. Structure: Site
  14. 14. Forms: Error Messages <ul><li>Good error message! </li></ul><ul><li>What happened </li></ul><ul><li>Why it happened </li></ul><ul><li>How to fix it </li></ul>
  15. 15. Forms: User Assistance (1)
  16. 16. Forms: User Assistance (2) <ul><li>Show user progress </li></ul><ul><li>Page-level UA </li></ul><ul><li>Repeat user-entered info </li></ul><ul><li>Section-level UA </li></ul><ul><li>Item-level UA </li></ul>
  17. 17. Printing <ul><li>Background colours ignored </li></ul><ul><li>Menu obscures text </li></ul>
  18. 18. Accessibility: Colour blindness http://www.vischeck.com/vischeck/
  19. 19. Free Web Accessibility Tools http://www.visionaustralia.org.au/info.aspx?page=614 http://chrispederick.com/work/webdeveloper/
  20. 20. Validation: HTML code http://validator.w3.org/
  21. 21. Links: Navigation Generated from Firefox add-in: http://chrispederick.com/work/webdeveloper/
  22. 22. XENU Link Checker http://home.snafu.de/tilman/xenulink.html
  23. 23. Link mechanisms How many ways can you link to other content?
  24. 24. Link mechanisms - variety Hundreds!
  25. 25. Animated Demos <ul><li>Has user controls </li></ul><ul><li>Gives info about sound and duration </li></ul>
  26. 26. Animated Demos: Printout Captivate's Word output is ready for editing. It contains all elements of the animation, including callouts, highlight boxes, buttons, and any narrated text you entered into the Record Audio window.
  27. 27. GUIs: What to look for
  28. 28. GUI: Example 1 <ul><li>Example GUI errors: </li></ul><ul><li>Alignment </li></ul><ul><li>Label text </li></ul><ul><li>Title text </li></ul><ul><li>Punctuation </li></ul><ul><li>Case </li></ul>
  29. 29. GUI: Example 2
  30. 30. CSE HTML Validator http://www. htmlvalidator.com
  31. 31. Total Validator http://www. totalvalidator.com /
  32. 32. InSite http://www.inspyder.com
  33. 33. SnagIt: Web page links http://www.techsmith.com Web page capture with links highlighted
  34. 34. SnagIt: Scrolling and Text Text only from a web page; saves as TXT file Scrolling Web page captured as graphic (resized to 25% for this slide)
  35. 35. Acrobat http://www.adobe.com Web page captured as PDF; marked up for editing
  36. 36. Web Page Analyzer http:// www.website optimization.com /services/ analyze /
  37. 37. Sitescore (1) http://www.silktide.com/tools/sitescore
  38. 38. Sitescore (2)
  39. 39. Sitescore (3)
  40. 40. Screen Ruler http://www.microfox.com
  41. 41. Word Cleaner (1) http://www.zapadoo.com Comparative file sizes
  42. 42. Word Cleaner (2) Word to HTML - unfiltered Word to HTML - filtered HTML from Word Cleaner using standard template

×