Tag: UX

读了《餐巾纸的背面》

之前沙沙有分享过一次,于是欣然的去读了这本书,总局的用图去思考问题,怎么有些熟悉呢,也应发了一些我的思考。
我们回到过去,想象一下天天埋头在数学题的时候,我们会主动的选择我去画一个图然后慢慢的解决某个问题。把我们的难题视觉化,通过图画和一些表示符号逻辑的思考问题。

视觉化思考是解决问题非常有效的方法,尽管看起来很新鲜,但我们其实已经知道了应该怎么做了。

本书提供给我们的方法:通过4个步骤(看、观察、想像、展示)、3个视觉工具(肉眼、内心的眼睛、手眼合作)和六六法则(谁/什么、有多少、在哪里、在什么时候、怎么样、为什么)来分析并解决难题,很好用,是分析的利器,他能完善我们在分析中的遗漏使之变得周全,并逐步的剥离掉假象,直接深入本质解决问题。

全篇的读完与其说是教我们应该如何画图,更不如说是教我们用什么方法去整理我的的思维或是应该从哪些方面去考虑问题。它提供了一个模式化的思维方式,这个框架的产生能让我们把难题逐个的代入理清并解决。不过有时候还是不能完全照搬,但是这样做的好处在于它绝对能够给我们带来启发,找到偏漏的地方。 这样我们就会变得更敏锐,更具有洞察力。这些也正是我们理解、解决和沟通问题前提。

于是我也就阅读了这本书之后做了一个尝试,把我之前做过的一个项目进行研究。其实方法不一定一定是要使用在设计之前,也可以使用在设计之后进行总结的时候使用。一起演示给我们的产品经理或者是其他的朋友们,运用这种方式能够使我们更快的理解产品设计和流程也能有效地找到我们所需要的。虽然期间也发生了一些有趣的碰撞,不过没有关系,我们反复的进行着某些步骤,直至我们达成共识。这才是我们真正想要的结果。于是我们可以继续循环往复的进行尝试碰撞出更多我们将来会做的部分。恩,这或许又是一种突破。

餐巾纸的背面

图片上是当中的一小段在纸上分析的图片


其实还是觉得我们还是要勇于去尝试新的方法,即便是会有问题,可以反复试错积累经验。书中的方法我们可以去借鉴,不过关键还是通过练习形成自己的一套方法。

这次的尝试,我们抛开了PPT,抛开了原型,我们只有几张“餐巾纸”。

《错觉——WHY WE MAKE MISTAKES》读后感(一)

         前几天读了约瑟夫·哈里南写的《错觉——WHY WE MAKE MISTAKES》新书,有感觉!了解到人们为什么总是会犯一些自己都无法察觉的错误。之后与工作结合一下,有了自己的一些看法,其中有几点就与大家一起分享一下。

1、人们看到的只是自己感觉到的和自己希望看到的那一部分。
       生理原因:眼睛能够清晰看到的视觉范围只有2度,超出了这个范围,眼睛所能看到的东西就越来越模糊。因此,在网页设计的时候我一定要把主要内容区域的宽度控制在浏览者眼睛能够清晰看见的2度范围左右,这样利于用户看清主要内容,同时利于速读的浏览者。一般来说1280px宽的显示器下面,主要内容区域在500px~650px宽度是比较合适的。可以看看google、bing、yahoo等搜索结果页面,显示列表的时候宽度都不会超过650px,一般都在500px左右。OK,眼睛的生理原因知道了.接下来就要考虑目标用户对什么有感觉,他们最希望看到的东东是什么?想好了,做好内容之后就往那2度左右的范围里加吧,浏览者在这范围内轻松的看到感觉到自己喜欢的内容和文字,当然这也是自己希望看到了东东,岂不是乐哉!但是一定要注意的在横视范围类,每块区域最好只有一个重要的主题内容,千万不能百花齐放,层次分明才是上策。
         说到这儿,我觉得需要说明一个事儿。就是很多广告商喜欢上传一些闪来闪去的GIF动画或者FLASH广告,觉得这样就可以第一时间的吸引用户。其实这样做不一定能吸引用户,有时反而会造成用户的反感,除非正好有用户需要广告中的东西,他们可能就会被闪来闪去的广告所吸引。因为现在已经不是网络的初期了,人们在海量信息的网络时代已经学会了过滤信息,自己已经有一个心理雷达了。是广告或者看似广告的设计都将会被用户迅速的过滤掉,甚至很多时候都不用过滤直接被忽略。所以网络广告的设计一定简洁明了直奔主题,形式不易过闪,动作不易过快,避免造成用户反感。不易过于互动,用户没有太多时间和广告玩儿。

2、人们生来就知道放弃
       通常而言,人们在寻找失败的时候会放慢速度,成功后会加快寻找速度。但是人们在寻找那些平时很少能看到的东西时,几乎总是会轻易的承认自己无法找到,他们倾向加快自己放弃的速度,和压缩自己能够忍受的退出时间。哈哈,这一点说明人们的意识里原本就知道且容易去放弃。所以人们在浏览网页的时候也存在同样的意识,为了避免用户很快的放弃,我们采取的方法通常是让网页内容重点层次明确;网页路径清晰;广告根据会员喜好精确投放;提供强大的搜索功能等等。但如果在网页内容上也根据会员喜好自动精确投放的话那就更好了(现在的做法通常是用户自己个性化定制自己感兴趣的内容),这样也就能避免由于用户在找寻内容时可能出现的放弃。

3、 细节不重要,意义才重要
         人们总是很容易记住其他人的职业、个人爱好和出生地(在语义学意义上,有更丰富的含义)——这些信息是有意义的,但名字往往不怎么能记住,因为他们没有明确的意义。如果这个意义可以广泛讲的话,例如:我们在做设计网页的时候往往对边框是用圆角和直角纠结不清,反过来想想浏览者对这个网站是做什么的主要内容是什么都不知道,谁又会注意你的边框是圆还是直呀。网站没有内涵没有意义,就算把这圆角做成金子也无人会关注的。因此设计网页得从大局大框架出发,做出实际内涵意义之后再修饰细节也不迟呀,先做容易让人记住的。始终要相信,人们记住你的网站不是因为圆角和直角,而是真真切切的内容。

4、瞬间判断,难以动摇
         人们都有种很倔的性格,始终都是坚信自己的初衷,就算自己不愿相信但是往往最终还是这样做了。最典型的例子:买衣服往往最后都是买了自己的第一次瞬间看中的那件。瞬间判断也就是第一印象,卖相如何直接影响人们消费欲望。举个例子,淘宝网和ebay国际站放在中国的大环境下,人们会选哪个。当然选会淘宝网,因为淘宝网的卖相符合中国大众的胃口。尽管中国大众也在跟国际接轨,指不定那天就喜欢上了ebay国际站的卖相,不过现阶段或者今后很长段时间,淘宝网还是符合中国大众口味的购物网站。所以在任何一个行当的网站设计中,利用人们的瞬间判断,让人们瞬间记住这个网站并且能判断出是好网站,那么恭喜你,这个网站将在人们心里永远记住,并且也将成为以后首选。当地的实情,当地用户的审美观和价值观将成为人们瞬间判断的主要依据。

5、虚荣心是大脑皮层反射出来的快感
        其实这个在日常生活中也是很常见的。例如:我们在喝价格昂贵的葡萄酒时,感觉味道就是比价格低葡萄酒的味道好,其实就是一瓶葡萄酒。把二锅头倒进伏特加的瓶子里,也能喝出伏特加的味道。其实喝的不是酒是瓶子,呵呵。这是人们与生俱来的虚荣心引起的,迎合人们的这种心态是可以增加人们的消费欲和品牌忠诚度的。不过要让人们产生虚荣心,势必首先品牌要得在局部或者大部分地区有知名度,这样让人们能拉开优劣的差距。差距越大,大脑皮层的反射才越强烈才越快乐。 

6、人们对自己的“作为”比“不作为”,感觉要负有更大的责任
   这种现象在网络新手中出现得相当普遍。例如:一个新手要注册成为一个网站的会员,但预知可能会出错,那么这个新手可能就不会注册了,不会去做了。这个也能解释为什么当人们遇到一个长串的表单时,往往会望而止步,因为这个表单太长,更主要的是他们怕出错。不做当然不会错了,所以宁可不做也不愿意负担起做了错了以后的责任。这也就是以后出现了简洁的注册表单(大多数网站只包括会员名/密码/邮箱,同时也对填写项做充分的注释和即时校验)的原因。减少注册步骤,减少人们的顾虑,减少人们对做了以后万一出错而带来的责任负担的心理压力。所以要让人们大胆的在网站上晃悠,那就不要让人们感觉太大的心理负担。提供充分的注释和即时校验,还有亲切的文案(千万别用文案批评人们,人们会以为你在鄙视他),让人们在顺畅的心智下浏览网站。

今天就暂且分享这6点,下回继续分享……

【超级下拉导航菜单初探 】Knew about Mega Drop-down Menu

【摘要】

导航菜单不一定是一个文字链接的简单集合,它可以丰富地表示导航信息的层级, 甚至反应整个网站内容的层次结构。由于普通下拉菜单存在很多可用性问题,促使Mega drop-down menu应运而生,由于这种菜单真的很牛X,所以我叫它超级下拉菜单。相关测试证明了超级下拉菜单克服了普通下拉菜单的缺陷,值得推荐广泛使用。

【正文】

首先结合实例,我们先分析一下超级下拉菜单是什么样子的。

2009-09-30_mega drop down

1.巨型的、二维的面板将导航选项明确的信息分组;

2.通过布局、版式和图标等手段来组织导航选项的内容;

3.一次性、快速地发现所有信息,无需滚动;

4.当主导航在页面顶部时,可垂直或水平展开菜单;当主导航在页面左侧时,可以飞出的形式展开菜单。


其次,我们来看看超级下拉菜单之于普通下拉菜单的优势。

1.一目了然

对于大型网站来说,普通下拉菜单通常隐藏了大多数用户需要看到的选项。虽然通过滚动可以解决展示的问题,但由于用户无法直观比较所有的选项,他们不得不依赖短期记忆来记下扫视过的信息,记忆力的好快直接影响了完成任务的效率。尤其是下拉菜单过长时,普通下拉菜单就更让人苦恼。

而面对复杂的网站(尤其电子商务网站)超级下拉菜单充分体现了“一目了然”的原则,全部信息尽收眼底,用户无需承担记忆的负担。


2.明确分组

普通下拉菜单层级和分组都不明确,一般是在二级菜单名称前加一个“ – ”,或者缩进处理。

而超级下拉菜单由于包含的信息众多,所以从信息组织、布局、视觉表达上均强调了选项之间的层级和分组关系,帮助用户了解他们的选择。


3.信息可视化

普通的下拉菜单一般只适用文本链接,我们需运用排版、文本样式来区分不同选项的层级关系和重要程度。

而超级下拉菜单可以通过使用图标、图片、提示等丰富的形式,让选项信息可视化,更直观,更容易理解。在windows Word 2007的下拉菜单中用图标代替了文本,且鼠标移上每个图标时显示提示信息,帮助用户做选择。


接着,重点切具体地研究下超级下拉菜单的应用规则。

我所说的规则是针对超级下拉菜单的,对普通下拉菜单同样适用的规则此处省略××字。

1.响应速度

响应速度是设计用户界面时要重要考虑的因素之一,之于超级下拉菜单也不例外。一般界面元素必须在短时间(0.1秒内)作出反应,好让用户觉得是他们操作导致了屏幕上的变化,过慢的响应使他们感觉操控电脑与自己无关,所以响应需要及时。但是针对超级下拉菜单的特点,速度过快也不太好,用户要浏览的信息众多,如果鼠标不小心移出菜单就关闭菜单的话反而干扰用户的操作。

因此,在设计中我们应该注意响应速度的设置,并且针对不同的系统和浏览器予以测试,保证它的可用性。如何设定这个时间呢?根据尼老爷多年的实验得出以下建议:

A.鼠标在导航的某个选项上悬停0.5秒。

B.如果鼠标仍停在这个选项,则需要在0.1秒之内展开超级下拉菜单。

C.如果鼠标移出导航选项,且停留在导航以外区域超过0.5秒,则在0.1秒内收起超级下拉菜单。

D.对角线原则:如果鼠标如下图的路径左上至右下滑行,期间会移出导航选项和菜单的区域,在这种情况下应该保持超级下拉菜单的展开状态。虽然多数用户不存在这个问题,但是针对老年人和行动不便当用户应该适当的加长这个时间。


2.合理的组织菜单中的众多信息

超级下拉菜单包含的信息从形式上有文本、链接、图标、提示等,从内容上又包含多级导航选项、网站流程、具体的产品信息等,合理的组织这些信息,明确了分组,才能是超级下拉菜单发挥真正的作用。从主要分组的准则是:

A.按照信息的相关度打包。例如可以通过卡片分类的方法研究用户心智模型,从而将相关度高且用户认可的信息集合在一个组。
B.保持中等水平的粒度。不要在一个分组提供过多的选项,降低用户扫视这些信息的时间。相反,也不要划分的太细,这样用户需要花更多时间去了解每个分组的含义和区别。

C.使用简洁、描述性、标签化的文案。Web产品的文案有个准则:让用户在扫读时通过关键词抓住意思,避免使用专业术语。
-使用简洁、直白的文案;
-不要在同一个菜单中使用雷同的用词。

D.按信息分组布局。可以根据分组信息的重要性或使用频度来排序、布局,并通过视觉手段明确分组和层级关系。

E.不要出现重复的选项信息。不要让用户困惑,去除冗余的信息。


3.保持简单有效

按照可用性的标准,让超级下拉菜单“保持简单”,我们可以在菜单上做很多事,但并不意味着我们应该这么做。

A.用户真正需要的是一次点击达到目的,不要为了使菜单看上去很高端就乱用花俏的交互效果和功能。

超级下拉菜单是一个快速跳入跳出的控件,而不是对话框,并非越复杂越好。有的超级下拉菜单有右上角会有一个关闭按钮,用户需要快速的点击-查询-跳转,当用户将鼠标移动到导航的其他选项或页面其他区域时,当前的菜单会自动关闭,所以这“关闭”是没有必要的。而对话框可以很复杂、很炫,如果他们不想用了就关掉它,嫌它碍事可以挪到其他位置。

B.超级下拉菜单适用于网站的导航、浏览,对那些需要持续可见的、不能被中断的操作是不适用的。

举个反例,有的网站把导航栏中“我的帐户”登录设计在一个下拉菜单中,用户在填写表单的时候鼠标可能会移到菜单外,于是菜单就收起不见了,这个设计就妨碍了用户的操作。简单而有效的方案是直接把“我的帐户”登录链接到一个全新的页面。此外,全局搜索框也是个例子,没人会把它放在一个下拉菜单里,当然下图是个意外。

collabfinder

C.尽可能的避免信息过载。

不要因为超级下拉菜单巨型、有很多空间就扔很多的信息进来。越少的选项信息就意味着越少的扫读时间,同时减少理解的成本,少出错。


4.无障碍操作

提高超级下拉菜单无障碍操作,可以通过以下几种方法:

A.简单:不要妨碍下拉菜单的访问,使导航中的每个选项保持可点击,指向的页面链接也是正确的。

B.快捷:通过快捷方式访问。例如Word2007中,按一个字符选择以及菜单中的项目,并显示相应的超级下拉菜单。在菜单的每个选项旁边显示快捷提示。这样用户通过一两个字母就可以顺利快速的操作,无需记忆,而且理解成本更低。

C.兼容:完成超级下拉菜单的设计后,实现阶段我们应该注意显示器和浏览器等的兼容问题。保证大多数的用户可以顺利浏览到超级下拉菜单的所有信息。


【后记】昨天在工作中遇到一个关于导航的问题,一小撮er不明真相的群众就“是否需要引入超级下拉菜单”的话题热烈讨论。本想作为论据把尼老爷的文章翻译一下的,不过看了看太麻烦,还是在自己消化的基础上小结了一下。如有跑偏,请大力拍砖^_^。



【参考文献】http://www.useit.com/alertbox/mega-dropdown-menus.html

http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/

http://hi.baidu.com/numetal/blog/item/46245055e1c1ab163a293582.html

制作一个向导

设计一个有效的向导,是不是设计师一个利器? 向导是为了使繁杂困难的任务变得似乎很容易,它的使用宗旨是屏蔽那些对于用户来说需要较高理解成本的那些内容,让用户能够更加的顺畅工作下去。


什么是向导?
向导,普通我们理解为引路人。通常人们由A地到B地,由于不熟悉道路而请熟路的人引路到达目的地,这就是向导的作用。
衍生一下,向导(又步骤),当我们的用户需要完成某项繁杂任务的时候,通过逐个的步骤完成整个任务。一般来说我们可能需要点击”下一步”或者”NEXT”等按钮来完成当前操作进入下一步操作又或者是使用”返回”或者”上一步”回到步骤的前一步,最后点击“完成”以表示向导的完成。

设计一个有效的向导,是不是设计师一个利器? 向导是为了使繁杂困难的任务变得似乎很容易,它的使用宗旨是屏蔽那些对于用户来说需要较高理解成本的那些内容,让用户能够更加的顺畅工作下去。

什么是向导?

向导,普通我们理解为引路人。通常人们由A地到B地,由于不熟悉道路而请熟路的人引路到达目的地,这就是向导的作用。

衍生一下,向导(又步骤),当我们的用户需要完成某项繁杂任务的时候,通过逐个的步骤完成整个任务。一般来说我们可能需要点击”下一步”或者”NEXT”等按钮来完成当前操作进入下一步操作又或者是使用”返回”或者”上一步”回到步骤的前一步,最后点击“完成”以表示向导的完成。


什么时候使用向导?

我们可以通过这些关键词来判断现在的情况下是否真的需要使用向导。


用户要完成这个任务会有许多步骤分支
用户缺乏对于这个任务的必要知识
用户必须完成特定的顺序步骤



为什么使用向导?

分而治之,通过把任务分成一系列的步骤,在在每个部周立用户只需要完成一些简单的小任务,这样就能有效地简化整个大任务。不过我们必须通过一个预先规划的步骤来组织这个任务,从而不需要用户去思考整个任务的结构,只需要让他们能够顺序完成每一个步骤就可以了。

目前向导有这几个模式:


1.带标题的栏目
在标题上有固定的编号,能让用户一眼就知道现在停留在第几步,所以这个比较适合在于分支不多的任务上。一般在3至6steps左右。


wizard-1


2.响应式允许
所有的步骤都显示在一个页面上,但是每一步都必须等上一步完成之后才能够操作


WIZARD2



3.响应式展开
所有的步骤均就在一个页面上展示,首先展开第一步其他的步骤均为收起状态,当任务进行到那一步时即展开该步其余均收起,也可以按照需求的不同进行跨步骤的修改。


WIZARD3




当我们使用向导的时候我们还需要注意一些:


>明确目的


必须明确向导的目的。我们需要提供一个清晰简洁的向导,可提供每一步的用途的简要说明。有的时候,你的用户可能会忘记为什么自己会走入向导中。


>步骤精简


请注意不要让你的向导的步骤太多,虽然他是为了解决一个繁杂的操作。但是步骤太多会花费用户太多的时间,他们会觉得不
甚至可能放弃他们之前已完成的向导。向导应该比数个页面跳转或者把所有的功能都堆在一起来的更容易完成任务一些,如果你的向导让用户觉得麻烦,那么用户会选择原先的做事方式。在这里我建议使用4~7步的向导,当然我们还可以通过可用性测试,得到一个用户可承受的范围。

>其他选择

一个向导不应是唯一的完成任务的途径。 一般而言,一个向导应该是可替代的,或许会变得更为复杂。高级用户可能希望有更多的灵活性,能够更块更便捷的完成任务,而非通过向导一步步按部就班的去完成。

>出口提供

用户使用一个向导,由于某些原因,决定不完成了。 为了避免谁是寻找出路令人沮丧的用户,我们需要给用户提供一个离开向导的出口,能够让他们顺利关闭向导。

>出口警告

当用户决定按一下“取消”按钮或者其他不属于向导的控件时,如果这些操作会造成数据丢失,我们需要提供警告提示——给用户传达退出向导并请求确认的后果。


最后让我汇总一下关于设计向导需要注意的小帖士:

  • 在前期说明你的目的
  • 限制数量向导的步骤
  • 避免长期需要滚动屏幕
  • 为高级用户提供另一个界面
  • 避免技术行话
  • 提供取消选择
  • 出口后果需通知用户
  • 保持在向导中的任务
  • 最大限度地缩短下载时间
  • 提供方便的帮助
  • 中断任务分解逻辑
  • 告知用户任务进展程度
  • 标明必填字段
  • 提供用途摘要说明





以上是我这次设计项目的时遇到困扰后的一些学习挖掘和总结,分享给大家。
参考文献:<Designing interfaces>