人机交互笔记
什么是人机交互
人机交互(HCI)是一门多学科研究领域,侧重于计算机技术的设计,特别是人(用户)与计算机之间的交互。
Nielson's heurisitcs
1. Visibility of system status - how well the state of a system is conveyed to its user - 用户能够收到信息反馈,知道系统当前的状态。但要注意仅提供关键信息。
2. Match between system and the real world - the system should speak user's language - 不应该面向系统,而应该面向用户。遵循惯例。不要用过于花哨的语言描述常用的东西。
3. User control and freedom - users often choose system functions by mistake and need a clearly marked emergency exit - support undo and redo - 浏览器上的前进后退,用户需要时退出、取消,对移动设备非常重要(修复的角度)
4. Consistency and standards - same words should mean same - internal consistency and external consistency - within a product or a family of product, 橙色按钮; maintaining consistency outside the product, within the industry, 购物车 - 有时违反先例也很好,比如你有某种新的范式,但是如果你让用户学新东西,会增加他们的负担,仅在绝对必要的时候才这么做
5. Error prevention - 增加一些提示用户确定的东西,特别是风险高的情况 - 核心是避免用户犯错(避免的角度)
6. Recognition rather than recall - 尽量有上下文 - 菜单,而不是自己输入
7. Flexibility and efficiency of use - 允许使用不同的方法做同一个事,需要有一定冗余度 - 对老手和新手都友好,不要尝试一开始就教他们所有东西
8. Aesthetic and minimalist design - 美学、极简,让用户关注最重要的要素 - 信噪比,内容是信息,需要做的是噪音 - 提高信噪比
9. Help users recognize, diagnose, and recover from errors - 当发生错误后,给用户反馈,红色文本/警告标志(比如限制用户前进后退,注意这里的错误不是指误触这样的错误);使用简单的语言;提供一种解决方法,可以提供简要说明,也可以提供快捷方式(提示的角度)
10. Help and documentation - 帮助文档,各种情况的帮助文档,甚至是客服;易用、便于理解、具体操作步骤
做好设计
人机交互:方法论
人
我们说人机交互的时候,我们实际上主要说的是:视觉交互、音频交互和触觉交互。
视觉交互和音频交互主要是计算机给我们说东西,触觉交互主要是我们给计算机输入东西。
当然,技术上来说,这只是主要,而不是完全就是这种情况。
我们希望给人们设计万用的东西,但是人和人之间总有区别。甚至是色盲。
人们对工具的态度。如果态度不好,人们会主动去找茬。
但是,我们总是有一些相同的地方。上下文很重要。
感觉记忆:最短的记忆,对各种感官方式都存在,比如说再脸前移动手指,我们会看到一些“黑影”。
短期记忆:用于临时的信息调用,快速出现、快速消散。例子:心算过程中的数字和存储。一个人一般最多用短期记忆记录5±2个东西。
长期记忆:存储特定的重要的片段,此外这还和语义有关。
感觉记忆->短期记忆:注意
短期记忆->长期记忆:复述、重复
计算机
现在计算机的品种很多,交互技术也变得很多。
依然是那三样:输入、输出、过程
最早的键盘会出现两个临键被按下时会卡住,需要缓慢复位,所以当初设计时尽量不按照英语中相邻的字母设计,以避免经常发生卡住的情况。
现今依然是如此,一是打字很快,二是习惯。
但是对于现今的触摸屏,我们没有办法去“准备”触碰。
对于输入的情况类似,鼠标一开始只有一个按键,后来有了越来越多的按键。然后有了没有鼠标的鼠标(触摸板)。再后来,对手机而言,一开始也有一个光标,后来变成了没有触摸板的触摸板。
从某个位置到某个位置需要多长时间?Fitt's law
距离越长,光标移动时间越长。要移动到的区域越大,光标移动时间越短。
a、b是输入移动的速度。b是加速度,a是移动前的等待时间。此两项基于输入设备本身。
VR、智能手表、动作感应器和常规的输入很不一样。
3D应用今日使用的越来越多。
输出:有大有小。但是都要好用。大界面有大界面的显示,小界面要有小界面的显示。有共通处,但是也要有不同处。
与计算机交互及交互后需要一定的时间让计算机处理、反馈。
我应该将数据存储在哪,怎么交互,怎么给予反馈?服务器只负责重要的坐标之类的,图像本地运算。但,也有一些不需要本地运算的,但计算机连接要好。、
上下文、环境对UI实际也很重要。
交互
Fundamentals:
Affordances
Signifiers
Mappings
Constraints
Discoverability
Feedback
Conceptual model
门——被门槛拦着,所以你需要操作panel
是推拉门还是枢轴门?向哪转?
类似把手这样的东西被称为signifier,即,这个物件应该怎样使用的指示器。(沟通工具)
开关——知道反馈(Feedback),做了交互会有反馈。
USB接口——constraints(约束),只能从某一个方向插入USB线,阻止你做其不想做的事。
电磁炉对应的开关——mapping,控制的和被控制的并不是直接相关的东西,你操作的只是开关,和门不同,并不是直接控制物体。
Discoverability——signifiers、constriants 和 feedback,比如在环形路口要观察怎么做,1. 靠如路标这般的指示器以及路牌这样的指示器。 2. 约束,比如路障,阻止你穿线行驶。 3. 反馈,如果你开错方向了,其他驾驶员会让你知道。
Affordances——锤子——通过signifier指示它的用途,但是人们不一定会按照你指示去行动。锤子和许多软件常常被用作其并不是用于设计做的事。区分Signifer和affordance会有些困难。Signifier是物体的性质,即物体告诉你其应该怎么用。Affordance,你与物体的关系(比如,你实际怎么用的)。椅子和人的能力、形状可以结合,但是不能让大象坐下。
Conceptual model——咖啡机——设计师设计的东西并不能从一开始就被用户理解。用户必须去学习这东西怎么做的,也就是设计师的模型。设计师往往想的与用户实际想的并不一样。
执行与评估
目标:买vrset
执行:搜索
评估:是我想要做的吗?不是,我还没买,我需要先加入购物车。——目标转换为加入购物车。
在执行过程中,我们的目标会经常变化,并会有子目标。
我们需要让用户知道理解,并使用你的工具,以达到目的。
直觉 vs 学习
大多数界面会期望用户能用,我们会指导他们使用。但是有一些界面我们是没有办法指导的。比如飞机的界面。
(对于箱子,大小合适,可以反转、可以扔来扔去,就是affordances。而指示其打开的位置就是signifier。我晃箱子的时候里面有东西,就是概念模型)
不只是如何解决问题,而是要分析问题。通过分析问题,我们也许可以得到一个完全不同的问题。
心流
设计:在有约束的情况下达成目标
聚焦于用户:以用户为中心的设计(UCD)是一种迭代设计过程,在这一过程中,设计师在设计过程的每个阶段都会关注用户及其需求。在 UCD 中,设计团队通过各种研究和设计技术让用户参与整个设计过程,为他们创造[……]产品。
双菱形模型:
(如果我没猜错的话,上下是一块往右走的,不过这里需要问老师)
我的用户是谁?
“数据化”用户
1. 数据收集
2. 形成假设
3. 获得对假设的证据
4. 选择用户数量
5. 描述用户
6. 准备各种情况
7. 获得来自组织的接受
8. 分享知识
9. 准备真实的情景
10. 调整
用户情景
1. 识别用户与你的产品交互时必须做的事情
2. 提供上下文(谁、想做什么、何时、哪里和为什么)
3. 按着情景一步一步走
3.1 用户要做什么?
3.2 用户需要什么信息?
3.3 你会做出什么假设?
4. 迭代
设计基础
CRAP
Contrast - 不同元素应该看起来不同
Repetition - 相同的元素应该看起来相同
Alignment - 东西应该大概成格式
Proximity - 相似的东西在一块,不同的东西应该隔开
不要使用超过两种字体
不要超过三种字体大小
尽量不要用缩写
什么是好的UI
1. functionality
2. usability
3. use
usability: 在特定的使用环境下,特定用户使用系统、产品或服务实现特定目标的效果、效率和满意度。
Extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.
不止日常,也可以考虑一些特定的专业情况。
Effectiveness: 是否能用,是否有效
Efficiency: 使用的资源(时间)与取得的成果
Uber: 送的很快,但是送到的东西不对(Efficient not effective)
Satisfaction: 用户在使用系统、产品或服务时产生的身体、认知和情感反应在多大程度上满足了用户的需求和期望。- User likes it.
functionality: 我能做什么——开发者视角(我有很多函数,能用这些函数做什么?)
effectiveness: 从用户视角(我想要什么功能?)
Analytical - 从分析的角度,比如遵守从各种网站上抄的条例
Empirical - 从经验的角度,比如我真的去问用户这些条例好不好
Cognitive workthrough vs. heuristics(经验对分析)
User survey - empirical
Summative 定性 A/B测试
Formative 定量 观察
User survey: assess attitude, by quantitative, hybrid (you can interview, you can also require to fit a form)
Allow for comparison between different users, different tools,
different versions of a tool or different tasks within a tool
优点:
- 可对不同用户、不同工具、工具的不同版本或工具中的不同任务进行比较
- 可进行大规模评估
- 为双方节省时间
弊端:
- 缺少语境
- 需要可共享的原型和可独立遵循的说明。通常无法提供帮助
- 不清楚用户为何对界面做出这样的评价
- 没有改进意见
- 参与者可能不遵守说明
- 参与者可能不会回答所有问题
Survey的威力来源于comparison,并不会直接告诉你要改进什么,而是会告诉你总体怎么样。
数据分析:
理解词汇
分析——从数据到信息
上下文采访
Pros:
– Captures individual expert perspective 捕捉专家的个人观点
– Interviewer can ask clarifying questions 访谈者可提出澄清性问题
– Possibility to observe behavior 观察行为的可能性
Cons:
– Requires something to observe (e.g. software or manual work
tasks) (需要观察的东西(如软件或人工工作任务))
– People tend to forget important things (esp. everyday things) (人们倾向于忘记重要的东西)
– Potential hidden agenda (可能的隐藏议程)
– Singular perspective (角度单一)
– Requires time of user (时间消耗多)
– Single interviewer / observer might not be sufficient (单一采访者/观察者可能不足)
分享
Confirmatory:通过分析得到一个比另一个好(验证假设)
Exploratory:不做假设,只通过分析
Card sorting
Preparation:
• Determine sorting goal: qualitative or quantitative
• Select participants (users, domain experts, ...)(domain experts就是解释这些的人)
• Determine mode (individual vs. group, open vs. closed)
• Create cards (decide for number)
During the card sorting ask participants to:
• First group cards based on closeness (only those you understand)
• Label groups
• Think aloud during the process
After the card sorting (optional) ask participants about:
• Difficulties
• Overlaps
• Unsorted items
Share一般发生在team内
Affinity diagram 聚类,根据相关性聚类
三波UI浪潮
对于社交媒体,我们不知道effectiveness、efficiency具体是什么……
第一波UI:
实验室研究,人作为主体,认知科学、人作为一种因素(研究室级)
第二波UI:
从人作为一种因素到人作为行为者,参与式设计、原型、上下文探索,真实生活式研究(“工业”级)
第三波UI:
从行为-任务模式到每日的经历,普适计算、用户生成内容,社交式、每日生活式研究(日常级)
用户体验是一个人在使用和/或预期使用产品、系统或服务时产生的感知和反应。(User experience is a person's perceptions and responses resulting from the use and/or anticipated use of a product, system or service.)
在之前的工程中,UI不需要特别精致。但在现在,我们需要让UI更加精致一些。
双菱形模型还是能用,不过我们不再是基于任务了,而是基于经历。
新UI的采访格式:
• 开始:设置目标(而非任务)
• 识别你想要问的主题
• 基于主题和目标做问题
• 对于每个主题给出介绍性问题
• 加入子问题和可选问题
• 按主题排序
• 一般建议:
– 以一个问题开头,向受访者指出访谈的目的
– 从一般问题到具体问题
– 在过程中指导用户
• 好的问题:
– 开放式问题(如何、怎么、为何)
– 为受访者指出一个具体案例、事件、情景
– 有点创造性
这样的UI转变对社会系统有什么影响?——Socio-technical systems
社会技术系统(STS)考虑到硬件、软件、个人和社区等方面。它将对社会结构的理解应用于涉及人与技术社区的系统设计中。
人-AI交互
人-AI交互研究和设计人类与人工智能(AI)系统如何进行交流与合作。人与人工智能交互旨在创建用户友好、值得信赖、合乎道德并对人类有益的人工智能系统。
transparency and explainablity
可解释的人工智能(XAI)是一套流程和方法,可让人类用户理解并信任机器学习算法产生的结果和输出。
控制和以人为中心的AI框架
附录
Created by scratch
Non-trivial
Development of a user interface at its core
Useful and interesting for others not only you
Feasible (e.g. access to potential users)
Goal: Medium to high-fidelity software prototype
You can use a prototypig software (e.g. Figma or Axure)
Matching between included functionality, project description and scenarios.
Every interaction element needs to be clickable.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)