菜单

案例研究:NN / g主页的迭代设计和原型测试

通过 凯瑟琳怀特顿莎拉吉本斯2018年8月26日

摘要:NN / g主页remanbetx官方网站手机版依靠快速迭代原型和可用性测试,来平衡多个manbetx官方网站手机版的目标。


可用性指南往往是随着时间稳定但是,在我们上一次重要的5年以来,我们的手机版本已经出现了NN / g主页,我们的内容和观众对视觉manbetx官方网站手机版的期望都有所发展。

当我们开始使用我们自己的主页时,我们使用相同的方法进行策略开发,原型设计和用户测试。UX会议因为即使我们已经进行了成千上万的可用性测试在各种各样的网站和应用程序中,我们仍然发现用户研究和迭代的manbetx官方网站手机版对于实现最佳结果至关重要。

设计目标

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

这个客户的反馈,与我们的内部战略目标一致,使我们达到了3个主要的目标,每个目标都与结果,而不仅仅是功能

  1. 表现出可信度:解释我们为什么是一个值得信赖的权威的最佳方式,不仅仅是谈论我们对研究的奉献精神,还要展示我们正在进行的工作的突出例子。
  2. 营造出极具吸引力的极简主义美学:现代化的视觉manbetx官方网站手机版也提高了可信度,但前提是视觉细节支持可用性而不是减损它例如,大字体既吸引人又可用;小文字覆盖在图像上看起来很时尚,但阻碍阅读。
  3. 保持对主要产品的访问:新内容和视觉细节不得干扰服务和信息的导航路径。

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

迭代原型测试

我们一直倡导测试manbetx官方网站手机版原型在编写代码之前,我们遵循自己的建议在原型设计方面,选择有目的的工具非常重要 - 特别是像我们这样的团队,我们的团队开发商我们的manbetx官方网站手机版在地理上分布我们避免使用专门针对特定技术的计划,这可能会限制或阻碍协作我们选择了工作Moqups到线框和manbetx官方网站手机版,然后使用大本营跟踪任务和做列表No tool is perfect, but these were a good fit for our team since they are low cost, easy to learn, automatically share changes to all users, and are accessible through a web browser. 

我们从低保真,黑白线框开始进行内容规划,但转移到了高保真视觉原型在做任何测试之前,从那以后比较visual manbetx官方网站手机版s评估美学吸引力是一个高度优先事项我们创建了多个可视化版本进行测试,然后逐渐缩小了集合每个新版本我们都添加了抛光和保真度。

黑白和高保真原型的例子
我们的迭代manbetx官方网站手机版流程从用于内容规划的黑白线框演变为使用基于云的原型制作工具创建的多个版本的高保真视觉模型。

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

我们每轮都学到了新东西反馈分为四个主题:复制,架构,布局和视觉风格根据反馈,我们调整了页面的一个或多个方面In some cases, we only needed to tweak a sentence or make something higher contrast; in other cases we remanbetx官方网站手机版ed a whole section to better achieve our manbetx官方网站手机版 goals以下是我们从比较多个原型中学到的一些示例:

  • 早期的主页布局比较了各种介绍性图像,从无图像到不同风格的背景图像我们很快意识到背景图像增加了视觉吸引力,并从那里比较各种图像以找到最佳图像(专业提示:不要将文字放在主题的脸上。)
  • 早期布局使用方格网格来呈现文章,视频和培训活动用户说过他们喜欢这个网格 - 但是当我们使用列表格式为文章添加替代布局时,人们一致倾向于列表版本(注意人们的行为,这通常与他们所说的不同。)对不同类型的内容使用不同的格式有助于人们快速了解差异并专注于使用内容而不是试图理解组织(我们还测试了这个列表布局,以确定是否会触发极右列banner blindness,发现它没有。)

从高保真原型到规格

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

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

对于主页,使用排名组件作为草图我们的第一个移动线框的指南从这个remanbetx官方网站手机版开始相对新鲜,使我们能够以干净,可持续的方式构建我们的布局和视觉效果我们创建了一个12列网格(在网络和移动设备上),我们可以将其用作各种页面布局的灵活基础。

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

从这里开始,我们创建了三个主要的列变体,并开始按照我们从旧站点指定的内容层次结构进行即插即用(这个过程类似于我们课程中讲授的过程网页UX。)虽然大多数网站似乎忽略了大显示器用户,但我们的三种布局中有一种是针对这一群体的(除了传统的笔记本电脑和移动观众。)

由于新的组件是manbetx官方网站手机版(例如,按钮,线条,类型,悬停样式和图块),它们被添加到主组件样式表中This process made creating specifications for developers efficient because there was no redundancy; we named each component on the page layouts, allowing development to reference the detailed spec in the master component stylesheet如果对样式表中的一个组件进行了后续更改,则不需要在新布局中反映这些更改。

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

我们的过程中的关键要点

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

  • 在没有压力的情况下探索很多manbetx官方网站手机版选项前面的完美布局和视觉效果 因为多轮测试是我们进步的关键部分,我们希望我们的manbetx官方网站手机版能够不断发展这有两个方面使我们受益:(1)我们没有浪费时间使早期版本像素完美,(2)测试和迭代的时间从一开始就构建在我们的项目时间线中。
  • 使可用性测试期间的实时改进最大化用户反馈由于我们是一个相对精益的团队,这种模式也为我们提供了分裂和征服的机会:当一个人进行可用性测试时,其他动态移动的线框基于反馈在测试期间改进线框使我们能够在很短的时间内获得更多的反馈如果我们改变了一个manbetx官方网站手机版,我们很快就会知道它是否有效这个过程帮助我们将我们的manbetx官方网站手机版时间集中在具有最佳反馈的布局上。

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

增量实施

我们选择了一个,而不是立刻整个网站。而不是remanbetx官方网站增量方法,逐步更新不同的页面为了在此期间保持基本的一致性,我们还为遗留站点实现了一些通用样式,例如页眉和页脚样式,以及字体和链接颜色。

这种渐进的方法也使我们可以灵活地学习如果事情不太正确,我们可以进行调整而不是走得太远,可能会使重做工作增加三倍(还有总是tweaks needed after any launch: if you do enough user testing before launch, you can reduce the rework, not eliminate it.) We’re excited to share our new homepage with you, and look forward to extending these enhancements throughout our website in the coming months — stay tuned!