wattenberger-com-zl39ri.txt (11572B)
1 [1] 2 3 Our interfaces have 4 lost their senses 5 6 Think about how you experience the world— 7 8 you touch, you hear, you move. 9 10 [dance1] [dance1] [dance1] [dance1] 11 [dance-grou] 12 13 But our digital world has been getting flatter, more muted. 14 15 Reduced to text under glass screens. 16 17 This shift made interfaces simpler. 18 But was that really the goal? 19 20 An interface is the bridge between 21 the human 22 & 23 the machine. 24 [human] 25 [human] [machine] 26 It's how we tell computers what we want, 27 [arrow-righ] 28 and it's how computers communicate back to us. 29 [arrow-left] 30 The shape should fit how we work, 31 for ergonomics and ease of use 32 and it should fit how the computer works. 33 for simplicity and a good mental model 34 Recently, we've been too focused on fitting to the computer's shape, and not 35 enough to our own bodies. 36 [machine] 37 38 The Great Flattening 39 40 Computers used to be physical beasts. 41 42 We programmed them by punching cards, plugging in wires, and flipping switches. 43 Programmers walked among banks of switches and cables, physically 44 choreographing their logic. Being on a computer used to be a full-body 45 experience. 46 47 [tech0] 48 [tech1] 49 [transition] 50 51 Then came terminals and command lines. Physical knobs turned into typed 52 commands—more powerful, but our digital world became less embodied. Then came 53 terminals and command lines. Physical knobs turned into typed commands—more 54 powerful, but our digital world became less embodied. Then came terminals and 55 command lines. Physical knobs turned into typed commands—more powerful, but our 56 digital world became less embodied. Then came terminals and command lines. 57 Physical knobs turned into typed commands—more powerful, but our digital world 58 became less embodied. Then came terminals and command lines. Physical knobs 59 turned into typed commands—more powerful, but our digital world became less 60 embodied. Then came terminals and command lines. Physical knobs turned into 61 typed commands—more powerful, but our digital world became less embodied. 62 63 [tech2] 64 [transition] 65 66 We brought back some of the tactile controls with GUIs—graphical user 67 interfaces. We skeumorphed the heck out of our screens, with digital switches, 68 flat sliders, and folder icons. But we kept some of the the functionality in 69 the physical world, with slots to stick disks into and big ol' power buttons. 70 We brought back some of the tactile controls with GUIs—graphical user 71 interfaces. We skeumorphed the heck out of our screens, with digital switches, 72 flat sliders, and folder icons. But we kept some of the the functionality in 73 the physical world, with slots to stick disks into and big ol' power buttons. 74 We brought back some of the tactile controls with GUIs—graphical user 75 interfaces. We skeumorphed the heck out of our screens, with digital switches, 76 flat sliders, and folder icons. But we kept some of the the functionality in 77 the physical world, with slots to stick disks into and big ol' power buttons. 78 We brought back some of the tactile controls with GUIs—graphical user 79 interfaces. We skeumorphed the heck out of our screens, with digital switches, 80 flat sliders, and folder icons. But we kept some of the the functionality in 81 the physical world, with slots to stick disks into and big ol' power buttons. 82 We brought back some of the tactile controls with GUIs—graphical user 83 interfaces. We skeumorphed the heck out of our screens, with digital switches, 84 flat sliders, and folder icons. But we kept some of the the functionality in 85 the physical world, with slots to stick disks into and big ol' power buttons. 86 We brought back some of the tactile controls with GUIs—graphical user 87 interfaces. We skeumorphed the heck out of our screens, with digital switches, 88 flat sliders, and folder icons. But we kept some of the the functionality in 89 the physical world, with slots to stick disks into and big ol' power buttons. 90 91 [tech3] 92 [transition] 93 94 Then came touchscreens. 95 What a beautiful thing! We get to [2]poke things directly! 96 But now we live in an flat land, with everything behind a glass display case. 97 Then came touchscreens. 98 What a beautiful thing! We get to [3]poke things directly! 99 But now we live in an flat land, with everything behind a glass display case. 100 Then came touchscreens. 101 What a beautiful thing! We get to [4]poke things directly! 102 But now we live in an flat land, with everything behind a glass display case. 103 Then came touchscreens. 104 What a beautiful thing! We get to [5]poke things directly! 105 But now we live in an flat land, with everything behind a glass display case. 106 Then came touchscreens. 107 What a beautiful thing! We get to [6]poke things directly! 108 But now we live in an flat land, with everything behind a glass display case. 109 Then came touchscreens. 110 What a beautiful thing! We get to [7]poke things directly! 111 But now we live in an flat land, with everything behind a glass display case. 112 113 [tech4] 114 [transition] 115 116 With increasing amounts of AI chatbots, we're losing even more: texture, color, 117 shape. 118 Instead of interactive controls, we have a text input. 119 Want to edit an image? Type a command. 120 Adjust a setting? Type into a text box. 121 Learn something? Read another block of text. With increasing amounts of AI 122 chatbots, we're losing even more: texture, color, shape. 123 Instead of interactive controls, we have a text input. 124 Want to edit an image? Type a command. 125 Adjust a setting? Type into a text box. 126 Learn something? Read another block of text. With increasing amounts of AI 127 chatbots, we're losing even more: texture, color, shape. 128 Instead of interactive controls, we have a text input. 129 Want to edit an image? Type a command. 130 Adjust a setting? Type into a text box. 131 Learn something? Read another block of text. With increasing amounts of AI 132 chatbots, we're losing even more: texture, color, shape. 133 Instead of interactive controls, we have a text input. 134 Want to edit an image? Type a command. 135 Adjust a setting? Type into a text box. 136 Learn something? Read another block of text. With increasing amounts of AI 137 chatbots, we're losing even more: texture, color, shape. 138 Instead of interactive controls, we have a text input. 139 Want to edit an image? Type a command. 140 Adjust a setting? Type into a text box. 141 Learn something? Read another block of text. With increasing amounts of AI 142 chatbots, we're losing even more: texture, color, shape. 143 Instead of interactive controls, we have a text input. 144 Want to edit an image? Type a command. 145 Adjust a setting? Type into a text box. 146 Learn something? Read another block of text. 147 148 [tech5] 149 [tech6] 150 151 The Joy of Doing 152 153 We've been successfully removing all friction from our apps — think about how 154 effortless it is to scroll through a social feed. But is that what we want? 155 Compare the feeling of doomscrolling to kneading dough, playing an instrument, 156 sketching... these take effort, but they're also deeply satisfying. When you 157 strip away too much friction, meaning and satisfaction go with it. 158 159 Think about how you use physical tools. Drawing isn't just moving your 160 hand—it's the feel of the pencil against paper, the tiny adjustments of 161 pressure, the sound of graphite scratching. You shift your body to reach the 162 other side of the canvas. You erase with your other hand. You step back to see 163 the whole picture. 164 165 We made painting feel like typing, 166 167 [typing] 168 [art-transi] 169 170 but we should have made typing feel like painting. 171 172 [artist] 173 174 Putting the you back in UI 175 176 So how might our interfaces look if we shaped them to fit us? 177 178 We think in movement, [movement] 179 in space, [space] 180 in sound, 181 [sound] 182 in patterns. 183 [patterns] 184 185 We use our hands to sculpt, our eyes to scan, our ears to catch patterns. 186 187 Our computers can communicate to us in many different formats, each with their 188 own strengths: 189 190 Text 191 Great for depth, detail, and precision. 192 [images] 193 But it doesn't always have to be in full paragraphs. How about showing key 194 points first, then letting users expand? 195 Visualizations 196 Ideal for spatial relationships, trends, and quick insights. 197 [vision] 198 Can we show more content spatially? Or encode it in charts or colors? 199 Sound 200 Perfect for alerts and background awareness. Also, patterns. 201 [hearing] 202 Why are most web UIs silent? Can we use subtle chimes or sonification to 203 highlight patterns? 204 Haptics 205 Provides passive feedback (vibrations, force). 206 [touch] 207 Here's one I always forget about! We can vibrate phones to alert or convey 208 patterns. 209 210 And what about the reverse! We can communicate to our computers in many 211 different ways, each with their own strengths: 212 213 Typing 214 Precise, detailed, and familiar 215 [typing2] 216 Good for composing long-form thoughts, keyboard shortcuts, and rough direction. 217 Clicking & Dragging 218 Direct, fine-grained control. 219 [clicking] 220 Great for spatial tasks (design, organization) and pointing at 221 things-on-a-screen. 222 Tapping, Swiping, Pinching 223 Intuitive for direct manipulation. 224 [tapping] 225 Great for mobile, but do we have to limit guestures to mimicking mouse 226 interactions? 227 Gesturing 228 Hands-free, fluid, and expressive. 229 [guesturing] 230 Could be powerful for accessibility, quick actions, and complex fine 231 control—reliable detection feels very possible at this time. 232 Speaking 233 Easy for loose thoughts. 234 [speaking] 235 LLMs have made speech more viable—can we let users think out loud or navigate 236 roughly with their voice? 237 238 And the real magic happens when we combine different modalities. You can't read 239 and listen and speak at the same time—try reading this excerpt while talking 240 about your day: 241 242 If it had not rained on a certain May morning Valancy Stirling’s whole life 243 would have been entirely different. She would have gone, with the rest of her 244 clan, to Aunt Wellington’s engagement picnic and Dr. Trent would have gone to 245 Montreal. But it did rain and you shall hear what happened to her because of 246 it. 247 248 ~ [8]The Blue Castle 249 But you can talk while clicking, 250 [click] 251 listen while reading, 252 [listen] 253 look at an image while spinning a knob, 254 [look] 255 guesture while talking. 256 [guesture] 257 258 Let's build interfaces that let us multitask across senses. 259 260 Rebuilding the bridge 261 262 So, what might a richer interface look like? I have strong conviction that our 263 future interfaces should: 264 265 • let us collaborate on tangible artifacts, not just ephemeral chat logs. 266 • support multiple concurrent modalities—voice, gestures, visuals, spatial 267 components. 268 • respond to ambient signals—detecting context, organizing information, 269 helping us think better. 270 271 Last year, I did a rough exploration of what this could look like for a thought 272 organizing tool. One that listened as you talked or typed, and organized your 273 rambling thoughts into cards. 274 275 This interface is very rough, but felt like a different way of working with 276 technology. Especially how it let me bumble through rough ideas one second, 277 then responded to commands like "re-group my cards" or "add 3 cards about this" 278 the next. 279 280 I would love to see more explorations like this! 281 282 Our interfaces have lost their senses 283 284 All day, we poke, swipe, and scroll through flat, silent screens. But we're 285 more than just eyes and a pointer finger. We think with our hands, our ears, 286 our bodies. 287 288 The future of computing is being designed right now. Can we build something 289 richer—something that moves with us, speaks our language, and molds to our 290 bodies? 291 292 [footer] 293 294 References: 295 296 [1] https://wattenberger.com/ 297 [2] https://www.youtube.com/watch?v=RyBEUyEtxQo 298 [3] https://www.youtube.com/watch?v=RyBEUyEtxQo 299 [4] https://www.youtube.com/watch?v=RyBEUyEtxQo 300 [5] https://www.youtube.com/watch?v=RyBEUyEtxQo 301 [6] https://www.youtube.com/watch?v=RyBEUyEtxQo 302 [7] https://www.youtube.com/watch?v=RyBEUyEtxQo 303 [8] https://www.gutenberg.org/ebooks/67979