Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >基于任务的导航设计 - 腾讯ISUX

基于任务的导航设计 - 腾讯ISUX

作者头像
腾讯ISUX
发布于 2018-06-29 08:36:25
发布于 2018-06-29 08:36:25
5390
举报

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

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

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

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

基于对象的导航

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

基于任务的导航

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

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

主导航

其他辅助导航

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

导航细节

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

任务分析的工具与方法

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

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

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

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

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

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

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

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

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

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

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

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

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

实际案例的启迪

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

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

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

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

是什么造成了用户抱怨?

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

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

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

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

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

我的心得

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

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

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

2.重新组织任务与对象

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

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

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

项目中的尝试

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

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

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

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

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。

注明出处格式:腾讯ISUX (http://isux.tencent.com/task-based-navigation.html)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2015-11-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯ISUX 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
[ISUX译]iOS 9人机界面指南(二):设计策略 - 腾讯ISUX
文章索引 2.1 设计原则(Design Principles) 2.1.1 美学完整性(Aesthetic Integrity) 2.1.2 一致性(Consistency) 2.1.3 直接操作(Direct Manipulation) 2.1.4 反馈(Feedback) 2.1.5 隐喻(Metaphors) 2.1.6 用户控制(User Control) 2.2 从概念到产品(From Concept to Product) 2.2.1 定义应用(Define Your App) 2.2.2 为
腾讯ISUX
2018/06/29
1.4K0
形式与功能 – 卡片式设计思考 - 腾讯ISUX
在互联网产品中,除了内容型外,一些功能型的产品信息内容也是相当巨大的,特别是管理控制系统,业务管理、功能操作、数据展示等。在信息量这么大的页面中除了重视内容质量外,形式功能的组织与呈现也是同等重要,对提高用户获取有效信息的效率有着非常大的帮助。 上面所说的形式功能的组织与呈现其实讲的是设计排版上的问题,当然对设计师排版功力也有相当的要求。这种排版优化的方法有很多种,我这里主要围绕卡片式设计的理论进行深入探讨,相信大家对卡片式设计已非常熟悉,虽然已流行了好多年,但是设计形式并不是随着使用年龄的增长而消失,芝加
腾讯ISUX
2018/06/29
1K0
Today Widget 抢占比桌面更重要的地盘 - 腾讯ISUX
Apple于去年发布的iOS8系统带来了许多有趣的新特性,其中的App Extensions让第三方产品与系统本体的互动变得更为直接。 “Today Widget”,”Get a quick update or perform a quick task in the Today view of Notification Center”(在通知中心的今日视图中快速获得更新或完成操作)——从此在许多场景下、用户毋须再前往桌面寻找icon进入app了,只需在屏幕上轻轻一Swipe(即使在未解锁状态下),就可以展开
腾讯ISUX
2018/06/29
6360
再见Metro,Windows 10通用应用设计趋势分析 - 腾讯ISUX
众所周知,当初微软在Windows 8上做了非常大胆的变革,除了开创性的Metro设计语言,传统桌面和平板两种模式的融合也是一大特色,可这两种操作模式在使用体验上的不一致也成为Windows 8饱受用户诟病的原因之一,但微软自始至终都朝着平台大融合的目标坚定前行着。 经过一路探索,微软终于通过在Windows 10系统的公布,展示了一个更加清晰明了的战略方向:构建一个面向全部Windows设备的核心操作系统。下面,本文就通过系统新特性和已公布的通用应用,来简单分析一下Windows 10通用应用的设计趋势。
腾讯ISUX
2018/06/29
1.2K0
见微知著,谈移动缺省页设计 - 腾讯ISUX
缺省页面,是出现在用户没有提交任何资料或者网络连接不通畅的情况下所展现的页面。通常设计师们习惯用丰富的数据内容把页面设计得美观实用,考虑的都是界面展现的“理想状态”,往往会忽视没有内容的“缺省状态”。
腾讯ISUX
2018/06/29
1.7K0
UI设计中的基本动效,值得收藏一波
1.滑动 信息列表会跟随着用户的交互手势而动,然后卡片到相应的位置上,保持整齐感,它属于指向型动画,物体的滑动取决于用户是用那种手势滑动的。它的作用就是通过指向型转场,有效帮助用户清理页面层级的排列情况。
用户5009027
2019/06/11
2.3K0
UI设计中的基本动效,值得收藏一波
用户教育产品化:设计产品化的微型实践 - 腾讯ISUX
在许多互联网公司中,设计工作往往被视为一项针对产品的服务,服务好产品是设计师职能的优先价值指标。观点固然不错却失于片面,因为服务体系与产品形态在设计内涵中是相互统一的。设计在实现解决产品问题、优化产品体验的目标同时,也能够通过建立产品语境获得更大的用户影响力与传播话语权。 因此,个人以为设计价值的归依不仅在于前者的解决,更有后者的创造。无论界面,品牌,内容皆然。 在企业产品(企业QQ,营销QQ)的用户教育项目中,我们尝试以形象内容设计为手段,通过产品化的尝试来实现设计效用的最大化。 1.从问题出发到解决方案
腾讯ISUX
2018/06/29
1.2K0
Apple Watch平台认知与产品设计 - 腾讯ISUX
时至今日,Apple Watch已然高调进入我们的视野,却仍未正式进入我们的世界,绝大多数人的信息来源仍限于Apple官方的介绍。大家有期许,有探索,也有失望。持负面态度者的普遍看法是,“这些事情在iPhone上都能做…手机屏幕那么大,看起来更爽用起来更舒服…令人心塞的续航能力仅支持5个小时的高强度使用…买它何用…”,而乐观者则普遍相信作为Apple设备生态圈的新生力量,Watch在技术上虽尚未成熟,却具有其他设备难以比拟的优势,并且会像前辈们那样欲扬先抑,在恰当的时间点爆发于消费市场。 失望者从很大程度上
腾讯ISUX
2018/06/29
8570
[ISUX转译]设计追波风 - 腾讯ISUX
前言 13年底,Intercom 的产品VP Paul Adams 在 Intercom 官博发表了 一篇博文 。文章讲述了网络上设计社区里普遍存在的一种现象,大意是“许多设计师在社区中分享的作品往往是为了炫技,而产品的逻辑通常都经不起推敲的,真正优秀的设计应该从更高的层面出发,而不只是做表面上的工作”。 文章发布后,在 Twitter 、HN 及博客评论下引起了反响。虽然部分内容在一些设计师眼里看起来比较有攻击性(也就是俗称“开喷”),甚至还带有些地图炮,但是文中关于“设计的四个层次”以及“when..I
腾讯ISUX
2018/06/29
6960
SaaS产品增效 | 通过腾讯会议布局优化,看如何简化用户任务
随着产品不断迭代,产品功能会逐渐丰富全面,但对于用户来说,是不是齐全的功能就等同于好的体验呢?本文将以“腾讯会议设置布局”交互优化为例,结合《设计心理学2》的相关理论,分享关于简化复杂任务的设计心得。 一、为何要“简化”任务 一款产品是不是功能越齐全多样就意味着越好的产品体验呢? 对于专家用户来说,当然是功能越全面越能满足自己的需求,但对于新手用户来说,全面的功能未必等同最佳的体验,过多操作挤在同一任务中,可能会让用户感到不知所措,难以上手。因此设计师应尽可能帮助用户简化任务,避免用户因为界面复杂而放弃任务
腾讯云设计中心
2023/01/11
8170
SaaS产品增效 | 通过腾讯会议布局优化,看如何简化用户任务
你的布局设定方法靠谱吗? - 腾讯ISUX
本文不适合采用天才设计(Genius Design)方法的人士。 有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的,越细致的地方可能越是如此。比如,这个菜单的宽度为什么是200px?250px或者190px是否可以?图片的尺寸为什么是278px*196px?如何确定网页的宽度?“ 软件界面的设计师除了视觉本身以外,对于设计是否可以实现、大概以何种方式实现、规范可否被理解并且复制执行、设计实现的性价比与时间比等纬度都应有相当高度的认识。就像建筑设计师一样,他们一定很了解建
腾讯ISUX
2018/06/29
7160
不能不说的设计秘密——4个步骤提升交互思维
良好的用户体验包含很多内容:服务、产品、参与者的感受等等,显然产品功能的强大、界面的美观并不能完全概括体验。体验还包含在产品与用户之间的互动、产品与场景的交互、产品对用户的情绪上的影响等等的细枝末节中。 交互设计是设计人与产品接触的动态时间轴上的每一次接触,从一开始的靠近、到产生共鸣、赞美,在每一个接触行为的背后都有需要关注的用户情绪、需要理解的用户认知。卡耐基 · 梅隆大学设计学院的John Zimmerman等提出了一个设计过程发现和汲取知识的流程框架:define(定义)、discover(发现)、s
腾讯大讲堂
2018/02/13
8590
不能不说的设计秘密——4个步骤提升交互思维
豆瓣网可用性测试报告
  豆瓣网简介:豆瓣(douban)是一个社区网站。网站由杨勃(网名“阿北”) 创立于2005年3月6日。该网站以书影音起家,提供关于书籍、电影、音乐等作品的信息,无论描述还是评论都由用户提供(User-generated content,UGC),是Web 2.0网站中具有特色的一个网站。网站还提供书影音推荐、线下同城活动、小组话题交流等多种服务功能,它更像一个集品味系统(读书、电影、音乐)、表达系统(我读、我看、我听)和交流系统(同城、小组、友邻)于一体的创新网络服务,一直致力于帮助都市人群发现生活中有用的事物。
顾翔
2019/12/12
1.2K0
豆瓣网可用性测试报告
WebSocket实现多屏互动的分析及方案 - 腾讯ISUX
多屏互动事实上是一个比较宽泛的概念,通俗来讲就是用户在不同的终端上通过有线、无线的连接方式进行通信,可进行多媒体(音频,视频,图片)内容的传输,解析,展示,控制等一系列操作。而随着WebSocket协议的诞生,不同端之间的网页互连也变得流行起来,这种基于WebSocket协议实现多屏互动在运营活动上的使用也使得运营页面的形式也变得更加多样和有趣。 本文不会去探讨WebSocket协议的详情,想了解的可以点击https://tools.ietf.org/html/rfc6455查看协议文档。 在了解Webso
腾讯ISUX
2018/06/29
1.6K0
告别黄页时代,让设计鲜活起来
每年的双11都格外疯狂,随着技术带动内容的丰富化,刚过去的双11气氛在大众购买力的飙升下又刷新高,让人一夜之间感受到运营力量的震撼来袭。在血脉喷张各种抢购倒持购物车时的你,可否留意过无形之中的商城装扮。众多电商app从整个界面翻新到内部的运营活动抽奖机制,堪比一座物欲相抗衡的虚拟不夜城。 这些多样化而不失秩序的运营设计,背后支撑着有序的设计原则。如今形式内容纷呈的移动互联列队中,充斥着综合垂直电商、团购、旅游、生鲜等2C市场应用的身影,以丰富化运营方式攻占联结产业链,而黄页类生活资讯类应用相对显得务实,部分
腾讯ISUX
2018/06/29
1.1K0
QQ音乐V5 : 星设定 - 腾讯ISUX
悄然间,QQ音乐已陪伴大家十个年头,从PC互联网时代走到了移动互联网时代QQ音乐一直探索和坚持着简约时尚的设计语言。几经迭代,以内容为导向的页面排版略显保守,新版的视觉在品牌元素加入,突出音乐元素的表达,尝试从新的角度诠释简约时尚的设计语言。 如今的移动应用软件设计已经不再是简单跟随手机系统设计,有个性有品牌感的产品会更加受到用户喜欢。我们通过用户调研,也了解到用户对个性化界面的诉求,比如酷炫的皮肤,大图模式和动画的设计。产品和设计希望新版视觉在个性化和品牌感上有所突破,一方面满足用户诉求,另一方面也能全面
腾讯ISUX
2018/06/29
9000
玩转HTML5移动页面(优化篇)- 腾讯ISUX
承接上文《玩转HTML5移动页面(动效篇)》,上次说的是让页面动起来的一些小技巧。 而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏。 ====前方高能==== (1) 动画雪碧图 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图 (Sprite)! 网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gulp也提供了相应插件。 特别地,如果单张
腾讯ISUX
2018/06/29
1.1K0
设计探索|重新认识UX文案
讲到UX文案,大家可能并不陌生:一个按钮、一个弹窗的文案填充,我们几乎每天都要与他接触。但即便如此,大家对他的态度通常是得过且过的:“文案嘛,有了就行,看得懂不出错就好,没什么值得注意的”。 确实,作为设计师,我们关注交互流程、视觉呈现,但UX文案似乎从来不是我们的首要考虑;在很多时候,文案与我们的设计流程是分裂的:要不就是设计完成后再填入,要不甚至直接让产品经理来提供文案素材;文案撰写,好像从来没有被我们真正重视过。 但UX文案真的只是一个无足轻重的辅助位吗? 一、  UX文案的重要性 首先,先抛结论,U
腾讯ISUX
2023/01/05
8190
设计探索|重新认识UX文案
盘一盘国内3款Linux 控制面板
在当今的互联网技术领域,Linux 操作系统凭借其开源、稳定、安全等诸多优势被广泛应用于服务器搭建等场景。而与之配套的 Linux 控制面板则成为了众多运维人员和开发者便捷管理服务器、部署应用的重要工具。国内市场上存在着多款各具特色的 Linux 控制面板,本文将选取宝塔、cPanel 以及 Websoft9 这三款具有代表性的产品进行深入对比分析,旨在呈现它们各自的特点,尤其突出 Websoft9 以部署和维护开源应用为中心的独特性,帮助读者更好地了解并根据自身需求做出合适的选择。
用户11372075
2024/11/21
3310
盘一盘国内3款Linux 控制面板
以任务为核心的 BTSD 设计模型
提起 B 端设计,我们可能下意识的会想起后台设计,大部分情况是以 PC 端为主的界面设计。更深一步去想,B 端设计的需求来源是复杂业务,设计师的主要工作是为了满足这些需求给出合理方案。在大量的需求和逻辑中,设计师的方案往往顾此失彼,使得设计不能同时满足用户体验和业务需求。
我只是会一点编程
2022/04/01
6642
推荐阅读
相关推荐
[ISUX译]iOS 9人机界面指南(二):设计策略 - 腾讯ISUX
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档