var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?aecc9715b0f5d5f7f34fba48a3c511d6"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); fet.setAlias({IMG_URL: "http://img.chinaz.com/"}) var contentid = 638447;
<
>
$.getJSON(APP_URL+'?app=system&controller=content&action=stat&jsoncallback=?&contentid='+contentid); function win() { var w = $(window).width(); var d = 1000; var t = 30; //30为容器宽度1/2 $('.post-prev').css({'left':(w-d)/4-t}); $('.post-next').css({'right':(w-d)/4-t*2}); } window.onresize = function() { win(); } win();
(function() { var s = "_" + Math.random().toString(36).slice(2); document.write('
'); (window.slotbydup=window.slotbydup || []).push({ id: '1080348', container: s, size: '468,60', display: 'inlay-fix' }); })();
您的位置:站长之家首页 > 建站 > 优化 > 正文
(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=13215756937974215344' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();
(function() { var s = "_" + Math.random().toString(36).slice(2); document.write('
'); (window.slotbydup=window.slotbydup || []).push({ id: '2847071', container: s, size: '680,60', display: 'inlay-fix' }); })();
(function() { var s = "_" + Math.random().toString(36).slice(2); document.write('
'); (window.slotbydup=window.slotbydup || []).push({ id: '2847058', container: s, size: '300,60', display: 'inlay-fix' }); })();

减少认知过载:塑造更好的用户体验

2017-01-04 10:35 来源:UI中国 编辑:cherlee【纠错人评论

A-A+

3.过多的选择

自相矛盾的是:用户希望拥有更多的选择,但往往过多的选择会给他们的大脑带来负荷。

席克定律(选择困难症)为我们揭示出了一种现象:用户所拥有的选择越多,他需要作出选择的时间则会越长。从设计的角度来看:人机交互中界面中选项越多,意味着用户做出决定的时间越长。席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。

Image title

(Image: Rakuten)

即便是知名网站,比如说乐天,也会犯类似的错误。因为他们没有很好的理解这个设计准则。给用户需要的而不是给他们认为他们需要的。

解决方案:

你可以将多项选项方进一个集合里面。在很多购物网站里你都可以看到类似的组合方式。完全没必要一次性展示出多种选项。如果可以将他们放在隐藏菜单中,那么就比较理想了。这些隐藏的大型菜单依旧会给用户很多选择,同时这样也不会给他们带来负担。

Image title

(Image: Amazon)

然而,隐藏式的导航栏不利于发现,所以电子商务和新闻领域的设计师应该注意。你可以通过放置其他类似产品的链接使缺点最小化(比方说亚马逊的“相关购买”)或者你可以归纳导航菜单的类别,将它们精简为单行导航(就像苹果和CNN那样)。

Image title

许多与席克定律有关的问题可以通过信息架构的管理来控制,这也是我们接下来要讨论的部分“不易找到的页面和产品”。

4.过多的内容和产品

和过度的刺激与过多的选择问题一样,内容过多会让用户的工作记忆分散到不同的岔道。很明显,你希望展现的仅仅是重要的内容,但对于一些放荡不羁爱自由的网站来说,所有内容都很重要。如果你的网站也有非常多的内容,为了避免对用户造成困扰,你必须学会怎么去合理的组织他们。

Image title

(Image: Arngren)

Arngren的问题并不是它展现了很多的产品,而是同一时间内展示出了很多产品。在组织架构上的调整将会给网站带来好的观感。

解决方法:

George Miller的解决策略是“组块”,它将需要展示的大量内容以可管理的方式组合起来,这是非常有效的。这也是数字组合的记忆方法。一组电话可以分为国家编号,地区编号等将它们组合成一组三个数字和两组四个数字便于记忆,而一连串的11个数字会很难被记住。

你想将许多产品的图片都放在主页上么?比起将它们全部罗列出来,不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

Image title

(Image: Etsy)

说完了图片组块还有文本组块,文本的组块包括简短的自然段,恰当的运用标题和副标题以及足够的留白。

长的信息填写表单是非常吓人的,有时甚至会被用户所遗弃,那么试试一种多步骤的表单吧。你可以将表单的信息分在不同的页面里。记得一定要有一个进度标记来让用户知道还剩下多少页。

Image title

(Image: Virgin Atlantic)

买机票通常需要填写大量的信息,通常没有一项信息是多余的。Virgin Atlantic将原本乏味的信息填写项目分配在单独的页面上:选择航班,填写旅客信息,进入付款详情等等。将所有的信息放在一个页面上会对用户造成负担,因而很有可能被他们放弃。

5.模棱两可的界面

认知过载的最大敌人是混淆不清的用户界面。用户从来都不该花费大量的时间来弄清楚如何来完成他们的动作,也不应该浪费脑力去破译一个图标。

Image title

(Image: SpeedCrunch)

并非所有的用户都是技术咖从而能够理解SpeedCrunch这种含义模糊的图标。即使他们能够识别上面的代表Windows系统和Mac OS X系统的符号,那么位于右下角的那两个图标即使是图灵他老人家来了也且得看一会儿呢。

解决方案:

不要费力不讨好:你可以用那些已被用户从其他网站上所了解的视觉提示。用户通常会用他所熟悉的符号来进行操作。如果觉着这样做没有新意,你可以将品牌特质巧妙的转化为用户所熟识的形式。Home Depot虽然运用了较为普遍的图标,但同时也赋予了他们品牌独有的橙色。

Image title

(Image: Home Depot)

比起非传统标签例如“姓名”和“去”,像“联系人”和“提交”这类标准的标签更容易被识别出来。能被普遍识别的标记可以增强用户的浏览体验,而非普遍的标识会让用户停下来去想这个按钮是用来做什么的。不要为了个性来牺牲简明。

另外,如果真的需要放个以前从未见过的标识该怎么办?如果那样,运用真实的生活场景展示来让其进行自我解释。这叫做:借壳。它是连接现实和虚拟的桥梁。比方说,早起的互联网奠基人选择信封来代表邮件就是因为信封是邮政系统的象征。

同时,要避免含义模糊的符号,特别是它们可能还会被误认为其他东西的代表。就像下列Issuu的图标,有些是为人所知的,但另外一些却不是。如果用户必须通过点击这个图标来发现它的功能,这就会中断他们的操作进程。

Image title

任何一个不能清晰表意的图标都应附带说明来告诉用户它是如何工作的。新的并且不常见的用户界面,需要手把手的教程。比方说,Slack就给出了一个全套的视频指导来说明界面的操作流程。

Image title

(Image: Slack)

注:相关网站建设技巧阅读请移步到建站教程频道。

var cpro_id = "u2312054";
  • 0
  • 0
  • 收藏

看过本文的人还看过

document.write(unescape('%3Cdiv id="hm_t_48595"%3E%3C/div%3E%3Cscript charset="utf-8" src="http://crs.baidu.com/t.js?siteId=aecc9715b0f5d5f7f34fba48a3c511d6&planId=48595&async=0&referer=') + encodeURIComponent(document.referrer) + '&title=' + encodeURIComponent(document.title) + '&rnd=' + (+new Date) + unescape('"%3E%3C/script%3E'));
(function(){var c="//cpu.baidu.com";var a=function(){var e=document.createElement("script");e.id="cpu-block-entry";e.src=c+"/js/cb.js";document.head.appendChild(e)};var b=function(g){var h={msg:g.toString()||"no err msg",line:g.lineno||-1};var f=document.createElement("img");f.src=c+"/msg?m=block&e="+encodeURIComponent(JSON.stringify(h))};try{window.feedsbycpu=window.feedsbycpu||[];window.feedsbycpu.push({siteId:'1045726',blockId:'2167',display:"auto"});document.getElementById("cpu-block-entry")||a()}catch(d){b(d)}})();
document.write(unescape('%3Cdiv id="hm_t_59635"%3E%3C/div%3E%3Cscript charset="utf-8" src="http://crs.baidu.com/t.js?siteId=aecc9715b0f5d5f7f34fba48a3c511d6&planId=59635&async=0&referer=') + encodeURIComponent(document.referrer) + '&title=' + encodeURIComponent(document.title) + '&rnd=' + (+new Date) + unescape('"%3E%3C/script%3E'));
var jd_union_unid="350267405",jd_ad_ids="1469:6",jd_union_pid="CPbz65SSKhCN0IKnARoAIKCX5a0BKgA=";var jd_width=640;var jd_height=90;var jd_union_euid=""; var p="ABYOUhlZEAobN1Eaa0pGT1plRB9IXyJDB1oJJV1WWggrCRZGbHszXCh3ZBFTMx0zZnVvfTN%2FDRkOIgVRGF4RCxIPVytZEQMRAFMeWhEyImYnKxB7CiJYEUYGJQIXAlMTUhAGFQZSGVglAw%3D%3D";
(function(){ var appid = 'cy2rgHwBn0Qe', conf = 'prod_07a96b1f61097ccb54be14d6a47439b0'; var doc = document, s = doc.createElement('script'), h = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement; s.type = 'text/javascript'; s.charset = 'utf-8'; s.src = 'http://assets.changyan.sohu.com/upload/changyan.js?conf='+ conf +'&appid=' + appid; h.insertBefore(s,h.firstChild); window.SCS_NO_IFRAME = true; })()
var cpro_id="u1529699"; (window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"670",rsi1:"230",pat:"1",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#000000",titSU:"0",tft:"0",tlt:"1",ptbg:"90",piw:"0",pih:"0",ptp:"0"}
(function() { var s = "_" + Math.random().toString(36).slice(2); document.write('
'); (window.slotbydup=window.slotbydup || []).push({ id: '2847007', container: s, size: '300,140', display: 'inlay-fix' }); })();
var jd_union_unid="350267405",jd_ad_ids="1329:6",jd_union_pid="CLXr3dmjKhCN0IKnARoAIPyX+rcBKgA=";var jd_width=300;var jd_height=250;var jd_union_euid=""; var p="ABsDUx1cEwAVN1Eaa0pGT1plRB9IXyJDB1oJJV1WWggrEB13cwEqWA91QghUJVJBE2RxWFNIOxkOIgVRGF4RCxIPVytZEQMRAFMeWhEyImYnKxB7CiJYEUYGJQIXA1YcUxYHEABQGl0lAw%3D%3D";
var cpro_id="u2311734"; (window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"300",rsi1:"250",pat:"17",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"",rss2:"#000000",titSU:"0"}
var cpro_id="u1515570"; (window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"300",rsi1:"300",pat:"1",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#000000",titSU:"0",tft:"0",tlt:"1",ptbg:"90",piw:"0",pih:"0",ptp:"0"}
var cpro_id="u1529681"; (window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"300",rsi1:"380",pat:"6",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#000000",titSU:"0",ptbg:"90",piw:"0",pih:"0",ptp:"0"}
(function(){ var adScript = document.createElement('script'); adScript.src = 'http://img.chinaz.com/js/chinaz.js'; document.getElementsByTagName('head')[0].appendChild(adScript); })();
//文章详细页字体切换 $('.newsTitleBox .tabTxt span').click(function() { var bigSize = 'fz16'; var size = $(this).attr('size'); if( size == bigSize) { $(this).addClass('current').siblings().removeClass('current'); $('.newsMainBox').addClass('fz16'); } else { $(this).addClass('current').siblings().removeClass('current'); $('.newsMainBox').removeClass('fz16'); } return false; }); $(window).scroll(function() { //newFixedBox跟随滚动 var h = $(window).height(); var top = $(window).scrollTop(); var newFixedBox = $('.newFixedBox').prev().offset(); var fixedTop = newFixedBox.top; if(top>=fixedTop+344) { var h1 = parseInt($('#content').children('.main').height()); if(parseInt(top) + 340 < h1){ $('.newFixedBox').css({'position':'fixed','top': 0}); }else{ $('.newFixedBox').css({'position':'absolute','top': h1-510}); } } else { $('.newFixedBox').css({'position':'static', 'top':0}); } /* return true;*/ }); //微信二维码 $('.weixinBar .closeIcon').click(function() { $(this).parent().parent().hide(); }); $('#addError').click(function(){ art.dialog({ width:'800px', height:'500px', id: 'test', title: '文章纠错', content: '

       姓名:

联系邮箱:

文章标题:

纠错内容:

   验证码:

', lock: true, fixed: true, ok: function () { $this = this; if($('#contact').val()==''){ this.shake(); $('#contact').focus(); return false; }else if($('#content').val()==''){ this.shake(); $('#content').focus(); return false; }else if($('#article_seccode').val()==''){ this.shake(); $('#article_seccode').focus(); return false; } $.getJSON('http://app.chinaz.com/?app=contribution&controller=tg&action=add&jsoncallback=?', $("#tg").serialize(), function(data){ if(data.status=='success'){ $this.size('200px',100).content('提交成功,谢谢!').button({ id: 'button', value: '好的', disabled: false }); }else{ $this.size('200px',100).content(data.status).button({ id: 'button', value: '好的', disabled: false }); } } ); $this.size('200px',100).title('请稍等').content('提交中..'); $('.d-button').hide(); return false; }, okValue: '提交', cancelValue: '取消', cancel: function () {} }); return false; }); function holdpic(){//控制内容区域的的图片大小并为过大的图片添加查看原图 var options = { imageLoading:IMG_URL+'js/lib/lightBox/lightbox-ico-loading.gif', imageBtnPrev:IMG_URL+'js/lib/lightBox/lightbox-btn-prev.gif', imageBtnNext:IMG_URL+'js/lib/lightBox/lightbox-btn-next.gif', imageBtnClose:IMG_URL+'js/lib/lightBox/lightbox-btn-close.gif', imageBlank:IMG_URL+'js/lib/lightBox/lightbox-blank.gif', auto_resize:false }; $('#ctrlfscont').find('img').each(function(){ var img = this; if (img.width > 600) { img.style.width = "600px"; img.style.height = "auto"; //$(img).removeAttr('height'); var aTag = document.createElement('a'); aTag.href = img.src; $(aTag).addClass('bPic') .insertAfter(img).append(img) .lightBox(options); } }); $('#fulltext').click(function(){ $('.pagebreak').html(''); $.getJSON(APP_URL+'?app=article&controller=article&action=fulltext&jsoncallback=?&contentid='+contentid,function(data){ context = data.content; $('#ctrlfscont').html(data.content); $('.pagebreak').hide(); holdpic(); }); }) //digg.get(contentid, 'supports'); digg.get(contentid); } $(window).load(function(){ holdpic(); });