[译]10个网站用户体验优化的研究结果

原文:10 Usability Tips Based on Research
Studies

英文原稿地址:http://weblogs.asp.net/scottgu/archive/2007/12/06/asp-net-mvc-framework-part-3-passing-viewdata-from-controllers-to-views.aspx
翻译原文地址:http://blog.joycode.com/scottgu/archive/2007/12/07/112355.aspx

咱俩不停地从各类位置,听到各个关于用户体验优化的技能或提醒,其中许多乍一听都很具有逻辑,可是只要我们能找到真正的数据和报告去验证这个理论或估算,分明就能更好地肯定预期效益。

过去的多少个礼拜内,我直接在写着研讨我们正在开发的新ASP.NET
MVC框架的多如牛毛贴子。ASP.NET MVC框架是个你可以用来结构化你的ASP.NET
web应用,使之富有清晰的关注分离,方便你单元测试代码和协助TDD流程的可选方法。

正文琢磨一些用户可用性方面的研讨发现,这么些研讨结果的拿到,首要透过视觉轨迹、数据总括报告、以及关于网站可用性革新地方的调研。

那么些连串的第一篇建造了一个简单易行的电子商务产品列表/浏览网站。它商讨了MVC后边的高层次的概念,示范了什么伊始成立一个新的ASP.NET
MVC项目,实现和测试这些电子商务产品列表功效。类别的第二篇对ASP.NET
MVC框架的URL路径接纳(routing)架构做了深切商讨,啄磨了它的劳作规律以及你什么行使它来处理更尖端的URL路径选拔场景。

你将会发觉,许多可用性优化的提拔是有目共睹的,不过得到了更好的数码协理;与此同时,你也能博得一些惊喜,这一个发现可能会改变你对近年来网页设计艺术发展走向的见识。

在前天的帖子里,我将商量控制器是什么与视图做交互的,具体来说,我将钻探你可以把多少从控制器传到视图以体现重临到客户端的回升的各个办法。

1、请忘记“三次点击定律”

这是一个历史悠久的说教:如若用户只可以点击两次以上才能找到她想要的始末,那么她会急躁并且有挫败感(而离去)。

2001年,Jeffrey
Zeldman–一个颇知名声的网页设计领域权威,在他的写作《Taking Your Talent
to the
Web》里指出,“两次点击定律”将救助您的网站有着更有逻辑的层次和更契合直觉的造访感受。

逻辑上看,说的不错。用户在花了众多时辰点击寻找所需内容未来,当然会烦躁。

唯独怎么要武断的设定“三遍点击”的限量?是否有迹象展现,网站访客会在品味了“五次”点击寻找以后就会突然放弃?

事实上,大多数访客并不会因为她俩点击了某个神秘的次数往后就扬弃,点击的次数和她们是否烦躁并不曾显著的关系。

一项由乔舒亚(Joshua) Porter在UIE(User Interface
Engineering)网站登载的讨论显示,用户通过更多次点击–例如十二次点击以后,并不比四回点击将来离去的势头更引人注目。Porter提到,实际上几乎从不人因为点击了超过四次就吐弃。

来源: User Interface Engineering

雁过拔毛用户的首要,不在于降低点击次数到某个神秘的数字以下,而是扩大易用性本身。假若您能树立一个易用且带来雅观标用户界面,但需要15次点击(5倍的“一回点击”)来成功某项工作,那么毫无让无聊的五次点击定律限制了你协调。

第一片段的简便简述

在这一个类其它首先有的,我们创制了一个电子商务网站,实现了基本的出品列表/浏览补助。我们是用ASP.NET
MVC框架实现那么些网站的,这多少个方法会很当然地将代码结构变为独特的控制器,模型和视图组件。

当浏览器向我们的网站发送一个HTTP请求时,ASP.NET
MVC框架将动用它的URL路径拔取引擎,把进来的哀求映射到一个控制器上的action方法来处理它。在按照MVC的应用中的控制器负责处理进来的伸手,处理用户输入和相互,执行基于这个输入和相互的应用逻辑(获取或更新存储在数据库中的模型数据等等)。

到生成重回到客户端的HTML回复的时候,控制器一般是与“视图”组件合作,那些视图组件是以单身于控制器的独立的类或模板的款式落实的,其目标是一点一滴尊重于封装呈现逻辑。

图片 1

视图不应有包含其他应用逻辑或数据库访问代码,所有的应用/数据逻辑应该由控制器类来拍卖。这么划分的动机是援助强制你的采纳/数据逻辑与界面生成代码间的一清二楚分离。同时这也有益你独自于您的界面显示逻辑来单元测试你的运用/数据逻辑。

视图应该只使用从控制器传过来的特定于视图的数码来生成输出。在ASP.NET
MVC框架中,咱们称那些一定于视图的多少为“ViewData”。这多少个博客的此外部分将研讨你可以用来将ViewData从控制器传递给视图来变化显示的部分不同方法。

2,运用F形格局指导访客浏览

Jakob
Nielsen学士–一位可用性探讨世界的开路先锋人物,曾社团超过230个参加者,举行了有关网页阅读习惯的视觉轨迹商量。这项研商结果呈现,参预者在神速浏览网页时,视觉轨迹彰显出F形的情势。(译者注:所谓F形格局,即从网页最左上看起,看完前边几行的大多数情节,越往下看的越短,形成F形浏览轨迹)

来源: Alertbox

另一项由搜索引擎营销公司Enquiro and
Did-it同视觉轨迹探究公司Eyetools合作展开的钻研,拔取一般的视觉轨迹研讨模式,对50名出席者举行轨迹跟踪,结果证实了在插手者浏览google搜索结果页面时,也油然则生F形情势。

被喻为“google金三角”的多变,正因为用户视觉的首先关心热点是最左上部分,这个结果同Nielsen学士讨论提议的F形情势是相平等的。

来源: Clickr Media

对网页设计师和网站写手来说,这几个结果指示出,若是您愿意内容更便于被看到,应该将其朝左放置,并且以符合F形状的形式来放置(例如标题后边跟段落摘要或要害字),这多少个都能扩充用户连忙浏览网页过程中看出那多少个情节的可能性。

一个粗略的成品列表场景

为匡助表达大家得以用来把ViewData从控制器传递给视图的一部分技巧,让大家来修建一个简单的制品列表网页:

图片 2

大家将用一个CategoryID整数来过滤我们想要显示在页面上的制品。注意下边我们是如何把CategoryID嵌在URL中的(例如,Products/Category/2
或 /Products/Category/4 )。

下一场,我们的出品列表网页突显了2个不等的动态内容元素。第一个要素是咱们要体现的归类的公文名称(例如,Condiments-调味品),第二个因素是一个HTML
<ul><li/></ul>
产品名字列表。我在地方的屏幕截图中对那2个因素用红笔画了圈。

在上边,大家将看一下大家得以行使的2个不同的方法来促成ProductsController类,这些类处理进来的伸手,获取处理请求所需的数目,然后将以此数量传给一个List视图来展现。我们要琢磨的率先个法子是用先前时期绑定的字典对象传递这么些数额,第二个办法则动用强类型类的章程来传递这些数据。

3,不要让用户等待:加速你的网站

我们连年被告知用户是不曾耐心的:他们讨厌等待。这很客观,何人喜欢特意去等呢?但是除了这一个传闻以外,是否有切实可行的凭证彰显,用户不欣赏等待以及网页性能是否会影响到访客。

微软的寻找引擎-Bing举办了一项分析,商量页面载入速度和其他网站目的是否有彰着的相干-如满足度、单位用户收入、点击速度等。

告诉突显,每2秒钟的页面延迟会降低3.8%的用户满足度,收缩4.3%的单位用户收入和削减4.3%的点击数。对一个像微软那么规模的商号来说,4.3%的滑坡已经得以一定于数百万加元的损失。

来源: O’Reilly Radar

因而用户的“没有耐心”紧假使因为她们等太久而不满,从而裁减点击。另外假设您很在意搜索引擎名次,那么进步页面响应速度就突显越来越迫切–google已经将页面速度进入了排行总结因素。

怎么升级页面性能呢?使用各个工具来发现性能瓶颈,使用css
sprites(译者注,将散装图片并成一个大图,来压缩图片载入负载)进步页面速度,利用标准度量工具如YSlow来增援开展前端性能优化。

格局 1:使用 Controller.ViewData 字典来传递ViewData

Controller基类有个ViewData字典属性,可以用来填充你要传给视图的多少。你使用键/值格局将对象参加ViewData 字典。

下边是个ProductsController类,其中的Category
action方法实现了我们地点的成品列表场景。注意,它是何许选用分类的ID参数来询问该分类的公文名称,以及取得该分类中的产品列表的。它利用“CategoryName”和“Products”五个键将这六个数据存储在Controller.ViewData
集合中:

图片 3 

接下来,我们地点的Category action方法调用 RenderView(“List”)
来代表它要用哪个模板来做显示。当你象这样调用RenderView时,它会将ViewData字典传给视图,以体现相应的死灰复燃。

贯彻咱们的视图

我们将动用居于我们项目的\Views\Products目录下的List.aspx文件来兑现我们的List视图。这么些List.aspx 将继承 \Views\Shared
文件夹中的Site.Master母版页中的布局(在你创制一个新的视图网页时,你可以在
VS 2008 中,右击,选拔添加新项->MVC视图内容网页来连接一个母版页):

图片 4

当我们利用MVC视图内容网页模板来创制List.aspx网页时,它不是从日常的
System.Web.UI.Page 类继承而来,而是从System.Web.Mvc.ViewPage
基类继承而来(是并存的Page类的一个子类):

图片 5

ViewPage基类提供一个ViewData字典属性,大家得以在视图网页里拜访由控制器添加的多寡对象。然后我们得以取出这么些数据对象,使用它们来呈现HTML输出,可以用服务器控件的法子,或者用
<%= %> 显示代码的办法。

拔取服务器控件来兑现大家的视图

下边是一个如何采纳现有的<asp:literal> 和
<asp:repeater>服务器控件来实现大家的HTML界面的事例:

图片 6

咱俩得以用下面的后台代码类将 ViewData
绑定到这么些控件之上(注意大家是怎么使用ViewPage的ViewData字典来实现的
):

图片 7

注: 因为页面上未曾 <form runat=”server”>,是不会输出 view-state
的。下面的控件也不会自动生成此外ID值,这表示你对输出的HTML有完全的主宰。

动用 <%= %> 代码来实现大家的视图

若果您更欣赏使用行内代码来生成输出的话,你可采纳下边的 List.aspx
来促成跟上边完全相同的结果:

图片 8

注:
因为ViewData的序列是富含“objects”的字典,为了对它接纳foreach语句,我们需要将ViewData[“Products”]的类型转换成
List<Product> 或者
IEnumerable<Product>。我在页面上引用了System.Collections.Generic
和 MyStore.Models 命名空间 以避免输入 List<T> 和 Product
类型的完好名称。

注: 上边使用了“var”关键词,这是VS 2008中新的 C# 和 VB
“类型臆想”特性的一个例子(在这边阅读本身以前的连带贴子)。因为我们将ViewData[“Products”]
转换成了 List<Product>,大家在 List.aspx 文件中的 prduct
变量上拿到了全体的intellisense:

图片 9

4,让您的情节更易于阅读

Nielsen大学生的一项有关用户在网页上阅读行为的琢磨提议,网络用户并不确实地在线阅读内容。他的辨析展现用户仅仅阅读一个网页上28%的文字,并且这一数据还随着页面上文字总量的增多而更为回落。

来源: Alertbox

为了充实用户阅读到“大部分内容”的可能性,可以使用各个技能去使得内容更便于阅读。例如高亮显示首要字,标题,目录,缩小段落等。

主意 2:使用强类型类来传递ViewData

除去帮忙先前时期绑定的字典方法外,ASP.NET
MVC框架还允许你把强类型的ViewData对象从控制器传递给您的视图。使用那么些强类型的艺术有多少个好处:

  1. 防止拔取字符串来询问对象,得到对您的控制器和视图代码的编译时检查
  2. 避免需要在采取象C#如此那般的强类型语言中肯定转换ViewData对象字典中的值
  3. 在您的视图网页的标识文件以及后台代码文件中取得你的ViewData对象的自行代码intellisense
  4. 可以接纳代码重构工具来帮衬自动化对整个应用和单元测试代码库的改变

上面是一个强类型的ProductsListViewData类,封装了 List.aspx
视图显示咱们的产品列表所需的数目,它涵盖 CategoryName 和 Products
属性(是经过行使新的C#活动属性协理来落实的):

图片 10

然后咱们可以革新我们的 ProductsController
实现来拔取这么些目标,把一个强类型的ViewData对象传给我们的视图:

图片 11

专注下面,大家是怎么通过 RenderView()方法的一个异常的参数,把我们的强类型 ProductsListViewData
对象传给View的。

把视图的ViewData字典与强类型的ViewData对象一起行使

眼前我们编辑的 List.aspx 视图实现会持续和大家改进过的 ProductsController
协作,不需改变代码。这是因为,当把一个强类型的 ViewData 对象传递给后续自
ViewPage 的视图类时,ViewData
字典会自动使用反射对强类型的目标的特性做询问取值。所以大家象下边这样的视图中的代码:

图片 12

会自行使用反射来从强类型的 ProductsListViewData 对象中得到 CategoryName
属性,这多少个目标是我们在调用 RenderView 方法时传出的。

接纳ViewPage<T>基类来对ViewData强类型化

除了襄助基于字典的ViewPage基类外,ASP.NET MVC框架中还披露有依据泛型的
ViewPage<T> 实现。尽管您的视图是从 ViewPage<T>
继承而来,这里T表示是控制器传给视图的 ViewData 的体系,那么 ViewData
属性就将是行使了这些T类的强类型属性。

譬如,我们可以立异我们的 List.aspx.cs
后台代码类,不是从ViewPage继承来,而是继续自
ViewPage<ProductsListViewData> :

图片 13

这么做之后,页面上的 ViewData 属性将会从一个字典变成属于
ProductsListViewData
类型。这代表,我们前日得以不再动用基于字符串的字典来查阅获取数据,而是可以接纳强类型的性质了:

图片 14

然后,我们可以利用服务器控件的点子,或者 <%= %>
展现的主意来变化基于这么些ViewData的HTML。

动用服务器控件来贯彻
ViewPage<T>视图

下面是一个事例,我们可以利用<asp:literal> 和
<asp:repeater>服务器控件来贯彻我们的HTML界面。那是我们使用持续自
ViewPage 的 List.aspx 网页时所选用的通通平等的标识:

图片 15

上面是相应的后台代码。注意,因为大家是从
ViewPage<ProductsListViewData>
继承而来的,大家得以一向访问它的习性,而并非对此外事物做类型转换(哪天大家决定对中间一个属性改名的话,我们还将获取重构工具的支撑):

图片 16

应用 <%= %> 代码实现大家的
ViewPage<T> 视图

倘使你更爱好使用行内代码来生成输出的话,你可以象上面这样在 List.aspx
中达到跟下边一样的结果:

图片 17

拔取 ViewPage<T> 方法,我们现在不再需要对 ViewData
使用字符串查阅了。更关键的是,注意下边,我们不再需要对任何性质做类型转换了,因为它们曾经是强类型的。这意味,我们可以编写
foreach (var product in ViewData.Products) ,而不用对 Products
做类型转换。我们还在循环中的 product 变量上取得了完整的intellisense:

图片 18

5,不必担心页面下拉和滚动条

有一个古老的“神话”告诉我们,网页的最首要内容必须要在“fold”(译者注:折叠线)下面,这是一个从报纸借到互联网的词汇,意思是无需滚动下拉条就能看出的页面区域,这些用法最早是由Jakob
Nielsen提出的。

因而,很长的页面是否就不佳呢?大家是否只可以把装有内容塞到页面顶部,因为用户不会去读书“fold”以下–也就是需要下拉才能观察的内容吗?

一家网站分析集团Clicktale的告知提交的回答是:“并非如此”。这份报告结果显示,页面长度并不会潜移默化到用户是否下拉浏览页面的可能性。

来源: Clicktale

另一份由用户导向计划集团CX Partners的Joe
Leech的告知仍旧指出,无需下拉即可看到区域的始末一经很少,反而可以激发用户下拉去探索更多的情节。

来源: cxpartners

这边需要着重提议的是,你无需因为害怕用户“不会下拉页面寻找”而将所有首要内容堆砌在页面顶部。

毋庸置疑的法门是,运用视觉分级原则和分区的技巧,来表现页面上各类内容的最重要和优先级(译者注:从而有利于用户寻找内容,包括下拉寻找)。

结语

指望本贴子提供了关于控制器怎样把多少传递给视图以体现重返到客户端的还原的有些细节。你可以利用先前时期绑定的字典,或者应用强类型的主意来达成这些目标。

首先次试着建筑MVC应用时,你很可能发现把利用控制器的逻辑和生成界面的代码分离开来的概念有点怪。你大概要花上一段专门的时日来多修建些应用,你才会倍感习惯,把温馨的笔触转向到拍卖一个请求,执行所有的应用逻辑,把修建界面回复所需的
viewdata 包装起来,然后提交单独的一个视图页面去显得的观念上去。
首要事项:假诺这么些模型对您来说并不感觉舒适,那么别用它,MVC的法子纯粹是可选的,我们并不认为这是每个人都想要用的东西。

但那多少个划分应用的利益以及随后的对象在于,它同意你独自于你的界面展现代码,来运作和测试你的采纳和数量逻辑。这巨大地惠及你为你的应用开发全面的单元测试,以及在修建应用时行使TDD(测试驱动开发)的流水线。在此后的贴子里,我会对此做更透彻的探究,以及探究你能够用来轻松测试代码的一流实践。

仰望本文对您抱有扶助,

Scott

6,将首要的网页内容靠左侧放置

随便阅读如故创作,从小生活在“从左往右”书写的学识环境的人,都早就养成了从左侧开首的习惯。这就是干吗大部分网页访客将首要注意力放在网页的左侧,遵照Nielsen大学生的关系20余名用户的视觉轨迹研讨告诉提议,浏览左边的“重要注意力”大约为69%的总浏览时间。

来源: Alertbox

同样的结果也从反面出现在这么些“从右往左”书写的学问条件里,例如加泰罗尼亚语或爱沙尼亚语的网站上,视觉轨迹报告的结果就刚刚相反(紧要的注意力集中在左边)。

从这么些结果可以取得两件事。首先,你的网站界面设计需要考虑到概括语言、书写方向在内的累累学问环境因素;其次,作为大部分的、从左往右阅读习惯的网站,将网页根本的元素放在左边是一个好主意,反之亦然(从右往左阅读的网站,将重要元素放在右边)。

7,文字里面的空间会影响可读性

有上佳可读性的文字不仅容易明白,容易快速阅读,也能升级网站用户继续读下来–而不是关闭页面离开的可能性。影响可读性的元素有成千上万,包括字体采取(是否带衬线装饰),字体大小,行距,背景/前景相比度,以及文字里面的空中。

在一项关于可读性的钻研测试中,20个插手者看到了情节完全一致的文字段落–但是文字边框的上空尺寸和行与行之间的距离不同。结果展现,没有边框空间的文字读得更快,同时,领会效果下降了。当文字段落边上没有留空间时,阅读会加快,可以解释为文字之间靠得更近,目光从行到行、从段落到段落需要的大运更短。

来源: Software Usability Research Laboratory

正如这多少个钻探显得,大家对情节的规划样式会彰着影响用户体验。保持对以下细节的眷顾:颜色、行距、分组,更进一步的还有所谓的网页排版技术,以此来确保你从未妨碍用户阅读网页内容。更多内容可以学习网页设计中的负空间设计。

8,微小的细节可以导致巨大的差别

当整个网页项目处于赶时间的场地时,通常发出只盯住大方面,而忽略一些细节的场所。时间或其他资源有限时,大家反复会扬弃某些文字措辞的考虑,或者某个表格的按钮设计。有太多其他的事体需要我们考虑,一些小细节反复就随他去了。

可是有时,一些小细节–例如表格的某部按钮,会影响到一切网站的成功与否。在用户界面设计专家Jared
Spool的一个案例中,他透过一个细节改动:在结算流程中移除一个按钮,换上一个更显著的不当提醒音讯来防护用户操作失误,此更改在一年内加强了3亿比索的入账。第一个月,这些结算流程的改版直接带来了45%的销售额提高。

这种低度关切细节的做法拿到了一家用户导向计划公司Flow的照应。他们发觉经过修正网站的报错页面,来提供更使得的扶持文字,能增进每月成功结算率0.5%,推算出去,对这一个网站表示每年净增二十五万美金的收入。

她俩提供的“更有用”的相助音讯是何许?从一个不知所谓的404破绽百出页面,变成一个礼貌的、两行的信息:“我们很对不起,在处理你的订单时出现了错误。您的信用卡还未被付款,请点击结算再次举办付款。”

关心细节,运用a/b相比测试来尝试和验证你的比方,从而寻找最实用的、能博得最优结果的规划。利用分析软件设定网站的目的,确定标杆,并且不止拓展评估、测试、优化。

9,不要试图用搜索来弥补恶劣的领航设计

用户愿意看到容易接纳和团伙出色的领航。即使有一个十分了不起的站内搜索,用户依然会率先应用主导航。遵照Gerry
McGovern举办的任务测试显示,超越70%的参预者在接到任务之后,首先是点击了页面上的一个链接,而不是应用搜索效果。

其一结果同UIE对30个用户举办的“电子商务任务测试”的结果很类似。商讨分析提出,用户一般是在该页面的链接不可能达到他们预期的情事下,才会转接到找寻引擎。也就是说,搜索只是被用在,当用户在当下页面不可能找到他想找东西的状态下。

那一个结果可以得出清晰的结论:无法依赖站内搜索来弥补或“拯救”差劲的情节社团、难以找寻、以及恶性的信息架构等问题。当用户不能顺利被导航到他们想去的地点时,注意力应该转向界面设计、导航设计和内容协会的改正;至于立异搜索效用,则应作为附带因素。

10,你的首页并非你想的这样首要

访客来到你网站并不一定是首先抵达首页。搜索引擎在此地是一个关键因素,他们将访客直接链接到你网站内的任何一个息息相关页面。其他网站的表面链接也是相同,日常直接链接到首页以外的,有有关内容的页面。

基于Gerry
McGovern的剖析,从网站首页进入的访客比例正在戏剧性地回落。他见证了一个大型研商网站的“首页进入访客比例”从2003年的39%,下降到二零一零年的2%。这一倾向在她研讨的另一个网站也拿到讲明,首页进入访客比例在短暂两年内缩小了一半(从二零零六年的10%,下降到二零一零年的5%)。

McGovern的研商结果表明,越来越多的流量来自于外部源头-搜索引擎、社会化媒体(如twitter)、内容聚合服务(如AllToP)–而不是源于网站的首页。因此,将注意力从首页更多地转换来着陆页,将会为你的网站带来更高的性价比-花很少时间取得很大收获,以及更好的留给和转发用户的火候。

(完)

Leave a Comment.