我们经常提倡使用a并行和迭代设计过程探索设计的多样性,因为它能产生更好的用户体验。实现这种设计过程的一种廉价方法是纸上原型快速纸上原型它不仅能够快速推进设计并让设计师以最小的投入找到他们的最佳品种,而且还能够快速、有趣且容易学习。

在本文中,我们将展示Mozilla如何使用纸张原型、用户研究和数据挖掘来快速推进其网站主要部分的ux重新设计。(一个前一篇文章记录了重新设计如何获得高投资回报。)

如果有人说设计迭代会破坏你的交付计划,或者用户测试太麻烦了,请让他们看看这篇文章,因为有些原型已经完成了2周内7个版本.在开发HTML编辑器之前与用户进行测试是很便宜的,它可以显示出哪种设计方案效果最好。

迭代

Mozilla重新设计的核心目标之一是提高信息的可发现性和可查找性,以便使用户能够快速找到他们需要的信息。这一成功的一个关键措施是减少其支助论坛的问题数量。

产品帮助登陆页面是支持网站的首要入口点,因为它们是通过帮助菜单中的产品。作为支持网站上浏览次数最多的页面,Firefox帮助登陆页指向了很多有用的信息,但是,有了这个设计,太多的人最终会在论坛上提问。虽然主页上有30多篇文章的链接,但如果想知道没有列出的问题的信息,只能通过搜索来找到。相反,用户需要能够选择与他们的问题相关的路径,并找到少数适用于他们的文章。

Firefox帮助:在重新设计之前
Firefox帮助登陆页面前的重新设计

虽然这个问题没有单一的答案层次结构是平的还是深的我们多年的可用性研究表明,选择太多,人们很容易不知所措。当人们先点击正确的东西时,他们成功完成任务的可能性几乎是常人的3倍

考虑到这一点,在设计的第一次迭代中,我们专注于限制选择的数量。新的设计允许人们从他们的任务、产品或服务开始,它在页面左下角的一个框中提供了5个最想要的链接。这些不同的任务类别(开始、安装、保护、定制和修复)允许人们快速找到他们需要的内容或确定信息不存在。

Mozilla支持主页,第一个版本
第一个版本的纸上原型Mozilla的支持首页:用户可以开始 任务(1) 产品或服务(2),或选择一个热门话题(3)。

设计师用OmniGraffle制作了原型,我们把它们印在小报上,然后切成合适的尺寸。因为没有代码需要更改,这种原型方法允许我们在测试期间快速更改设计。火狐用户通过让我们看到他们试图找到最重要问题的答案,帮助设计快速地向更好的可用性发展。当他们遇到困难或困惑时,我们会重新设计。

在这个早期的设计阶段,目的不是关注图形或布局问题,而是找出我们需要在每个页面上呈现哪些选项,并测试对标签的理解。这些元素中的任何一个最终都可能使用其他交互小部件来表示,例如菜单或手风琴

在后面的迭代设计,如下所示,任务组材料的帮助下最终被移动产品下一层IA,部分原因是所有任务并不是对所有的产品和服务,可用,优雅地分层帮助管理,必要的区别。为了避免让用户不知所措和分心,我们还使用了进步的信息披露: Mozilla的不同产品现在被隐藏在折叠的手风琴下面。

折叠手风琴的迭代
Support主页的后期迭代设计:人们可以选择任务(2)或扩展软件行(1)来首先选择产品或服务。当有人点击中间的问题时,我们会向他们展示另一张纸,但中间部分是展开的(与之前的截图相比)

在这次迭代中,用户喜欢大图标(2),但他们对一些选项的措辞(3)感到困惑:参与:如何帮助他人(太笼统)和反馈:通过Firefox输入给我们您的建议”(太具体)。我们测试了其他几个短语,直到找到最有效的措辞。

关于网络写作的注意事项:在整个研究中,我们想要发现有多少(实际上是如何做到的)的信息需要显示,以便人们容易找到最重要的东西,因为在屏幕上阅读的基本原则之一是少即是多.在屏幕上阅读比在纸上阅读更难,而且低识字率是一个挑战也因为人们倾向于扫描首先他们认为在线阅读时,单词越少信息越丰富,而不是马上阅读简洁的页面更有用.此外,因为Mozilla网站的访问者会说世界上所有的语言,所以我们想让单词翻译和概念本地化尽可能简单。

在纸上原型测试结束后,设计师用HTML制作了下一个版本。这个设计使用了强烈的分组和背景颜色来区分活动和信息类型。但是,它仍然有点太复杂,难以优雅地扩展,所以在添加产品、服务和任务实现之前,它被简化了。

高保真元素在原型中吸引了太多的注意力
早期的HTML设计为Mozilla的支持首页:虽然这显然是一个更高保真度的表示,但值得注意的是,早期的低保真度版本(如上所示)已经足够用于许多设计问题的可用性测试。

最终的设计从产品的选择开始,然后在第一次点击后显示基于任务的导航,遵循良好的渐进式揭示原则。此外,一些参与选项被合并在一个按钮下,Mozilla支持志愿者,它允许人们通过这个切入点表达他们对开源贡献的普遍兴趣,然后确切地弄清楚如何进一步做,在那里可以显示更多的选择和解释。

Mozilla支持主页后的重新设计
Mozilla的支持主页作为推出后的重新设计项目

Mozilla的工作人员不断地测量网站的交互作用,所以基于数据分析,支持网站的设计和内容会随着时间的推移不断发展。

经验教训

  • 在测试原型时,频繁更改会更好。频繁的迭代让每个设计更改在更多用户面前有更多的时间,这将允许更多的演变发生。内部团队应该每周测试一些新的设计想法。
  • 尽早测试备选设计允许在测试过程中在更少的页面上使用最佳的设计组件
  • 保持保真度、尺寸和色彩空间一致。显示一些界面元素的高保真截屏效果并不好,因为在以灰度为主的页面上,颜色吸引了太多的注意力。

我们要感谢Mozilla允许我们与用户体验社区分享这一经验。

用户体验团队

  • Susan Farrell,尼尔森诺曼集团高级用户体验专家。必威在线娱乐苏珊进行了研究,发现了数据,分析了数据,并提出了设计更改建议。
  • Crystal Beasley,产品设计师,Mozilla.Crystal领导了这个项目,与Mozilla的利益相关者协调,并在纸上原型研究会议上玩电脑。
  • Bram Pitoyo, Mozilla网站用户体验设计师.Bram设计了任务流程和原型,并监督了网站的交互设计变化。他还测试了旧的IA,以便我们可以将结果与拟议的新IA的测试进行比较。

参见:全日制课程纸上原型设计的实践培训在用户体验设计过程中。