首页 > 编程技术 > html

关于web注册页的可用性分析

发布时间:2016-9-20 19:05

  在Nielsen的可用性工程里提到可用性的其中一个原则是Errors,记得刚开博客的时候也穷举了一些关于可用性方面的文章,里面将这个errors翻译成了“少错”,实际上我个人觉得(也有不少版本这么翻译)“容错”更为贴切。无论是客户端软件还是web软件,用户毕竟不是专业人员,他的操作必然不能按照程序员所设定的路线来走,那么很有可能就会发生错误,“少错”是一个很含糊的概念,怎样做到少错,如何才是少错呢?真正需要做的应该是“容错”,当用户发生错误时,系统要能做到给予正确友好的提示,帮助他完成操作流程以及目的。

  前阵子由于工作的需要,对于系统给予用户填写信息的反馈进行了一些肤浅的研究,主要以web注册页的操作体验为主,现整理出来与大家共同分享,也欢迎大家拍砖,以共同提高。第一次写所谓的“技术贴”,必然有很多不足,希望各位及时纠正,万分感谢。

  首先举一个失败的用户体验的例子,126邮箱注册,不过那是一个月以前了,今天本想截图贴上来的,结果登录发现已经改版了,不错,确实该改了,需要进步嘛!不过却不利于文章的描述了,看来我只能凭着自己的印象来写了,要是有什么偏差,见谅!

  原有的126邮箱注册页并不象现在将用户名的填写单独做为一页进行强调,当时所有的信息填写都在一页中,而且没有检测用户名的按钮,这就意味着用户在进行填写时必须完成所有的输入框才能得知自己所键入的用户名是否合法或是否可用。而且整个页面没有一点提示信息,实在让人费解。更郁闷的事,对于错误的提示采用的是弹出对话框,以上所有都大大降低了用户操作的效率。我简要模拟一下当时的过程:

  首先,我在用户名的输入框中键入一个特殊符号,为了节省时间更快的看到系统给予的反馈,我直接跳过了中间所有的信息填写,并点击注册,这时,系统弹出了一个对话框:

  

  这里的文字实在太为模糊,怎么就不合法了呢?那怎么样的用户名才是合法的?实在让人伤透脑筋。

  我重新输入了一个数字,系统又提示到:

  

  好,那我不用数字,我用字母总可以了吧,我输入“a”:

  

<

  1 布局、外观错误

  1.1 页面宽度

  1.1.1 页面内容宽度选择不当

  问题

  设计页面宽度时不考虑使用800*600分辨率的用户

  分析

  根据W3Counter在2006年7月9日发布的全球Web调查显示,使用800*600分辨率的用户仍占11%,所以在设计页面宽度时,要照顾这部分用户。

  游戏站的用户大多是游戏玩家,他们中间绝大多数人的浏览器分辨率是1024*768或更高的分辨率,所以游戏专题为了获得更好的效果,可以在1024*768分辨率下设计页面宽度,一般为900~1000像素宽。但不排除其中也有一部分800*600分辨率的用户,为了保证这些用户能在第一屏获得更好的效果,要把主要内容放在页面左侧。

  公司首页、毒霸、WPS、词霸等站,应尽量保证800*600分辨率下不出现横向滚动条,即页面宽度为公司常用的760像素宽。

  除了固定页面的宽度,设置页面宽度的像素值外,还可以将页面宽度设为100%,以保证各个分辨率下的用户都不出现横向滚动条。对于信息量比较大的页面建议使用100%宽度。但100%宽度的页面会增加宽屏用户浏览网页时视线移动的距离,可以用Javascript控制这类页面的宽度,给它限定一个最大绝对值。

  案例

  神州学习网,面向的用户中有很多是大学生用户,目前大学里800*600的显示器还是占不小的比例的。而这个网站采用1024下的页面宽度,显然会失去一部分用户。毕竟类似的学习网站还有很多。

  我们政府的网站,面向的用户是全国人民,不应该采用1024分辨率下的设计宽度。

  1.1.2 页面内容宽度不一致

  问题

  页面中的一部分内容宽度超出主体内容的宽度

<

一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符组成的。在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。

这里有一些可能会遇到的正则表达式示例:
JScript
 VBScript
 匹配
 
/^[ t]*$/
 "^[ t]*$"
 匹配一个空白行。
 
/d{2}-d{5}/
 "d{2}-d{5}"
 验证一个ID 号码是否由一个2位数字,一个连字符以及一个5位数字组成。
 
/<(.*)>.*</1>/
 "<(.*)>.*</1>"
 匹配一个 HTML 标记。
 

下表是元字符及其在正则表达式上下文中的行为的一个完整列表:  字符
 描述
 

 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如,'n' 匹配字符 "n"。'n' 匹配一个换行符。序列 '\' 匹配 "" 而 "(" 则匹配 "("。
 
^
 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 'n' 或 'r' 之后的位置。
 
$
 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性,$ 也匹配 'n' 或 'r' 之前的位置。
 
*
 匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。
 
+
 匹配前面的子表达式一次或多次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}。
 
?
 匹配前面的子表达式零次或一次。例如,"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。
 
{n}
 n 是一个非负整数。匹配确定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',但是能匹配 "food" 中的两个 o。
 
{n,}
 n 是一个非负整数。至少匹配n 次。例如,'o{2,}' 不能匹配 "Bob" 中的 'o',但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
 
{n,m}
 m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。刘, "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
 
?
 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。
 
.
 匹配除 "n" 之外的任何单个字符。要匹配包括 'n' 在内的任何字符,请使用象 '[.n]' 的模式。
 
(pattern)
 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用 SubMatches 集合,在JScript 中则使用 $0…$9 属性。要匹配圆括号字符,请使用 '(' 或 ')'。
 
(?:pattern)
 匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如, 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。
 
(?=pattern)
 正向预查,在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如, 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ,但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。

<

编写JS的时候,总会调用的网页上的控件,今天有心情,把获得网页上的控件方法写了下,有不足,请补充.
【总结】一般我喜欢使用:document.getElementById()和document.all().现在觉得document.all.*比较不错!
关于其更深一步的原理暂不清楚,希望有明白的人给个深入讲解的链接!!


本帖以获得页面的text文本为例,获得控件后为其赋值为"你好!"
【附一:方法大全】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>获得网页控件的方法大全</title>
<script language="javascript">
 function AXzhz()
 { 
  //【AX为文本框的id,通过下面的方法对文本框赋内容】
 
  //【根据控件ID】
  document.getElementById("AX").value="你好!" ;
  //document.all("AX").value="你好!"; 
  //document.all.AX.value="你好!";
  //不成功 document.AX.value="你好!";
 
  //document.body.all("AX").value="你好!";
  //document.body.all.AX.value="你好!";
  //不成功 document.body.getElementById("AX").value="你好!";
 
  //formid.AX.value="你好!"; 
  //不成功 formid.getElementById("AX").value="你好!";
  //不成功 formid.all.getElementById("AX").value="你好!";
  //formid.all.AX.value="你好!";
  //formid.all("AX").value="你好!";
 
  //【根据控件name,返回的是一个数组集合,再通过下标获得控件】
  //document.getElementsByName("textfield")[0].value="你好!";
  //不成功 formid.all.getElementsByName("textfield")[0].value="你好!";
  //不成功 formid.getElementsByName("textfield")[0].value="你好!";
 
  //【根据标签,返回的是一个数组集合,严格来说是获得标签中的内容,估计用到的机会不是很多】 
  //document.getElementsByTagName("td")[1].innerHTML="你好!";   
 }
</script>
</head>
<body>
<form id="formid">
<table width="200" border="1">
<!--title是鼠标在上面的时候出现的提示-->
  <tr title="快啊快啊!!" onclick="AXzhz()">
    <td bgcolor="#FF9933">你点我啊!!<br>
 <INPUT TYPE="text"value="根据标签测试时使用,请仔细观察结果!">
 </td>  
  </tr>
  <tr>
  &nbs

<

  使层能够遮挡住下面的列表,只要在层中加入一个和层相同大小的<Iframe>就可以了。

  具体做法如下:

<DIV>
<!--//原来的内容//-->
<IFRAME width="100%" height="100%" style="position:absolute; top:0px; z-index:-1; border-style:none;"></IFRAME>
</DIV>

  这个方法对于透明的或外形不规则的层无效。




标签:[!--infotagslink--]