热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

避免糟糕用户体验的经验谈

当我们在讨论一个网站的用户体验的时候,往往会从网页上的视觉效果,反应速度,网站内容等方面进行评价。下面,让我们就以上几个方面来简单列举一些互联网中经常遇到的影响用户体验的情况并且进行分析。尽管视觉设计师在不同的产品领域和职业阶段会遇到不同的阻碍,但是对于视觉设计普遍存在三种误解。

当我们在讨论一个网站的用户体验的时候,往往会从网页上的视觉效果,反应速度,网站内容等方面进行评价。下面,让我们就以上几个方面来简单列举一些互联网中经常遇到的影响用户体验的情况并且进行分析。

视觉效果

尽管视觉设计师在不同的产品领域和职业阶段会遇到不同的阻碍,但是对于"视觉设计"普遍存在三种误解:

  1. 视觉设计只是把东西做得更好看
  2. 尽管很少有人赤裸裸地要求设计团队只要把东西做得好看就好,但是长久以来,人们仍认为"视觉设计"就像是蛋糕上的糖衣一样,是在工序的最后阶段在产品上加的蝴蝶结,只是为了使产品看起来更吸引人一点。

    而视觉设计不仅仅是使东西看起来更好看。它在提升产品美感的同时,向用户传达了产品的核心功能——这是什么?我该怎么用?

  3. 使元素更突出,可以提升视觉设计
  4. 利益相关者通常要求设计师对某些视觉元素进行强化,从"把图标弄得大些"(说明:这是一国外网站的名字)这类网站的流行可见一斑。

    尽管这一观点有时能够帮助我们确定哪些是设计中最重要的元素,但它们同时也表明了人们对视觉设计的另一个误解:为了改进一个网站的视觉设计,你必须将东西弄大、弄粗、弄红,甚至在有些情况下,你得将东西弄得又大又粗又红。

    如果你按照每个利益相关人的要求,将他们关注的元素设计得更吸引人,最终的结果就是,界面上的每一个元素都在争夺用户的注意力,从而它们谁也别想被用户注意到。

  5. 可以将视觉设计分割成部分进行孤立地评估
  6. 利益相关者对设计师的反馈总是局限在局部上:能把logo放大吗?能改变头条的颜色吗?能换张图吗?

    固然,这些反馈能够使设计师理解利益相关者和顾客想要的效果,但是它没有从整体上来考虑,如:改变某个颜色可能意味着要重新考虑整体色调了,整体色调原有的对比度是设计师为了突出某些关键行为而准备的,现在可能不适用的;改变某张图片,可能意味着周边的元素也要被调整,因为原图所要的视觉效果已经不存在了;等等。

用户为啥会视而不见?

我们对于人的视觉心理能力往往有三种过高估计,这样的高估影响了我们的设计,使得用户视而不见:

  • 高估广度:用户可以一下子注意并理解视域范围内所有(或绝大部分)的细节?
  • 如果将用户的注视焦点比喻成聚光灯,那么可以理解成我们高估了聚光灯亮起时被照亮的区域面积。增加额外的视觉元素只会减少可以被同时注意到的信息,因此用户将更难找到相应的信息。

  • 高估容量:用户会注意到界面中的各个区域?
  • 我们往往高估了用户能够注意到的UI上的区域数,这也使我们误以为独特的视觉元素无论放在什么位置都会吸引用户,或用户会自主地将视线投往某个区域。

    也以聚光灯的例子来说,用户双眼这盏灯,可能只会投向舞台(UI)上的一两个位置,而不会扫向各个不同的区域。其次, 用户对于察看UI的哪部分有一定倾向性,因此会习惯性地忽略其他可见之处。

  • 高估深度:用户若注意到某元素/区域,就能完整、深入地理解它?
  • 这种高估会误使我们认为,用户只要注意到某对象/区域,就能轻松地理解它的含义。

    图像相比起文字,似乎更容易吸引用户注意。但研究发现,对于某些用若干词汇就能表达的概念,图片未必总能更有效地向用户传达界面的功能。这跟功能可见性就密切相关了。

视觉设计的基本原则

另外,在视觉设计中,一些最基本的原则如下:

  1. 不要将所有颜色都用到,尽量控制在三种色彩以内
  2. 背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容.
  3. 传播产品理念,只有当我们对产品抱有一个完美的理念和愿景的时候,我们才能做出优美的设计来体现理念
  4. 干净,简洁,工具化,"推广"很重要,"简洁"也很重要,因此舍"推广"而取"简洁"。不多用一个图片,工具化设计意味着清晰的逻辑和操作。不是内容越多越好,是越简单越好。
  5. 制定规范,维持统一。文字使用要规范,语法,大小,颜色,大小写都需要注意,用标准组件,维持统一。
  6. 重点突出。每个页面(板块)只有一块视觉重点。并且,突出重点,不让用户去找。
  7. 防止不恰当的低龄化,当我们更加理性和严谨地设计产品的时候,自然会远离"低龄"倾向。"成熟"源自合理的设计,"低龄"源自不合常理的设计。

反应速度慢

有的网站喜欢在首页放置很多的内容,或无限制的使用flash及图片。虽然可以增加网站的生动性,增加视觉冲击力。但这样会造成很多负面的影响:

  1. 页面文件超大,影响到网站的打开速度。
  2. 大多数的用户是希望直接的看到内容,没有耐心去等待某个flash的完成。
  3. 打开的速度过慢,会让用户觉得网站的服务不好,影响用户对网站的信用度。

一条不成文的规则说,在一定类型的系统响应下,用户不必等待多于2秒,例如,切换应用程序和启动应用程序。尽管2秒钟的说法多少有点武断,但还是一个合理的规则。更可靠的说法应该是:让用户等待的时间越短,用户体验越好。所以任何操作应该在这个2秒钟内给出响应,或者告诉用户正在等待。

相关权威媒体做过调查,如果一个网站网页超过十秒还没有显示出来,大多网友都会关闭这个页面,不会再继续等下去。

用户感受极限:

  • 0.1秒——用户能够承受的"控制性"的极限
  • 1秒——用户能够承受的"得到回应"的极限
  • 10秒——用户能够等待一个动作完成的极限

页面过长

过长的页面需要更多的下载并且并用不利于用户捕捉有用的信息。过于长的页面需要用户移动流动条,很容易引起浏览者的视觉疲劳,而且大部分浏览者很有可能已经被前两屏的内容吸引到别的页面去了。

有数据显示在一个网站的首页,能看到第三屏内容的人只有10% 。

内容隐藏过深

用户能否快速的找到信息?

虽然现在增加了"预览"的功能,但是到达最终页面仍需经过数次点击。

好的设计应该遵循"3次点击原则",即在网站中,由任一页面到达最终目的页面的点击次数不超过3次。如果用户不能在三次点击之内找到他们所需要的信息,用户将会停止使用一个网站。所以说不要让用户点击超过3次还无法看到希望看到的内容。

80/20法则(巴莱多定律):指80%的效果归结于20%的原因。这是经济学上的基本经验("80%销量来自20%顾客"),但也可以运用在设计和可用性上,如:20%的页面承担着80%的流量。

内容过多

用户上网有不同的目的,当在网页上搜查明确的信息时,他们只会将注意力集中在他们认为是相关的信息上,例如,小的文本和超链接。大的色彩斑斓或者动画横幅和其他图形在这种情况会被无视。

人脑在获取信息时有容量限制,所以在处理复杂信息时会把其分为大的块和单元。根据这个原理,我们要把网站细分为消化块,可以按照7±2原则。7±2原则指出经过对人类短时记忆的研究,人脑每次能记住大概5至9项。在网站上的运用即指用户在同一时间可以只保留约五到七件事情。

一些研究

网络用户在阅读网站内容的时候具有以下特点:

  • 跳跃:用户通常扫视而非阅读页面文字,浏览的时候行为是非线性的。
  • 目标性强:往往因为一个明确的目标浏览一个网站,如果不能满足目标会马上离开。平均来说,用户若决定阅读某页面,他们只会花28%的时间在阅读文字上。但更普遍的是,只有20%的文字会被阅读
  • 对"诚信"的要求高:一旦发现在网站上被"欺骗",很可能永远都不会再来。
  • 没有耐心:一旦发现不能很快满足自己的目标,也会选择立即离开。用户在页面的平均停留时间很短。以最新数据来看,用户在搜索及分类目录网站总共停留225秒,综合门户454秒,娱乐541秒,个人及社区429秒。
  • 惯性强:一旦经常使用一个网站就会形成习惯。
  • 越来越"笨":随着全民上网运动,网民的平均素质越来越低,任何哭笑不得的事情都会发生。

本文地址:http://www.nowamagic.net/librarys/veda/detail/466,欢迎访问原出处。


推荐阅读
  • 在Docker中,将主机目录挂载到容器中作为volume使用时,常常会遇到文件权限问题。这是因为容器内外的UID不同所导致的。本文介绍了解决这个问题的方法,包括使用gosu和suexec工具以及在Dockerfile中配置volume的权限。通过这些方法,可以避免在使用Docker时出现无写权限的情况。 ... [详细]
  • 学习SLAM的女生,很酷
    本文介绍了学习SLAM的女生的故事,她们选择SLAM作为研究方向,面临各种学习挑战,但坚持不懈,最终获得成功。文章鼓励未来想走科研道路的女生勇敢追求自己的梦想,同时提到了一位正在英国攻读硕士学位的女生与SLAM结缘的经历。 ... [详细]
  • IhaveconfiguredanactionforaremotenotificationwhenitarrivestomyiOsapp.Iwanttwodiff ... [详细]
  • Python字典推导式及循环列表生成字典方法
    本文介绍了Python中使用字典推导式和循环列表生成字典的方法,包括通过循环列表生成相应的字典,并给出了执行结果。详细讲解了代码实现过程。 ... [详细]
  • 本文讨论了在Windows 8上安装gvim中插件时出现的错误加载问题。作者将EasyMotion插件放在了正确的位置,但加载时却出现了错误。作者提供了下载链接和之前放置插件的位置,并列出了出现的错误信息。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • “你永远都不知道明天和‘公司的意外’哪个先来。”疫情期间,这是我们最战战兢兢的心情。但是显然,有些人体会不了。这份行业数据,让笔者“柠檬” ... [详细]
  • 本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法,并给出了问题的解析和解决方法。详细介绍了问题的背景和规则,并给出了相应的算法解析和实现步骤。通过本文的解析,读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • 本文讨论了使用差分约束系统求解House Man跳跃问题的思路与方法。给定一组不同高度,要求从最低点跳跃到最高点,每次跳跃的距离不超过D,并且不能改变给定的顺序。通过建立差分约束系统,将问题转化为图的建立和查询距离的问题。文章详细介绍了建立约束条件的方法,并使用SPFA算法判环并输出结果。同时还讨论了建边方向和跳跃顺序的关系。 ... [详细]
  • 生成对抗式网络GAN及其衍生CGAN、DCGAN、WGAN、LSGAN、BEGAN介绍
    一、GAN原理介绍学习GAN的第一篇论文当然由是IanGoodfellow于2014年发表的GenerativeAdversarialNetworks(论文下载链接arxiv:[h ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • 本文介绍了在Win10上安装WinPythonHadoop的详细步骤,包括安装Python环境、安装JDK8、安装pyspark、安装Hadoop和Spark、设置环境变量、下载winutils.exe等。同时提醒注意Hadoop版本与pyspark版本的一致性,并建议重启电脑以确保安装成功。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文介绍了Python版Protobuf的安装和使用方法,包括版本选择、编译配置、示例代码等内容。通过学习本教程,您将了解如何在Python中使用Protobuf进行数据序列化和反序列化操作,以及相关的注意事项和技巧。 ... [详细]
author-avatar
135369一生真爱_890
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有