• 全国400电话网上服务平台
    强大号码库资源任选,方便,快捷,快速开通。
    咨询热线:400-1100-266  

    令用户费脑的认知设计,该如何规避?
    POST TIME:2018-12-03 21:37
     

    今天和大家聊聊“认知负荷”。比来看了一些文章深受启发,我们在我们日常设计中如何去制止一些让用户费脑而抓狂的设计,本文我将会集合我们日常生活中的产品和大家聊聊。

    认知负荷理论?

    认知负荷理论(cognitive load theory)是Sweller等人在20世纪80年代的,主要从认知资源分配的角度考察学习和问题解决。Sweller等人认为,问题解决和学习过程中的各种认知加工活动均需消耗认知资源,若所有活动所需的资源总量超过个体拥有的资源总量,就会引起资源的分配不足,从而影响个体学习或问题解决的效率,这种情况被称为认知超载。(内容来自百科)

    是什么造成了认知负荷

    想要制止用户的认知负荷,那么我们就要了解界面设计中那些因数会影响用户的认知,认知负荷分内在和外在的,内在的当然与用户的文化因素有关,这里我们不做讨论,我们来说下外在影响因素:

    视觉层次结构混乱导航结构不清晰无规则的视觉流需要大量思考

    下面我将集合实例和大家探讨下:

    1. 视觉层次结构混乱

    下面截图是爱奇app,这里我将讨论爱奇艺一些糟糕的设计点。

    Navgation bar:使用频率不高的元素过多;消息,播放历史,添加Label:标签视觉样式样式多Color:颜色过多,是造成用户无法形成视觉流的关键因素Gird layout:网格布局混乱,纵向对齐线过多,且无规律Focus:图2焦点元素过多,造成用户选择困难

    那怎么解决?

    强化主要信息,弱化次要信息(好比图2,更多资讯,换一批等是否可以弱化,去掉颜色?)去掉过多不须要的元素(分割栏上的图标是否可以去掉,满屏的标签是否可以统一弱化)使用网格布局(图片和文字遵循网格排版)。

    坚持一个原则,一个页面完成一个用户目标。

    好的布局是怎么样的?

    结构简单,用户目标清晰,卡片流布局,大家留意到没,youtube在导航上通过“更多”icon把不常使用的元素收起来,这就减少导航上摆放过多低频率使用的操作,这样来减少了视觉上的混乱。

    2. 导航结构不清晰

    首先我们先了解下Navgation design pattern,界面设计中一般使用2-3种导航,别离一级导航和二级导航模式(一级导航一般只有一种,如业务比较多的,一般都使用组合导航,好比顶部与底部标签导航,标签与汉堡组合等等),我们必需在设计上区分它们,不能一级导航和二级导航样式相同,这样无规律的设计会让用户难以抉择。

    图1:爱奇艺app产品内容比较多,所以采用了顶部和底部双标签导航来组织内容图2,3,4:蓝色框部分搜索结果页和视屏播放页还有用户信息页,应该要使用二级导航区分,但是目前奇艺依然使用一级导航设计模式来区分它们(目前国内好多app都这样没去区分),这样就会导致信息结构混乱,信息层级不清晰。

    ios使用Segmented Controller来区分的,google的materials好像在这方面没有明确的说明,所以这就导致大量的导航混乱,不过好像大多数用户已经习惯了?(二级导航一般无特殊情况是不会允许在一级界面)

    清晰的导航架构是怎样的?

    一级导航和二级导航区分明显,清晰的信息架构,用户能知道优先级。

    这里说下Nike+的导航系统,在顶部使用了标签式作为一级大内容区分,,二级导航采用类似分段内容导航来区分单个模块下的内容。

    为何要区分一级和二级导航?

    一级导航一般都是大功能模块之间的区分,二级导航一般用于单个功能模块里面的内容作为层级区分,请谨记。目前国内app设计质量不齐,导航规则混乱,没有一个完整的Design system来指导整个企业的产品规则,所以我们可以从本身产品做起,在产品设计中把信息架构搭建好。

    无规则的视觉流

    要做好视觉引导我们就要懂一些设计心理学,我们要了解人是如何阅读,如何不雅观察,如何记忆,如何思考,如何集中注意力,如何快速进入流的状态等等。

    最常用的阅读模式是F pattern和Z pattern。

    一个页面一屏出现了这么多耀眼入口,我该如何选择?没有主次,看起来所有都很重要?

    
    Copyright © 2003-2016
    时间:9:00-21:00 (节假日不休)
    版权所有:巨人网络(扬州)科技有限公司
    总部地址:江苏省信息产业基地11号楼四层
    《增值电信业务经营许可证》 苏B2-20120278
    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信

    微信号已复制,请打开微信添加咨询详情!