腾讯设计师帮你掌握基于任务的导航设计

 

  用过Windows控制面板的同学应该都体会过那种找不到目标,一打开直接懵了的感觉,因为这类基于任务导航的产品,要求设计师要对产品用户以及用户任务一个非常清晰的认识,今天腾讯同学从企业QQ的实战中总结了不少经验,对这类小众但很有可能用到的知识,建议收藏哟。

  对于不同平台导航的交互形式与视觉样式,已经有不少的文章来介绍与总结。本文所介绍的是关于导航规划思路,一个比较小众的领域,基于任务的导航。

  目前产品主要使用基于对象的导航和基于任务的导航。相对来说的,纯粹的基于对象的导航的较为常见,但纯粹的基于任务的导航的产品却为数不多。不少业务复杂的产品会考虑混合使用这两种导航,主辅结合来尽可能覆盖用户的使用场景。

  如何区分导航的组织方式?

  最简单的的区分法,关注导航标签的命名方式。基于对象的导航,通常使用名词作为导航标签,标签指向目标事物;基于任务的导航,通常使用动词、动宾短语作为导航标签,标签指向动作行为。

  基于对象的导航

  这类界面在日常中比较常见,以名词为主的导航标签。


  基于任务的导航

  可以关注界面中的导航标签的命名,以动词、动宾短语为主,关注事务的执行。基于任务的导航通常在工具应用型的产品中。

  AT&T的账户管理页面,导航按照任务作为划分与指引。


  主导航


  其他辅助导航


  这是 Fedex的官网,界面导航基本都是基于任务的划分与拆解。


  导航细节


  使用基于任务导航的产品,对设计师有较高要求,对产品涉及的用户以及用户任务要有一个的非常清晰的认识。产品的导航核心是基于任务的,那么任务分析就显得尤为重要。

  任务分析的工具与方法

  对于单个的任务分析,关注于任务的本身要素与影响因素。

  1、决策表。把活动中的条件与行为加以区分,根据不同的条件采取不同行为的对应关系以表格形式展示。

  2、流程图。以活动流程图的形式来展示任务的操作要素与流向。

  对于多个的任务分析,关注于任务间的关系梳理,尤其适合那些逻辑、顺序模糊的任务。

  3、语句描述。通过语言的组织来展示任务的要素、关系以及执行要求。

  4、时间序列。依据行为执行时间长短以及顺序来展示整个活动过程中各个任务的优先级以及相互关系。

  5、任务清单。把活动中所有的任务逐个罗列出来,并标识先后顺序、重要程度、频率等。任务清单的难点在于罗列的完整性,许多的伴生任务以及支线任务容易在梳理的过程中遗漏。

  何时考虑使用基于任务的导航?

  1、明确用户的首要目标。以寻找或探索事物为目标的,适合使用基于对象的导航为主;以把事情完成为目标的,适合使用基于任务的导航为主。

  2、明确产品定位与功能。官网、博客等展示类的产品适合基于对象的导航。管理后台等应用类的产品适合基于任务的导航。

  对于不同主题对象提供同一功能为主的产品,适合基于对象的导航;对于同一主题对象提供不同功能的产品,适合基于任务的导航。

  3、考虑混合使用对象导航与任务导航。

  在应用过程过程中,不拘泥于纯粹的对象导航还是的任务导航。灵活使用主次混合导航,充分利用各自在使用场景下用户认知优势,取长补短,完善产品的整体导航。

  实际案例的启迪

  Windows 控制面板,如果我们把控制面板看作一个独立的应用。

  当用户首次打开控制面板,界面如下:


  这是一个使用混合导航模式的界面设计,以对象作为认知主线,用户任务作为行为指引。绿色的链接主要是名词或名词性短语,这是基于对象的导航设计。蓝色的链接是动宾短语(操作+对象),这是基于任务导航的设计。

  然而,这却是一个充满争议的界面,不少人抱怨这个页面不好用。用户往往找不到所需要的功能,更愿意切换到大图标/小图标视图进行功能的索引。


  是什么造成了用户抱怨?

  回忆一下控制面板的使用场景,用户通常是有着明确使用目标,使用频率较低等特点。

  这些特点,形成的使用预期是能够快速找到并使用设置功能。降低使用效率的点,将会引起用户的抱怨。

  1、依赖层次阅读。从界面设计来推断,当时设计师可能是希望用户通过绿色文字的快速阅读进行范围定位,然后再根据蓝色文字进行操作定位。设计师通过分组聚类的方式试图降低每个界面信息量,毕竟设置项非常多。但是更多的人,在使用这个界面时使用的是顺序阅读,短时间内面对不同的维度导航指引,容易造成认知困惑。

  2、任务的短语文字冗长,造成核心信息获取效率的降低。虽然标签的文案单个看起来更自然亲切,但在短语的信息需要阅读完毕后才能获取到。

  3、任务数目远大于对象数目,无形中提高了检索成本。

  我的心得

  1、审视用户对任务的认知

  不同产品对于用户任务的诠释存在较大差异。由于基于任务的导航,对用户的认知、场景的覆盖有较高要求,不当的使用容易降低可用性。

  我们将用户认知拆解成这几个维度去考察:目标性强弱、任务执行的频度、核心任务数量。

  2、重新组织任务与对象

  对于展示型的产品中,我们更推荐使用基于对象的导航。

  对于常用的服务型、功能型产品,用户往往对产品所能提供的服务比较熟悉,或者有生活实际映射。如果能够将场景拆为几个界线明晰的子场景,则可以考虑使用以任务导航为主,对象导航为辅的模式。

  对于使用频率较低的服务型、功能型产品,可以考虑使用以对象导航为主,任务导航为辅的模式。对象容易识别与认知,通过对象导航优势可以增强用户对产品的认知,尤其适合新用户。通过任务导航的辅助串联,将功能场景化,提高的使用效率。

  项目中的尝试

  企业QQ,一款针对公司全体员工的办公IM管理软件。除了日常使用的IM终端,还有一个面向管理者的管理系统。

  我们首先看管理任务的特点。管理者对于管理内容与任务目的性比较强,使用频率较低。在枚举任务时候,容易发现任务种类和数量非常多,存在较多的关联性任务,在场景的划分上,较难划分出界线清晰的子场景。

  所以我们尝试使用以对象导航为主,任务导航为辅的模式。利用基于任务的导航来弥补对象导航中存在的遗憾,将关联功能/场景进行串起。关联功能,转为任务纬度可以是相似任务或分支任务。


  作为一个小众的领域,国内交互设计领域对此探讨的并不多,在产品实践中则更少。国外不少有产品在这个领域进行实际应用。界面的截图,也多来自于此。文中列举的界面样式可能会过时,但是其背后的设计思路是可以不断学习领悟的。

时间: 2024-10-03 11:20:47

腾讯设计师帮你掌握基于任务的导航设计的相关文章

腾讯设计师对一款移动记账APP的设计探索

  不满意?自己来!腾讯的yixin同学对市面上的记账软件都不太满意,干脆自己设计了一款.这篇分享了他全部的设计探索过程,想知道专业设计师如何从零开始一款APP的设计,在细节上如何考量周旋,看这个就对了! 现代智能手机给我们提供了非常多丰富实用的功能,比如平时颇为在意金钱去向的我,就是一个 手机记账 App 的使用者,曾经尝试过各种记账 App,但好像都有那么一点不满意,于是我就想如果是我来设计这么一款 App 的话,我会怎么去设计呢?本文记录的就是一次移动记账 App 的设计探索过程. 一.设

设计师参考:基于Helvetica字体的设计作品

设计师,不管是 Web 设计师,还是平面设计师都有字体情结,字体会改变一个设计的感觉,设计师总有无数的字体可以使用,而 Helvetica 常常是他们最安全的选择.这款由 Max Miedinger 于 1957 年设计的字体已经成为设计界的杰作.本文搜集了一些基于 Helvetica 字体的设计作品. 该字体的拥有者,德国 Linotype 公司主管经理 Frank Wildenberg 如此评价该字体,它是一种很正规的字体,拥有清晰的线条,它并不是在刻意表达时尚,它浑然天成,经受住了时间的考

爱讯是一款完全基于通讯录的熟人社交应用

爱讯是一款完全基于通讯录的熟人社交应用,基于同学.同事.朋友等熟人间的"暗恋配对神器".输入暗恋对象的名字和电话,提交之后对方就会收到一条暗恋提示短信. 移动社交应用早就被玩坏了,从完全的陌生交友陌陌(虽然也在逐渐"去陌陌化").基于朋友的朋友二度人脉关系的某某.再到各种个性化匹配的豆浆油条,以及基于各种移动社交关系链的微信.微博.来往.易信等等.在他们面前,移动社交还有机会吗?"爱讯"终于把手伸向了最后的一块净土,做完全基于通讯录的熟人社交.

时尚女装电商CakeStyle:让设计师帮你挑衣服

装电商CakeStyle:让设计师帮你挑衣服 电商应该怎么做?大打价格战,或是靠大佬网上炒作? 美国电商网站CakeStyle只卖时尚女装.它并不打算和亚马逊等巨头比拼价格,而是希望通过帮你挑选最新潮.最合适的衣物,博得消费者的青睐. CakeStyle的模式是:该公司首先通过电子邮件或电话向用户询问一些信息,包括当前的穿着.喜欢的风格.服装尺码.然后,由时装设计师从该公司的库存中精选当季的服饰和配饰发给用户,甚至会配上一段视频来解释为何做出这些选择.等到这些产品送货上门时,用户只需挑选自己喜欢

解析基于栅格的网站设计案例分析

如今,Grid-based(基于栅格的)网页设计已相当普遍,这意味着网页布局混乱的日子就要终结.尽管还无法用肉眼分辨,但我们的确是步入了有序和结构化的时代.栅格布局整体趋于匀称,通常会使网页更加整洁美观.同时,栅格框架已经成为现代所有网站功能实现的基础,这都要归功于它为终端用户提供了完美不失真的设计体验. 一般来说,栅格仅仅是水平线和垂直线隔出来的特定空间,它似乎很难承载任何设计元素,所以大部分设计师会根据路径描绘出几何特性.我们已然看惯画廊.博客.以及新闻相关网站中那些干净利落的栅格,但其实只

vc++-基于winsock的网络通信设计。

问题描述 基于winsock的网络通信设计. 服务器和客户端程序都已经编好,但是运行后在客户端控制台输入数据后,按enter后服务器没有反应,接收不到数据:同时服务器控制台中也输入不了数据.下面是源代码,哪位大神帮我看一下啊.新人,刚学C++,求解释.`//TcpClient#include #include#include #pragma comment(libws2_32.lib"") using namespace std; void main(int argcchar *arg

干货!小技巧帮你完成创意十足的网页设计

干货!小技巧帮你完成创意十足的网页设计 时间:2014-10-09 14:42 来源:优设网 作者:小峰向前跑 小白叨一叨:依靠独特的设计手法,搭配上创意优秀的图片,可以让网页突破空间界限,给人留下深刻的印象.而如果有一些小技巧的话,则会有事半功倍的效果.(注:图片下为来源网站名) 作为一名设计师,每年都会沉浸在一些新的设计趋势中兴奋不已.接下来,我们将探寻2013年的最新设计趋势,这绝对是意义非凡的事情.Web设计师必须洞悉所有相关领域的新趋势,紧跟时尚潮流. 这些新趋势让设计变得妙趣横生.

SOA之基于服务总线的设计

在上文中,主要介绍了SOA的概念,什么叫做"服务","服务"应该具备哪些特性.本篇中,我将介绍SOA的一种很常见的设计实践--基于服务总线的设计. 基于服务总线的设计 基于总线的设计,借鉴了计算机内部硬件组成的设计思想(通过总线传输数据).在分布式系统中,不同子系统之间需要实现相互通信和远程调用,比较直接的方式就是"点对点"的通信方式,但是这样会暴露出一些很明显的问题:系统之间紧密耦合.配置和引用混乱.服务调用关系错综复杂.难以统一管理.异构系统

《游戏设计师修炼之道:数据驱动的游戏设计》一1.2设计师和开发流程

1.2设计师和开发流程 依赖于公司和制作的游戏,可能只有一位设计师负责创建和维护所有的数据.与设计复杂的游戏相比,设计简单的游戏相对较快,因为考虑.测试和平衡的游戏元素要少得多.更复杂的游戏通常涉及一个设计师团队,并且有一位高级设计师监督初级设计师和关卡设计师的工作量.高级设计师负责游戏的总体设计和玩法,而初级设计师则帮助处理开发期间的多项任务.关卡设计师知道如何使用像Autodesk的3ds Max或Maya这样的3D建模程序创建游戏世界的环境,以及使用脚本编程语言触发环境中的事件. 设计视频