如何实现基于 Chrome 浏览器的超轻量级 Coding 2.0 信息组织架构(转自 coding.net )

本文主要探讨一种全新的 Coding.net 信息组织架构,力求用最简洁的组织方式和最便捷的工具,在最短的时间内,迅速提升用户体验。主要内容如下:

  1. Coding 1.0 的设计窘境
  2. Coding 2.0 设计概要及如何实现
  3. Coding 2.0 实战
  4. Coding 2.0 杀手级特性总结
  5. 后记

Coding 1.0 的设计窘境

本文主要由以下两点来阐述:

  1. 由于信息组织混乱带来的操作不便和困惑
  2. 在现有设计基础上很难从根本解决上述问题
信息组织混乱

这里只谈本人的使用体验。如果你有遇到类似的窘境,强烈推荐 Coding 2.0 解决方案!
信息组织的混乱具体体现为:

  • 同一个操作会有多个入口(如在个人中心查看项目列表或创建项目)
  • 某些功能需要多次点击才能使用 (如发送任务)
  • 页面干扰信息太多

综上所述,你会发现有时候自己点着点着,就不知道自己点到哪里了。连自己想干什么都忘了!说了这么多,举个例子吧。

在 Coding 的 qq 群里,大家时常会讨论一些功能修改和 bug。比如,导航栏上的通知按键点击后,是跳所有通知页面还是未读通知页面。 讨论完,提出修改或 bug 的人,需要发个任务分配下具体的任务。一般我发任务的过程是这样的:

先打开 Coding.net,进入个人中心


Coding.net 的用户中心

看到这个页面后,我总会有种“拔剑四顾心茫然”的感觉。。。任务发送框在哪??经过艰苦的搜索之后,发现了两个“任务”按键。点击后,你会发现这两者通向“我的任务”页面。

“我的任务”页面

很遗憾,这个页面也没有发送框。这时,博主回过神来,貌似要先进入项目内(如 coding 项目),才能找到发送框。说实话,这点与博主的直觉很不一样。虽然用了 Coding 这么久,但直觉还是先找任务发送框再找项目,因为要执行的操作是发任务而不是找项目呀!

也罢,开始找项目,以 Coding 项目为例。一般先从导航栏上的“常用项目”开始找。找不到的话,点击左上角的“项目”,进入项目列表找。如果你在用户中心,还可以在“动态”上方的“快捷项目”列表先找找。

Coding.net 的用户中心

如果项目列表的项目太多,比较难找,请使用分组功能。


项目列表

Anyway,成功进入项目。对了,我想刚什么来着???卧槽,原来我是想发任务呀。继续寻找,任务发送框。。。。巨大的页面上终于搜索到了“任务”键。。。


项目首页

终于找到任务发送框了,已哭晕在厕所


任务列表页

看到这里,你估计已经乱了。让我们来总结一下: 从 qq 群里老大说“发 task ”开始,打开 Coding.net,等页面刷新,进入用户中心,下意识在页面上找“任务发送框”,找不到。然后,想起要先进入项目才能发任务。于是,开始找项目。点击项目,等页面载入,进入项目首页,发现还是没有发送框。在左侧导航栏找到“任务”按钮,点击,等页面载入,开始操作......最快要三次跳转(浏览器默认主页-> Coding.net 用户中心-> 项目首页 -> 任务页面)

现有设计改动太难
  • 流程和无用信息的删减
    很多次,博主在思考能不能让类似于“发任务”这样的操作简单一点,省去几个步骤。一个比较好的方法是在页面顶部的导航栏的“加号”下面掩藏一个任务发送框似乎是一个好主意。这样就可以在“用户中心”发送任务了。少去了两次跳转。但这只是一个补救措施,这样做意味着多增加了一个发任务的入口,从而让系统进一步复杂。
    至于那些我任务的无用信息,像用户中心的冒泡模块,项目首页的讨论和动态(至少在“发任务”这个操作过程中,他们是无用的)但是你有不能把它去掉,因为,再某些情况下它们也许会有用,或者换句话说,你不用不代表别人不用。鸡肋,食之无味,去之有肉。还有如果你删除了大量那些所谓的“无用东西”,页面上的空白该用什么填补?例如,去除用户中心右侧的冒泡。
  • 众口难调
    关于这点,这里只举一个例子。进入任务列表页后,默认是跳转到正在进行页面。这个页面集中了项目中所有正在进行的项目。但我会习惯性点到“我的关注”一栏,因为我主要负责测试,遇到 bug 就给其他成员发 task,然后关注 bug 的修复情况。任务对于我而言更像是 bug trace。无独有偶,对于产品经理,也是经常切换到“我的关注”一栏。何不省去这一步骤,这届把任务列表页的默认跳转改成“我的关注”?改完之后,老大很困惑,说了句令人很吃惊的话:“我从来没有切换到‘我的关注’一栏过....” “不要规定用户去如何使用”这是在这种情况下,听到最多的一句。如果开放让用户自定义的功能,又会让系统更加复杂。
    任务列表页
  • 推到重来
    重写?怎么设计?谁来写?。。?。。。?。。。?

在这样的困境下,不得不剑走偏锋。Coding.net 2.0 呼之欲出。

Coding 2.0 设计概要及如何实现

设计概要

从上面的分析来看,焦点主要集中在跳转上。那么,问题来了,如何一次性跳转到目的页面?答:在浏览器里输入该页面的网址,按回车。再问,这些网址很难记而且频繁地在浏览器里输入十分麻烦,该怎么办呢?答:请将它们保存到收藏夹。
对,Coding 2.0 是一种基于收藏夹的超轻量级信息架构体系。再往深点想,点击书签栏里收藏的网址和点击页面上的链接效果是相同的,所以对收藏夹里的网址进行整理就是对网站信息架构的整理。有点绕,看不懂?那就上例子吧。

具体实现

**第一步,以‘记住我 ’的状态登录 **


登录页面

第二步,建立文件夹体系
第三步,将目标页面放入对应的收藏夹
文件体系你可以根据自己的喜好随意安排。一般可以从功能和常用项目两个维度进行组织。本人采用的是按功能来组织,即一级目录是功能,二级目录是相应的项目。反之,你可以按项目来组织,例如,

按常用项目来组织

按功能来组织收藏夹


按功能来组织

将 Coding.net 上的所有页面全都放进去?
在“任务”目录下,放上自己有所有的项目,或是在自己参与的某个项目里放上该项目所有页面,根本没必要。首先,根据二八定律这个普适原则来看,用户在 80% 的时间里使用 20% 的页面。换句话说,只要你能将常用网页放入收藏夹体系,就可以满足日常需求了。
以本人为例,有些项目使用项目使用任务会比较频繁,例如,Coding,所以在“任务”菜单下面加上了 Coding 项目的任务页。再比如我的另一个项目 MyIdea,主要是用来写东西,记录想法,使用“讨论”功能比较多,但几乎不使用任务功能,所以会把该项目的讨论页面添加到“讨论”菜单下,但不会将它的任务页面放到“任务”目录。
Coding 2.0 的一个很重要的设计理念就是最大的自由度,没有范式和条条框框,有的只是自己的具体需求和操作习惯。

顺便说一下,收藏网址的快捷键是 Ctrl + D

第四步,定期进行收藏夹“重构”
组织适合自己的 Coding 2.0 体系不是一蹴而就,更不是一成不变的。随着业务的调整(新项目建立,老项目结束),新的项目成员加入,自己在团队角色的转变(由测试转为产品),你的关注点发生了变化,那么经常使用的页面必然随之发生变化。这就意味着,你需要时常整理。以下是本人的一些重构经验,

  • 改名
    基本上 chrome 默认标题挺不错。不过,要是在使用时,对某个标题产生了疑惑,在弄清楚这条网址的含义后,修改标题。
  • 移动
    这包括目录层级间的移动和目录内的移动。例如,先前我是把“发冒泡”放到和“任务”同级的目录,后来发现“发冒泡”使用的太频繁了,就把它放到了书签栏上。至于目录内的内容移动,我习惯将频繁使用的项目移到前面。
    移动收藏夹
  • 添加新地址
    如果有个页面,你需要2次以上的跳转才能到达,而且一个星期内有3次以上的使用频率,毫不犹豫的加吧。如果你发现,你需要在默认打开基础上多点一次,才能到目的页面(如,任务模块的“我的关注”),毫不犹豫地添加到收藏夹吧。
  • 删除或添加目录
    有时候当项目结束时要及时删除,以免成为僵尸项目。如果同一目录下的网址太多了,要加一层目录进行管理,例如常用项目太多时,要新建一个父目录,将这些项目放入其中,进行项目分组。同样,当你发现一个目录下只有一个网址的时候,要将该网址提到上一级目录,并去除原来的所在的目录。因为层级越少越容易管理。

Anyway, 一切以操作习惯为准。请不要吝啬这点整理时间,不然,你会在搜寻入口,页面切换和回忆流程的过程中失去更多时间。

Coding 2.0 实战

再发一次任务

我在上文中提到过,作为测试人员我关注的是任务列表中“我的关注”一栏,所以,我把这一页加到了收藏夹。刚巧这个页面上有一个默认给自己的发任务的发送框,所以,这个 URL 也可以用来发任务。


我关注的任务页

由于我经常要给项目成员 “bluishoul” 发任务,所以还要选择一次项目执行者。同样,选择任务执行者的操作也是繁琐的。为了省去这一步,我把 “bluishoul” 的任务页加到了收藏夹,因为该页面上的任务发送框的执行者默认为 “bluishoul”。


某项目成员的任务页面

最后,我得到的收藏夹如下:
整理后的收藏夹

这样我如果查看任务或是给自己发任务就点 “Coding” 目录下的“我关注的”,要是给 “bluishoul” 发任务,就点 “bluishoul” 的任务,一部到位。
不用再苦苦寻找任务发送框,而是直接一步到位,更不用等待多余的页面载入,也不用在发送框上去选择任务执行者。而且,整个流程与我的思维方式很接近,即“选择任务功能”->“选择 coding 项目”->“选择项目执行者”。更妙的是,这个过程干扰信息特别少,既不用在项目列表中“众里寻她千百度”,也不用在项目首页,找一个“任务”按钮,更不用在一堆“项目成员”中寻找 “bluishoul” 同学。
还有一个好处在于,原有的页面设计无需任何改动,就能满足自己的“变态需求”。试想,如果我对设计师说,能不能在用户中心提供一个专门给 “bluishoul” 同学发任务的入口?她一定会认为我疯了,要是如果她真的加了这个入口,那么大家一定会认为我们俩都疯了。

资源收藏

在使用的 Coding.net 的过程中,我们会在短时间内,关注某个具体的讨论,冒泡或任务。以本人为例,用户在 “Coding-Feedback” 中发表了一个讨论,说他遇到了一个 bug。我要确认它是否是 bug,是否可重现,以及原因。这个过程中,我就会频繁的切换到这个讨论。在这种情况下,我会创建一组“特别关注”藏夹。

特别关注

Coding 2.0 的杀手级特性

1. 一步到位

综上,你也许发现了一个 Coding 2.0 很强大的使用场景,在未打开 Coding.net 时候却想用它的服务。例如,你在逛其他网站的时候,看到一段精彩的代(duan)码(zi)。想发个冒泡,分享给“泡友”。用 Coding 2.0 的话,点击书签栏的“冒泡”即可。而使用 Coding 1.0 的话,你要在地址栏内输入 Coding.net 跳转到用户中心,再点击导航栏上的“冒泡”,才到冒泡发送页,需要分两步走。冒泡尚且如此何况是,查看“merge request” 和“发任务”等复杂操作。两者在用户体验上,高下立显。

冒泡快捷入口

2. 超量级框架

作为一种轻量级框架,Coding 2.0 有着得天独厚的敏捷优势。开发简便,几乎无技术门槛。开发周期短,半小时基本搞定。维护简单,修改极其方便,可以快速迭代

Coding 2.0 修改(添加,删除收藏夹等)起来自由度之大,而修改更新速度之快(省去了持续集成等流程,几乎达到了所该即所得的速度),及时的相应不断变化的需求,这些都是 Coding 1.0 望尘莫及。而且,Coding 1.0 先天的设计缺陷,注定它的更新只能是一些把系统搞得越来越复杂的“修修补补”

3. 信息组织的极其灵活

你可以选择按功能来组织收藏夹,也可以“按常用项目“来组织。或是并行使用这两种,又或是混合使用。用户也可对同级目录下的内容自行排序。完全按照你自己的喜好操作来,赋予用户最大的灵活度,且不会对其他用户造成影响。而 Coding 1.0 更像是按 项目来进行组织的, 几乎没有按功能来组织的特性

4. Coding 1.0 到 Coding 2.0 无缝升级

无需改动 Coding 1.0 的任何页面设计,只需要一个 Chrome 浏览器,你就能拥有 Coding 2.0. 还有,再也不用和交互设计师吵前端设计的问题了,极大促进团队和谐。。。

Coding 2.0 的设计理念就是 Agile, Clean, Effective and most of all, enjoying most Freedom!

后记

事实上,我们在 Coding 1.0 上做过很多改善体验的努力,常用项目,项目分组,导航栏上的加号下掩藏的发送冒泡,私信,添加好友和创建项目等的快捷入口,优化项目,动态,任务列表的加载速度等等。但是,“入口少,不便捷”和“入口多,会让系统复杂困惑” 矛盾始终存在,关于页面的默认打开方式也各有各的想法。 更为重要的是,这些优化和补救措施,似乎是为了掩饰 Coding 1.0 的天生设计缺陷。试想,如果在发送任务和讨论或其他项目内的操作的时候,没有先经过项目列表页,项目首页,用户很少会察觉到页面加载的问题,也无需急着优化。其实这个问题本来,就是 Coding 1.0 以常用项目来组织信息,将任务和讨论的操作藏在项目内部的设计所带来的的必然结果。如何根本解决设计问题?这个问题似乎有答案,推到重来,重新想出一套方案。这问题似乎又没有答案,新方案是什么??你有空写吗??

从昨天早上有了 Coding 2.0 的想法之后,我就迫不及待地想把它写下来。刚开始,本来是想恶搞一下( Coding 2.0 是一种基于收藏夹的超轻量级框架,想想就很搞笑)。写着写着,不断有新想法涌现。最后发现,这套框架轻松的解决了我在开头提出的两个窘境(组织混乱,修改太难),困扰好久的问题。至少解决了我自己的大部分使用体验问题。其实,我发现有些用户也在无意识地使用这套方法,只是没将其系统化。这是人的天性,谁不想让自己的操作一步到位,让自己的工作井井有条。我相信如果有选择,很少有人会选择妥协。

原文链接:
https://coding.net/u/ciwang/p/Coding-2.0/topic/23427

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,796评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,633评论 18 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 有人说喜欢落日的人总是带有几分忧郁气质的。但是我----不得否认我却是真的很喜欢落日的。每每落日余晖时,便会拿起手...
    昊水长天阅读 450评论 1 6
  • 我现在在开封北站,检票站门口,我本是10:00的车票,由开封到郑州东,时间30分钟,应该本已经在车上的我现在却不在...
    我淑阅读 1,013评论 14 10