菜单 关闭

案例研究:NN/G主页的迭代设计和原型测试manbetx官方网站手机版

通过 凯瑟琳·怀特顿莎拉吉本斯8月26日,二千零一十八

总结:NN/G主页的重新设计依赖于快速迭代原型manbetx官方网站手机版,以及可用性测试,平衡多个设计目标。manbetx官方网站手机版


可用性准则往往是随时间稳定.但是,在我们上次重新设计manbetx官方网站手机版NN/G主页,我们的内容和观众对视觉设计的期望都有所发展。manbetx官方网站手机版

当我们开始重新设计自己的主页时,manbetx官方网站手机版我们采用同样的方法来制定战略,原型制作,和用户测试,我们在万博官网manbetx下载UX会议.因为即使我们成千上万的可用性测试在各种各样的网站和应用程序上,我们仍然发现,用户研究和迭代设计对于实现最佳结果至关重要。manbetx官方网站手机版

manbetx官方网站手机版设计目标

由于我们在过去对网站进行了多轮可用性测试,我们从很好地把握我们的观众及其目标开始。但我们确实做了定性调查评估客户对网站和我们整体品牌的反应和期望。

此客户反馈,与我们的内部战略目标一致,带领我们实现了3个主要设计目标,manbetx官方网站手机版每个都与结果,不仅仅是功能

  1. 显示可信度:解释为什么我们是一个值得信赖的权威的最好方法,不只是谈论我们对研究的奉献,同时也展示了我们正在进行的工作的突出例子。
  2. 创造一种吸引力,极简主义美学:视觉设计的现代化也提高了可信度,manbetx官方网站手机版但只有当视觉细节支持可用性而不是贬低它时。例如,大字体既吸引人又有用;覆盖在图像上的小文本看起来很时髦,但不利于阅读。
  3. 保持对主要产品的访问:新内容和视觉细节不得干扰服务和信息的导航路径。

这些设计原则manbetx官方网站手机版成为制造manbetx官方网站手机版设计权衡以及衡量结果的尺度。例如,关于使用多少种不同颜色的争论最终通过重新审视创建极简主义美学.当人们的第一反应成为对我们进行了多少研究的积极评论(而不是对视觉效果本身的评论)时,我们就知道这种布局是有效的。

迭代原型测试

我们一直主张测试设计原型manbetx官方网站手机版在编写代码之前,我们听从自己的建议。当涉及到原型设计时,重要的是要有目的地选择您的工具,特别是对于像我们这样的团队,我们都在哪里开发人员我们的设计师分布manbetx官方网站手机版在不同的地理位置。我们避免了专门的项目,这可能会限制或阻碍协作。我们选择了在莫普斯线框和设计,manbetx官方网站手机版然后使用巴斯坎普跟踪任务和待办事项列表。没有完美的工具,但这对我们的团队来说很合适,因为他们的成本很低,易学,自动共享对所有用户的更改,可以通过Web浏览器访问。

我们从低保真度开始,用于内容规划的黑白线框,但转移到高保真视觉原型在进行任何测试之前,自从比较视觉设计manbetx官方网站手机版评估审美吸引力是一个优先事项。我们创建了多个可视化版本来测试,接着又逐渐缩小了范围。在每一个新版本中,我们都添加了波兰语和保真度。

黑白和高保真原型示例
我们的迭代设计过程从内容规划manbetx官方网站手机版的黑白线框发展到使用基于云的原型工具创建的多个高保真视觉模型版本。

我们招募新访客和重复用户在台式机和移动设备的组合上,使用交互式原型和传统设计进行3轮测试。manbetx官方网站手机版

我们每一轮都学到了一些新东西。反馈分为四个主题:复制,建筑学,布局,以及视觉风格。根据反馈,我们调整了页面的一个或多个方面。在某些情况下,我们只需要调整一个句子或做出更高的对比;在其他情况下,我们重新设计了整个部分,以manbetx官方网站手机版更好地实现我们的设计目标。以下是我们从比较多个原型中学到的一些例子:

  • 早期的主页布局比较了各种介绍性图像,从没有图像到不同风格的背景图像。我们很快意识到背景图像增加了视觉吸引力,从中比较各种图像,找出最佳的图像。(专业提示:不要把文字放在受试者的脸上。)
  • 早期的布局使用方格来呈现文章,manbetx官网手机登陆视频,以及培训活动。用户他们喜欢这个网格-但是当我们为文章添加一个使用列表格式的可选布局时,manbetx官网手机登陆人们一致地倾向于列表版本。(注意人们做什么,这通常与他们所说的不同。)对不同类型的内容使用不同的格式有助于人们快速理解差异,并专注于使用内容,而不是试图理解组织。(我们还测试了这个列表布局,以确定最右边的列是否会触发广告盲点,发现没有。)

从高保真原型到规范

我们开始优先考虑我们的内容:我们采用了高保真原型的线框,并根据重要性对组件进行了排序。这成为我们重新设计的指导方针(并作为跨移动和Web一致性的指导方针)manbetx官方网站手机版。

内容优先排序示例
使用高保真原型,我们创建了一个内容层次结构。我们在整个迭代过程中使用这个排名列表来通知视觉层次和布局。(左边的桌面版本,右侧的移动版本。)

对于主页,使用排名的组件作为指南来绘制我们的第一个移动线框。重新设计的开始相对新鲜,使我们能够在干净的环境中构建布局和视觉效果,manbetx官方网站手机版可持续的方式。我们创建了一个12列网格(在Web和移动平台上),我们可以使用它作为广泛页面布局的灵活基础。

页面网格图
我们的网格系统的一个早期示例及其在中保真主页线框中的应用。

从这里,我们创建了三个主要的列变体,并按照从旧站点指定的内容层次结构开始即插即用。(这个过程类似于我们在课程中所教的网页用户体验万博官网manbetx下载尽管大多数网站似乎忽视了大屏幕用户,我们三种布局中的一种是针对该组的。(除了传统的笔记本电脑和移动用户之外。)

当新部件被设计时(例如,manbetx官方网站手机版按钮,线,类型,悬停样式,和瓦片)它们被添加到主组件样式表中。这个过程使得为开发人员创建规范变得高效,因为没有冗余;我们在页面布局中命名了每个组件,允许开发人员参考主组件样式表中的详细规范。如果随后对样式表中的一个组件进行了更改,这些变化不需要反映在新的布局中。

manbetx官方网站手机版以这种系统化的方式进行设计,使我们能够与开发人员轻松协作,谁建立了一个相应的前端样式指南.前端风格指南收集了模块化库中的所有产品界面元素。它使我们受益,作为UX团队,万博官网manbetx下载在两个方面:(1)原型设计和实施新设计是有效的,manbetx官方网站手机版(2)在整个产品中,一致的视觉设计很容易实施。manbetx官方网站手机版

我们流程的关键收获

原型设计和测试的迭代方法使我们能够:

  • 探索许多设计选项,而不必预manbetx官方网站手机版先设计完美的布局和视觉效果。因为许多轮测试是我们进步的关键部分,我们期望我们的设计能不断发展。manbetx官方网站手机版这有两方面的好处:(1)我们没有浪费时间使早期版本的像素完美,(2)测试和迭代的时间从一开始就被构建到我们的项目时间表中。
  • 制作可用性测试期间的实时改进最大化用户反馈.因为我们是一个相对精简的团队,这种模式也为我们提供了划分和征服的机会:作为一个人进行可用性测试,另一种基于反馈的动态移位线框。在测试过程中改进线框可以让我们在短时间内获得更多的反馈。如果我们改变了设计,manbetx官方网站手机版我们很快就知道它是否起作用了。这个过程帮助我们将设计时间集中在具有最佳反馈的布局上。manbetx官方网站手机版

我们是一家小公司,但我们再次看到,一个好的以用户为中心的设计过程不需要巨大的预算。manbetx官方网站手机版许多轮迭代设计也不会不可接受地延迟您的项目。manbetx官方网站手机版只要你计划和使用它折扣可用性方法,你可以用一点点做很多事,改进设计的每一步。manbetx官方网站手机版

增量实施

而不是立即重新设计整个站点,manbetx官方网站手机版我们选择了增量法,逐步更新不同的页面。同时保持基本的一致性,我们还为传统站点实现了一些通用样式,例如页眉和页脚样式,以及字体和链接颜色。

这种递增的方法也给了我们在学习时的灵活性。如果事情不太对劲,我们可以做出调整,而不是走得太远,可能使重复工作增加三倍。(还有)总是任何启动后所需的调整:如果在启动前进行足够的用户测试,你可以减少返工,我们很高兴与您分享我们的新主页,并期待在未来几个月内在我们的网站上扩展这些增强功能-请继续关注!