Doraemonls

Stack Overflow如何重新设计顶部导航

Doraemonls · 2017-02-22翻译 · 479阅读 原文链接

你也许注意到我们今天换了个新装。

New Top Navigation

我们核心使命是:让开发者的生活的更美好,今天的这次更新正是实现这个小目标的一小步。去年,我们集成了Jobs 这一从开发者中来,到开发者中去的产品。我们增加了全新的内容产品Documentation,来帮助你找到更多编程问题的解决方案。我们还增加了Developer Story让开发者可以丢掉过时的简历。

这一次,我们优化了产品开发过程,增加了更多的用户研究,以便我们能够更早的验证新想法,听到更多用户的声音。通过观察用户使用新功能,我们了解了很多事情。而这些事情在以往我们直接向用户请求反馈的时候,是学不到的。随着产品和流程的推进,我们清晰的感受到,Stack Overflow早已超越了之前的设计,推翻了我们曾经的决定。

统一的主题

当我们和用户交流时,有件事出现了,那就是:即便在导航栏增加了Jobs和Documentation的链接,也有很多用户没有注意到这个变化。深入调查,我们发现,很多人根本不看顶部导航栏。这个“心理障碍”是如此强大,以至于用户根本不能理解图标的意义。

以前的导航栏

引用你们中一些的话:

“当我有目的的来这时,我根本不关心其他事。”

“我来这只有一个原因:找到问题的答案。”

“在我看来,问题标题以上所有东西都不存在。”

“我只会往下滚动页面看问题。”

数据验证了我们的猜想:平均每天有930万用户访问Stack Overflow,但顶部的导航栏点击量还不到88000(包括了所有的收件箱,声望值,用户信息和搜索)。如果除以总的页面访问数,导航的访问量还不到不到1%;如果按每页上有多个点击的方法计算,这个值可能更小。99%的用户不会使用这样的导航栏。

百万用户最常见的访问模式是这样的:从Google来,滚动到页面中浏览答案(不看导航甚至有时连问题也不看),结束。这个流程是合理的,而且我们也很高兴能够帮助开发者们迅速获得新知识。但这也意味这访问者没有完全利用好Stack Overflow带来的益处。如果他们没意识到,那么我们在帮助更多开发者分享知识这一方面,就是低效的。我们没能让开发者在寻找问题答案的同时,优化他们对职业的搜索,最大化发掘文档的功效,也没能让他们参与到社区交流中来。

我们曾猜想导航栏缺乏互动是综合用户浏览习惯,视觉结构以及在页面右侧布局等原因导致的。根据这个F形阅读模式 的研究,还有用户目光通常向下的浏览习惯,我们的导航栏确实不甚理想。

F形阅读模式

我们也猜测页面焦点(我们的Logo)会让用户直接跳过窄小的顶部导航。另外页面向下滚动时,导航和置顶栏也会很快跳出在浏览器视窗之外。

于是产品设计团队开始了一次敏捷设计。 每个设计师设计自己的导航栏,然后综合评比并找出其中好的设计。设计小组最后把他们中最棒的那些组合成了一个新的设计。下面是这次敏捷设计过程中获得的一些思考:

  • 去掉杂乱和相似的分组让用户可以更快的识别信息。

  • 将导航栏置顶,让用户浏览完答案或者点击答案、评论链接后仍能快速搜索或访问站点其他功能。

  • 使用现在web app中常用的导航设计模式。

  • 将导航栏设计成Stack Overflow品牌的浓缩精华版。

我们挑选了三个科技公司的用户让他们对比前后两种不同的设计。下面是他们对旧版导航栏的一些想法。

“我都不知道黑色的bar是不是新的...”

“我自动忽略那些肯定不是我要找的部分了。”

“导航栏看上去像是标签,也许它们能过滤一部分内容,但它们肯定不像导航栏。我怀疑它是干嘛的,所以我也不会点它,还不如去我熟悉的Google。”

“我登录了但我还是不知道那些东西(收件箱,成就系统)是干嘛的。”

“顶上那些混乱的东西简直要解码才能读懂...”

“黑色栏有点...感觉它不像是这个页面应该有的啊,页面剩下的都是白色,灰色或者橙色”

下面是对新版的评价:

“我都不知道旧版的icon是干嘛的,新版的每一个icon我都知道是什么意思”

"我知道我可以搜索,我也知道可以去Jobs。"

“这版时尚多了。”

“我喜欢以前的黑色版,但我更喜欢我知道我让自己喜欢新版这件事。”

“减少很多噪音,增加更多信号。”

“更清晰,更结构化。终于抛弃了顶上那些杂乱需要解码的内容,现在这个可以看了。”

“和其他网站常用的标准导航更像了,我也更习惯。”

项目定义

于是,现在我们就有了足够多的信息为重新设计导航栏立项。导航功能涉及了网站的各种不同用例、不同用户和许多指标。所以,为了能尽早发布,要能清晰的定义这次改动的范围内容就尤为重要。为了避免范围延伸,我们定义了以下改动功能范围,(有一些小的例外)。

主要目标

  • 列出所有我们的工具,并让开发者能够轻易的找到它们

  • 增加Jobs和Documentation的入口流量

  • 使用更直观的视觉设计

  • 让更多用户登录并访问网站的更多功能。

次要目标

  • 增加消息提示

  • 增加或者至少不降低搜索量

  • 不降低用户提问数

  • 还有其他一些我们不想搞砸的重要且无聊的指标。

我们为衡量这次激进的发布成功与否制定了以下这些目标:

  • 利用可交互的原型设计对6个用户进行可用性测试,来发现一些主要的UX和功能问题,以便收集了有益的评估洞见。

  • 对5%的匿名用户进行A/B 测试以衡量使用数据。

  • 对声望值不足500的10%的注册用户进行A/B测试

  • 再增加所有Stack Overflow员工的意见反馈。

  • 选择收集所有用户在Meta上的反馈。

以下是我们在针对每项目标工作时的一些的发现

可用性测试

这些测试选择了对6个声望值高低不同的用户,进行1V1的录像采访。

少数人很难区分其中的两个icon,(所以我们中途更新了icon图标)于是所有参与者都能够完成指定的任务了。并且相对于旧版,他们一致倾向新版设计。

“看上去非常非常好。目前为止我还是喜欢这个新的。现在用的版本,根本就不会注意到导航栏,除非它置顶了。比起现在这个,新的(二级)菜单吸引我的注意。”

“我觉得旧版里面两个水平栏分开同时存在很奇怪。新版自然多了。”

“新的这个简洁到了,也更节约空间。内容更紧凑,账户信息分组更好。Tags的功能我喜欢,因为大部分网站都有相似的设计...我非常喜欢这个新设计。”

对5%的匿名用户进行A/B测试

这次测试从2016年12月1号开始,到2017年1月19号结束,每组大约200万用户。匿名用户约占97%,只有61%点击了当前的导航栏。

  • 登录用户增加了7%。

  • 问题点击量增加了163%。

  • Jobs点击量增加了160%(Jobs全部流量预期增加约占16%)。

  • Documentation点击量增加229%。

  • Tags点击量增加113%。

  • 用户信息点击量增加178%。

  • 提问链接点击量增加33%。

  • 搜索下降了13%。 *在匿名用户测试后,注册用户测试开始前,我们针对这些问题对设计进行了一些调整,之后的测试中也确实增加了搜索量。

尽管发布的新版带来一些负面影响,但这些增加的指标已经完全可以确定它带来更多积极的影响。无论如何,我们还会继续监测并关注新顶部导航栏的各项性能表现。

对声望值不足500的10%注册用户进行A/B测试

这次测试从2017年1月18号到2017年1月30号,每组大约10万用户。注册用户的PV约占总PV的3%,其中44%的用户点击了旧版的顶部导航栏。

  • 收件箱点击量增加了45%。

  • 成就值点击量增加了11%。

  • 问题点击量增加51%。

  • Jobs点击量增加99%(Jobs所有流量增加里有15%是预期有的)。

  • Documentation点击量增加113%。

  • Tags点击量增加32%。

  • 用户信息点击增加了82%。

  • 提问点击量持平。

  • 搜索增加了8%。

收集所有Stack Overflow员工的意见

这个阶段从2月1号周二开始,大约100名我们的员工参加了对顶部导航的测试。

收集所有用户的意见

这个阶段从2017年2月7号到17年2月14日结束,大约有1600名用户加入。

在Meta社区的反馈对我们帮助非常大。感谢所有参与的用户!这期间我们修复了很多bug,加入了一些新功能,还有一些功能我们正在考虑加入或者已经在计划中。想了解更多的更新情况,请参考Des’s 最新博文.

下一步

我们有一个现在正在进行并不断更新的想法清单。我们计划在新版设计上通过一系列的A/B测试不断推陈出新。我们也有一些早期探索,看看未来如何在其他国际化的或者Stack Exchange的社区相关站点上推出新设计。

设计团队现在正在制定统一设计标准,以便在我们所有产品中提供统一一致的用户体验。我们已经发布了一些更新,近期还将有更多的新内容上线。特别感谢Paweł Ludwiczak和Oded Coster在设计和实现新导航栏上的辛苦工作。

最后,我们一如既往的期待你们的反馈。如果你发现了bug或者想到了新功能,在Meta社区发个贴吧!

相关文章