交互设计实用指南系列(1) – 操作入口明确

链接:

http://ued.taobao.org/blog/2009/12/the-practice-guidelines-of-interaction-design-clear-operational-entrance-of-effectivity/

“操作入口明确”,就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”,指的是产品内部不同模块之间的转接元素,例如在Web产品中,按钮控件、输入框、文字链等都属于操作入口;“明确”指的是入口的视觉感是清晰的、可识别的;“合理”是指入口的出现是符合用户操作逻辑的,适时的。

之所以要提出“操作入口明确”,是因为用户在使用产品的过程中,往往遵循的是可分析的行为逻辑。对于产品本身而言,必须有相对应的操作提示来引导用户最有效地获取信息,还原为实现层面就是明确、合理的操作入口。如果说首页是整个网站的门户,那么操作入口就是连接各个子页面的枢纽。设计师的终极目的, 就是通过对这些枢纽的优化让用户利用最有效的方式在最短时间内完成自己的预期任务。

对于基于WEB的电子商务而言,核心价值是信息资源,而能否将这些海量数据合理地推送给用户,则是产品生存的关键。操作入口的设计,甚至可以看做 “通过对引导方式的优化间接达到对信息资源的归类”——这很像图书馆中的书类标签管理,用户可以根据不同的类目标签找到自己想看的书。失败的操作入口所带来的后果往往是灾难性的,功能失效、位置隐蔽、信息干扰……都会给用户带来严重的挫败感,使其绝望地湮没在茫茫的信息海洋中。所以,明确合理的操作入口设计,是对产品“有效性”的保障,更是对用户体验的尊重。

那么,在具体的设计中如何做到“操作入口明确”呢?

1、强化重点,弱化周边

星爷《唐伯虎点秋香》中的精彩片段,一声“美女”换来诸多牛鬼蛇神的壮观回眸和秋香MM的惊鸿一瞥——“美女这东西是要需要比较地”。WEB产品也 一样,尤其是海量信息的电子商务网站,由信息架构衍生出的各类功能入口相当复杂,部署在页面的各个角落,一不留心就被疏漏。通常有两种方法来解决这类问题:一是增加入口数量,即“广撒网”,同样的功能入口有多个,以此增加功能模块的使用率,不过这种方法存在较大隐患,后面会详细分析;二是“强化重点,弱化周边”,即在视觉上将入口模块凸显出来,采用精妙的布局,并适当弱化周边的信息展示,加大二者的权重对比,客观上增加用户识别的准确性。

例如地球人最熟悉的Google首页:

www.google.com

浓郁艺术气息的LOGO作为唯一的色彩元素有效地抓住了浏览者的视觉中心,输入栏和Button作为功能核心占据了页面的心脏位置,这种组合让用户 通过第一视觉便能够准确理解页面所表达的信息逻辑——“输入关键词”+“点击按钮”=“Everything you want”。

再看一个反例,如图:

download.pchome.net

面对这样一个下载页面,面对这样一个抢眼的大Button(标记②),相信即使是电信用户,也会很大方地支持下网通……但是,点击之后弹出的却是下载遨游浏览器的窗口,崩溃之余再仔细查看,终于发现在华丽的广告位旁边蜷缩着一个毫无特色的“立刻下载”(标记 ①)——刹那间,无数用户被这种饱含“让贤”哲理的设计深深震撼了!

2、入口信息明确易识别

上面提到,增加入口数量虽然在一定程度上有助于提高功能模块的使用率,但也存在致命的缺陷——入口信息不明确。因为“入口”等同于用户的“选择”, 入口越多,选择越多,“过多的选择等于没有选择”,这势必会造成用户使用产品时的疑惑:这几个链接和按钮好像都一样啊,该选哪个呢?所以,要根据页面本身 的信息量严格控制同功能入口的数量,保证有效的识别性,让用户迅速找到正确的入口。

这次用我们可爱的兄弟产品“支付宝”为例,看看改版前后的细节变化:

改版前

改版后

通过对比,我们可以发现,管理页面中部分相同功能的入口出现了多个,对于新手用户来说,很可能造成不必要的困惑;而在新版本中,每个功能模块只有一个入口,明晰简洁。

另外,对于入口元素本身而言,需要通过适合的展现形式来提示用户此入口的功能属性。例如,一个标准的按钮控件,用户会知 道“可以点击”,但点击后会发生什么交互行为,需要通过其他视觉元素进行信息提示(如按钮上的文字或者具有标识性的ICON),告诉用户当前的情况和可行的操作方案,这点有些类似生活中的“指示设计”。

下图是eBay首页的注册区,通过按钮文字和辅助文本信息,新手用户也能够很清楚地了解眼前这两个Button代表的意义。

www.ebay.com

3、根据用户定制合适的入口

交互设计离开用户研究便是闭门造车,在设计产品操作入口的同时,要充分考虑到不同用户的需求。用户划分维度很多, 《About Face3.0》中根据与产品的相关度将其分为“新手”、“中间用户”和“专家”。这三类用户对产品的了解程度并不一致,操作行为习惯也大相径庭,若再通 过其他维度将其细分(如“有无目的”、“性别年龄”等),会相当复杂,在对产品进行进一步优化时,应当考虑到操作入口对不同用户的适用性。

“在交互和界面设计中,如何用同一个界面满足新手用户和专家用户的需求是长久以来存在的难题之一。虽然大多数中间用户倾 向于保留在这一类型中,但新手不会永远是新手。要维持高水平的技术程度很困难,因此专家门也在快速变化。新手的变化更快,新手和专家随着时间推移都会倾向 于成为中间用户。”(《About Face 3.0》第三章),所以针对用户的定性研究和定量分析会显得尤为重要。不过,无论如何划分用户人群,有一点共性是至始至终的——产品操作入口设计的终极目 的是让用户迅速有效地完成核心需求。

小 结

综上所述,对于信息庞杂的电子商务网站而言,出色的操作入口设计好似科幻片中的“星际之门”,能让用户随心所欲地抵达任意空间,享受完美的交互体验;同样,失败的设计也能让用户犹如坠入希腊神话中恐怖的克里特岛迷宫,郁闷不可自拔。“操作入口明确”,是所有优秀交互产品的 共性之一,也是每一个设计师“想用户之所想”的职责所在。

时间: 2024-10-13 23:49:08

交互设计实用指南系列(1) – 操作入口明确的相关文章

交互设计实用指南系列(12)—避免出错

http://ued.taobao.org/blog/2010/04/交互设计实用指南系列12-避免出错/ 一.如何理解本条内容: 一个“简单”和“复杂”的例子 在我和开发人员沟通一个项目需求的时候,他们频频慨叹Mockup的设计所考虑情况之细致,很多程序要实现的预判和“非基础功能点”让开发人员望而却步不情愿去实现.相比较设计师为了让用户避免出错而绞尽脑汁去设想和考虑,开发人员更倾向于直接给到一个只能容许的操作行为,其他非法请求全部报错:“程序是严谨的,他错,我报错,以不变应万变.简单一点不好吗

交互设计实用指南系列11-减少记忆负担

转载: http://ued.taobao.org/blog/2010/03/交互设计实用指南系列11-减少记忆负担/ 科普 <辞海>中“记忆”的定义是:“人脑对经验过的事物的识记.保持.再现或再认.”记忆是人类一个非常重要的心理活动,它是人类很多其他思维活动和行为的基础.在所有的认知心理活动中,记忆和软件交互的关系最为密切.我们脑内的神经元反映的信息在需要用的时候可以被准确的再次呈现,也就是储存在DNA链上的信息基因,在适当条件下,指导合成信息蛋白并呈现的过程.在信息处理的角度,我们都关心怎

交互设计实用指南系列(4)—简洁清晰,自然易懂

链接:http://ued.taobao.org/blog/2009/12/simple/ 我们生活在信息繁杂的社会,尤其是在互联网时代,人们开始通过网络开始接触越来越多的信息,那么,如何获取/传递有效而准确的信息将非常重要.在网页交互设计中,我们提出:信息获取和传达的过程必须是简洁清晰,自然易懂.这样用户才能够有效的获取这些信息,并迅速作出决定. 1.什么是“简洁自然,清晰易懂”? 简洁清晰:使信息最简化“少即是多”.提倡使用最少的元素来表达最多的信息.如果信息繁杂,将使用户承担大量的信息负担

交互设计实用指南系列(9)— 一次点击

链接: http://ued.taobao.org/blog/2010/02/the-practice-guidelines-of-interaction-design-click-once/ 那么,如何减少用户的附加工作,保证用户工作效率呢?1,保证主操作以及用户常用功能的方便展现.这是用户快速完成任务的核心.比如播放器需要突出播放按钮,而收起了快进功能.ps的滤镜里会第一个展示出你上次应用过的滤镜效果,方便再次应用等. 2,合适的关闭与隐藏新手培训工具用户不会长期停留在新手状态,所以新手的任

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

转载:http://ued.taobao.org/blog/2010/02/the-practice-guidelines-of-interaction-design-dont-make-me-think/ 不让用户思考过多,原则上就是设计符合用户心智模型.大致可以从下面几个方面来讲: 1文案:需要让人容易理解,快速记忆.根据不同产品定位,找到恰当的切入点,文案过长或者使用用户不理解的情景,如技术用词,营销用词等,都会使人不知所云. 省略多余的文案,比如过分修饰,欢迎语,多余指示性语句,这些罗嗦

交互设计实用指南系列(5) – 突出重点,一目了然

链接:http://ued.taobao.org/blog/2010/01/the-practice-guidelines-of-interaction-design-emphasis-and-clarity/ 看到这张照片,我们一眼能够看到天宏(图中这位UED俊男)的眼睛.我们能从他的表情里读出一些他的性格.一张好的摄影作品,最重要的一点,就是这个照片是否有焦点,照片的主题是否一目了然.而摄影作品的用光.构图.景深等等手法,其实就是在让一个照片能够有其焦点,并且利用这些艺术手法来烘托气氛,提升

交互设计实用指南系列(6) –标签明晰、有效

链接:http://ued.taobao.org/blog/2010/01/the-practice-guidelines-of-interaction-design-make-labels-clear-and-attractive/ 导航标签彼此互斥.完全穷尽. 导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息.比如“联系我们”这个标签,代表的内容通常会包括公司名称.电话.地址.邮箱等信息.它可以是文字,也可以是图片.在英文里被称作“Label”,并不同于我们常说的“ta

交互设计实用指南系列(8)—深广度平衡

链接:http://ued.taobao.org/blog/2010/01/the-practice-guidelines-of-interaction-design-the-balance-between-breadth-and-depth/ 相信大家对街边林林总总的房产中介并不陌生,那么我们先看看下面这张图片. 图1 从右侧这家店的橱窗里,我们能迅速分清哪些是租房信息哪些是售房信息.因为店家很贴心的将房产信息进行归类,并且在视觉上做了一些划分,让我们对信息能一目了然.借这个小案例引出我们今天

交互设计初学者的完全指南

交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域.现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互. 这篇文章对有兴趣学习更多关于交互设计的知识的人来说是一个很好的起点.我们将会简要讨论交互设计的历史,相关的指导原则,值得关注的贡献者,以及有关这个迷人学科的工具. 一.什么是交互设计? 交互设计(IxD)定义了交互系统的结构和行为.交互设计师努力在用户和用户使用的产品或者服务间创建有意义