菜单 关闭

测试纸上原型来节省时间和金钱:Mozilla的案例研究

通过 苏珊·法雷尔8月30日2015年

简介:低保真用户测试的几个迭代Mozilla的支持网站迅速为Firefox用户显示用户界面元素效果最好。.


我们经常提倡使用并行计算和迭代设计过程manbetx官方网站手机版探索设计的多样性manbetx官方网站手机版,因为它会产生更好的用户体验。廉价的方式来实现这种类型的设计过程manbetx官方网站手机版纸上原型快速..纸上原型不仅是高效快速进步设计的,允许设计师找到他们的最佳用最少的投资,manbetx官方网站手机版但也快,有趣,而且容易学习。.

在本文中,我们展示如何使用Mozilla纸上原型以及用户研究和数据挖掘快速推进UX-focused重新设计一个网站的重要组成部分。万博官网manbetx下载manbetx官方网站手机版(一个前一篇文章记录如何设计有很高的投资回报率。manbetx官方网站手机版)

如果有人说设计迭代将打破你的船时间表或者用manbetx官方网站手机版户测试太麻烦,本文指出他们,因为一些原型的进展7版本在2周.测试与用户之前爆发的HTML编辑器很便宜,它显示替代设计效果最好。manbetx官方网站手机版.

迭代

Mozilla的设计努力的中央的目标之一是提高信息的可发现性和“脱颖而出”的为了manbetx官方网站手机版让用户快速找到他们需要的信息。成功的一个关键措施是减少在支持论坛的问题。.

产品的帮助登陆页面顶部入口点的支持网站,因为他们通过访问帮助菜单上的产品。在支持网站上观看次数最多的页面,Firefox帮助着陆页指出很多有用的信息,但是,有了这个设计,manbetx官方网站手机版很多人在论坛提问。超过30篇文章从主页链接,manbetx官网手机登陆但是当有人想要信息未列出的问题,搜索找到它的唯一方法。相反,用户需要能够选择一个路径相关的问题和找到几篇文章适用于他们。manbetx官网手机登陆.

Firefox帮助:重新设计manbetx官方网站手机版
Firefox帮助 着陆页前重新设计manbetx官方网站手机版

虽然没有单一的答案的问题平vs。很深的层次结构,我们多年的可用性研究表明,有太多的选择,人们很容易不知所措。当人们点击正确的第一,,他们几乎3倍成功的任务..

记住这些知识,在第一次迭代的设计我们专注于限制选择的数量。manbetx官方网站手机版新的设计允许人们manbetx官方网站手机版从他们的任务或他们的产品或服务,和它提供5最想要的盒子里的链接在页面的左下角。这些不同的任务类别(开始,安装、保护,定制,和修理)允许人们找到他们需要的或确定的信息不存在,很快。.

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

设计师使manbetx官方网站手机版用的OmniGraffle原型,我们打印到纸张小报,减少他们的大小。因为没有代码来改变,这个原型方法允许我们在测试期间快速进行设计更改。manbetx官方网站手机版Firefox用户帮助设计进展迅速走向更好的可用性,manbetx官方网站手机版通过允许我们看他们试图找到上面问题的答案。他们被困或困惑,我们重新设manbetx官方网站手机版计。.

在早期设计阶段,manbetx官方网站手机版其意图并非关注图形或布局问题,而是我们需要找到那些选择在每个页面和测试标签的理解。这些元素可能是最终使用其他交互部件表示,如菜单或手风琴..

在后面的迭代的设计,manbetx官方网站手机版所示,任务组材料的帮助下最终被移动产品下一层IA,部分原因是所有任务并不是对所有的产品和服务,可用和分层顺序帮助管理,必要的优雅。为了避免压倒性的和分散的用户,我们也使用进步的信息披露:不同的Mozilla产品现在隐藏在倒塌的手风琴。.

迭代,倒塌的手风琴
later-iteration设计支manbetx官方网站手机版持主页:人们可以选择任务(2)或扩大软件行(1)选择一个产品或服务。当有人点击中间的问题,我们向他们展示另一个这样的一张纸,但随着中间部分扩展(与以前的截图)..

在这个迭代,用户喜爱的大图标(2),但是他们感到困惑的一些措辞的选择(3):“”参与:如何帮助别人”(一般)和“”反馈:通过Firefox输入给我们你的建议”(太具体)。我们测试了其他几个短语,直到我们找到效果最好的措辞。.

注意写web:整个研究,我们希望发现多少(实际上,如何)信息需要显示在人们容易找到最重要的事情,因为阅读屏幕上的基本原则之一就是少即是多.阅读屏幕上比在纸上阅读更困难,和低文化水平是一个挑战。因为人们倾向于扫描首先而不是马上阅读,他们认为更少的词汇更丰富在线阅读时,和简洁的页面更有用.同时,因为Mozilla网站访客说世界上的所有语言,我们想让词翻译和本地化的概念。.

纸上原型测试会话结束后,设计师在manbetx官方网站手机版HTML下一个版本。这个设计用manbetx官方网站手机版强大的分组和背景颜色来区分活动和信息类型之一。它仍然是一个太复杂的优雅的规模,然而,这是简化的实现为产品之前,服务,和任务被添加。.

在原型发烧友元素吸引了太多的关注
早期HTML设计manbetx官方网站手机版Mozilla的支持 主页:尽管这显然是一个很多的高保真表示,重要的是要注意,前面的低保真版本(如上所示)是足够的可用性测试的许多设计问题。manbetx官方网站手机版.

最终的设计从产品的选manbetx官方网站手机版择开始,第一次点击后显示,基于任务的导航,良好的逐步透明化原则。此外,许多参与选项被合并在一个按钮,,志愿者为Mozilla支持,允许人们表达他们的兴趣一般开源贡献通过这个入口点,然后找出下游到底怎么做,可以显示更多的选择和解释。.

Mozilla主页后重新设计的支持manbetx官方网站手机版
Mozilla的支持 主页后,推出了重新设计项目manbetx官方网站手机版

Mozilla的员工衡量网站互动不断,因此,支持网站的设计和内容继续随时间而变化,manbetx官方网站手机版基于数据分析。.

经验教训

  • 频繁的变化是更好的在测试原型。.频繁的迭代给每个设计更改前更多manbetx官方网站手机版的时间更多的用户,它允许更多的进化发生。.内部团队应该每周测试一些新的设计思路。manbetx官方网站手机版.
  • 早期测试替代设计manbetx官方网站手机版让最好的设计组件上使用更少的页面测试manbetx官方网站手机版进展..
  • 与忠诚,保持一致的大小,和色彩。.显示一些高保真截图图样的界面元素不工作得很好,因为颜色吸引了太多的关注主要是灰度的页面。.

我们想感谢Mozilla允许我们分享这个经历与体验社会。万博官网manbetx下载.

用户体验万博官网manbetx下载团队

  • 苏珊·法雷尔高级用户体验专家,尼尔森诺曼集团。manbetx官网手机登陆.苏珊进行了研究,数据发现,分析数据,并使设计更改建议。manbetx官方网站手机版.
  • 水晶比斯利,产品设计师,manbetx官方网站手机版Mozilla.水晶领导了这一项目,与Mozilla协调利益相关者,在纸上原型研究会话和玩电脑。.
  • 布拉姆Pitoyo,网络用户体验设计师,manbetx官方网站手机版Mozilla.布拉姆设计manbetx官方网站手机版任务流和交互设计更改网站原型和监督。他还检测了老IA我们可以比较结果的测试提出了新的IA。.

参见:全天的课程在使用纸上原型实习培训用户体验设计的万博官manbetx官方网站手机版网manbetx下载过程。.