BlogJava-Jcat-随笔分类-javascripthttp://www.blogjava.net/Jcat/category/17580.html真的猛士，敢于直面惨淡的人生，正视淋漓的鲜血~~~ Coding Life~~~zh-cnWed, 28 Feb 2007 03:45:57 GMTWed, 28 Feb 2007 03:45:57 GMT60The ultimate webdesign usability checklisthttp://www.blogjava.net/Jcat/archive/2007/01/25/95893.htmlJcatJcatThu, 25 Jan 2007 04:39:00 GMThttp://www.blogjava.net/Jcat/archive/2007/01/25/95893.htmlhttp://www.blogjava.net/Jcat/comments/95893.htmlhttp://www.blogjava.net/Jcat/archive/2007/01/25/95893.html#Feedback0http://www.blogjava.net/Jcat/comments/commentRss/95893.htmlhttp://www.blogjava.net/Jcat/services/trackbacks/95893.html

I noticed that I, and fellow webdesigners, keep making the same usability mistakes over and over. This checklist with 88 questions is a must read for every webdesigner who cares about usability.

This website, NotUsable.com, is not designed by me. Giving me the perfect excuse why this website doesn’t pass my own usability checklist. :) But I would love to hear your comments and don’t forget to let me know when you can answer the whole checklist with ‘yes’!

Note that my design company is called Achtentachtig, which means Eighty Eight in Dutch, that’s why there are 88 questions in this checklist. Just to let you know.

Enough talking, let’s start!

    Technical

  1. Did you validate your (X)HTML using W3C Markup Validation Service?
  2. Did you validate your CSS using W3C CSS Validation Service?
  3. Did you check your website in at least IE, FF, Opera and Safari?

    4. Images

  4. Did you add the ALT and TITLE attributes to all your important images?
  5. Did you add the LONGDESC attributes to all your image that need a description?
  6. Did you write effective ALT text?
  7. Did you make the size of your pages less then 50KB?
  8. Did you choose the appropriate filetype for your images?
  9. Did you add a description to images that support your content?
  10. Did you use plain text instead of images for important content?

    11. Content

  11. Did you use a sans-serif typeface with a decent font size for your body text?
  12. Did you adjusted the leading and tracking, if necessary, to increase readability?
  13. Did you align your body text to the left? (depends on language)
  14. Did you use EM or percentages instead of PX?
  15. Did you make sure that there are no whole sentences in uppercase?
  16. Did you use less then 78 characters, including spaces, per line?
  17. Did you make brief and precise paragraphs with explanatory titles?
  18. Did you use lists to sum things up?
  19. Did you write your conclusion first and then your explanation?
  20. Did you create enough contrast between the text and the background?
  21. Did you make your website also accessible for text-only browsers?
  22. Did you make sure that there are no ‘under construction’ pages?
  23. Did you include a print function on pages with a large amount of text?
  24. Did you include a print stylesheet?
  25. Did you replace all special characters with the ISO Latin-1 codes?
  26. Did you spell check your content and did you proofread for grammar errors??

    27. Navigation

  27. Did you make sure that all your links work? W3C Link checker does the job.
  28. Did you include a link to all your main pages on your homepage?
  29. Did you include your main navigation on every page?
  30. Did you use no more then 8 items in your main navigation?
  31. Did you distinguish the active and nonactive page in the menu?
  32. Did you use self explanatory link text instead of ‘click here’?
  33. Did you use self explanatory link text instead of business terms?
  34. Did you make a distinction between visited and non-visited links?
  35. Did you make a distinction between links and plain text?
  36. Did you add the TITLE attribute to all your links?
  37. Did you use breadcrumbs if you have a large amount of pages?
  38. Did you include a search option if you have a large amount of pages?
  39. Did you make your logo link to your homepage?
  40. Did you make a skip to content link at the top of your pages?
  41. Did you make a skip to menu link at the top of your pages?
  42. Did you make it possible to browse your website using SHIFT-TAB and RETURN?
  43. Did you make sure you didn’t use any javascript links?

    44. Structure

  44. Did you make a consistent page structure?
  45. Did you place your logo at the top left?
  46. Did you place an explanatory tag line next to your logo?
  47. Did you place your search box at the top right?
  48. Did you place important content above the fold/scroll?
  49. Did you make your design on a grid system?
  50. Did you make your design fluid using percentages?
  51. Did you make your website also viewable on low resolutions?
  52. Did you make custom titles (as in TITLE tag) for all your pages?

    53. Forms

  53. Did you make sure that users don’t return to an altered form after an error?
  54. Did you make a friendly and informative error page?
  55. Did you make a friendly ‘thank you’ page with a confirmation email?
  56. Did you add only a ’submit’ button and no ‘reset’ button?
  57. Did you tell the user what to expect after clicking the submit button?
  58. Did you split long forms up into multiply pages?
  59. Did you gave the user room to type?
  60. Did you place an asterisk when a field is compulsatory?
  61. Did you keep the standard look of input fields that is generated by the browser?
  62. Did you create a logical order of asking information?
  63. Did you use double input fields for passwords only?
  64. Did you let the computer, not the user, handle information formatting?
  65. Did you make sure that users can fill in the entire form using the TAB key?
  66. Did you explain to the user why you ask certain information?
  67. Did you explain to the user what you are going to do with that information?
  68. Did you use realtime validation using AJAX?
  69. Did you use the LABEL tag?
  70. Did you place the LABEL above the input field, instead of next to it?
  71. Did you choose the correct input type for different data?
  72. Did you make the top input field automatically active using setfocus?
  73. Did you destinguish the active field from non-active fields using input:focus?
  74. Did you use the FIELDSET and LEGEND entities when appropriate?
  75. Did you check if your forms also work with Javascript turned off?

    76. Multimedia

  76. Did you make sure that essential information/navigation is not made in Flash?
  77. Did you make sure that music and videoclips don’t start playing automatically?
  78. Did you make sure that music and videoclips can be turned off at any time?
  79. Did you inform the user about the size and length of your music and videoclips?

    80. Extra features

  80. Did you make a custom 404 page?
  81. Did you make a site map?
  82. Did you make a rss feed? (if you add content regularly)
  83. Did you make a high contrast version of your website?
  84. Did you make good looking URL’s (like this one)?
  85. Did you make sure that there are no frames on your website?
  86. Did you make sure that there are no pop ups on your website?
  87. Did you make a contact form instead of just an email link?

    88. Any suggestions?

  88. Add number 88 by giving a comment on this post!
原文地址



Jcat 2007-01-25 12:39 发表评论
]]>一些页面自动跳转的实现http://www.blogjava.net/Jcat/archive/2006/11/22/82831.htmlJcatJcatWed, 22 Nov 2006 09:20:00 GMThttp://www.blogjava.net/Jcat/archive/2006/11/22/82831.htmlhttp://www.blogjava.net/Jcat/comments/82831.htmlhttp://www.blogjava.net/Jcat/archive/2006/11/22/82831.html#Feedback0http://www.blogjava.net/Jcat/comments/commentRss/82831.htmlhttp://www.blogjava.net/Jcat/services/trackbacks/82831.html功能：5秒后，自动跳转到同目录下的02view.html文件
 
1）html的实现
<head>
<meta http-equiv="refresh" content="5;url=02view.html">
</head>

优点：简单
缺点：Struts Tiles中无法使用
 
2）javascript的实现
<script language="javascript" type="text/javascript">
   setTimeout("javascript:location.href='02view.html'", 5000); 
</script>

优点：灵活，可以结合更多的其他功能
缺点：受到不同浏览器的影响
 
3）结合了倒数的javascript实现（IE）
<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){ 
totalSecond.innerText=--second; 
if(second<0) location.href='02view.html';
}
</script>

优点：更人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）
 
3'）结合了倒数的javascript实现（firefox）
<script language="javascript" type="text/javascript">
    var second = document.getElementById('totalSecond').textContent;
    setInterval("redirect()", 1000);
    function redirect()
    {
        document.getElementById('totalSecond').textContent = --second;
        if (second < 0) location.href = '02view.html';
    }
</script>

4）解决Firefox不支持innerText的问题
<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">
if(navigator.appName.indexOf("Explorer") > -1){
    document.getElementById('totalSecond').innerText = "my text innerText";
} else{
    document.getElementById('totalSecond').textContent = "my text textContent";
}
</script>

5）整合3）和3'）
<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">
    var second = document.getElementById('totalSecond').textContent;

    if (navigator.appName.indexOf("Explorer") > -1)
    {
        second = document.getElementById('totalSecond').innerText;
    } else
    {
        second = document.getElementById('totalSecond').textContent;
    }


    setInterval("redirect()", 1000);
    function redirect()
    {
        if (second < 0)
        {
            location.href = '02view.html';
        } else
        {
            if (navigator.appName.indexOf("Explorer") > -1)
            {
                document.getElementById('totalSecond').innerText = second--;
            } else
            {
                document.getElementById('totalSecond').textContent = second--;
            }
        }
    }
</script>


Jcat 2006-11-22 17:20 发表评论
]]>