《众妙之门——国际顶级Web设计师成功法则》一可用性背后的心理学

简介:

本节书摘来异步社区《众妙之门——国际顶级Web设计师成功法则》一书中的第1章,第1.2节,作者: 【德】Smashing Magazine 译者: 寒武纪 责编: 赵轩, 更多章节内容可以访问云栖社区“异步社区”公众号查看。

可用性背后的心理学

众妙之门——国际顶级Web设计师成功法则
雏鸭综合症
雏鸭综合症(Baby-Duck-Syndrome)是访客的一种心理倾向。他们忠于所记住的第一个设计,然后将其他设计与那个设计进行相似度比较。结果,用户通常倾向于那些与所记住的设计相似度比较高的系统,而不喜欢陌生的那些。这便使得大多数新的系统设计面临着可用性问题:用户已经习惯了先前的设计,所以会对新的网站布局感到不舒服,因为新的设计让他们不得不重新摸索。

无视广告
网站用户倾向于屏蔽所有看上去像广告的东西,而且有意思的是,他们还挺擅长于此。尽管可以注意到广告的存在,但人们总能将其忽略掉。由于用户已经为网页上的不同任务构建了相关的网页图式,当在网页上搜索特定信息时,他们只会聚焦在网页的部分区域,即他们认为相关信息可能会出现的地方,也就是小文本和超链接。大型的彩色或动画广告条幅以及其他图像在这种情况下都会被忽略。


q4

来源:Banner Blindness:Old and New Findings。

“扣人心弦”效应
人类无法忍受不确定性。对于感兴趣的、没有答案的问题,我们倾向于尽快找到答案。“扣人心弦” 效应(Cliffhanger-Effect,又称“蔡氏效应”)就是基于此事实提出的。采用此效应的电影、文章和故事情节都会在结尾部分戛然而止,通常是以某个让人震惊而又始料不及的真相或僵局收尾。这种效应常常应用于广告中:在广告中询问访客一些没有答案或者有挑衅意味的问题,这通常能够促使访客浏览广告内容,点击横幅广告或者打开链接。

1927年,Bluma W. Zeigarnik发现了此效应。这种效应与读者建立起情感联系,且在营销学中极有影响力。访客能够更好地记住广告是关于什么的,甚至连其中最细微的小细节都能记忆得清晰准确。在网页内容写作中,扣人心弦效应也用来将用户与某个网站进行捆绑。

形状视觉的格式塔原则
这些原则是人机交互设计方面人类心理的基本原则。

  • 接近性原则:当我们看到一些物体时,我们会将彼此靠近的物体视为一组。

q3

“接近性原则”的现实例子:来自2002年MTV音乐大奖。

  • 相似性原则:如果某些元素彼此相似时,人们将它们视为一组。
  • 普雷格朗茨原则(图像-背景):在感知某个可视范围时,一些物体(图像)会比较抢眼,而其他的则变成了背景。


q2

苹果电脑的logo,可以看作是一张普通的笑脸,
也可以是一张对着电脑屏幕微笑的侧脸。

  • 对称性原则:当我们看着某些物体时,我们倾向于将它们视为从中心展开对称的形状。
  • 闭合法则:我们视觉上常常将其实并不连贯的东西视为连贯,或者说将其看做完整的图案。


q1


我们能看出字母“I”、“B”和“M”,但其实我们看到的不过是几个不同长度的、彼此间隔的白色空间。

自我参照效应
自我参照效应在网络写作中尤其重要,它能使作者与读者之间的交流产生戏剧性的效果。比之于我们没有直接关联的东西,那些与我们个人意念直接相关的内容会更容易被记住。比方说,读完一篇文章后,用户更容易记住与其个人经历有关的角色、故事或者事实。在可用性中,自我参照效应常常应用在网络写作与网站内容里。

相关文章
|
前端开发
|
安全 大数据 数据挖掘
阿里云 Web 应用防火墙:全面保障网站的安全与可用性|学习笔记
快速学习 阿里云 Web 应用防火墙:全面保障网站的安全与可用性
336 0
带你读《点石成金:访客至上的Web和移动可用性设计秘笈》之三:广告牌设计101法则
这是一本关于Web设计原则而不是Web设计技术的书。本书作者是Web设计专家,具有丰富的实践经验,他用幽默的语言为你揭示Web设计中重要但却容易被忽视的问题,只需几个小时,你便能对照书中讲授的设计原则找到网站设计的症结所在,令你的网站焕然一新。
带你读《点石成金:访客至上的Web和移动可用性设计秘笈》之二:我们实际上是如何使用Web的
这是一本关于Web设计原则而不是Web设计技术的书。本书作者是Web设计专家,具有丰富的实践经验,他用幽默的语言为你揭示Web设计中重要但却容易被忽视的问题,只需几个小时,你便能对照书中讲授的设计原则找到网站设计的症结所在,令你的网站焕然一新。
带你读《点石成金:访客至上的Web和移动可用性设计秘笈》之一:别让我思考
本书是一本关于Web设计原则而不是Web设计技术的书。本书作者是Web设计专家,具有丰富的实践经验,他用幽默的语言为你揭示Web设计中重要但却容易被忽视的问题,只需几个小时,你便能对照书中讲授的设计原则找到网站设计的症结所在,令你的网站焕然一新。
|
UED 前端开发
Web设计师的五个排版工具
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/8504078 Web设计师的五个排版工具 作者:chszs,转载需注明。
787 0
|
Web App开发 JavaScript 前端开发
Web 开发与设计师速查手册大全
Cheat Sheet 一词在中文中并没有很贴切的对译,大概是考试作弊条一类的东西,这要求 Cheat Sheet 必须短小精悍又覆盖广泛,作为 Web 开发与设计师,免不了在工作时查询大量资料,某个 Web 色值,某个 JavaScript 库的核心语法,这类资料如果攒齐了,怕有半间屋子那么多,如果用 Cheet Sheet 也许几十页纸就够了,本文收集了近百份用于 Web 开发与设计的 Cheet Sheet,你会发现他们非常实用。
1757 0
|
JavaScript 前端开发 HTML5
Web 设计师的 50 个超便利工具(上)
作为一个 Web 设计师并不容易,不仅考虑设计与架构,还要时刻注意各种小细节,设计师的工作被各种各样的问题包围,你需要一套超级便利的工具帮你解决各种消耗时间和精力的问题。本文介绍了50个非常强大的工具,你会发现,其中的一些工具会让你感到惊艳在,这是第一部分。
1112 0
|
移动开发 前端开发 Ruby
Web 设计师的 50 个超便利工具(下)
作为一个 Web 设计师并不容易,不仅考虑设计与架构,还要时刻注意各种小细节,设计师的工作被各种各样的问题包围,你需要一套超级便利的工具帮你解决各种消耗时间和精力 的问题。本文介绍了50个非常强大的工具,你会发现,其中的一些工具会让你感到惊艳在,这是第二部分。
935 0

热门文章

最新文章

  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    13
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    26
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    20
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    342
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    22
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    55