更流网络注重细节,改变网站设计的用户体验

深圳网站建设公司更流网络做网站设计已经9个年头,回想以前的网站设计经验,今天写点自己的小经验,常将用户体验挂在嘴边,不如实际些将网站设计上的一些细节功能完善这才是网站设计用户体验的“王道”。虽然不是什么秘绝,拿出来和大家一起分享,如果实用请留言一起讨论。

  1.显示图片时,提示loading图片显示加载中

  这个功能是在2006年开始盛行的。当网站加载一张比较大的图片时,一般因网速影响显示出来的时间都会不同,如果能加载图片时显示loading的小图片,那样看起来就人性化很多,要知道让用户傻傻的等待是很笨的。当加载完成时,图片会盖住loading小图片。要实现这个小功能,只要在网站的公共样式表上添加下面这个样式 ,就可以实现了。

  img {
  background-image:url(loading.gif);
  background-position:center;
  background-repeat:no-repeat;
  }

  懂CSS的站长可以略去这段。第一行“img”指向页面的全体图片元素(看到样式表的优势了吧,只要一句,就能作用于网站的全体同类元素,不是DIV+CSS的网站站长是不是有想法了?呵呵)。第二行“background-image:url(loading.gif);”是指为图片添加一个以图片为背景的背景(读起来有点拗口)。这个loading.gif是你要你自己上传的加载小图片。不过有些网站的images文件夹里已经有这个图片了,直接用就行。第三行:background-position:center;把背景图片居中,这样看起来比较顺眼。第四行:background-repeat:no-repeat;就是让loading.gif小图片只显示一个,如果没有这句,就用出现很多排列起来的loading.gif小图片,这要注意一下。

  2.表单填写的小提示“选填项”

  这是我最初在QQ网站的留言本上看到的,当时看到个人信息的一些表单旁边写着“可不填”的时候,真的是感觉非常舒服,你想想,人家好不容易有空给你留言,你还想人家慢慢看你的留言说明吗?给你留言,当然想简要完事啦。你却动不动跳出个“表单内容不能有空”这不把人家吓跑才怪。这个小技巧可以应用于各大论坛的用户注册,留言本等地方,不要只在必填框旁边加个红*就算了,这样对于熟悉网站的人来说当然没问题,但你要考虑到各种各样的网民。“选填项”三个字,就能大大提高用户体验,为什么不试试呢。

  3.保证每个页面都有回首页的链接

  为什么要做这个呢?因为我看到很多网站都没注意到这个小细节,有一次我在一个论坛上登陆,成功后,他跳转到另一个页面提示登陆成功,等了十几秒它都不自动返回,但我又已经顺手把多的页面关掉了,所以,只剩下一个页面了,我又不能返回,他又没有返回首页的链接,一气之下,我就关掉浏览器走人了。所以,建议站长朋友们有空多检查一下自己的网站,看是不是有些页面是孤独的。

  4.在执行AJAX操作时,如果响应时间过长,应提示用户加载超时

  这个在AJAX中,可以使你的程序更人性化的小技巧,不多说了,你看下面的代码就明白。如果你看不明白的话,就不要乱改网站,会出错的。这是一个用户验证的程序片段,注意红色部分。

  var timeLast;
  //发送信息
  function submitSelectItem()
  {
  var postStr="uid="+document.getElementById("userName").value+"&pwd="+hex_md5
  (document.getElementById("passWord").value);
  timeLast=window.setTimeout("show_timeout()",15000 );//超过15000毫秒后显示超时
  show_waitting();
  createXMLHTTP();//创建XMLHttpRequest对象
  var url="ajax/chcekUser.aspx?time="+TimeDemo();
  xmlHttp.open("POST",url,true);
  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded:charset=UTF-8");
  xmlHttp.onreadystatechange=getResponseRusult;
  xmlHttp.send(postStr);
  }
  //回调函数
  function getResponseRusult()
  {
  if(xmlHttp.readyState==4)//判断对象状态
  {
  if(xmlHttp.status==200)//信息成功返回,开始处理信息
  {
  clearTimeout(window.timeLast);
  var reint=xmlHttp.responseText;
  switch (reint) {
  case "1":
  show_success();break ;
  case "2" :
  show_tryCountOut();break ;
  default :
  show_error();break ;
  }
  }
  }
  }

  5.可能的不良后果提前提醒用户

  如果你的页面很大,特别是要用到很多表格时,加载时间可能会很长,这时候要提前告诉用户。“页面可能加载时间比较长,请耐心等待....”之类的。

  6.网页效果必须测试通过“火狐”“IE7”“IE8”

  这主要是有些美工不太负责,你不要求他就不测试。所以要自己测试一下,发现在其它浏览器显示不正常时,要求美工修改我们做的页面都经过火孤,IE7,IE8,IE9等测试才交给客户的。我觉得交给客户不成熟的东西会对自己形像不好。

  7.文章标题采用缩略时,要在“title"有完整描述

  · 创建简短、描述性的网页标题,不同方便用户也可促使搜索引擎用户点击网站链接。
  · 完整的TIETLE同时也是让用户有预览了解文章内容的效果

  8.用户人性关怀

  如果网站使用了注册制度,主页应该为新用户和老用户登录提供链接。并且要有某种方式让我知道自己已经登录了,友好方法(“欢迎来到Gotoway”)。

  9.让我看到自己正在寻找东西

  主页应该让我想要任何东西显而易见——如果它在站内某个地方话。... ... 还有我没有寻找。同时,主页也应该让我看到一些很精彩,我也许感兴趣内容——就算我并没有寻找它们。

  10. 网站设计之最-导航

  · 网页下载时间控制在10秒之内(50kb,包括图片)。
  · 相关的导航内容放在一起。
  · 菜单栏选项使用常用的名称:主页,关于我们,联系我们,帮助,产品,避免出现时尚、流行的选项。
  · 如果网站利用Flash,确保出现HTML版本,有些用户不喜欢眩目的网站。
  · 网页底部出现简单的文本链接,这样用户就不必退回网页顶部。
  · logo与主页进行链接(除去主页logo之外),另外所有二级页面要与主页进行链接。
  · 展示网站浏览路线,就是指从主页进入各级页面的路径,比如说,主页 > 主菜单>次级菜单 > 二级页面。这样用户可以方便地操作网站。
  · 如果网站内容太多,你可以提供站内搜索。网站主页的右上方可以设计搜索框,或者提供搜索页面,以及内部页面与搜索页面的链接。网站需要具备功能强大、免费的搜索引擎。
  · 搜索框用来搜索网站内容,而不是所有网络内容。
  · 创建常用的错误页面,页面中呈现站点地图,以及与网站主要内容的链接。这样,网站就不会流失链接无效或者URL输入错误的访问者。

本文出自:http://www.gengliu.com/news/b1a6d943-e115-4fbd-816d-077bd36f294b.htm


深圳网站建设公司更流网络供稿,转载请注明出自,谢谢!

本文关键字:网站设计,用户体验

最新评论
等你来评论
您的昵称: 您的联系方式: 验证码: