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

文章描述:交互设计实用指南系列(1) – 操作入口明确.

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

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

互联网产品交互事件分析

挖坟 交互设计(Interaction Design)产生于二十世纪八十年代,在1984年一次设计会议上,大名鼎鼎的英国交互设计师比尔·莫格里奇首次提出交互设计这个概念,作为一门关注交互体验的新学科而存在并发展到今天,他一开始给它命名为"软面(Soft Face)",由于这个名字容易让人想起和当时流行的玩具"椰菜娃娃(Cabbage Patch doll)",他后来把它更名为"Interaction Design"――交互设计. 思考 交互设计是

互联网产品交互设计:保证用户不在网站中迷路

文章描述:交互设计实用指南系列(7)–避免迷路. 任何位置都能明确"我在哪里?这里有什么?从这里能去哪里?" 迷路可不是一件好玩的事情,试想你驾车行驶到高速公路分叉口时,却看不见任何路牌,那该会怎样地困惑.沮丧.愤怒和恐惧.为了避免迷失方向,我们发明了各种导航工具,大到卫星定位系统,小到指南针,人类在这一事情上,极具创意. 在网站上迷失方向,虽然不是什么生死攸关的事,但会带来许多负面影响,如:用户体验下降.任务不能完成,用户流失等.我们可以通过良好的导航系统来避免这个情况发生.好的导航

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

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

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

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

互联网产品主要为谁而设计 新手、中间用户还是专家?

中介交易 SEO诊断 淘宝客 云主机 技术大厅 交互设计的经典著作<About Face >中,Alan Cooper将用户分为三类:新手.中间用户和专家.他指出在软件领域,最终大多数用户会停留在中级阶段. 软件领域,多数用户会停留在中间阶段 互联网产品主要为谁而设计?新手.中间用户还是专家? 我们每天在不同的网站上不断寻找需要的信息,不知道打开过多少未知的网页.而每个网页或许作为新手的时间又很短暂.大概访问个3次,就能够达到中间水平.也许永远不需要进阶到专家水平--去了解网站的运行方式,使用

互联网产品的对象主要是谁?

交互设计的经典著作<About Face >中,Alan Cooper将用户分为三类:新手.中间用户和专家 .他指出在软件领域,最终大多数用户会停留在中级阶段. 软件领域,多数用户会停留在中间阶段 互联网产品主要为谁而设计?新手.中间用户还是专家? 我们每天在不同的网站上不断寻找需要的信息,不知道打开过多少未知的网页.而每个网页或许作为新手的时间又很短暂.大概访问个3次,就能够达到中间水平.也许永远不需要进阶到专家水平--去了解网站的运行方式,使用工程师式的高级功能.这样看来,互联网产品很少包

互联网产品的交互设计方法

目前交互设计在互联网产品中的应用状况 "交互设计可以提高产品可用性."在国内的互联网行业中,建立在这个认识基础上,交互设计得到了普遍的接受."产品设计开始的时候应该先交互啊~~""你这个项目没交互过啊~~"这类的说法越来越多当然是好的信息,但是,交互设计工作到底应该怎么做才能提高产品可用性?通常的互联网产品研发中,交互设计工作是处于没有方法的状况. 理解交互设计 交互设计是一个设计工作. 交互设计是一门技术. 交互设计在目前阶段的主要使命是提高产

《UCD火花集2:有效的互联网产品设计 交互/信息设计 用户研究讨论》一17.3 过年回家有感:他们的互联网

17.3 过年回家有感:他们的互联网 UCD火花集2:有效的互联网产品设计 交互/信息设计 用户研究讨论 文/李杰 这次从北京这个可以算是中国互联网最发达的城市回到温州农村的老家,看到了爸爸妈妈,弟弟妹妹们是怎样用互联网的,让我这个做互联网产品的很受触动. 因为家里有不少亲戚在国外打工,QQ视频成了妈妈要开通宽带的唯一动力.以前都是我们过年回家再自己去开个假期宽带,这一次妈妈为了QQ视频主动提前去办理了宽带包年.对于从来没独立操作过电脑的爸妈们来说,学会开电脑,用鼠标双击企鹅图标,在打开的窗口中

《互联网产品设计》一2.4 创造界面和交互来塑造用户行为

2.4 创造界面和交互来塑造用户行为 互联网产品设计接下来我们谈谈UI,由视觉设计师和交互设计师设计的用户界面.在这个领域,设计师通过设计界面和交互模式来塑造用户的使用行为. 在我看来,UI的代名词是视觉设计.它就是你看到的产品外观.按钮如何设计?按钮上放什么样式的文字?矩形输入框采用方角还是圆角?顶部导航栏是采用有色背景以使其和当前品牌相得益彰,还是采用中性背景,这样看起来更像原生操作系统? 交互设计则更关心这些界面元素所表现出的行为.点击按钮后会发生什么?点击一个相似的按钮,它是否能产生相似