手机交互中手机应用软件的交互架构研究


童庆,蒋晓

(江南大学,无锡214122

摘要:以交互设计中的交互架构为切入点,分析了手机应用软件的交互架构方式中,存在的层级深度与层级交叉导致用户产生挫折感的问题,并对比研究了广而深与广而浅架构方式的不同,在此基础上,提出了必须灵活使用广而浅的架构方式,通过用户参与信息层级的梳理与分类,平衡架构层级的宽度与深度,以及增加Tap 与手风琴架构方式来构建手机应用软件的交互架构。

关键词:交互架构;架构层次;用户参与;用户测试

中图分类号:TB472 文献标识码:A 文章编号:1001-3563201106-0067-04

 

Research of Interaction Architecture of Mobile Application Software

TONG QingJIANG Xiao

(Jiangnan University,Wuxi 214122,China)

Abstract:Embarking from interactive architecture in interaction design,it analyzed the problem of user′s frustration caused by the depth and cross of framework hierarchy, and discussed the difference between wide and deep and wide and shallow structure mode. On this basis, it should be flexible in the use of wide and shallow structure mode, through methods of carding and classifying of interactive framework hierarchy,balancing of width and depth,adding tap and using accordion architecture way to construct a interactive framework which is suitable for mobile application software.

Key words:interactive architecture;framework hierarchy;user participation;user test

 

手机应用软件是指智能手机中的第三方应用软件,如Google 地图、掌上百度等。目前已经有苹果公司iTunes Store android Google Market 提供手机应用软件下载。在今天的移动互联网时代,智能手机迅速普及,尤其是iPhone 手机的出现,手机的功能已经发生了转变,各种应用软件开始成为手机使用的重要工具。用户逐渐开始使用它们在互联网中进行浏览、下载、消费等。

1 手机应用软件的交互架构方式

手机应用软件与用户交互的过程,其实是信息与用户的交互,手机和用户都在输出和输入信息,触摸屏和按键只是用户输入信息的方式。手机的交互架构是用户与手机应用软件交互的根本,其任务是在二者之间交互搭建一座畅通的桥梁,但手机应用软件与Web 设计不同,继续沿用Web 架构方式变得越来越不适应手机交互设计的发展。这对手机交互设计提出了新的要求,如何创建简洁、顺畅、适用于手机应用软件交互的交互架构是设计师需要迫切考虑和解决地问题。

1.1 广而深的架构方式

交互架构即信息的交互层级结构,它的任务就是在信息与用户之间建立一个通道,使用户能够获取到其想要的信息。一个有效地交互架构方式,会根据用户在完成任务时的实际需求来指引用户一步一步地获得他们需要的信息。目前大部分手机交互架构还是采用Web设计的光而深的架构方式,见图1。但是手机客户端中没有像面包屑那样显示路径的功能,必须一层层返回。即使增加像面包屑显示路径的功能,仍然面临着手机屏幕视域相当狭窄、信息维度很小、显示路径过长无法完全显示以及占用过多空间的问题。

 

1 广而深的架构方式

Fig.1 Wide and deep structure mode

通常,在移动的情形下,用户进行访问是为了达到某一目的,而不是为了阅读乐趣。人们很容易想象出手机用户的一些典型目的,如“找一家最近的超市”、“查询前往目的地的路线”等,但是广而深的交互架构的复杂性以及层级之间的交叉,会导致手机用户在使用过程中迷失方向。因为在窗口之间切换涉及到注意力的整体转移,这强迫用户不断地进入新的情景,用户需要不断地在窗口之间移动,混乱感和挫折感会加深[1]。面对这些问题,必须重新考虑手机终端的特殊性,而不是继续套用Web 设计的方法。操作复杂、流程繁琐、挑战性高的深层次架构方式的设计并不适合在手机上进行。

1.2 广而浅的架构方式

在考虑手机应用软件的架构之前,应首先分析手机及其使用的特点。首先,用户往往是在移动的状态使用手机应用软件,并不会给予充分的注意力。每多跳转一次页面就可能失去一部分用户。其次是手机屏幕的问题,虽然手机的屏幕尺寸在逐渐增加,但是对于应用软件的限制仍然存在,应用软件必须考虑提供信息量的大小、功能的取舍。再次,手机操作目前无法达到鼠标的灵活性,用户很难进行非常复杂的操作。结合手机使用的这些特点,手机应用软件的架构应考虑广而浅的架构方式,见图2

2 广而浅的架构方式

Fig.2 Wide and shallow structure mode

2 灵活使用广而浅的架构方式方法

广而浅的架构方式对用户来说是使用时比较轻松的方式,用户点击的次数明显少于广而深的架构方式,但是设计师不能在弃用广而深的架构方式之后又盲目的套用广而浅的架构方式。设计师应考虑宽度与深度的平衡,如果层次太深,用户就会需要多次点击才能找到他们的页面;但是如果是宽度过大,用户就面临在主页面的过多选项中寻找的困难[2]。设计师需要灵活使用广而浅的架构方式。

2.1 交互架构中的信息层级梳理与分类

交互架构中的层级是否清晰始终影响着用户使用手机时的体验。以iPhone 上的腾讯新闻与新浪新闻为例,iPhone 上的腾讯新闻分类有2 种方式,一种是按照新闻的性质分类,如头条、经济、科技等分类,这是传统报纸上新闻分类方式。另一种则是按照新闻内容的形式进行分类如图片新闻、评论观点等,用户可以轻松地选择自己感兴趣的新闻进行浏览。相比

较而言,新浪新闻则是分为热门和频道,用户如果想看某一类新闻可能会在热门的目录下,也可能在频道的目录下,用户在不知情的情况下必须做出选择,见图3

 

3 腾讯新闻、新浪新闻

Fig.3 Tencent news, Sina news

在交互架构的过程中,设计师可以让用户参加进来,使用卡片分类法进行研究。卡片分类方法能帮助设计师理解用户是如何看待产品信息和交互架构的[3]。例如:某手机购物软件的交互架构,先将软件的所有功能(商品、支付、预定等功能)制作成卡片,再邀请用户按照其习惯的功能分类方式完成基础分类,分类后出现主要的首层功能。在这一分类基础上,再请用户按照其分组依据以及思维的逻辑,继续进行各个首层功能下的子功能的数量进行再筛选和组合,最后设计师根据分类结果进行分析并调整。研究用户对信息层级分类其实是在研究用户的心理模型,从而将其应用在交互架构中,使得交互架构的实现模型与用户心理模型保持一致性,这样设计出的信息层级才是用户所真正熟悉的。

通过对卡片分类法的研究,设计师首先要梳理各功能间的关系,通过适当的增加同一层的目录数,减少目录的级数来减少用户点击的次数。这是减少信息深度的最直接方式,但此种方式应避免的问题是,不能为了减少用户操作而一味的将所有信息平铺。

2.2 平衡层级的宽度和深度

手机由于其屏幕尺寸的限制,必须对架构层级的宽度和深度进行评估和测试。通过对用户完成任务的各种指标(如完成率、操作时间、操作路径长度、错误率、出错类别等)进行测试,根据测试结果再调整交互架构[4]。提供某类定制信息软件的定制功能层级深度测试,见表1。第一步,邀请8位目标用户(男女比例11),在测试之前介绍该软件的主要功能和测试的注意事项。第二步,在所有相关设备调试完成后,让用户开始使用定制信息功能,这时记录人员应开始记录测试数据以及操作视频。第三步,用户测试完后,请用户说出在操作过程中的问题以及使用时的感受。第四步,得出统计分析表,设计师根据分析结果调整交互架构层级。如表1 的统计可以发现,步骤346的层级需要设计师进行调整。删除步骤5,在步骤4提交定制信息后自动跳转到步骤6 的页面,用户直接看到反馈信息。

由于用户并不会长时间使用手机软件,这就意味着交互架构层级不能过深,否则用户很快会直接退出软件,不再使用,因此手机应用软件层级的深度要降低到用户能接受的范围内。由于用户对软件需求的不同,用户对各种软件的接受范围也不同。设计师可以尝试设计典型的使用情景,通过具体的情景设计可以发现用户使用时的特点[5]

手机应用软件的功能应尽量成为用户主要、经常

表1 软件定制功能用户测试统计表

Tab.1 The value of custom function of software in  user testing

 

操作步骤

用户1

用户2

用户3

用户4

用户5

用户6

用户7

用户8

步骤1:启动软件

步骤2:进入定制标签页面

步骤3:打开添加新定制页面   √

步骤4:输入定制信息并提交

×

步骤5:打开查询已定制

步骤6:查看定制反馈信息

×

步骤7:查看详细信息

 

注:“√”表示用户独立完成;“⊙”表示用户在提示下完成;“×”表示出错,用户重新启动软件才完成

使用的功能。设计师在进行交互架构的第一层级选项的设计时,应先对这一层级的所有选项进行价值重要性评估,将用户使用频率较高的选项放在第一层级,不常用的层级可以放置在设置当中。

设计师在设计应用软件时,应将重要信息尽量呈现在第一层级或第二层级,主要信息显示保持在3 个层级之内,然后让用户选择继续或者返回。用户感兴趣可以继续深入浏览,反之可以迅速退出。这样用户就不必阅读很多信息才能找到自己想要的信息或知道自己下一步应该怎么做[6]。根据用户对功能的需求不同和信息量的大小来确定交互架构层级的深度。

层级的深度和宽度也需要考虑软件的目标人群特点,不同人群对深度和宽度的要求都不同。如老年群体对所使用产品的选择逐渐以习惯性为主导,更为重视产品内在的实用性、易用性,因此在为老年群体进行软件交互架构时,应以简洁易懂、方便使用为设计目标,优先显示老年群体使用的常用功能,层级深度以浅为主。对于年轻群体,设计师首先需要对目标用户进行细分和心理分析,同时结合对软件的定位来调整层级的宽度和深度的平衡。

2.3 Tab的架构方式与手风琴的组织方式

当手机屏幕需要显示大量信息却无法一次显示的时候,可以使用Tab 架构方式和手风琴的架构方式。增加Tap 将主要选项置于页面顶端或底端,用户可以不需要转换页面就可以使用大部分功能。而手风琴架构则是将主要选项纵向排布在页面上,每个分类可以自由伸缩,可以节省大量空间,这2 种方式适合在同一层级有逻辑分类的情况下使用。

与传统的架构方式对比,这2种架构方式可以减少用户的点击次数,提高效率。Gmail软件页面见图4,用

 

4 Gmail,百度贴吧

Fig.4 Gmail,Baidu stick

户若在浏览Buzz 的内容时要查看收件箱的邮件,需要进行点击Gmail>收件箱>邮件,而传统的架构方式则是Buzz>Gmail 首页>Gamil>邮件,使用增加Tap 方式的页面跳转次数要少一次。而在采用手风琴方式的百度贴吧中,从一个目录下的某一信息到另一目录下的页面比传统的架构方式少两次页面跳转。

在使用这2 种方式时,需要注意以下问题。首先一般默认将重要的目录展开,减少用户的选择负担。其次每个目录使用和不使用的状态要有明显的视觉区分,始终给用户清楚的使用状态反馈。最后增加Tap 与手风琴方式也有不同之处。如果信息的主要层级数量较少,适合采用增加Tap 方式,置于屏幕顶端。而手风琴方式则适合主要层级数多于4 个的交互架构,在屏幕上平铺展现出来。

2.4 在交互架构中采用合理的导航

相比同一款软件在PC 上的架构层级而言,交互架构中层级的递进都需要考虑导航的问题。在用户使用导航的过程中,要保证让用户能够知觉到产品的变化与自己的意志吻合,能够控制产品的变化过程,获得期望的结果[7]。首先,要使用户轻松地从应用软件的一个功能切换到另一功能,就要保证其操作通道的通畅性,用户可以快速地找到出口,随时可以返回上层操作。其次,在需要时给予用户导航,让用户知道接下来的页面是什么。让用户知道自己当前的位置,使其做出下一步行动的决定。

为了加强用户对操作定位的能力,可以提供更好地参考点即导航标志,并始终固定在界面上[8]iPhone 的标题栏是导航设计的一个优秀案例,在标题栏的中间部分始终显示当前页面的名称,提示用户所在的位置。在标题栏的左侧始终是上一层级或者返回选项,让用户可以迅速返回,见图5

 

5 iPhone 标题栏中的导航

Fig.5 Navigation in iPhone title bar

3 结语

手机应用软件的交互架构必须以手机本身和用户使用应用软件的特点为基础进行设计,采用广而浅的架构方式,在进行交互架构时应让用户参与进来。在架构初期,有针对性的选择一定数量的用户,通过卡片分类法进行分析研究。在软件原型初步完成时进行用户测试,通过对用户完成任务的各种指标进行测试,根据测试结果再调整交互架构,最终确定最合适的交互架构以及架构层级宽度与深度,从而减少用户使用手机应用软件时产生的挫折感,让用户可以顺畅、高效率地使用手机软件。

 

参考文献:

[1] COOPER Alan.About Face 3 交互设计精髓[M].刘松涛,译.北京:电子工业出版社,2008.

[2] MORVILLE Peter,ROSENFELD Louis.Web 信息架构[M].陈建勋,译.北京:电子工业出版社,2008.

[3] CHAUNCEY Wilson.重塑用户体验[M].刘吉昆,刘青,译.北京:清华大学出版社,2010.

[4] 杨会利,李诞新,葛列众.用户体验在通信产品开发中的应用[M].北京:人民邮电出版社,2010.

[5] 周陟.UI 进化论[M].北京:清华大学出版社,2010.

[6] 李四达.交互设计概论[M].北京:清华大学出版社,2009.

[7] 常海,蒋晓.交互设计中的用户控制感研究[J].包装工程,2010314:29-31.

[8] MATT Jones,MARSSDEN Gary.移动设备交互设计[M].奚丹,译.北京:电子工业出版社,2009.