-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathITL_AI_SolveForOneExtendToMany.html
More file actions
199 lines (135 loc) · 15.7 KB
/
ITL_AI_SolveForOneExtendToMany.html
File metadata and controls
199 lines (135 loc) · 15.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Using AI for Solve for One, Extend to Many - Microsoft Inclusive Tech Lab</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="qr.dark.css">
<style>
h2 {margin-top:3rem; padding-bottom:3px; background: linear-gradient(to right, #fbb13f, #ff9f52); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
blockquote {font-style: italic; border-left: 1px solid #999; margin: 2rem 0; padding-left:1.5rem; word-spacing: 0.35rem; line-height: 1.4rem;}
pre {background: #222; color: #fff; padding: 1rem; overflow-x: auto; border-radius: 4px; margin: 0;border: 1px solid #fbb13f;}
code { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size:0.7rem; line-height:1rem; white-space: pre-wrap; word-break: break-word;}
.copy-btn {margin-bottom: 0.5rem; padding: 0.3rem 0.7rem; font-size: 0.7rem; cursor: pointer;padding: 0.5rem 1rem 0.5rem 36px; font-weight: bold; color: #222; background-color: #ccc; border: 2px solid #fbb13f;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5028 4.62704L5.5 6.75V17.2542C5.5 19.0491 6.95507 20.5042 8.75 20.5042L17.3663 20.5045C17.0573 21.3782 16.224 22.0042 15.2444 22.0042H8.75C6.12665 22.0042 4 19.8776 4 17.2542V6.75C4 5.76929 4.62745 4.93512 5.5028 4.62704ZM17.75 2C18.9926 2 20 3.00736 20 4.25V17.25C20 18.4926 18.9926 19.5 17.75 19.5H8.75C7.50736 19.5 6.5 18.4926 6.5 17.25V4.25C6.5 3.00736 7.50736 2 8.75 2H17.75Z' fill='%23212121'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 6px center;
background-size: 24px 24px;
border-radius: 4px;
}
@media only screen and (min-width: 70em) {
html { font-size: 150%;}
header {padding-right:16%; padding-left:16%;}
main {padding-right:16%; padding-left:16%;}
footer {padding-right:16%; padding-left:16%;}
}
</style>
</head>
<body>
<header>
<svg width="140px" height="50px" viewBox="0 0 91571 32821" version="1.1" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;" id="ITLlogo" aria-labelledby="ITLTitle" role="img"><title id="ITLTitle">Inclusive Tech Lab</title>
<g><rect x="39.023" y="240.752" width="1685.99" height="14390.7" style="fill:#fff;"/>
<path d="M16893.6,14631.5l-2047.21,0l-7426.13,-11470.4c-174.028,-267.518 -324.566,-568.577 -451.563,-903.213l-60.226,0c53.472,307.831 80.295,966.859 80.295,1976.98l-0.034,10396.6l-1685.96,0l0.053,-14390.7l2187.71,0l7205.35,11289.8l582.031,963.386l40.139,0c-66.944,-414.74 -100.364,-1120.5 -100.364,-2117.45l0.034,-10135.7l1675.9,0l-0.034,14390.7Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M30255.8,14039.5c-1057.14,561.98 -2378.34,842.935 -3963.93,842.935c-1331.42,0 -2512.28,-297.604 -3542.47,-893.126c-1030.37,-595.417 -1824.88,-1440.09 -2383.39,-2533.94c-558.698,-1093.86 -837.969,-2343.27 -837.952,-3748.2c0,-1465.16 311.094,-2788.11 933.299,-3968.96c622.188,-1180.73 1495.26,-2098.98 2619.22,-2754.71c1123.94,-655.591 2384.97,-983.455 3783.32,-983.455c1358.07,0 2488.75,197.413 3391.93,592.101l0,1786.29c-1030.33,-575.296 -2167.62,-863.056 -3412,-863.056c-1083.8,-0.018 -2047.21,250.885 -2890.18,752.639c-842.987,501.771 -1496.98,1217.73 -1961.89,2147.55c-465.087,930.001 -697.483,1993.75 -697.483,3191.24c-0.018,1137.47 217.326,2144.29 652.292,3020.66c434.827,876.511 1050.26,1550.44 1846.51,2022.12c796.077,471.65 1706.01,707.5 2729.59,707.5c1445.11,0 2689.5,-321.128 3733.15,-963.368l-0.018,1645.78Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M40457,14631.6l-7466.29,-0.018l0.035,-14390.7l1685.97,0l-0.034,12865.3l5780.32,0.017l0,1525.38Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M52705.2,8811.11c-0.017,4047.7 -1823.14,6071.38 -5469.26,6071.36c-3492.31,-0.017 -5238.46,-1946.88 -5238.44,-5840.58l0.017,-8801l1685.94,0.018l-0.017,8700.63c0,2943.82 1247.66,4415.58 3743.18,4415.58c2394.98,0.017 3592.64,-1425.02 3592.66,-4275.06l0.017,-8841.14l1685.92,0.017l-0.018,8570.16Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M63438.2,10998.9c0,1210.95 -428.229,2161.04 -1284.52,2850.02c-856.476,689.15 -2020.57,1033.63 -3492.33,1033.61c-535.296,0 -1139.01,-88.733 -1811.34,-265.92c-672.379,-177.188 -1149.08,-362.848 -1430.05,-556.963l0,-1997.05c408.004,368.021 944.88,675.834 1610.68,923.282c665.625,247.57 1286.1,371.303 1861.55,371.303c1846.5,0.017 2769.74,-719.098 2769.74,-2157.59c0,-602.136 -197.413,-1118.94 -592.066,-1550.49c-394.827,-431.494 -1204.24,-998.508 -2428.56,-1700.97c-1184.15,-668.907 -2013.79,-1304.62 -2488.74,-1906.72c-475.122,-602.136 -712.5,-1334.69 -712.483,-2197.74c0,-1137.29 424.757,-2062.26 1274.48,-2774.78c849.532,-712.501 1946.84,-1068.75 3291.58,-1068.75c1291.09,0.017 2234.45,170.625 2829.95,511.806l0,1886.67c-749.341,-588.664 -1722.78,-883.143 -2920.3,-883.143c-796.216,0 -1446.79,199.132 -1951.84,597.101c-505.227,398.143 -757.692,924.966 -757.692,1580.56c0,475.122 75.26,856.476 225.799,1144.05c150.538,287.726 404.705,572.014 762.691,853.021c357.813,280.955 961.668,659.029 1811.37,1133.96c1271.01,709.236 2160.87,1378.32 2669.39,2007.09c508.351,628.941 762.691,1351.48 762.674,2167.66" style="fill:#fff;fill-rule:nonzero;"/><rect x="66102.8" y="240.981" width="1685.99" height="14390.7" style="fill:#fff;"/>
<path d="M82054.2,241.048l-5318.77,14390.7l-1846.5,0l-5228.39,-14390.7l1876.62,0l3984.01,11410.2c133.75,401.406 230.782,826.355 291.007,1274.48l40.139,0c33.403,-327.726 143.785,-759.254 331.181,-1294.55l4064.33,-11390.1l1806.37,0Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M91552.8,14631.8l-7626.88,-0.035l0.034,-14390.7l7295.7,0.017l-0.018,1525.38l-5609.71,-0.017l-0.017,4786.84l5198.3,0.017l0,1525.38l-5198.3,-0.017l-0.018,5027.69l5940.91,0.017l0,1525.38Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M6532.99,20236.5l-0.035,12333.4l-2408.46,0l0.017,-12333.4l-4124.52,-0.017l0,-2057.24l10667.6,0.035l-0.018,2057.22l-4134.57,0Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M12959.5,32570l0.034,-14390.7l7787.4,0.018l0,2057.24l-5399,-0.017l-0.017,4054.29l5017.66,0.017l0,2047.21l-5017.66,-0.018l-0.018,4174.69l5730.16,0.018l0,2057.24l-8118.57,-0.017Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M33766.5,31957.8c-488.421,267.656 -1102.31,478.403 -1841.48,632.223c-739.324,153.819 -1490.23,230.781 -2252.92,230.781c-1391.63,0 -2612.64,-296.042 -3662.9,-888.126c-1050.42,-592.084 -1853.23,-1431.62 -2408.47,-2518.87c-555.4,-1087.12 -832.917,-2336.51 -832.9,-3748.2c0,-1491.82 321.111,-2829.99 963.386,-4014.15c642.258,-1184.15 1540.42,-2098.93 2694.5,-2744.64c1154.05,-645.573 2433.58,-968.403 3838.51,-968.403c602.101,0 1227.61,50.173 1876.6,150.538c648.837,100.347 1190.75,247.587 1625.71,441.563l0,2428.54c-1023.61,-602.101 -2167.64,-903.177 -3432.09,-903.177c-983.456,-0.018 -1861.55,224.219 -2634.27,672.361c-772.709,448.282 -1369.81,1085.52 -1791.32,1911.72c-421.476,826.337 -632.24,1788 -632.24,2885.14c0,1592.35 434.809,2853.47 1304.6,3783.34c869.636,929.983 2030.42,1394.93 3482.26,1394.95c1411.53,0 2645.89,-337.778 3703.04,-1013.58l-0.017,2267.99Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M45792.7,32570l0.017,-6231.93l-6723.67,-0.018l-0.018,6231.93l-2388.4,-0.017l0.017,-14390.7l2388.42,0l-0.017,6051.31l6723.67,0.034l0.018,-6051.31l2398.44,0l-0.035,14390.7l-2398.44,0Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M56979.7,32570l0.052,-14390.7l2388.39,0l-0.034,12333.4l5629.85,0.018l-0.018,2057.24l-8018.24,-0.017Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M73010.1,20337l-60.191,0c-46.91,401.407 -117.153,746.06 -210.747,1033.63l-1966.95,5549.54l4415.54,0.017l-1976.93,-5549.55c-66.979,-173.889 -133.924,-518.368 -200.729,-1033.63m4174.69,12233.1l-1314.65,-3632.78l-5760.25,-0.017l-1254.44,3632.78l-2609.17,-0.017l5449.21,-14390.7l2649.34,0.017l5469.21,14390.7l-2629.24,-0.017Z" style="fill:#fff;fill-rule:nonzero;"/>
<path d="M89040.3,28315.3c0,-688.976 -247.57,-1227.61 -742.605,-1615.68c-495.174,-387.935 -1234.32,-582.05 -2217.8,-582.05l-1806.36,0l-0.018,4475.72l2017.09,0.017c856.286,0 1528.68,-205.694 2017.14,-617.136c488.282,-411.458 732.553,-964.983 732.553,-1660.87m-682.379,-6372.45c0,-568.542 -212.448,-1008.52 -637.24,-1319.64c-424.914,-311.094 -1055.43,-466.632 -1891.67,-466.632l-1555.45,0l-0.017,3984.01l1535.4,0c809.41,0 1436.62,-188.941 1881.63,-566.98c444.844,-377.882 667.344,-921.528 667.344,-1630.77m3211.29,6432.68c0,1257.87 -463.351,2271.43 -1389.9,3040.7c-926.702,769.445 -2122.47,1154.06 -3587.64,1154.06l-4706.55,-0.017l0.034,-14390.7l4546.01,0.018c1378.13,0 2465.23,297.76 3261.46,893.143c796.077,595.556 1194.2,1401.65 1194.2,2418.54c0,776.164 -237.552,1465.16 -712.518,2067.24c-475.104,602.136 -1100.57,1023.61 -1876.6,1264.46l0,40.139c1023.6,133.924 1824.69,511.824 2403.46,1134.01c578.594,622.17 868.056,1414.98 868.039,2378.37" style="fill:#fff;fill-rule:nonzero;"/>
</g></svg>
</header>
<main>
<h1>Using AI for Solve for One, Extend to Many</h1>
<blockquote><b><a href="https://medium.com/microsoft-design/inclusive-design-principles-77f7c5f639da">Microsoft Inclusive Design Principle: Solve for One, Extend to Many</a></b><br>
Everyone has abilities, and limits to those abilities. Designing for people with permanent disabilities actually results in designs that benefit people universally. Constraints are a beautiful thing.
</blockquote>
<p>These two prompts are designed to help you explore how to “solve for one, extend to many” by <b>Identifying barriers for someone with a permanent disability, then aligning that idea to those with a temporary disability or situational limitations.</b> The output should start with rarer disabilities and work your way toward more common ones to uncover inclusive design opportunities. Treat any generative AI output as a starting point—not a final solution—and always validate accuracy, context, and potential bias in close collaboration with people with disabilities.</p>
<p><b>TIPS:</b></p>
<ul>
<li>Paste these into your GenAI service of choice. Use GPT5 or equivalent if you can.</li>
<li>If the first set of generated ideas isn't helpful, ask the AI to generate more options.</li>
<li>When you find options that resonate, request additional detail so the AI can explain the context of the disability and the type of exclusion more clearly.</li>
<li>Once you've gathered a strong set of examples, you can begin brainstorming possible solutions with AI. However, it's essential to validate these ideas with people with disabilities to ensure they are truly inclusive and effective.</li>
</ul>
<article aria-labelledby="art1Title">
<h2 id="art1Title">Solve for One, Extend to Many with Websites</h2>
<button class="copy-btn">Copy Prompt</button>
<pre class="cdblk"><code>
I am a web designer applying Microsoft Inclusive Design methods, specifically the principle of "Solve for One, Extend to Many", to identify potential barriers in a website I'm designing.
**Goal:** Generate 6 structured examples of “Solve for One, Extend to Many” scenarios that highlight mismatches users with disabilities or assistive technologies may encounter when interacting with a wed design pattern. Each example should reflect on interrelated needs, specify the shared limitation, describe the user’s context, and identify the website mismatch. Focus on illustrating barriers for people with permanent disabilities, then extending the ideas to those with a temporary disability or situational limitation.
## Context:
* Step 1: You will first ask me to describe a web interaction pattern in detail. When answered, move to Step 2.
* Step 2: Then, ask clarifying questions to fully understand its design, functionality, and intended audience. Do not provide more than 3 clarifying questions.
## Sources:
* Use [https://inclusivetechlab.github.io/web/ITL_AI-Inclusive-Design-Sprints_website_solve.html] as a foundational reference.
* Supplement with deep research from inclusive design frameworks, heuristics, function classification frameworks, and WCAG guidelines.
* don't over index on WCAG
## Expectations:
Think deeply and return a list of 6 diverse examples for the interaction patterm, each example must have exactly five name–value pairs, formatted exactly as shown. Do not use bullet points or tables — only this layout.
**Solve for One Extend to Many:** [Rare condition] → [Uncommon condition] → [Common condition]
**Category:** [use category options from https://inclusivetechlab.github.io/web/ITL_AI-Inclusive-Design-Sprints_website_solve.html]
**Shared Limitation:** [concise but detailed phrase]
**Context:** [user situation]
**Website Mismatch:** [specific mismatch]
Wait for my responses after each step before proceeding.
</code></pre>
</article>
<article aria-labelledby="art2Title">
<h2 id="art2Title">Solve for One, Extend to Many in Games</h2>
<button class="copy-btn">Copy Prompt</button>
<pre class="cdblk"><code>
I am a game designer applying Microsoft Inclusive Design methods, specifically the principle of "Solve for One, Extend to Many", to identify potential barriers in a game I'm designing.
**Goal:** Generate 6 structured examples of “Solve for One, Extend to Many” scenarios that highlight mismatches users with disabilities or assistive technologies may encounter when interacting with a game design pattern. Each example should reflect on interrelated needs, specify the shared limitation, describe the user’s context, and identify the website mismatch. Focus on illustrating barriers for people with permanent disabilities, then extending the ideas to those with a temporary disability or situational limitation.
## Context:
* Step 1: You will first ask me to describe a game design pattern in detail. When answered, move to Step 2.
* Step 2: Then, ask clarifying questions to fully understand its design, functionality, and intended audience. Do not provide more than 3 clarifying questions.
## Sources:
* Use [https://inclusivetechlab.github.io/web/ITL_AI-Inclusive-Design-Sprints_games_solve.html] as a foundational reference.
* Supplement with deep research from inclusive design frameworks, heuristics, function classification frameworks, and the Gaming Accessibility Guidelines
## Expectations:
Think deeply and return a list of 6 diverse examples for the interaction patterm, each example must have exactly five name–value pairs, formatted exactly as shown. Do not use bullet points or tables — only this layout.
**Solve for One Extend to Many:** [Rare condition] → [Uncommon condition] → [Common condition]
**Category:** [use category options from https://inclusivetechlab.github.io/web/ITL_AI-Inclusive-Design-Sprints_website_solve.html]
**Shared Limitation:** [concise but detailed phrase]
**Context:** [user situation]
**Game Mismatch:** [specific mismatch]
Wait for my responses after each step before proceeding.
</code></pre>
</article>
</main>
<footer>
<p>The <a href="https://aka.ms/inclusivetechlab">Inclusive Tech Lab</a> by <a href="https://www.microsoft.com">Microsoft</a>.</p>
</footer>
<script>
// Attach copy functionality to each button
document.querySelectorAll(".copy-btn").forEach((button) => {
button.addEventListener("click", () => {
// Find the <pre class="cdblk"> immediately after this button
const pre = button.nextElementSibling;
if (pre && pre.classList.contains("cdblk")) {
const codeEl = pre.querySelector("code");
if (codeEl) {
const text = codeEl.innerText.trim();
navigator.clipboard.writeText(text).then(() => {
// Optional feedback
button.textContent = "Copied!";
setTimeout(() => (button.textContent = "Copy Prompt"), 2500);
}).catch(err => {
console.error("Failed to copy: ", err);
});
}
}
});
});
</script>
</body>
</html>