解析列表页面条款设计,苹果网址与微软式网球站的可用性探究比较

文:KIM
FLAHERTY
 
 Yuxin 翻译

前几日我们要对两家大集团——苹果和微软——的网址做三个比较。

原版的书文标题:The Anatomy o­f a List
Entry,剖判列表页面条约设计。现在列表页面在扁平化的前卫下大致无处不在;那篇文章,剖判了三个案例的新闻架交涉用户眼动轨迹,详细描述了列表页面包车型客车规划条件和用户行为习于旧贯;为了求学信息架构和用户体验设计,就有细小研读并翻译的主张。新人第一遍翻译,多多引导。

这两大巨头都对生育高等产品以及引领软硬件的发展认为自豪,但他们的网址又怎么呢?怎么做出相比较?更珍视的是,哪贰个网址更加好,更实用呢?

原版的书文链接:https://www.nngroup.com/articles/list-entries/

在本文中,大家将从网站可用性的角度,对这两家公司的网址做四个紧密的辨析。


在这一相比起来前,我们应该注意到,这两家同盟社的事情是环绕着差别的市集张开的。

首要词:电子商务 眼动跟踪 新闻架构 视觉设计 网页可用性

微软的创收大致来自于公司用户,个中包含向计算机创造商发卖操作系统许可和向厂商出卖办公软件。那并非说他们不卖东西给个人用户——他们卖,他们一样具有针对于个人用户的制品线,比如X-Box,当然个人用户也会选购 Windows 和
Office。微软的客户对象是每一人,从家用计算机用户到开采者及合作社用户,那从侧面又补充了她们的网址的目标:试图服务每一个人。

摘要:为了用户更加好的浏览和对照产品条款,列表页须要被精心设计布局和视觉以保全内容优先级。

一方面,苹果的职业骨干针对个人用户,它的绝大非常多净利润来自出售硬件,举例iPod 和
Mac。这使得苹果的靶子更上一层楼明显:推销,出售并提供售后服务。他们不必为卖给创造商许可而操心,因为他们是独一的创建商,因此,他们的网址的关键指标就是宣传产品,扩大产品线,并由此在线集团出售产品。

尽快此前,小编在线预约周天游览要住的酒店。经历了在好些个少个例外的网址上稳固、收缩小编的挑选范围。花了几天的时间,作者才终于决定要住的地点,以为的那进度当成累。

1.首页

在互连网预定商旅,大家超越二分之一所做的都平等,查看、评估和减弱选项。大相当多时候,用户会翻动特定项目或有一组正式来筛选,然后列表页会显示若干候选项只怕说是列表条目款项。列表页面上急需广大摘取条款,方便用户实行高效的查看和裁定。

首页是网址中的第一页,最重大的页面之一,在好多状态下,主页是独一打动访谈者,并使她们一连浏览下去的说辞。你有几分钟的时间说服访谈者你的网址对她们有丰裕的市场总值,不然的话,他们就可以走开。

备注:列表页一时被称作“分类页”(包蕴产品的门类)、“目录页“(列出地方或人时)、“图库页“(包罗图表或图像)。寻觅引擎的结果页面(简称SERP)是另一种形象的列表页。本文中,我们把那全体概念的页面统称为列表页。

苹果公司的定势做法是,通过主页告诉大家,网址还在符合规律运行着。他们把主页当做是两个广告板,总是显得一个他们最新产品的小幅广告,上边附带着七个当前一致主要的成品或音信。假诺对这八个条文都不感兴趣,能够点击上方的特大型导航条,它被分为几某些来表示苹果集团的中坚产品:Mac,iPod

OPPO,其下拉菜单中还会有越来越多的链接,例如在线商城和售后帮忙。除却,还会有个找出栏。

列表页:与用户必要只怕杰出的顺序候选项条目款项的来得枢纽。各样列表条款经常蕴含着更加深层条指标描述和页面链接(详细情形页)。备注:深导航结构的网址会在首页和列表页之间还设有任何层级。

葡京手机登陆网址 1

列表页的可用性取决于每一个条指标安排性。每一个条款不仅仅要满足它自身的职能、能轻易地被精通,它还索要和页面上别样条目款项一同协作;列表页及其条款应符合以下多少个可用性要求:

有趣的是,那幅主体广告非凡巨大,差相当的少覆盖了方方面面页面。如若它不能够抓住你的集中力,那表示整个网址的挫败。幸运的是,苹果通过优质的制品经营出售知道怎样吸援用户的重力,所以,他们没什么好怕的。

1.为列表的条规创造属性优先级的音信架构

当用户浏览三个出品的选项列表时,他们须要快捷明确哪些可以漠视的,哪些产品是有意思味的。太多的音讯量会淹没用户并变成一个繁杂的视觉效果;另一方面,假若列表页没有丰裕的细节,留下太多没有答案的主题材料,迫使用户每每跳转页面(正是需求跳转到实际情况页去猎取他们供给的新闻)。换句话说,一再跳转就改成列表页的新闻不足的实信号。

Circalighting.com:在这一个壁灯的列表页上只展示了图片和产品名称,省去了如涂饰、灯泡类型、乃至价格如此的根本的内幕表达。所以用户必须去到各样产品的详细的情况页上技术获取那个新闻。纵然,购买壁时,图像可能是对顾客最关键的因素,可是价格和任何关键差距性的音信不应该在这一个层级中舍去。

葡京手机登陆网址,仿佛金发女孩的故事,产品详细的情况列表的数码也供给体面:太多则过载,阻碍用户在三个页面上获取丰硕的取舍;太少会让他俩数次跳转页面。满意大非常多用户对列表条目款项标音信需求并保险其识别性,用户研讨和分析的结果能够引导:哪些属性可以为用户传递最多的音信。

分析——假若你眼下的列表页有排序或筛选成效,就足以找寻什么样筛选项和排序标准使用最频仍;哪些用于首轮调节,哪些用于第一轮。

用户研讨——实行日记深入分析和可用性商量,能够精通什么要素是起决策性的、它的现实性主要性程度、以及普通是怎么着产品品质用于收缩选项。

用户数量和剖析将支持你规定什么属性应该包蕴在您的列表条款,哪些须要高亮,哪些能够淡化。各种属性的一一优先级是在伊始考虑列表条款的布局和视觉设计以前要求鲜明的。这一个先行级的设置是列表页面音信结构的基础。

咱俩事先的整个22年的可用性测验经验告诉咱们,有一块新闻是每种用户的须要:价格。

Travelocity.com的航班列表页包罗的重中之重音信如:起飞时间、达到时刻、旅程时间、停站数量和栖息的长度,以及航班号和平运动营商。那几个消息方可帮忙用户挑选二个航班而且不会感觉音信过载,而急需别的细节时也还应该有路径是能够调出来的。

另八个急需留神的是,其网址轻便的剧情。你不会被左侧栏,文告也许额外的导航项目而骚扰——在页面上独有比比较少的事物,吸引你的注意力,使人一见依旧地找到下一步的去向。

2.每一种列表条指标视觉设计和音讯框架结构都应该展现出该属性的预先级

单独的列表条目款项标布置性都应当是能够协助用户火速精通各种选项何况支持产品里面的对比、比较。

好像它是三个小的网页的千姿百态来相比各个列表条款,布局和视觉的管理能让种种描述属性都十三分其事先级。

岗位和布局——依照经验,最顶层和最左边的区域的列表条约获得最多的关爱。高优先级的音信应放置在那个岗位(在从左到右的开卷文化地区)。基于这一反驳,来创制每列表条指标音讯架构,组织各样属性的先行级。

眼动仪注视叁个追寻引擎的结果页面包车型地铁图形,展现出用户起始浏览列表页条目款项标最顶层和左边的区域。

视觉优先——吸引眼球的最根本的信息经过视觉设计:

a)强调属性的门径:扩张字体型号、重量或选拔二个非正规的水彩。

b)思考用图像来扶助浏览和引发关怀力。

c) 用周边的空域将重要性质孤立出来,使它横空出世吸引注意力。

在美利坚联邦合众国诊疗保养肉体网址的治疗提供者目录列表条目款项页面,强调提供者名称在大型石磨蓝字体。提供者的行业内部还重申在多个非常的小的字体直接放在名字下边。别的首要的新闻或被孤立、可能搭配Logo在头里来诱惑集中力。让首要音讯被扫一眼就能够轻巧看到。

Booking.com上的一个列表条目款项,它贫乏三个醒指标消息档案的次序,并且未有为用户提供任何视觉路径。这么些列表条款包涵太多的特殊和竞争视觉管理,要求过多注意力来浏览和清楚它。

Nextwarehouse.com上的世界一俄罗斯列表条目款项,产品名称、价格、仓库储存和别的细节都是同一的书体和视觉样式,完全未有音讯结构。就算品牌名称和零件号是革命和宝石红表示,不过内容的相持统一度太低,不能有效地掀起眼球,使得用户很难剖析首要性质。

微软对友好的首页具有差别的讲明。首先,他们在最上部放置了贰个作风相似的广告,目标是引发人们的秋波。那三幅巨大的图形广告——能够透过鼠标的滑过来轮流显示,很吸引人的眼珠,但那大概会减弱别的三个广告的成效。在页面顶部的,是寻找栏和导航条。

3. 列表条约使用同一的体制来支撑横向比较

在眼动商量中,我们发掘,当用户必须在列表页上的几个挑选做出选用时,他们会反复从一个条条框框到另一个条条框框来回相比附近的音讯。为了救助这些历程,列表条目款项同样地方和总体性的视觉处理相应亦然,以管教音讯是可预知的和同一。

一个用户购买卡片机的眼动追踪图,呈现用户的眸子来回移动在四个不等的照相机。那个视界模型表明,用户是在可比产品的属性。

Travelocity的航班列表条目款项是一模一样的。对于每二个航班的千篇一律块消息都在同叁个地点,况兼接纳同一的视觉管理。

虽说各类列表条目布满局和性质地点应该基本一样,当有十分重要信息需求区分的气象下,大概必要部分特别管理。举例,如若八个产品是“特价贩卖中”或“售罄”,那样的是基本上能用用非常的标号或目标来诱惑集中力的。然而,以这种办法调用信息是索要有选取性的,独特的标识超过2
– 3种时,列表页的浏览将变得乌烟瘴气和辛劳。

用户在Redmart.com上选购牙膏,开掘有用的贩卖指标评价到:“一眼看过具备的牙膏,很轻巧分出哪些有怎么着未有折扣,所以本身购买了内部的一个有折扣的。”

Booking.com的列表条约分裂饭馆分歧等——酒馆的内部情况从贰个项目转移到下三个岗位。这一个示例还展示了使用过多的标记轻松失控。在上头的3个饭店描述中,有拾贰个具备分歧的音讯的标志,使页面凌乱,相比酒馆变得辛劳

结论

规定你的用户最须求哪些用音信缩短来她们的选拔范围。每一种列表条款都优先想念这么些音讯并创设一个均等都音讯架构,使它更易于被用户掌握,何况十分的快的压缩选用范围。

葡京手机登陆网址 2

在主广告下边的剧情就更风趣了,正如笔者原先所提到的,微软的购销运维涵盖了从集团用户到个人用户的满贯。那块区域显示着微软不等商业领域的消息与第一音讯。可是,其剧情是一对一枯燥无味的,多量音信充满在那样贰个小空间内,毫无条理来讲。

确实,那个内容也被剪切为了多少个宗旨,但其字号相当的小并贫乏图片来分别条约。不问可见,它很难勾起自己读下来的欲望,因为它真的,很单调。

2.流动性

自个儿所说的流淌的意趣是:该网站的构造布局,能令人轻易地找到所需的新闻呢?小编是还是不是知晓接下去应该看怎么样——这些网址能或不可能让本身更易于的达到目的,可能说作者索要在网页内容中山高校力寻找小编想要的事物吧?

这是 Apple.com 的 MobileMe 区块:

葡京手机登陆网址 3

苹果在网页架构方面做得正确,在那些页面,首先吸引你的相应是右面包车型大巴图纸,然后是左臂的大标题。看了大标题后,能够承袭阅读下边包车型地铁引荐广告,它们能够轻便地引领人们去点击无需付费试用的挂号按键。每一种广告下边都是链接到详细内容页面包车型客车Learn
more文本截至,那使得网页未有死角,并让访谈者浏览下去。

微软就像是用力过却收效甚微。那是他们的 SharePoint 区块:

葡京手机登陆网址 4

科学,那儿是有个吸引目光的要害——最上县长长的引述和一张服务器的图形——可是接下去呢?上面全部剧情都颇为单调,尤其是老大有
8 个链接的Learn
More区块。干巴巴的牵线让访谈者贫乏浏览的欲念。有个别微软站点在布局上做的稍好些,能指引用户的吸重力流动,但它们都有贰个欠缺:内容太多。

提供给用户的有余挑选,扩大了用户的肩负——他们只能思考本身想要什么,并处理越多的音信。通过减少选取余地,苹果引领用户步向了贰个由此精心设计的,提供了要得用户体验的大路。

3.导航条

苹果的网址上方有二个大型的导航条,那使网址的各样部分都可以保持一致。可供选取的一部分显得了苹果的主线产品,一样也许有包涵售后扶助和在线公司在内的显要内容。导航条同样集成了搜寻成效,同期还进行了品牌体现,比方主页开关展现的是苹果的
Logo并非大致的Home标签。任何额外的二级导航都位于个别页面,况且都在网页的内文中,恐怕是在左侧栏,只怕是个最上端的水平条。

葡京手机登陆网址 5

微软的主页有一个好像的导航条,但它在网站中并非平素一致的。事实上,全部的子页面都有各自区别的导航条——不论在体制上照旧内容上。主页的导航条差非常少是微软式网球址种种部分的网址地图。在满含主页在内的非常的多导航条上,微软都利用了下拉菜单——与苹果不一致,苹果不光使用下拉菜单——何况是高大的下拉菜单。临时候,下拉菜单竟然还会有多少个滚动条!(Firefox
中)

葡京手机登陆网址 6

那是好是坏?在最近的一篇小说中,Jakob
Nielsen——知名的可用性大师——写到,巨型的下拉菜单照旧实惠的。说它实用是因为它汇聚提供了多样增选,使人更易于地查找并拿到所需。通过它亦可达到某些既定目的,比方将只要求显示二遍的授命聚集放在一块儿。

微软使用大型下拉菜单也可能有一定的道理,但她们做的有个别过了。有个别不一致的选项都指向了同三个剧情,像Office下拉项和All
Products下拉项中的Office选项。大型下拉菜单还遮挡了其下部的页面内容,要是鼠标十分大心滑过了菜单,还要刻意移开鼠标以三翻五次浏览——同有时间还要谦虚审慎,不把鼠标移到其他条目上。

大的下拉菜单一样带有了好多剧情——一时一次呈现大致 10个条文,那使得分辨选项特别艰难。同样,网址各区块导航菜单的差别也给页面跳转创制了拦Land Rover。像从
Office 网址跳转到 XBox 网站。

4.可读性

因为网址中的重要内容都以文字,所以保障每部分内容都明明白白易读是尤为关键的。上边是改进网址可读性所需思虑的要义:

使文本丰富大以便阅读;

保险文字与背景有丰硕的相比;

在文字周围提供丰硕的留白以幸免任何图片和剧情苦恼读者;

提供丰富的大标题和高亮/粗体字,以便读者非常的慢得到首要信息;

为各自文字区域增加图片和Logo来重申内容,如产品或效益描述;

维持文字精练并卓绝入眼;

现行反革命让大家来探视苹果和微软在那地点做得如何。那是 Apple.com
上八个优良的页面:

葡京手机登陆网址 7

苹果使全部东西都轻松易读。其文字就算十分的小,但都未必太小使阅读困难。标题异常的大很卓绝,使人快速就能够找到这一局地的中心。苹果还大大方方地使用留白以界别每一片段,并增多图片升高每段文字的乐趣性。

这是 Microsoft.com 上的三个独立页面:

葡京手机登陆网址 8

它服从了可用性设计的家常法则,把大块的事物分割成轻便领会的小段文字。其页面上的越来越多内容和对题目及高亮文字的三种不一样管理方式,使它看起来要比苹果的网址忙得多。

页面上的过各种式导致了视觉的絮乱,各个区别的颜料和粗体字引发着大家的集中力,在这种情景下,页面须求轻易化以使访谈者更易阅读。那是微软的另贰个网页,微软安全中央:

葡京手机登陆网址 9

页面上的文字过小而麻烦阅读,並且它需求更加多的留白来把公文分离开来。再来看看
Apple.com 上一个繁忙的页面:

葡京手机登陆网址 10

那是苹果在线商号,随处都有大气的商品信息和归类链接。字体小得恰如其分以包容愈来愈多内容,当然,留白的绝妙运用依旧保障了页面包车型大巴可用性。

5.搜索

苹果网址的搜寻区域集成在导航菜单里。当键入内容的时候,会有利用 Ajax
完成的实时找寻结果以小方块的方式弹出来。这一个东西比相当厉害——完全未有延迟,结果被集体成多少个分类並且特别快速,平常是在输入完查询语句从前,那是它的标准:

葡京手机登陆网址 11

若果想查看更加多结果,能够在完结输入之后敲击回车键,那样规范的索求结果页面就能显现出来。它充足简单,一样招来结果也是有团体地按分类排列。还足以通过分类越发研究搜索结果,还会有左侧可选的美食做法。那些对寻觅她们的成品很有救助。

葡京手机登陆网址 12

微软有三个更熟知的索求结果页,看起来很像是Google(或当前其他找出引擎)。它接纳了微软自己的 LiveSearch
大旨,很擅辫开掘大家所要寻觅的并体现出来。寻找结果是二个大大的列表,标榜着微软的小买卖地位,它有众多子页面和差别的查找内容。其功效性很强,但外观和认为却与任何页面差异,好疑似在浏览另三个网址。

葡京手机登陆网址 13

6.美感

苹果的网址美学反映出了他们的成品线。具备铝材质的导航栏有着柔和过渡的文字。另外,还会有多量的思考和回顾的安排因素。苹果集团平素致力于联合其全方位产品线的分界面外观和品格,从硬件到软件,其网址当然也不例外。

葡京手机登陆网址 14

美感与可用性有怎么样关系呢?当然有。切磋声明,大家以为,雅观的分界面越来越好用。吸引人的分界面给用户留下越来越好的第一影像,以至会让用户更可以容忍劣势。微软在美观性上做得如何呢?那是
Internet Explorer 8 的页面:

葡京手机登陆网址 15

以此页面使用了颇具淡中黄云彩的微软大旨,很鲜明那是二个关于 Internet
Explorer 或是 Windows
的网页。其外观和感到都很相像,未有丰富的显示出它协调的分歧,也远非建构出三个统一的品牌形象。这里是另二个页面,下载宗旨:

葡京手机登陆网址 16

这又是一丝一毫分裂的另一种设计,固然背景同样是石青绿的。倘诺页面上未有标题,你能通晓那么些是微软的网页吗?大约不可能啊。总的来讲其安顿依然十分不错的,但那远远不足,依旧有成都百货上千光景不相同和欠雕琢的地点,这方面,苹果依然超过。

7.一致性

一致性相当的重大,你能够以此为基础组建利用情势。那表示一旦您的网址有叁个同等的分界面贯穿始终,访谈者就能够火速精通网址的运维方式,并行使这种格局浏览每个页面。

苹果在保持页面一致性方面也做得一定不错,其各样产品页面都独具相似的美感与同等的架构。整个站点的外观与作风一以贯之,每三个页面都兼备一样的导航条。那意味着全数用户体验都以丰裕连贯统一的——你掌握你正在浏览的是同贰个网址。

那是微软 Azure 平台的网页:

葡京手机登陆网址 17

假使拿掉 Logo的话,你还是可以认得出来那是微软家的东西呢?微软每三个网址独家的图片,样式和颜料集使微软未能够创立二个联结的互联网品牌形象。微软的最主要问题在于,Microsoft.com
上的各样分化部分都有和好的外观与作风,即正是导航条。微软的在线商号,Office
站点与安全基本就好像多少个不等的网址。

更不好的是,其网址的领航条会消失,那意味访谈者不得不后退到主页或步向网址地图本领够浏览别的站点。它就好像托管在同一域名下的生态系统,不能够像苹果的网址一律从一致性建设中收益。其品牌形象也最棒分散,难以定义二个完好无缺的微软式网球站。

结论

哪一个网址是赢家?仅仅思考可用性的话,苹果是出类拔萃的。他们的主页设计得越来越好,选项越来越少,收缩了用户的合计。他们的各类页面都有四个平等的导航条,使用了汪洋的留白和子标题来扩大可读性。他们保持页面包车型客车简洁性,未有过多的接纳文字处理效果。苹果的网站一般对用户本身,且为查看苹果最新产品的主顾提供了进一步的感受。

话虽如此,苹果的网址在规模上要比微软式网球址小得多。与苹果不一样,微软在
Microsoft.com
品牌下众多不等的站点和区块,创制了贰个子网站的欧洲经济共同体生态系统。每一种站点都充斥着多量的音信和
LiveSearch 宗旨的索求。微软式网球址的最大难点正是一致性。

微软式网球址未有三个同样,连贯,统一的品牌形象。每个地区看起来都不尽同样。未有个联合的导航,并且缺少微软的可视化标记。而苹果网址中所显示的显示其制品观念的新鲜美感,也使得苹果创立了一个精锐的牌子效应。

综上,以作者之见,苹果鲜明是赢家。