资讯频道 → Web前端
阅读更多

8顶
0踩

Web前端

原创新闻 打造网站最佳浏览体验：四大UX设计原则

2013-11-22 10:06 by 见习编辑 tuhaihe 评论(4) 有8632人浏览
UX web 网站设计 用户体验

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Web设计者正在借助大量工具，以使自己设计的网站给用户带来最可能好的用户体验。最好的办法之一是在设计中充分利用现有的科研成果，以最大化用户的满意度。

眼动追踪研究为设计者提供了各种设计蓝图，以引导他们优先设计网站用户感兴趣的内容部分。该研究同样展示了访问者阅读网站的方式，可帮助Web设计者“裁剪”出适合普通大众的网站。当用户在你的网站中获得了良好的用户体验，他们会再回来，并有机会转变为网站的“常客”。

那该研究可以告诉我们关于普通访问者的哪些内容？设计者如何利用该研究来指导网站设计？ Webdesigner Depot网站发表了一篇文章《 4 essential UX rules taught by eye-tracking research》，以眼动追踪研究为基础，深入探讨了网站设计中应遵循的四大UX设计原则。

用引人注意的标题文字来吸引用户，而非图片

根据研究，标题文字比炫丽的图片更容易引起网站用户的注意。该发现可用于首页布局，尤其适用于新闻网站。这也恰好解释了为什么很多新闻网站尽最大可能频繁使用煽情类标题来吸引用户注意力的原因。

几年前，有一个称为“Eyetrack III”的著名研究，发现网站的访问者特别喜欢盯着标题看。更进一步，这些标题在页面中的位置也将对用户访问网站的速度产生影响。将这些标题放在页面的左上部分，你将获得更多关注网站内容的用户。

如果你正在设计一个新闻类网站，请记住这一点：电脑屏幕上的文字比图片能更迅速地吸引用户的眼球。 Fox News，作为全世界排名173，美国排名36的知名网站，很好地利用了这一发现。你可以仔细观察一下它首页中的头条标题。





采用F形状模式来设计网站

几年以前，Nielsen Norman Group公布了一个非常重要的Web用户研究报告，其中指出每个用户通常按F形状模式来阅读网站内容。

网站访问者最开始会水平浏览网站的上部内容，这也就是F的顶部横杠。然后，访问者会从左侧向下浏览一些网站内容后，再开始水平浏览，这次浏览的长度要小于最开始水平浏览的长度，这算是F的第二个短横杠。最后，他们垂直浏览网站左侧内容，这就形成了F左侧的竖栏。

一些网站已经将该研究中很好地应用到实践中。如 Ghost Games，它的网站主页很完美地采用了F形状模型。这不仅提高了用户体验，而且使导航变得易于使用，尤其是F形状中的竖栏很好地展示了这个网站的信息。





不用把时间浪费在广告上

很多人发现网站上所展示的广告很烦人，这也说明了为什么很多网站访问者会忽略这些广告，而只去专注那些有用的网站内容。来自Nielsen Norman Group的另一研究显示，如果网站用户正专注于网站内容时，他们是不会注视任何广告的。

要明白，设计一个主要靠广告来盈利的网站，其实就是在浪费时间。根据该研究报告，你应该重新考虑网站的盈利方式。比如，去掉广告，转为基于订阅的模式，向网站的访问者收取一定的会员费。一些网站在意识到广告这一弊端后，已经开始转向该模式。

Club Penguin就是一个很好的例子。它是迪斯尼的一款大型多人在线游戏。该网站上的所有广告均免费，但访问者需要购买会员身份才能玩游戏。




 
避免花哨文字与样式

简约是未来趋势。如果你希望网站用户可以迅速发现所需内容，简约很重要。美国卫生与公众服务部的一篇关于“可用性”的 博文指出，网站中的文字与样式越花哨，网站给用户带来的困扰就越多，导航失败的概率就会越高。该博文引用了 Nielsen 数年前的一个研究，研究中请访问者寻找美国人口普查局网站中的基本信息，而很多人在该测试中都失败了。

参与者被要求在该网站中寻找美国当前的人口数。令人吃惊的是，即便该信息以大字号、红色字体标注在页面的右侧顶部，也仅有14%的参与者找到它。有人怀疑，导致如此低成功率的原因是信息被放在了页面的右边，违背了F形状模型。

而进一步的实验发现大部分参与者根本就没有在意这个被放大、标红的信息。原因在于，该消息花哨的样式使它看起来更像一个促销广告。很多用户根本不会注意广告，所以获得这样的测试结果也就不足为怪了。

现在来看一下改进后的 美国人口普查局网站。现在它已经发生了巨大的变化，人口数字不再像一个有花哨样式的广告，它被移动到页面左边的底部，以便吸引用户向下滚动页面去查看它。但这仍算不上好的替代方案。





理解眼动追踪，理解高效的网站设计

眼动追踪研究实际上基于用户的行为沟画了一幅用户浏览网站时的喜好蓝图。无视该研究的Web设计者将会令自己身陷困境。巧妙利用该研究，可给用户带来愉悦、简单的网站冲浪体验，从而吸引更多用户，获得更好的知名度。

请记住，在任何一个网站上，吸引用户注意力是的标题文字，不是图片。记住F形状模型，这对你设计出好的网站（至少是首页）布局有很大帮助。

最后，抛弃广告。它们不仅影响美观，很多网站用户也不会注意它们。探索网站其它盈利方式，可以通过收取会员费或其他方法。无论你怎样做，千万不要让有用的内容看起来像广告，这样用户会直接忽略掉它们。记住这些，你将设计出符合用户行为的网站。（编译：陈秋歌）
  • 大小: 86.7 KB
  • 大小: 38.1 KB
  • 大小: 63.5 KB
  • 大小: 47.1 KB
来自: CSDN
8
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 加瓦人生 2013-11-26 19:04
这里是中国。
3 楼 baukh789 2013-11-25 12:47
还是很有道理的。F模型，的确是这样
2 楼 Thomas.Chen 2013-11-25 10:38
对，这里是中国..........
1 楼 cjb7625 2013-11-23 20:15
这里是中国。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • [博文共赏] 打造网站最佳浏览体验：四大UX设计原则

    http://www.iteye.com/news/28483-4-essential-ux-rules-taught-by-eye-tracking-research

  • 四大UX设计原则，打造网站最佳浏览体验

    Web设计者正在借助大量工具，以使自己设计的网站给用户带来最可能好的用户体验。最好的办法之一是在设计中充分利用现有的科研成果，以最大化用户的满意度。 眼动追踪研究为设计者提供了各种设计蓝图，以引导他们...

  • 程序员必读书单 1.0

    为了打造用户满意的软件产品，程序员应当掌握一定的界面设计知识和交互设计知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行职业规划，并熟悉程序员求职面试的...

  • 成为编程大牛很简单，把这些书看个八成就OK

    知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行 职业规划 ，并熟悉程序员 求职面试 的流程，以便在职业道路上越走越远； 软件开发是一项需要不断学习的技能...

  • 程序员必读书单

    这本书——它面向编程初学者，既包含C++教程，也包含大量程序设计原则。它不但是我读过最好的C++入门书，也是我读过最好的编程入门书。 比较有趣的是， C++程序设计原理与实践 直到全书过半都没有出现指针，我想这...

  • 七：程序员必读书单

    这本书——它面向编程初学者，既包含C++教程，也包含大量程序设计原则。它不但是我读过最好的C++入门书，也是我读过最好的编程入门书。 比较有趣的是， C++程序设计原理与实践 直到全书过半都没有出现指针，我想这...

  • 推荐：程序员必读书单

    这本书——它面向编程初学者，既包含C++教程，也包含大量程序设计原则。它不但是我读过最好的C++入门书，也是我读过最好的编程入门书。 比较有趣的是， C++程序设计原理与实践 直到全书过半都没有出现指针，我想...

  • 转：程序员必读书单 1.0

     知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行  职业规划  ，并熟悉程序员  求职面试  的流程，以便在职业道路上越走越远； 软件开发是一项需要不断学习...

  • 研发周报：成为一名PHP专家其实并不难

    四大UX设计原则，打造网站最佳浏览体验 Web设计者正在借助大量工具，以使自己设计的网站给用户带来最可能好的用户体验。最好的办法之一是在设计中充分利用现有的科研成果，以最大化用户的满意度。 眼动...

  • 这些书你读过一多半，你就是编程大牛！

    知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行 职业规划 ，并熟悉程序员 求职面试 的流程，以便在职业道路上越走越远； 软件开发是一项需要不断学习的技能...

  • 《Web全栈工程师的自我修养》读书笔记

    设计四大原则 ： 对齐、对比、距离和重复 。虽然我基本没有设计经验，只会一些基本的Photoshop操作，但我理解了这几个原则，每次看到好的设计和差的设计时，都能有所感悟。如果不理解，可能我只能用“上流”“高端”...

  • 算法学习之路和程序员(技术)学习必读书籍

    这个神奇的网站，里面有很多质量不错的书评，于是我就把评价很高而且看上去不那么吓人的计算机书籍都买了下来——事实证明豆瓣要比这些”学长”或是”大神”靠谱的多得多。 数据结构与算法分析——C语言描述 ...

  • 书籍选择和推荐

     知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行  职业规划  ，并熟悉程序员  求职面试  的流程，以便在职业道路上越走越远； 软件开发是一项需要不断学习...

  • 【转】程序员必读书单

    为了打造用户满意的软件产品，程序员应当掌握一定的界面设计知识和交互设计知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行职业规划，并熟悉程序员求职面试的...

  • 基于SSM+JSP+HTML的东风锻造有限公司重大停管理系统(Java毕业设计，附源码，数据库，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 ssm 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

  • 数据库系统课程设计报告-体育项目比赛管理系统设计与开发

    一、系统需求分析 1 （一）需求概述 1 （二）业务流分析 1 从运动员角度分析 1 （三）数据流分析 4 （四）数据字典 5 二、数据库概念结构设计 6 （一）实体分析 6 （二）属性分析 6 （三）联系分析 8 （四）概念模型分析（.PDM图） 9 三、数据库逻辑结构设计 9 （一）概念模型转化为逻辑模型 9 1.一对一关系的转化 9 2.一对多关系的转化 9 3.多对多关系的转化 10 （二）逻辑模型设计（.PDM图） 10 四、 数据库物理实现（一）表设计 10 （一）表设计 10 （二）创建表和完整性约束代码设计 11 五、数据库功能调试 15 （一）运动员管理模块 15 （二）负责人管理模块 16 （三）系统管理员管理模块 17 六、设计系统前台软件 21 （一）开发软件选择 21 （二）软件功能要求与设计 22 （三）软件功能实现 22 （四）系统测试 24 七、设计总结 27

  • 基于SSM+JSP的文物管理系统+数据库（Java毕业设计，包括源码，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

  • 智慧园区整体解决方案-37PPT(46页).pptx

    智慧园区，作为现代化城市发展的新兴模式，正逐步改变着传统园区的运营与管理方式。它并非简单的信息化升级，而是跨越了行业壁垒，实现了数据共享与业务协同的复杂运行系统。在智慧园区的构建中，人们常常陷入一些误区，如认为智慧园区可以速成、与本部门无关或等同于传统信息化。然而，智慧园区的建设需要长期规划与多方参与，它不仅关乎技术层面的革新，更涉及到管理理念的转变。通过打破信息孤岛，智慧园区实现了各系统间的无缝对接，为园区的科学决策提供了有力支持。 智慧园区的核心价值在于其提供的全方位服务与管理能力。从基础设施的智能化改造，如全面光纤接入、4G/5G网络覆盖、Wi-Fi网络及物联网技术的运用，到园区综合管理平台的建设，智慧园区打造了一个高效、便捷、安全的运营环境。在这个平台上，园区管理方可以实时掌握运营动态，包括道路状况、游客数量、设施状态及自然环境等信息，从而实现事件的提前预警与自动调配。同时，智慧园区还为园区企业提供了丰富的服务，如项目申报、资质认定、入园车辆管理及统计分析等，极大地提升了企业的运营效率。此外，智慧园区还注重用户体验，通过信息发布系统、服务门户系统及各类智慧应用，如掌上营销、智慧停车、智能安防等，为园区员工、企业及访客提供了便捷、舒适的生活与工作体验。值得一提的是，智慧园区还充分利用大数据、云计算等先进技术，对园区的能耗数据进行采集、分析与管理，实现了绿色、节能的运营目标。 在智慧园区的建设过程中，还涌现出了许多创新的应用场景。例如，在环境监测方面，智慧园区通过集成各类传感器与监控系统，实现了对园区水质、空气质量的实时监测与预警；在交通管理方面，智慧园区利用物联网技术，对园区观光车、救援车辆等进行实时定位与调度，提高了交通效率与安全性；在公共服务方面，智慧园区通过构建统一的公共服务平台，为园区居民提供了包括平安社区、便民社区、智能家居在内的多元化服务。这些创新应用不仅提升了园区的智能化水平，还为园区的可持续发展奠定了坚实基础。同时，智慧园区的建设也促进了产业链的聚合与发展，通过搭建聚合产业链平台，实现了园区内企业间的资源共享与合作共赢。总的来说，智慧园区的建设不仅提升了园区的综合竞争力，还为城市的智慧化发展树立了典范。它以用户需求为导向，以技术创新为驱动，不断推动着园区向更加智慧、高效、绿色的方向发展。对于写方案的读者而言，智慧园区的成功案例与创新应用无疑提供了宝贵的借鉴与启示，值得深入探索与学习。

  • Java毕业设计-SpringBoot+Vue的基于SpringBoot的冬奥会科普平台（附源码、数据库、教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：html、javascript、Vue 后台框架：SpringBoot 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html （无前台不需要输入）

  • MATLAB设计的芯片字符识别（GUI界面设计）.zip

    MATLAB设计的芯片字符识别（GUI界面设计）

Global site tag (gtag.js) - Google Analytics