交互设计探讨:设计合理的明确的操作入口

“操作入口明确”,就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”,指的是产品内部不同模块之间的转接元素,例如在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-30 15:41:59

交互设计探讨:设计合理的明确的操作入口的相关文章

设计探讨:设计中的技巧都是通用的

设计中的许多技巧都是通用的,比如如何让简单的折扣推广做出新意?数据表格其实可以做得更简单.为配合经常变动的销售价格,店内价格牌如何做得更灵活一些?图片配合推广,更加直观吸引.加点创意,数据对比让人更加印象深刻. 文字:不易觉察的巧妙变化 在你下一次做折扣海报时,你可以将OFF这个字与百分比结合在一起,变成一个意思仍然清晰及干净的字体组合,小小的变化已可见你的心思. 饼形统计图:一种颜色即足够 你的设计软件可以产生无数种颜色,但这并不适合在你的饼形统计表上使用.一种低调的颜色已经可以让你的数据显得

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

"操作入口明确",就是指产品的任何一个功能都要有明确.合理的入口."操作入口",指的是产品内部不同模块之间的转接元素,例如在Web产品中,按钮控件.输入框.文字链等都属于操作入口;"明确"指的是入口的视觉感是清晰的.可识别的;"合理"是指入口的出现是符合用户操作逻辑的,适时的. 之所以要提出"操作入口明确",是因为用户在使用产品的过程中,往往遵循的是可分析的行为逻辑.对于产品本身而言,必须有相对应的操作提示

web设计和设计流程 有趣的web交互设计

文章描述:创意十足的web布局及交互设计. 富有灵感和创意的设计与一般设计的区别在于,它不那么容易被想到和实现,一旦它被实现,一个非常有趣并且迷人的网站就诞生了. 网站几乎每天都能见到,但是不是每一个网站你都会说"真希望我也能想到过!" 设计者们正在做的是一项伟大的工作,那就是提出且合并各种高水平设计的网站,这些网站都是最新颖的原创作品,同时还保持了很高的可用性.不规则的颜色.形状,及其导航就可以生成最有趣.最吸引人的网站.当然,能想到这个点子是很难的,实现起来也有一定的困难. 但是说

互联网产品交互设计:出色的操作入口设计

文章描述:交互设计实用指南系列(1) – 操作入口明确. "操作入口明确",就是指产品的任何一个功能都要有明确.合理的入口."操作入口",指的是产品内部不同模块之间的转接元素,例如在Web产品中,按钮控件.输入框.文字链等都属于操作入口:"明确"指的是入口的视觉感是清晰的.可识别的:"合理"是指入口的出现是符合用户操作逻辑的,适时的. 之所以要提出"操作入口明确",是因为用户在使用产品的过程中,往往遵循的是

交互设计经验:设计过程中存在太多的矛盾

文章描述:交互设计经验:设计过程中存在太多的矛盾. 在产品团队中经常听到有人表态:"我们要做简洁的用户界面",同时又有另外一种声音传来:"我们要做功能强大的产品".乍一听,简洁意味着用户界面控件精炼,然而少数的交互方式如何表达各类强大的功能?反之,强大意味着功能丰富强劲,必然拥有错综复杂的联系,如何让其界面保持简洁?两者似乎无法共存,这让我突然想到自相矛盾的故事,楚国商人夸耀自己的矛锐利万分,同时自己的盾又坚固无比, "以子之矛,陷子之盾,何如?"

布局好的页面探讨:设计细节方向的碰撞

文章描述:布局好的页面探讨:设计细节方向的碰撞. 以前做项目得到一个经验,就是在立项前,不需要拿个布好局的页面出来讨论,因为我们觉得,在方向还未清楚的时候,讨论页面细节可能是浪费时间. 这一回,战略部的新partner给了我一个不同的启示.按说她的工作是在我上游,可是在最开始的实际操作中,她却把工作走到了我的下游,直接做了一个页面出来,把功能点.内容全都画好了-- 我一阵吃惊,对比着我自己的proposal,我跟她说,你这个东西,同事们能接受吗,因为他们都不知道方向在哪里,你却让他们看细节. 后

交互设计研究:设计师不要为了设计而设计

文章描述:设计师的自我管理-不要为了设计而设计. 这是给部门做的分享,略作删节. 在正式分享之前,我想做出一个声明: 1.神马产品SENSE是,神马以产品经理的高度去思考问题,神马补位都是浮云,都是狗屁.为什么那么说?那些都是正确的废话.我是个理想主义者, 在理解一件事情看待一个问题的时候都喜欢把它推上一个高度,把它看成是多么的伟大神圣和美好.最让我自己鄙视自己的是,我还希望让你们理解它有多么伟大神 圣和美好.不过还好,现在我醒悟了,所以我声明从这次分享开始我都不会再讲那些被拔高的东西,不会再讲

搜狐白社会领先的交互与前端设计

翻了翻日志,我写<白社会的四道刀疤>这篇日志的时候,是在5月底,距离现在都半年多了.半年里一直玩白社会,每天停留时间大概在20分钟左右,对不玩游戏的内容型用户来说,也算是半个粉丝吧.看着它一点点发展起来,却始终没能进入sohu的Alexa子域名排名.如果Alexa没错,就意味着白社会的日均PV不高,人气亦不高. 先来回顾一下以前提到过的四个产品缺陷:1.缺乏强大的起步应用,不能有效截停与感染新用户2.信息流泥沙俱下,拔苗助长3.交互文案调侃过甚,体现出小众气质4.交互设计的本地化不足,不像开心

IOS开发:Web App导航设计探讨

 开发:Web App导航设计探讨-app导航设计"> 导航系统所遭遇的挑战 iPhone Native App较常见的导航如下图所示: 手机屏幕底端:A.B.C.D四个tab组成该Native App的全局导航,这是我们经常见到的tab导航栏. 手机屏幕顶端:主要有四种形式.第①种形式是在该位置中心显示产品的logo;也可以将logo适当调整位置,将常用操作或快捷入口放在该位置的右侧.第②种形式是在该位置有两或三个tab选项.第③种形式是在该位置中间显示当前任务标题,在左右两侧放置导航控