网络编程
位置:首页>> 网络编程>> 网页设计>> 交互设计实用指南系列(10)—别让我思考

交互设计实用指南系列(10)—别让我思考

作者:定侯 来源:Taobao.com UED TeamTaobao.com UED Team 发布时间:2010-03-01 12:50:00 

标签:交互设计,指南,用户体验

以前经常吃公司旁边的食堂,人多,排队。夏天的时候,我们总要找一个靠窗口通风好的地方坐,没有空调只有风扇,风扇很多,开关都集中在一个地方,应该是方便操作人员统一管理,有时自己头上的风扇没开,当我要去开这个风扇时,麻烦来了,很多排的风扇开关,到底哪个是我头上的呢?

生活中有很多总让我们感觉莫名其妙,或者停下来需要思考的情况,有时不得不求助,到了互联网上,可能很多情况发生了也没什么求助的方法,只能自己猜,不猜了就只好关掉。

网页上每项内容都有可能迫使我们停下来,进行不必要的思考。比如内容信息看不懂,操作功能不明确。例如,文案。常见的罪魁祸首是那些很酷或者自以为很聪明的名字、带有营销倾向的名字、和具体公司有关的名字以及生僻的技术名词。(Don’t Make Me Think第一章)

当我们访问Web的时候,每个问号(让用户不明白的地方)都会加重我们的认知负担,把我们的注意力从要完成的任务上拉开。这种干扰也许很轻微,但它们会累积起来, 有时候这样的干扰不用太多,就足以让我们抓狂。况且,人们通常不喜欢苦苦思索背后的原理。建造网站的人没有让它们明白易懂(而且容易使用)会让我们对这个网站以及网站的发布者失去信心。


按用户心智模型去设计产品,下面列出一大堆访问者在访问网站时不应该花时间思考的事,例如:

• 我在什么位置?

• 我该从哪里开始?

• 他们把××放在什么地方了?

• 这个页面上最重要的是什么?

• 为什么他们给它取这个名字?
不让用户思考过多,原则上就是设计符合用户心智模型。大致可以从下面几个方面来讲:

1文案:需要让人容易理解,快速记忆。根据不同产品定位,找到恰当的切入点,文案过长或者使用用户不理解的情景,如技术用词,营销用词等,都会使人不知所云。

省略多余的文案,比如过分修饰,欢迎语,多余指示性语句,这些罗嗦的词语会影响用户对关键信息的阅读理解和判断,必须干掉。

2图形:好的图形表达是优于文字的,但是图形没有把内容表示明确,反而适得其反,给用户造成理解上的困扰。

很多情况下,我们好像都很喜欢做一些很炫的icon来表达某些内容,这些是会起到吸引性,但要记住一点,你的图形是不是很好的阐释了内容,如果做不到,那就去掉吧。不如放大标题来的更好。
每个网站需要有它的独特性来吸引用户,但表达这些独特性的元素,例如图形,一定不能对用户理解内容产生干扰。很重要的一点,我们设计是要表达什么,为了什么,怎样更好的帮助用户来理解这些表达,是我们一定要做到的。
网站不是炫技场,设计要为内容服务。

3信息:信息其实是文案、图形等形式的混合体。信息之间,是否建立了相应的关联度,不相关联的信息之间是否产生了干扰。

大量的信息是否进行了合理的分类,以减轻用户的寻找时间。信息分类处理上,有个深广度问题,广度站点因为层级少,可以让用户不需要点击过多就可以到达底层;深度站点需要点击更多次,但它在每一层次上可以做到让人的思考最小化。关于信息的深广度,详细见这里
所以,有效合理的信息分类可以帮助用户快速准确浏览和完成任务。

4引导:通过菜单,导航,面包屑等手段有效引导用户行为路径,让用户方便去他想去的地方,回他想回的地方。

在路边,我们希望有路牌指示;在杂志上,我们希望前面有目录,在每页我们还希望有页码,在网站设计中,我们引导好用户需要浏览的内容;在用户需要的时候给予网站工具来方便完成任务,在这点上,很多时候我们总是希望上新功能,把功能做的突出,殊不知用户是不是也这样想,他到底在这里需要什么。

5操作方式:充分顺应用户的心理思维,来设计功能的操作,可以使用户快速上手。

汽车方向盘往左打,汽车就往左开;插排电源按下去灯亮;相关内容旁边放置相关操作,操作尖头朝下说明有下拉内容,等等。这些操作方式都是要符合用户心智模型的。

6一致性:设计在同产品(甚至同类产品)中保持一致性,可以大大降低用户理解成本,使用户快速上手,增加用户的使用率。

这里的一致性包括颜色,形状,内容,操作方式。比如红绿灯如果各地都不一样,外地人来了岂不会导致交通混乱。同一个网站也应该有这样的一致性,有些都可以保持行业的一致性,比如页面上使用一样的翻页等,既可以降低制作成本,又对用户的使用有良好的认知帮助。到一定程度,也会提升一个品牌的认知,比如阿迪达斯到处使用的三道杠。

下面看个例子:这个是某期宝贝传奇的宣传页面,进来以后甚是让人看不懂!没有很好的根据用户心里预知和相关内容的合理放置来设计。这只是一个活动,如果是一个长期产品,用户接受程度可想而知。



我们都知道别让我思考最经典的页面是google首页:logo起到网站认知作用,搜索框紧跟logo并最大化使其最容易被使用,其他信息按归类放置,并根据等级高低依次减弱。虽然大多产品都有其他商业性需求考虑,但设计师不能被这些冲昏头脑,机械性的表现内容。多花心思把繁杂信息理清楚,要知道,设计师都不是很清楚信息的关系,用户就更不会明白。

0
投稿

猜你喜欢

  • 本篇没有考虑异步,多线程及SQL注入WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite),且不
  • 一个XML文档如果符合一些基本的规范,那它就是结构规范的。XML格式有一套比HTML简单的解析规则,允许XML解析器不需要外部描述或了解数据
  • 在OOCSS中怎么定义“对象”?对象类似JAVA中的类,保持着OO的特征。一个CSS对象由4部分组成:可能是一个或多个DOM节点的HTML由
  • 通常情况下,即使MyISAM表格式非常可靠(SQL语句对表做的所有改变在语句返回之前被写下),如果下列任何事件发生,你依然可以获得损坏的表:
  • 前端开发中两个很不错的小技巧, CSS三角形与圆角背景. 的确, 它们都可以通过图片来实现, 但, 抛开用代码实现可以减小图片加载量不说,
  • Dump ALL MySQL Databasesmysqldump --user=XXXXXXXX --password=XXXXXXX -
  • 防止Application对象在多线程访问中出现错误asp代码处理代码如下(VB):<%Application.Lock()Appli
  • GetObject 函数返回对文件中 Automation 对象的引用。GetObject([pathname] [, class])参数P
  • 其实想实现这种功能很简单,首先要上传一个RAR的解压程序,就是RAR自己的解压程序,只需要它的核心程序RAR.EXE这个文件就可以了。然后就
  • 包括安装时提示有挂起的操作、收缩数据库、压缩数据库、转移数据库给新用户以已存在用户权限、检查备份集、修复数据库等。 (一)挂起操作在安装S
  • CSS网页布局应该避免滥用div元素一直是我们倡导的,以合适的HTML标签组织文档是CSS网页布局的基础。页面中div与span元素的使用是
  • 因为有个老Yashica相机机身,前一阵忍不住想配几个标准镜头。到国内购物网站以及摄影器材交流论坛上看了看,发现不仅很少,价格不实在,而且品
  • 在html 5增加了新元素header、footer,测试过发现IE不能解析html 5新增的元素。代码如下:<!DOCTYPE ht
  • 根据 Dotzler 的统计,IE6 的份额正在缩水,这可能是 2009 年本人听到的第一个好消息。于此同时,Gmail 的浏览器支持列表中
  • HTML5 越来越引起人们的关注,苹果甚至将 HTML5 视为 Flash 的掘墓人 。然而,作为一种尚未成型的技术,HTML5 对很多人来
  • 上次介绍了Access 导入 MSSQL 2000/2005 数据库工具,不过,在使用这个工具时还是有一些地方需要注意的,我把整个导入过程记
  • 我不知道有多少人在使用浏览器的书签,这东东有时候实在是很有用的,比如现在说到的jQuerify书签。jQuerify书签的功能很简单,那就是
  • 以下列出了两种数据库的方法:ASP+Access20001.要获取的ID值字段属性必须设为:自动编号(我们假设字段名为recordID)2.
  • 在IE下,获取Param的时候有个诡异现象(不知道算不算bug)。为了清晰起见,下面用最简单的HTML和JavaScript来说明。有这么一
  • 在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图
手机版 网络编程 asp之家 www.aspxhome.com