论席克定律在图形用户界面设计中的运用_图形用户界面设计
论席克定律在图形用户界面设计中的运用由刀豆文库小编整理,希望给你工作、学习、生活带来方便,猜你可能喜欢“图形用户界面设计”。
摘 要
随着电子产品越来越先进,图形用户界面设计也在当下飞速的发展着。怎样让用户与机器更流畅舒适人性化地进行交互,是我们非常需要关注的一个问题。帮助用户和仅是数据的机器搭建一个更好的沟通桥梁,是我们设计师最重要的命题。通过席克定律,我们了解到在为用户设计界面时,我们不仅需要在设计风格上,更应该在早期就帮用户考虑到决策的问题,为用户提供仅需要的选项,去除那些不必要的决策,为用户减少决策时间、降低点击错误率、提供信息获取率、提示用户体验。
本文主要提出了席克定律在图形用户界面设计应该怎样更好地实现。全文先表述了席克定律和图形用户界面设计的意义以及联系。找出总结了席克定律的优点和应该注意的问题。其次提出了在图形用户界面设计中实现席克定律的一些方法。最后希望席克定律在未来的图形用户界面设计发展中得到越来越多的重视和更好的衍生发展。
无论是现在2D的界面环境还是即将越来越普及的3D环境,席克定律依然是在设计界面中应该被重要考虑的一条设计原则。
关键词
席克定律、图形用户界面设计、用户体验、信息传递
ABSTRACT
With more and more advanced electronic products, graphical user interface design is also in the rap-id development of the current.How to allow users to interact with machines more smoothly and comfortably, is a problem we need to pay attention to.To help users and only the data of the ma-chine to build a better communication bridge, is our designer's most important proposition.By Hick's law, we learned that in user interface design, we not only need in the design style, should in the early will help users taking into account the decision problem, for users provide only need op-tions, get rid of those unneceary decision, for the user to reduce decision between, reduce clicking error rate, provide information acquisition rate, prompts the user experience.This paper proposes a law should be how to better achieve the graphical user interface design.Quan Wenxian describes a law and the significance of the graphical user interface design and contact.Find a law summed up the advantages and problems that should be paid attention to.Secondly, put forward some methods of implementation in a law in graphical user interface design.Finally, I hope that Hick's law in the future design of graphical user interface development get more and more at-tention and better derivative development.Both now 2D interface environment or is more and more popular 3D environment, Hick's law is still in the interface design should be important consideration of a design principle.KEY WORDS
Hick’s Law,Graphical User Interface,User Experience,Information transfe 1.图形用户界面设计与席克定律的概念
1.1 图形用户界面设计的定义
1.1.1 用户界面的定义
用户界面(User Interface,简称 UI,亦称使用者界面)是系统和用户之间进行交互和信息交换的媒介,它实现信息的内部形式与用户可以接受形式之间的转换。用户界面是介于用户与硬件两者之间交互沟通的软件,目的在使用户能够方便有效率地去操作硬件以达成双向交互,完成所希望借助硬件完成的工作。
用户界面定义广泛,包含了图形用户界面(Graphical User Interface,简称GUI)、交互设计(Interaction Design,简称IxD/IaD)、用户体验(User Experience。简称UE/UX),本文将着重介绍图形用户界面设计。
1.1.2 图形用户界面设计的定义
图形用户界面(Graphical User Interface,简称 GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户界面。
与早期计算机使用的命令行界面相比,图形界面对于用户来说在视觉上更易于接受。然而这界面若要通过在显示屏的特定位置,以“各种美观而不单调的视觉消息“提示用户”状态的改变”,势必得比简单的消息呈现花上更多的计算能力。
GUI图形用户界面的广泛应用是当今计算机发展的重大成就之一,它极大地方便了非专业用户的使用。人们从此不再需要死记硬背大量的命令,取而代之的是可以通过窗口、菜单、按键等方式来方便地进行操作。
1.2 席克定律的定义与产生背景
1.2.1 席克定律的定义
席克定律(Hick’s Law)是指当选项增加时,下决定的时间也增加。可以用来测出,当有多重选择时,需要多少时间能做出决定,适用于简单判断的场景。该定律可用以下公式表示:
RT=a+b log2(n)RT=反应时间
a=与做决定无关的总时间(前期认知和观察时间)b=根据对选项认识的处理时间(从经验衍生出的常数,对人来说约是0.155s)看到上面对于Hick定律的说明,我们可以知道,用户的在某一场景下对选项的反应时间取决于三个因素: a.前期的认知和观察时间 b.根据认知后,处理的时间 c.选项的数量
因为Hick定律更适用于简单判断的场景,所以Hick定律更适用于移动设备中。
1.2.2 席克定律的产生背景
席克定律(Hick’s Law)是以英国心理学家William Edmund Hick命名的。席克定律也称为“Hick-Hyman”法则。
在1868年,Franciscus Donders先发表了多个刺激行为和反应时间之间的关系的想法。到了1885年,J.Merkel发现刺激选项更大时,响应时间更长。心理学家开始发现这种现象和信息理论之间的相似性。到1995年,William Edmund Hick开始做实验证明反应时间和选择数量呈对数关系。而Hyman想要更进一步了解这两者之间的关系,在他进行深入研究实验之后,他发现反应时间和信息传递呈线性关系。
1.3 席克定律与用户界面设计的内在联系
在人机交互的界面中选项越多,意味着用户做出决定的时间越长。例如比起 2 个菜单,每个菜单有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择。席克定律多应用于软件和网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。
2.席克定律在图形用户界面设计中的优势与应注意的问题
2.1 席克定律在图形用户界面设计中的优势
2.1.1 减少用户决策时间 在用户使用我们的产品之前,考虑一下,我们希望用户在整个使用过程中完成多少个决策?我们肯定希望是越少越好。有些设计很好的APP中限制选项到只有几个。打开百度APP或网站,并没有满页的选择,只有一个最简单的搜索框和搜索按钮。而打开hao123的首页页面,会发现满页的分类选项,甚至连搜索框都需要一定的反应时间才能与其他部分区分开(见图2-1-1 hao123主页与百度主页)。相比之下,百度大大减少了决策时间,让用户进入界面时一目了然就能继续进行想要的操作。
图2-1-1 hao123主页与百度主页
2.1.2 降低点击错误率
如果在用户使用时,点击某个功能按钮,却出现不能使用的提示,你是否会产生疑惑:既然不能用,为什么要放出来做烟雾弹?所以,当用户当前点击该按钮并不能进行任何操作时,要把这些操作隐藏起来。对用户进行适当的行为约束,提前为用户去除掉不能继续的道路。在淘宝购买鞋时,选择不同码数不同颜色会出现不同状态(见图2-1-2 淘宝买鞋界面)。如果没有需要的那一款,该页面对应按钮显示为灰色不可用状态,避免用户购买没有的东西。通过按钮的颜色、位置、大小等,让用户一目了然进行选择点击,获得他们想要的结果,这是设计师需要通过席克定律在前期根据用户的使用状态,对应进行功能项的展示和隐藏,是有效避免用户误操作的常用手段。通过减少无用的选项,由状态所限制操作的设计在很大程度上预防了用户可能发生的操作失误。
图2-1-2 淘宝买鞋界面
2.1.3 提高信息获取效率
当界面上用的颜色越少时,与其他选项不同的那一项重要性就越突出。当处理设计复杂和多文本的界面时,确定一个设计模式是最好的选择。用户在快速浏览的时候,眼睛更容易接收一致的内容,获取信息的效率也就更快,所以你的设计应该视觉上统一。界面中标题和文章只有区分得足够明显,才能够立即区分内容层级。我们要时常回顾设计原则并研究如何使用线条、形状、颜色和空白的。所有的这些东西吸引着用户的注意力,但是一致性让用户更加的熟悉并且更容易做决策。将席克定律运用到整个思考过程中的每个角落,对于在视觉上加强某些元素的设计需要运用的恰到好处,才能更加提高获取信息的效率。
2.1.4 提升用户操作体验
人类大脑在处理多项看起来相似或杂乱而毫无逻辑的选择时比较困难,除非某个选项特别突出。当你的设计充满控件和次要内容时,主要内容就减弱了,并且将更多的选择强加给了用户。所以消除干扰应该在从这里就开始,且应该贯穿整个设计过程。我们消除的选项越多,用户体验就更加流畅。
在农行APP优惠界面中,banner中的文字和下方文本文字的排版让人分不清到底哪一个是设计者想传达的信息,给用户很多不必要的选项,而且原本可以一页表达完的内容板块很大让人不得不下拉阅读。而支付宝的优惠界面,左图右文字,且图片与农行的相比减少了硕大的文字信息,文本文字又有颜色字体的区分,减少了次要内容,它把一件事情,以合适甚至超出预期的方式说清楚了,甚至让人阅读起来舒适愉悦(见图2-1-4 农行APP优惠界面和支付宝优惠券界面)。
图2-1-2 农行APP优惠界面和支付宝优惠券界面
2.2 席克定律在图形用户界面设计中应注意的问题
2.2.1 注意控制信息的选项数量 观察淘宝首页,有各种详尽的选项,例如“女装、男装、鞋靴、箱包”等,而从各种类型中选取“女装男装-潮流女装-连衣裙-春夏韩版连衣裙”。可以看出,web网页更注重深广度的平衡(见图2-2-1 淘宝web端和手机端主页)。
在来看看淘宝手机端,很显然如果直接把web上的结构搬到手机上是不可行的,由于手机设备的限制,其主界面的广度大大减弱,信息深度更为明显。web端上我们可以用面包屑路径或者各种导航清晰的表现出层级结构,让用户不在复杂的层级机构中迷路。但是在移动设备上显示区域有限,没有足够的地方用来放这么多平级选项,更多的时候我们只能用back按钮。席克定律不太适合于在一个非常复杂的层次结构中进行分层选择,最适合于 “刺激——回应”类型的简单决定,当任务的复杂性增加时,席克定律的适用性就会降低。如果设计包含复杂的互动,不能一味只依靠席克定律做出设计结论,而应该根据实际的具体情况,在目标群体中测试设计。正如艾伯特·爱因斯坦说过:“事物应构造的尽量简洁明了,但不能过分简单。”
图2-2-1 淘宝web端和手机端主页
2.2.2 符合用户操作习惯
当我们运用约定俗成的设计习惯时,我们同样也将它逐渐加深灌输给我们的用户。图形用户界面设计中那些通用设计习惯能够帮助用户做决策。比如颜色加下划线的文本,用户知道点击后将进入相关内容的界面。这节约了学习时间成本。能让用户更快的找到他们想要的。类似的模式也存在于一些特定的设计中。如果我们在标题后加上纹理,用户会联想到两点:用户下次看到这个纹理,他们预期这个选项和之前选项有着相同的重要性或意义。设计中运用这些设计模式能够帮助用户基于之前的经验做决策。
用户这种对文字及经验的先入为主,也是一个遵循内容为首位的设计的很好理由。当然,这种设计方法是完全合理的。在这个搜索引擎排名和社交广告的时代,许多用户都是先进入充满文字的页面,而不是一个网站的主页。人类大脑在处理多项看起来相似或杂乱而毫无逻辑的选择时比较困难,除非某个选项特别突出。当你的设计充满控件和次要内容时,主要内容就减弱了,并且将更多的选择强加给了用户。所以消除干扰应该在从这里就开始,且应该贯穿整个设计过程。我们消除的选项越多,用户体验就更加流畅。
2.2.3 参考用户行为模式
当用户在界面中看到图片时,显示完全并且排列整齐的图片会让人觉得所有图片信息已经呈现在界面可见范围之中了,这是用户已经形成的行为认知。而当我们不想在界面中平铺排列图片信息时,我们会使用轮显、卡片式等手法。猫眼电影APP主页上,发布电影时,由于影片数量很多,一次完全铺开又影响用户阅读,则会使用轮显方式。当用户看到半张图片时,符合他们的认知,他们一眼就能明白需要向左拖动图片查看后面的图片信息。这样参考了用户行为模式,减少在页面中列出所有信息(见图2-2-3 猫眼电影APP主页)。
图2-2-3 猫眼电影APP主页
2.2.4 避免设计风格单一化
当所有的内容按照席克定律减少到一定地步,会产生相同的内容构架树状图,某一类的APP就会形成相同的层级和选项,最后导致界面的内容几乎一致,而风格也趋于相似。携程与去哪儿的APP界面,内容结构几乎相同,连按钮设计风格都一样(见图2-2-4 携程与去哪儿APP主页)。
图2-2-4 携程与去哪儿APP主页
3.席克定律在图形用户界面设计中实现的手段
3.1 控制层级与选项的平衡
在克鲁格的《Don’t make me think》一书中写道“善用面包屑导航,让用户知道“你从这条路过来的”,这样可以实现各层级的跳跃。”
试想一下,两个层级,每一级五个选项;三个层级,每一级四个选项;四个层级,每一级三个选项;一个层级,每一级是个选项。这几种层级关系的信息表达方式,你更倾向于哪一种?哪一种用户体验最好?席克定律除了告诉我们要减少选项之外,更是应该达到不同的层级和同一层级不同选项的关系的平衡。
3.2 统一同层级并列项
3.2.1增强同层级并列项的逻辑性
在图形用户界面设计中,很多时候如果你的功能不能让用户一眼就看明白,还需要解释的话,那么你这个功能就做失败了。做法可以是减少按钮和选项,让使用更简洁。减少席克定律中的选项,下决定的时间也就越少,只有一个选项时人们就会最快反应根据这个选择去做。
在微信摇一摇功能界面中,主界面上的内容只有一个图标,就算儿童也能根据指示毫不犹豫的摇起来(见图3-2-1 微信摇一摇界面)。
互联网已经是信息爆炸的时代了,如何从这些里面找到自己想要的,尤其是现在小屏幕设备流行,致使我们更需要减少过度繁杂元素的交互界面设计,让信息更直观的展示。而更加直观的表达方式,让用户能更准确的使用体验,不用在去为这里要怎么操作而苦恼了,让用户有一个更好的用户体验。
图3-2-1 微信摇一摇界面
3.2.2 统一同层级并列项的设计风格
在支付宝APP首页中,并列项的icon的设计风格都是一致的,栅格的排列方式、类似的图标造型、系列的用色都让用户从第一眼就觉得赏心悦目,就算长时间停留在上面也不会觉得太过视觉疲劳。依照席克定律,每个icon做的精致但也考虑到屏幕大小,并不会做的太过复杂或者一个就色彩斑斓。而是一整套设计融为一体(见图3-2-2 支付宝首页)。
图3-2-2 支付宝首页
3.3 区分并列项的不同之处
3.3.1 集中用户界面控件
尽管移动端正在日益普及,互联网用户已经习惯桌面网页的分布方式,认为左上角是logo的位置,把“汉堡包菜单”放到logo的左侧是一个很大的禁忌。
进入DISCOUNT DANCE SUPPLY的主页,首次访问的用户,如何得知最上栏“DISCOUNT DANCE SUPPLY”是导航,而不是品牌logo。界面中几个控件的位置排布各不相同(见图3-3-1 DISCOUNT DANCE SUPPLY首页)。
图3-3-1 DISCOUNT DANCE SUPPLY首页 而进入Softchoice的主页,它的汉堡包菜单作为导航菜单的一部分,用户很容易就识别出它是可操作的(见图3-3-1 Softchoice主页)。它将同一逻辑层级,并列项的空间都排布在一起,与其他的空间区分开来,在分布区域已经设计风格上有明显不同。
图3-3-1 Softchoice主页 Forever 21 logo右侧的导航是很容易理解的,三个排在一起的控件,功能按钮。但是左侧的汉堡包菜单看起来不像是可点击的元素(见图3-3-1 Forever 21主页)。左侧的汉堡包菜单不仅排布的位置让用户点击起来很迟缓,而且没有与其他控件排在一起,还误导了用户它本身的功能和意义。
图3-3-1 Forever 21主页
3.3.2 分区域展示信息
在大众点评主页上,有导航栏、banner、分类信息、搜索框等信息,所有的导航按钮排列在一起,banner也排在一起,而banner板块与导航板块又区分开不同的区域来展示,让用户即使在第一次使用APP时也能迅速浏览整个主页的信息,准确迅速的找到自己需要的板块(见图3-3-2 大众点评主页)。
图3-3-1 大众点评主页
4.关于席克定律在图形用户界面设计中实现的结论与展望
4.1 关于席克定律在图形用户界面设计中实现的结论
时至今日,许多关于席克定律的讨论都还局限于网页设计。传统意义上,这条法则是鼓励设计师限制导航、列表以及操作对象的个数。无论是反对选项过多的下拉或浮出列表,还是反对充满链接的页面,席克定律从本质上反对扩张。
这个观点是对的,但是却不完整。为什么我们用席克定律限制导航?链接是互联网的驱动力,它让用户从一个页面跳转到另一个页面,并与页面产生交互。所以我们需要运用席克定律。限制展现在用户面前的链接和按钮,简化用户决策过程,减少用户在页面间穿梭时的压力和延时。但是席克定律不仅仅只是这些。
如果我们对席克定律的研究止步于此,那我们将错过它的很多价值。为什么我们如此的关注每个层级的选项和所有的层级关系?尽管他们影响用户体验,但是他们不应该是设计师在主导设计时关注的唯一点。我们应该记住,席克定律并不是源于互联网。它的定义的范围很广泛,它不只是测量物理反应或技术扮演的角色,而是测量决策的心理过程。
我们重新体验一下用户经历的思考过程,以及设计一个界面需要考虑的问题。例如,思考导航自身的交互过程,而不是完全只在意吧所有选项茫然排布在界面中。如果那样的话,任何一个顶部一排选项的设计都需要用户做决策。
4.2 关于在图形用户界面设计中实现席克定律的展望
席克定律是设计中很常见的一个参考点。它被引用在无数的设计师应该了解的设计基本法则和定律中。这条定律让我们设计时更加自信,但是很多人却对它理解不到位。相对传统的设计定义,我们要重新定义席克定律。最重要的是设计过程。设计远不仅仅只是美观,它的很大一部分意义是让用户操作时毫不费力。
正如我们看到的上文那些很好的设计,不同的图形用户界面设计中有着不同的目标且制定不同的解决方案,但是最终目的是一样的。当我们运用席克定律来解决狭窄的导航问题时,我们看到了消除用户干扰的力量。智慧地减少网页的选项能带来很好的用户体验,并为设计师立定了一个崇高的目标。
我们不可能总是为忙碌、分心的用户消除所有的决策,但是我们可以通过限制他们心理决策过程中的选项来减轻他们使用界面时的负担。当我们看到大量的决策点时,我们需要清晰的了解我们需要用户做多少决策。每次决策都是一次评估该决策内容重要性的机会。那些致力于让用户仅在有意义的和清晰的选项中做决策的设计师,正在努力传递毫不费力的用户体验。当体验变得毫不费力时,大家都是赢家。
在之前的十多年里,我们的图形用户界面基本都是2D为主,而在将来,可能3D会慢慢占领整个界面设计市场,所以在之后的设计中,我们更应该将席克定律考虑在内,去试验是否适用于3D交互中,从而寻找到席克定律能实现为3D界面做设计的路。
致谢
历时将近一个学期的时间终于将这篇论文写完,在论文的写作过程中遇到了无数的困难和障碍,都在同学和老师的帮助下度过了。尤其要感谢我的论文指导老师——孔莉莉老师和金泠泠老师,她们对我进行了无私的指导和帮助,不厌其烦的帮助进行论文的修改和改进。在校图书馆查找资料的时候,金泠泠老师也给我提供了很多方面的支持与帮助。我做毕业论文和设计的每个阶段,从选题到查阅资料,论文提纲的确定,中期论文的修改,后期论文格式调整等各个环节中都给予了我悉心的指导。这几个月以来,两位老师老师不仅在学业上给我以精心指导,同时还在思想给我以无微不至的关怀,在此谨向两位老师致以诚挚的谢意和崇高的敬意!
由于我的学术水平有限,所写论文难免有不足之处,恳请各位老师和学友批评和指正!
参考文献
唐纳德·A·诺曼《设计心理学》 中信出版社 唐纳德·A·诺曼 《设计心理学2:如何管理复杂》 中信出版社 克鲁格 机械工业出版社
Jon Kolko 《交互设计沉思录》 机械工业出版社华章公司 维基百科:席克定律 https://en.m.wikipedia.org/wiki/Hick%