Zine making with small data
思辨设计、产品设计
项目来源
CONVERSATIONS WITH MACHINES: LECTURE & WORKSHOP SERIES
我与Amazon Alexa 的互动图解手册
合作者
Individual
项目年份
2024
问题陈述
异常值出现场景
tm的设计缺陷
潜在的设计方向
大型数据集可能发生异常值:很难检测,但可能会对预测结果产生巨大影响。
数据采集过程中的网络摄像头误入者:连续捕获的机制使清楚过程变得困难。
人为引入的多样性:人类无法精确控制异常值的影响,这可能会阻碍预测的准确性。
Teacable Machine 将所有输入值作为训练数据,但无法识别数据集中的异常值。
预测机制隐藏得太深,对不了解机器学习技术的用户不友好
我们可以通过引入人为本的方法帮助用户识别异常值 
简单的预测机制和适当的可解释性可以帮助用户发现潜在异常值的影响。
研究目标
我们如何提供反馈,让用户了解异常值对训练集准确性的影响,从而提供更高质量的训练数据样本?
-(RQ1): 界面如何提醒人们可能不小心将异常值引入了训练数据集?
-(RQ2): 界面如何指导用户利用TeacableMachine提供的原理阐释有效过滤异常值?
原型设计
初始解决方案 01:人工监督分类
SOLUTION 1
初始解决方案 02:被动异常值识别和校正
SOLUTION 2
最终解决方案:“警报” 界面和 “异常值过滤器” 界面。
原型测试
我在 5 名参与者身上测试了原型。1 名参与者拥有计算机科学背景,2 名拥有设计背景(建筑),2名来自跨学科背景(人机交互和认知科学/管理)。他们中的大多数人具有机器学习或统计学的基础知识。
第 1 回合:教程(对照组)
第 2 回合:使用经过人工筛选的训练集训练新模型
第 3 回合:使用新训练集应用新模型
让受试者运行 TM 并观察当前数据集在对指定样本分类的工作原理。
在接下来的回合中,从两个警报界面备选方案中选择最喜欢的,作为异常值过滤器界面的测试原型。
让受试者通过删除清单中建议的异常值手动优化训练集。
再次在新数据集上运行TM,观察准确度如何变化,同时试图学习异常值范式。
让参与者根据从第 2轮中学到的异常值范式手动筛选新的数据集,再次运行 TM 并观察预测准确度如何变化。
进行半结构化访谈和问卷调研
paper prototype for prototyping
checklist for human-in-the-loop
“警报”界面的纸质原型
异常值清单
(红色标注:建议异常值,删除标注:受试者选择的异常值)
定量分析
下图展示了5名受试者在3轮测试中对样本的预测精度。已过滤的数据集准确度最高。但是与初始回合相比,由于受试者可能从建议中学习了异常值的范式,手动筛选的精度显著提高。
accuracy result in 3 round prototyping
定性分析
我通过调研问卷和半结构化访谈获得了更多的信息,参与者表达了他们在这个过程中的发现、感受和建议,为后续总结设计启示提供了宝贵的观点。
关于界面设计
对于“警报”界面,受试者首选第二个设计:

- 他们可以从中看到预测准确性,并理解删除异常值的意图。
- 它鼓励他们考虑进一步优化方式以获得更好的性能。

对于“异常值过滤器"界面,参与者将更好预测结果归因于简单明了的设计。
其他发现
受试者对TeachableMachine的算法机制表示的好奇心超出了预期。尽管他们愿意进一步了解该算法,但他们在测试过程中尽量与算法保持距离,具有专业背景的受试者对第二轮的判断充满信心,但第三轮的结果让他们感到失望。
设计启示
“警报” 界面激发了人们了解影响预测表现的因素的欲望。

“异常值过滤器” 界面为用户提供了一种让他们了解如何区分异常值以及它们对模型的影响的设计范例。
迭代建议
更多研究问题
受试者的反馈,尤其是他们的困惑,带来了进一步推测的潜力,其中包括:

- 为什么谷歌将原理阐释放在了高级功能中?

- 如何平衡人为引入的偏见和机器学习模型偏差?

- 过滤系统在不可预测的新数据集上的表现如何?
界面迭代建议
他们还就进一步的界面迭代提供了宝贵的建议,其中包括:
如何查看数据集:

-行布局(集成到TM当前的上传界面)

-页面预览(集成在上传界面后)

如何识别标记的异常值:

-现场标记

-针对所有分类组的异常值分区

-针对每个分类组的异常值分区

如何回溯筛选流程:

-存档分区(备份性能最佳的筛选数据集)
设计挑战
算法偏见通过准确的推荐为用户带来便利, 但也有可能对其有害。 抖音算法系统中的有害偏见如何影响用户体验?
问题陈述-抖音广告推送功能的可用性测试
我们测试了当前抖音功能的可用性,以发现目前存在的算法偏见问题。
1
种族偏见
2
性别偏见
3
品牌偏见
4
需求偏见
5
对偏见广告
消极对待
抖音只向资深用户推荐有关用户自己种族的视频,但会向新用户推荐其他种族的视频。

一些受试者删除了其他种族的视频,因为他们觉得这些视频不符合他们的生活方式。
男性受试者收到了有关运动鞋、游戏和性暗示的广告,而女性受试者则收到了有关化妆品和购物的广告。
抖音仅向受试者推荐某些品牌的产品,其中包括电子设备和食品。
受试者不断收到有关他们不想或不需要购买的产品的广告。

尽管受试者对这些商品表示 “不感兴趣”,但抖音仍然向他们推荐这些。
大多数受试者只在短时间停留在偏见广告上,然后将其划走。

少部分受试者试图对他们看到的前几则偏见广告点击不感兴趣,但很快就放弃了。
研究目标
面对潜在的算法偏见,我们如何通过个性化广告设置来赋能用户?
定性分析
我们对3名受试者进行了三轮采访,采用了出声思维法试点测试访谈,基于引导叙事半结构化访谈等用户研究方法。

我们记录了这些访谈,并对其使用亲和图用户旅程图进行分析,以获得更普遍的见解。以下是我们最关注的几个问题:
“你对抖音上存在偏见的广告有何看法?”
“你对当前的广告设置用户流程有何看法?正面和负面观点多多益善。”
“你希望抖音将来添加更多广告功能吗?为什么?你认为这如何有助于应对算法偏见并使算法满足你的需求?”
“你对刚才提到的潜在功能有疑虑吗?”
“你希望我们对广告设置界面/用户流程进行哪些改进?”
数据分析整合 - 笔记解读 + 亲和图
通过对采访笔记的解读,我们分析用户的需求、动机和行为,然后将他们分组并标记成亲和图,以第一人称视角整合见解。用户阐明了他们在抖音上的偏好、活动和发现,分享了他们的需求、建议、疑虑和关注点。
affinity diagram
模型-用户旅程图
我们构建了模型 - 用户旅程图,以更好地帮助我们总结和理解用户的立场,为速配设计提供了设计启示。
定量分析
我们还进行了问卷调查,包括3个类别的 13 个问题: 应用功能、广告和购买行为。调查结果验证了我们从定性研究中得出的初步结论。我们总计收到了32 份回复, 这些结果帮助我们迭代了结论以及接下来的快速约会法。
大多数受试者介于22-25岁之间,使用抖音每天不到一小时
该调查证实了我们在访谈中得出的关于当前广告设置的问题,以及人们对广告设置教程的强烈需求。广告设置应更容易找到,以及互动提示在受访者中很受欢迎。
该调查证实了人们尽管有时从未意识到,但在抖音上还是会遇到偏见广告,包括 从广告中购买产品 (有益偏见)和 接收不当或虚假的广告 (有害偏见)。
该调查揭示了受访者的对推荐广告的兴趣。
设计启示
1
有益与有害的
算法偏见
2
渴望消解偏见
3
多样的广告
偏好设置
4
改善指引界面
5
无缝功能集成
用户喜欢带有有益偏见的广告,但也承认算法偏见带来的相关问题,尽管有时他们没有意识到。
对感兴趣的类别进行个性化设置反映了用户希望通过控制他们遇到的广告类型来消解算法偏见。
用户对不同的广告偏好设置机制表达了兴趣,但更喜欢简单直观的机制。
广告相关操作和设置隐藏太深,为用户带来了繁琐的个性化体验,因此需要改进
用户表达了使用抖音时的无缝体验需求,这需要整合个性化功能和现有功能。
低保真原型
快速约会法
我们基于设计洞察使用了快速约会法,帮助我们探索可能的未来情境、验证用户需求并识别潜在风险因素。其中第一个设计得到了大多数受访者的认可。
speed dating 01
- 大多数参与者对来自 TikTok 的实时反馈表示兴趣。
- 用户偏好简单直观的功能。
- 用户更喜欢在 TikTok “为你推荐”页面上进行简单的交互。
speed dating 02
- 我们原本预计用户会考虑添加插件以消除广告偏见,但多数人认为这个做法过于复杂且没有必要。
speed dating 03
- 尽管“分享偏好”这个想法带来了惊喜,但用户大多觉得很怪异。
- 它激发了他们对隐私以及日常社交互动模式的不安。
低保真原型设计
在最初的快速约会概念基础上,我们使用低保真原型与7 位参与者进行了一轮情境原型测试。在这轮测试中,我们识别出用户体验中的三个关键时刻:打开TikTok 的那一刻、连续滑动时、以及多次完整观看广告时。为了进一步探索这些时刻,我们为互动提示制作了物理叠加原型,并在用户通常使用TikTok 的真实环境中、直接在他们的手机上进行了测试。
physical prototype
scenario 01
scenario 02
scenario 03
原型评估
整体而言,原型评估的反馈是积极的,我们的方案显著提升了用户的满意度。但在物理原型设计流程中仍存在一些问题,影响了操作流程的连续性。考虑到最终的交付方式,积极反馈在我们最终决策中占据了更大的权重。
最终设计原型
我们在此介绍针对算法偏见的广告个性化插件的设计方案。由于我们的方案以插件的形式呈现,因此我们利用当前抖音UI设计的组件与设计风格,并将我们的插件集成到当前的用户使用流程中。
情景一:插件使用教程
我们将原本深藏的“不感兴趣”按钮移至右侧栏,放置在“喜欢”按钮旁边。当用户首次打开 TikTok 时,扩展程序会显示一个覆盖式教程,说明其功能。
情景二:互动提示
在用户持续滑动视频的过程中,互动提示将逐步出现。根据用户的选择,插件将作出不同响应:要么调整推荐内容(减少或增加相似内容的出现频率),要么跳转到举报页面。
情景三:个性化设置
如果用户连续多次完整观看广告但未采取任何操作,插件将提示用户明确他们的偏好,并引导他们前往广告个性化页面。在该页面中,用户可以通过选择个性化标签来自定义广告偏好,从而获得更大的自主权。
设计构思
用餐体验不仅由食物或其背后的仪式所构成,更深刻地,它由食物所唤起的个人记忆所塑造。即便是一顿平凡的饭,与家人、朋友或爱人共度的时光,也蕴含着更深的意义。我们想象:如果这些瞬间可以被捕捉,并以某种有形的方式分享,会是什么样子?

用餐连接着我们的记忆,激发出关于食物、文化与围绕餐桌展开的故事的想象。受到艺术作品的启发,一块桌布或许可以成为记录餐桌生活的画布 - 记录我们坐在哪里,吃了什么,做了什么,又和谁共享这些时刻。这种媒介既可轻松折叠、打包、馈赠,也成为一份富有意义的邀请。当朋友收到它时,便如同受邀成为座上宾,与我们一同庆祝那些私密而珍贵的生活片段。
case study
原型设计
我们首先从前期案例研究中精选出三个概念进行深入探索:

- 移动式的精致用餐体验
- 通过投影技术增强用餐体验
- 设计餐具以模拟进食障碍,从而激发共情

最终的创意融合了前两个概念的元素:我们设计并制作了一块可以适应不同桌子尺寸和布局的桌布。通过这个项目,我们希望延续第二个点中“文化交流”的主题,将自己在家中与家人用餐的方式具象地描绘出来。
ideation 01
ideation 02
我们的第一个原型是一块药丸形状的桌布,能覆盖整个餐桌表面。桌布上标记了餐盘的摆放位置,用于指引用户如何布置餐具。我们缝上了纽扣,并画出折叠线,使用户可以根据不同人数和桌型灵活调整。纸质原型则以矩形形式呈现,试图达到类似效果。
prototype 1 01
prototype 1 02
然而,在设计这些可折叠桌布的过程中,我们意识到自己逐渐偏离了项目的初衷 - 将“我自己的用餐记忆”分享给他人。原型中过于规范化的餐盘标记使作品显得机械与乏味。虽然我们也尝试选用不同布料来营造更多变化,但最终我们还是回到了最初的想法:不再追求万能的适配性,而是专注于创作一块“属于一个人、一顿饭、一次独特体验”的桌布。
最终版本的桌布围绕 Brie 的家庭进行创作。桌布用不同颜色的布料区分家庭成员的座位,并在每个餐盘位置缝上名字。我们还标示了手机和平板的摆放位置,并附有二维码,扫码即可进入他们用餐时常看的节目或使用的 app。角落的“指南针”并不用于定位地理方向,而是标示电视的位置 - 它是家庭晚餐仪式的中心。我们也绘制了可爱的插图,用以定义共享菜品的区域。
pattern design 01
最终作品体现了团队的协作精神:从缝纫、图案设计到绘画,每位成员都参与其中。我们试图保留这些关于家庭的记忆,仿佛我们自己也是这个家庭的一部分。
fabrication process 01
fabrication process 02
最终产品
这块桌布特别之处在于,它以拆卸式结构代表 Brie 的兄弟 - 他经常独自在房间用餐,因此东南角为可拆卸设计,通过纽扣连接。收到这份礼物的人可以扫码桌布边缘或 iPad 区域的二维码,看到送礼人用餐时的视角,并获得电子版的使用手册。
final product
此外,我们还制作了一本配套手册,详细讲述了这块桌布所承载的用餐体验。手册包括家庭成员介绍、菜品与器物图例、以及日常用餐情境的故事板。我们鼓励收到这份礼物的朋友通过模仿这些间接的用餐情境,沉浸式地体验“桌布上的生活”。
Coming soon :)
THE PROJECT
An AI-driven web-based plugin that provides better communication between users and generative AI tools
Discover & UNDERSTAND
Our journey starts from the question below: As a designer, have you ever used Generative AI tools in design process? And have you ever felt misunderstood by Generative AI tools in design process?

We collected opinions from designers across different disciplines and integrated them into an affinity diagram. The takeaways from this status quo guided us to our design space: human-AI communication.
surveyinsights
define question
How might we ease the process of communication between designers and generative AI tools by fostering mutual understanding?
IMAGINE
Our proposal is to leverage a web-based plugin with language process ability. Users label the results after comparing the current outcome with their mind and iterate the suggestion on the plugin. The human-in-the-loop method will provide users preferred results by achieving consensus.
workflow
RAPID PROTOTYPING
init
Feature 1: User Domain Settings (web-based plugin)

Once the plugin is installed and logged in, the interface will prompt user to select their corresponding domain in design professions, which parameters will be applied on image generation and suggestion-making processes of the plugin.
suggestion
Feature 2: User-oriented Image Classification / Generation (web-based plugin)

Once user begin to execute text-based image generation processes, the plugin will provide users with tailored user-friendly image labels; which will allow the user to  revise the labels based on one’s interpretation of content.
iteration
Feature 2: User-oriented Image Classification / Generation(web-based plugin)

Image re-generation based on revised image classification labels will help users acquire updated contents more precisely; while helping the algorithm to learn user’s domain knowledge and pattern - providing data for the algorithm to improve performance overtime.
personalization
Feature 3: User Profile Settings (dedicated web interface)

The web-based plugin also provides a standalone website that allows the user to retrospectively review domains and labels associated with their profile, recycling previously removed parameters while gaining more insights about their interaction patterns.
PRECEDENT STUDY
We wanted to build an object and experience that would embody what it would be like to be underground. We explored diorama as a possible final product as we wanted to design an experience, but also build a physical prototype. We took heavy inspiration from underground, ant colony dioramas.
precedents
PROCESS & DEVELOPMENT
Our initial sketch consisted of three levels: underground, ground, and canopy. Both the canopy and the ground level would have holes cut through the base, which would allow us to drip water through to simulate rainfall. The trees we build would play a vital part, not just in terms of aesthetics but also in terms of the experience itself. We wanted to design it so that the water that falls from the canopy would drip down, saturate the tree and its roots, carrying the water all the way down to the underground level. We also designed a staircase inviting guests to imagine what it would be like to go down into a cave, covered with roots, soil, and the countless creatures hidden underneath.
sketch
For the underground level, we built the ‘cave’ with black aluminum foil, poured soil over around the edges, and punched holes on the ceiling through which we snaked through tube cleaners. This would carry the water from above ground to below ground, once saturated. We also cut a large hole in the front panel, inviting guests to reach in and touch the soil as the water drops from the cave’s ceiling. We wrapped the black foil over and around the opening in the center, to help keep the soil contained and sealed. The cotton was threaded through thin copper wires which hung over the two side walls.
interaction
FINAL PRODUCT
The final model is completed with organic soil and manmade trees and clouds. The environment comes to life in our film through sprinkling water over the clouds and seeping into the soil through the tube cleaners. A play on both the Wildcard and Synthesis, this experience allows one to feel the senses of the Earth 6 ft under.
final 01
final 02
final 04
final 03
设计构思
我选择了我与 Amazon Alexa 的对话记录作为制作这本手册的数据。我和三个室友合租,没有在房中安装智能家居设备。因此,我与它的交流大多是播放音乐和早期的闹铃。 虽然我和它相处了近一年,但其中的数据并不多。这次工作坊给了我一个很好的机会来反思我与它的关系 - 一个陪伴我度过无数日夜的伙伴。

我在工作坊的前一天下载了数据,并将其处理成适当的格式:内容、日期和时间。我从最近的时间看起,然后发现了许多有趣并且耐人寻味的对话。我不是英语母语者,而Alexa 也不像目前最先进的大语言模型那样“聪明”。这些与这台设备建立关系中的趣闻和误解启发了我。我把所有对话的情景分为三类:

类型1: 正确识别

类型 2:Alexa识别错误:由于语音识别能力有限,Alexa 无法读取其技能集和学习算法之外的模糊命令。在这种情况下,它无法解析命令并显示:

        "Audio could not beunderstood."

但更常见的情况是类型 3:我的问题:语音录制只有在按下录制按钮时才起作用,但我的英语水平无法帮助我在这么短的时间内想出该说些什么,所以它经常什么也录不下来,显示为

        "No text stored."

有时,我也会高估它的能力,所以当我说了一些它显然无法识别的话时,它将其解析为:

        "Audio was not intendedfor this device."

通过观察上述类别的数据,我开始会对这些对话的发生时间、频率随时间的变化以及对话发生后我对和Alexa 的态度和它对我的印象有何变化感到好奇。

因此,我决定在手册的信息可视化中重点关注以下两点:
1. 以上三类每次对话的发生时间轴
2. 以及这些类别变化的趋势图

但过早地进行定量分析会抑制我的创造力,所以我试图通过浏览数据集和标注数据来想象这些趋势。在这个过程中,我发现自己就像一个侦探,对话的内容和时间唤醒了我当时的记忆。这些生动的回忆触动了我,因此我决定通过与手册的互动重现这种体验。
data before
data after
设计流程
有了明确的目标,我开始制作手册的原型。呈现时间线的最佳方式是一张卷轴,而手册的可阅读性限制了它的折叠形式。我设计了一组记忆卡片作为解密钥匙,引导人们找到卡片上故事发生的时间。手册的封面不仅起到保护作用,也可以作为阅读这两个可视化图表的良好媒介。

确定了交互的实体形式后,我开始用 Python 制作信息可视化图表并进行了图例与整体布局设计。
proto 02 - 1
proto 02 -2
第一个功能原型
python
ai
数据可视化和处理
proto 03 - 1
proto 03 -2
第二个原型:迭代测试
最终产品
下图是上述迭代过程的高保真原型。 两种颜色代表了两个实体:我和 Alexa,也反映了一天中时间的流逝(白天和黑夜)。 封面被设计成一把尺子,上面标注了我对Alexa的关键的态度转变。 读者可以通过在手册上定位来探索这些转变,从而创造出一种引人入胜的自我引导体验。
final overview
final 01
final 02
takeout
map
me
front
back
alexa
设计反思

由于时间有限,设计没有进行足够的迭代,我也没有从观众那里得到足够的反馈。因为图表的篇幅限制,它无法提供额外信息,因此对观众来说从图表中找到的完整故事可能难以理解。另外,趋势图与我的预期完全不同,看来它不太了解我,我也没有更熟练地掌握如何操作它。最后,Alexa的数据集没有存储自己的回答,数据中只有我提出的问题。尽管我从 Alexa 那里记住了一些有趣的答案,但由于缺乏数据,我无法表达出来。 总之, 这次工作坊为我提供了一个让我反思自己与个人物品之间的关系,并以平等的心态思考它们的机会。