Fronteers — vakvereniging voor front-end developers

Met korting naar CSS Day 2023

Op 8 en 9 juni organiseert Web Conferences Amsterdam voor de negende keer CSS Day.

Zoals bij eerdere edities het geval was, krijgen Fronteers-leden korting op dit congres. Je betaalt 575 in plaats van 675 euro voor een kaartje voor beide dagen (alle bedragen exclusief BTW). Het aanbod is geldig voor mensen die op dit moment al lid zijn, en je kunt ervan gebruik maken door een e-mail naar het bestuur te zenden. Je ontvangt dan een kortingscode waarmee je je kaart kunt kopen.

CSS Day vindt dit jaar plaats op donderdag 8 en vrijdag 9 juni in de Zuiderkerk in Amsterdam.

Herfstblaadjes zien

---

Maurice Merleau-Ponty, Het Zichtbare en het Onzichtbare (1968)

[...] als we ons afvragen wat dit wij is, wat zien is en wat ding of wereld is, komen we terecht in een labyrint van moeilijkheden en tegenstrijdigheden.

Wat Sint-Augustinus zei over de tijd — dat het voor iedereen volkomen bekend is, maar dat niemand van ons het aan de anderen kan uitleggen — moet ook van de wereld worden gezegd.

Afgelopen herfstvakantie was ons gezin op vakantie in de Duitse Eifel. Ons zoontje Sam was 16 maanden oud, en naast rondgesjouwd worden in de schouderdrager wilde hij graag ook zelf stukjes lopen. Sam houdt niet van schoenen, en wanneer hij deze (onder luid protest) wél aan moet, gaat hij liever kruipen dan lopen. Dus dan maar op blote voeten.

Een foto genomen op een asfalt bospad, dat zich uitstrekkend in de verte met een flauwe bocht naar rechts beweegt. Aan de linkerkant een heuvelrand, begroeid met bomen en struiken. Rechts een vangrail waarachter meer bomen te zien zijn. Het pad is bezaaid met herstbladeren. Een drietal personen, 2 volwassenen (man, vrouw) en een klein kind wandelen over het pad, met hun rug naar de camera. De man houdt het linkerhandje van het kind vast, in de rechterhand houdt het kind een herfstblaadje. De vrouw draagt een rode messenger-bag, donkere hoodie en spijkerbroek. De man draagt een platte pet, bruine jas en spijkerbroek. Het kind kijkt naar achter richting de camera, de volwassenen hebben hun blik op het kind gericht.

Aan de wandel op blote voeten. Foto: auteur.

Blaadjes zien

Tijdens deze wandelingen is elk gevallen herfstblaadje interessant. Voortdurend wordt het huidige opgeraapte blaadje verwisseld voor een ander blaadje dat de aandacht trekt. Sommige worden in stukjes gescheurd, andere blaadjes worden vluchtig bekeken en weer weggegooid.

Wandelingen verlopen langzaam op deze manier, maar om hem zo op zijn gemak bezig te zien met een veelvormigheid aan herfstblaadjes deed me wel afvragen: hoe ontvouwt de werkelijkheid zich voor Sam? Wat maakt juist die blaadjes interessant? Hoe ervaart hij de wereld om zich heen? En hoe heeft deze bewuste ervaring zich gevormd vanuit de “great blooming, buzzing confusion” aan indrukken waarover de psycholoog William James in 1890 schreef?

William James, The Principles of Psychology (1890)

… any number of impressions, from any number of sensory sources, falling simultaneously on a mind which has not yet experienced them separately, will fuse into a single undivided object for that mind. The law is that all things fuse that can fuse, and nothing separates except what must. … The baby, assailed by eyes, ears, nose, skin, and entrails at once, feels it all as one great blooming, buzzing confusion; and to the very end of life, our location of all things in one space is due to the fact that the original extents or bignesses of all the sensations which came to our notice at once, coalesced together into one and the same space. There is no other reason than this why "the hand I touch and see coincides spatially with the hand I immediately feel."

Ontwerpen keuren

Vanuit mijn werk in digitale toegankelijkheid word ik soms gevraagd om een ontwerp te keuren. Vaak zijn dit ontwerpen van websites, af en toe een app. Meestal binnen omgevingen zoals Figma, Invision of Adobe XD, maar ook in vroegere stadia zoals creative exploration of abstracte wireframes. De manier waarop ik naar ontwerpen probeer te kijken doet me denken aan hoe Sam misschien wel naar de wereld kijkt.

Zien

In zijn onvoltooide werk “Gedachten” — Pensées — schrijft de wiskundige, natuurkundige en filosoof Blaise Pascal over twee manieren van het benaderen van de werkelijkheid: het meetkundige denken, “l’espirit de géométrie”, en het fijne inzicht, “l’espirit de finesse”.

Blaise Pascal, Pensées, (1669)

🇫🇷 Il y a beaucoup de différence entre l'esprit de géométrie et l'esprit de finesse. En l'un les principes sont palpables, mais éloignés de l'usage commun ; de sorte qu'on a peine à tourner la tète de ce côté-là, manque d'habitude : mais pour peu qu'on s'y tourne, on voit les principes à plein ; et il faudroit avoir tout à fait l'esprit faux pour mal raisonner sur des principes si gros qu'il est presque impossible qu'ils échappent.

🇳🇱 Verschil tussen het meetkundige denken en het fijne inzicht. Bij het eerste zijn de beginselen tastbaar, doch liggen buiten het dagelijkse leven, zodat men moeite heeft zijn hoofd in die richting te wenden omdat men dat niet gewoon is: men hoeft er slechts op te letten en men ziet de beginselen duidelijk. En men zou al helemaal een onverstandig mens moeten zijn om verkeerd te redeneren vanuit beginselen, die zo alledaags zijn dat het haast onmogelijk is eraan voorbij te zien.

De geometrische geest denkt voornamelijk vanuit principes, oorzaken, gevolgen, en verbanden. Geometrisch denken maakt scheidingen tussen zaken, deelt in vakken, tekent lijnen.

De verfijnde geest denkt voornamelijk vanuit intuïtie. Het ervaren van zaken die niet per definitie duidelijk zijn voor anderen. Verfijnd denken omvat en combineert.

Bashō en Tennyson

Dit verschil tussen meetkundig en verfijnd denken wordt prachtig uitgedrukt in de manier waarop de Japanse dichter Matsuo Bashō en de Britse dichter Lord Alfred Tennyson (19e eeuw) spreken over het zien van een bloem:

Matsuo Bashō (17e eeuw)

🇯🇵 Yokoe mireba

nazoena hana sakoe

kakine kana

🇳🇱 Zie toch eens hoe het

Herderstasje bij die heg

in bloei staat; oh, kijk..!

Lord Alfred Tennyson (19e eeuw)

🇬🇧 Flower in the crannied wall,

I pluck you out of the crannies,

I hold you here, root and all, in my hand,

Little flower — but if I could understand

What you are, root and all, and all in all,

I should know what God and man is.

🇳🇱 Bloem in de gebarsten muur,

Ik pluk je de spleten uit.

Hier houd ik je in mijn hand, wortel en al

Klein bloemetje – kon ik maar bevatten

wat je bent, wortel en al, en al in al,

dan zou ik weten wat God en de mens is.

In beide gedichten staat het zien van — de ervaring van, de ontmoeting met — een bloem centraal. Maar de manier waarop de schrijvers een bloem ervaren verschilt sterk. Er is verwondering te lezen in beide gedichten, maar waar Bashō aanschouwt en uitnodigt, begint Tennyson met geometrie: het pakken van de bloem en daaruit te willen analyseren om uiteindelijk te willen begrijpen.

Niet zien

Beide gedichten over de bloem veronderstellen de aanwezigheid van de bloem. Dat deze is waargenomen. En hoewel ik bij het keuren van een ontwerp me probeer te realiseren wat ik zie, is het weten wat ik niet zie — en waarom — evenmin zo belangrijk. Denk bijvoorbeeld aan fenomenen zoals Banner Blindness.

Wat we waarnemen is al het product van onbewuste selecties: van alle optische zenuwsignalen die onze visuele cortex bereiken is er gewoonweg te veel om alles te verwerken. Er wordt geselecteerd op wat er voor ons relevant is, en dat wordt primair gestuurd vanuit onze doelen.

Neem het beroemde experiment waarbij er een video getoond werd waarin twee groepen mensen elkaar een basketbal toespeelden. Een groep droeg donkere t-shirts, de andere groep witte. De toeschouwers hadden een doel: ze moesten het aantal keren tellen dat de bal tussen personen met een wit t-shirt werd gepasseerd. Halverwege de video liep er een vrouw in een gorilla-pak in beeld, richtte zich naar de camera, imiteerde een gorilla door zichzelf op de borst te slaan, en liep verder. De helft van de toeschouwers bleek later de “gorilla” niet te hebben gezien.

Een scene van een ruimte: op de achtergrond 3 liften. Verspreid door de ruimte staan verscheidene mensen in witte en zwarte t-shirts. Twee mensen in witte t-shirts staan dichtbij de camera, naar elkaar toe gericht. De rechterpersoon is licht door de knieën gebogen en houdt een bruine basketbal vast. In het midden van de ruimte staat een persoon in een gorillapak, kijkend naar de camera.

Een frame uit de video die bij een van de selectieve-aandacht experimenten werd gebruikt.

Daniel Simons & Christopher Chabris, Gorillas in our midst: Sustained inattention blindness for dynamic events (1999)

Approximately half of observers fail to notice an ongoing and highly salient but unexpected event while they are engaged in a primary monitoring task. This extends the phenomenon of inattentional blindness by at least an order of magnitude in the duration of the event that can be missed.

De selectieve perceptie binnen ons bewustzijn fungeert als een zoeklicht — de fenomenoloog Edmund Husserl noemde dit het Ichlicht, de “ik-lamp”: ons bewustzijn is altijd ergens op gericht, en daardoor zien we andere dingen niet, zoals het experiment demonstreert.

Het komt ook voor dat we meer in staat geraken om dingen waar te nemen doordat anderen dit doen. Een mooi voorbeeld hiervan is dat de ontdekking van de onverwachte planeet Uranus leidde tot meer ontdekkingen door een verschuiving van het mentaal kunnen kijken naar de werkelijkheid:

Eviatar Zerubavel, Hidden in Plain Sight (2015)

It was William Herschel’s discovery of Uranus in 1781, for example, the first discovery of a hitherto unknown planet in several millennia, that made astronomers mentally ready to notice additional ones, 67 as evidenced by the exceptionally rapid successive discoveries of the hitherto undetected four largest asteroids by three different astronomers between 1801 and 1807.

Hoe de mogelijkheid tot zien en niet-zien door cultuur en opvoeding kan worden beïnvloed, wordt ook prachtig beschreven door de taalkundige en oud-missionair Daniel Everett in het boek “Don’t Sleep, There Are Snakes”. Hierin vertelt hij over zijn leven bij de Amazoniaanse Pirahã stam:

Daniel Everett, _Don’t Sleep, There Are Snakes: Life and Language in the Amazonian Jungle (2008)

It was still around seventy-two degrees, though humid, far below the hundred-degree-plus heat of midday. I was rubbing the sleep from my eyes. I turned to Kohoi, my principal language teacher, and asked, "What's up?" He was standing to my right, his strong, brown, lean body tensed from what he was looking at.

"Don't you see him over there?" he asked impatiently. "Xigagai, one of the beings that lives above the clouds, is standing on the beach yelling at us, telling us he will kill us if we go to the jungle."

"Where?" I asked. "I don't see him."

"Right there!" Kohoi snapped, looking intently toward the middle of the apparently empty beach.

"In the jungle behind the beach?"

"No! There on the beach. Look!" he replied with exasperation.

In the jungle with the Pirahas I regularly failed to see wildlife they saw. My inexperienced eyes just weren't able to see as theirs did.

But this was different. Even I could tell that there was nothing on that white, sandy beach no more than one hundred yards away. And yet as certain as I was about this, the Pirahas were equally certain that there was something there. Maybe there had been something there that I just missed seeing, but they insisted that what they were seeing, Xigagaí, was still there.

Everyone continued to look toward the beach. I heard Kristene, my six-year-old daughter, at my side.

"What are they looking at, Daddy?"

"I don't know. I can't see anything."

Te veel zien

De ervaring van Everett bij de Pirahā is vergelijkbaar met het probleem binnen AI en computerzicht: AI beeldherkenning is notoir slecht in het herkennen van zaken die voor de AI niet of onduidelijk bestaan. Net zoals Everett Xigagaí gewoonweg niet kan zien (en de Pirahã vergelijkbaar verkeerssignalen en markeringen niet zagen toen enkelen van hen met Everett naar een nabijgelegen stad reisden) is een AI engine niet in staat om dingen te zien die het model niet begrijpt of kent.

Dit “begrip van de wereld” probleem is onderdeel van het Frame Problem. De cognitief wetenschapper en filosoof Daniel Dennett schrijft over de opgave om een AI systeem te bouwen wat op elk moment uit de werkelijkheid die het ervaart de juiste patronen weet te herkennen, en conclusies te trekken zonder in eindeloze verwerking terecht te komen waarbij de juiste aannames over de wereld worden gebruikt. Dennett beschrijft op humoristische wijze hoe een voor mensen relatief eenvoudige taak als een boterham smeren voor een AI een onoverkomelijk moeilijk probleem kan zijn. Hoe weet de AI (met zogenaamde AGI - “algemene intelligentie”) dat het temperatuurverschil in de kamer waar het zich bevindt niet relevant is voor de opdracht die het moet uitvoeren — of het feit dat er op dat moment geen olifanten in de buurt zijn?
Een model als GPT-3 is tot indrukwekkende resultaten in staat, maar handelt exclusief binnen het gebied van taalkundige verwerking en valt daardoor onder narrow AI.

Daniel Dennett, Cognitive Wheels: The Frame Problem of AI (1984)_

What is needed is a system that genuinely ignores most of what it knows, and operates with a well-chosen portion of its knowledge at any moment. Well-chosen, but not chosen by exhaustive consideration. How, though, can you give a system rules for ignoring - or better, since explicit rule-following is not the problem, how can you design a system that reliably ignores what it ought to ignore under a wide variety of different circumstances in a complex action environment?

En hoewel wij mensen er in vergelijking met AI vreselijk goed in zijn om de complexe werkelijkheid tot de voor ons relevante patronen terug te brengen — iets dat we ons zelden beseffen — probeer ik me er bij het keuren van een ontwerp van bewust te zijn dat ik in patronen en heuristiek naar een ontwerp kijk, en dat dit voor anderen kan verschillen. Ik probeer te schakelen in de manier waarop ik naar het ontwerp kijk, en me voor te stellen hoe dit voor anderen en hun context en doelen zou kunnen zijn. Ik probeer te schakelen tussen manieren van waarnemen, á la Pascal.

Anders zien

Als ik naar de Grand Canyon kijk, kan ik dit op meerdere manieren zien. Als enorm ravijn, als scheur in een landschap, en als doorsnede van een vreselijk oude planeet.

Een rij van 3 foto’s van de Grand Canyon. De meest linkse is een hoog genomen luchtfoto, waarin de GC als scheur door het landschap trekt. De middelste foto is genomen vanaf de rand van een plek in de GC, een groot ravijn tonend waar onderin een rivier loopt. De rechtse foto toont een wand van de GC waarin de verscheidene aardlagen duidelijk zichtbaar worden.

Meerdere manieren om naar de Grand Canyon te kijken.

Als toeristen-attractie. Als geologisch fenomeen. En ga zo maar door.

Wanneer ik zo actief aan het perception-switchen ben merk ik dat het me helpt om een ontwerp anders te zien, en me beter voor te stellen hoe een gedeelte verkeerd begrepen zou kunnen worden, of onduidelijk is. Ik probeer dingen terug te brengen tot hun essentie, tot datgene wat ze maakt dat ze zijn. Van knop, tot navigatiebalk, tot blogpost.

Wat maakt bijvoorbeeld dat een knop een knop is? Dat is geen eenvoudige vraag. Om Pascal er weer bij te halen: je kunt een vraag als deze beantwoorden via het meetkundige denken — de plaats, contrast, tekst, grootte — maar ook met de verfijnde geest: waarom vind ik dit een knop?

Hart & Hegeman Manufactoring Corporation, Push Switch (1905)

First and foremost, buttons should easily bend to the will of their operators; they should cause no difficulty for pressers …

Een horizontale serie afbeeldingen van verschillende knoppen. Van links naar rechts: een fysieke drukknop van plastic met groot rond drukvlak; een tekst-knop gemaakt van zwarte tekst "<Apply>" op grijze achtergrond; een grafische knop met zwarte gecentreerde tekst "OK" op grijze achtergrond; een blauwe knop met zwarte gecentreerde tekst "Button", waarbij de knop ronde hoeken heeft en een diepte-effect vertoont; een knop met paars-blauw-groen gradient achtergrond en de zwarte gecentreerde tekst "button".

Maar vergeet het experiment met de gorilla niet: we bekijken, filteren en verwerken de werkelijkheid afhankelijk van onze doelen. Dus ook: verwacht ik daar een knop?

Een “plek om van af te vallen” en een “plek om van af te stappen”

In zijn boek “The Ecological Approach to Visual Perception” schrijft psycholoog James Gibson (bekend van het begrip affordance, hoewel deze term is terug te voeren naar Kurt Lewin’s "Aufforderungscharakter”) onder andere over hoe wezens de omgeving om hen heen waarnemen:

James Gibson, The Ecological Approach to Visual Perception (1979)

A brink, the edge of a cliff, is a very significant terrain feature. It is a falling-off place. It affords injury and therefore needs to be perceived by a pedestrian animal. The edge is dangerous, but the near surface is safe. Thus, there is a principle for the control of locomotion that involves what I will call the edge of danger and a gradient of danger, that is, the closer to the brink the greater the danger. This principle is very general.

A step, or stepping-off place, differs from a brink in size, relative to the size of the animal. It thus affords pedestrian locomotion. A stairway, a layout of adjacent steps, affords both descent and ascent. Note that a stairway consists of convex edges and concave corners alternating, in the nomenclature here employed.

Deze manier van de omgeving waarnemen — als iets dat faciliteert: af-vallen, of af-stappen — probeer ik ook toe te passen op de manier waarop ik naar een ontwerp of een interface kijk. Dat betekent concreet dat ik probeer te zien wat het element van de interface betekent voor mij als gebruiker.

Dus niet alleen sign-up-formulier, maar ook uitnodiging om lid te worden, en plek om informatie te delen. Niet alleen link, ook navigatie, verplaatsing, en in het geval van bijvoorbeeld een link “view comments” ook interpretaties als “plek met bijdragen”, waaruit wellicht de vraag komt of het relevant is dat de hoeveelheid comments er bij wordt vermeld, en waarom er comments mogelijk zijn, hoe dat past in de rest van de interface, en zo verder.

Een foto van een baby die richting een vrouw kruipt. De baby kruipt binnen een houten vierkante frameconstructie met glazen bodem waarvan de helft door een geblokt patroon bedekt is. De vrouw staat buiten het houten frame en nodigt de baby lachend uit om naar haar toe te kruipen. De baby is bijna halverwege en begint de doorzichtige helft van de ondergrond te bereiken.

Een foto van het “Visual Cliff” experiment van Eleanor J. Gibson uit 1960. Is het een plaats om af te vallen, of af te stappen? Het doel van het kind is uiteindelijk om de moeder te bereiken. Hoe ervaart het kind de werkelijkheid?

Deze “reducerende geest” die voortdurend de vraag stelt “waar kijk ik naar, en welke ervaring heb ik hierbij?” is terug te vinden in de kunsten. Zie bijvoorbeeld hoe een tronie) zoals het Meisje met de Parel een grotere gelijkenis vertoont met de zintuigelijke ervaring, terwijl het kubisme van Picasso experimenteert met herkenbaarheid, vormen en patronen. De Black Square van Malevich en Composition II in Red, Blue and Yellow van Mondriaan stellen ons steeds weer de vraag over wat het is om naar pure vormen, lijnen en kleuren te kijken en wat dit met ons doet.

Een iconische meubel zoals de Zig-Zag Stoel van Rietveld doet dit vergelijkbaar. We zien waarschijnlijk dat het een stoel is. Maar waarom? Wanneer is dit niet langer het geval? Voor wie is dit geen herkenbare, of zelfs bruikbare stoel?

5 afbeeldingen in een horizontale rij. 1: een schilderij van een jong blank meisje, en profil in linkerrichting. Ze draagt een blauw met gele tulband, haar gezicht lichtjes naar de camera gedraaid. Ze draagt een kleine parel in haar linker-oor. 2: een cubistische weergave van een vrouw die een mandoline bespeelt. 3: een zwart vlak omlijnd door een wit vlak in de ratio 1:3. 4: Een grid met meerdere vierkanten in verscheidene groottes. 3 zijn gekleurd: rechtsboven (rood), rechtsonder (geel) en linksonder (blauw). De anderen zijn wit, en elk vierkant is gescheiden van het andere door een dikke zwarte lijn. 5: een houten stoel samengesteld uit 4 vierkante platen die aan elkaar bevestigd zijn zodat 1 platte de "voet" vormt, 1 platte het zitvlak, 1 staande de rugleuning, en 1 verbindt het zitvlak en voet.

Van links naar rechts: Meisje met de Parel, Johannes Vermeer; Girl with a Mandolin, Pablo Picasso; Black Square, Kazimir Malevich; Composition II in Red, Blue, and Yellow, Piet Mondriaan; Zig-Zag Stoel, Gerrit Rietveld.

Dit raakt aan zowel ontologie) — de categorieën van het Zijn — als aan fenomenologie: wat is het om te ervaren? Welke categorieën en beelden komen in ons op wanneer we kijken, wanneer we lezen?

Merels zien

Wallace Stevens, Thirteen Ways of Looking at a Blackbird [stanzas I, II, VII] (1954)

Among twenty snowy mountains,

The only moving thing

Was the eye of the blackbird.

---

I was of three minds,

Like a tree

In which there are three blackbirds.

---

O thin men of Haddam,

Why do you imagine golden birds?

Do you not see how the blackbird

Walks around the feet

Of the women about you?

Goede kans dat tijdens het lezen van deze 3 stanza’s er allerlei beelden door je hoofd schoten. Van bergen, vogels, bomen en meer. Hoe zagen die bomen er uit?

Binnen de cognitieve psychologie wordt een mentale categorie (zoals “vogel”) een concept genoemd. In het geval dat je je een voorstelling maakt van een voorbeeld binnen de categorie heet dit een prototype. Deze worden beïnvloed door je ervaringen: binnen de categorie “vogel” zul je eerder aan een kraai, roodborstje, meeuw of adelaar denken dan aan een pinguïn.

Binnen de fenomenologie is dit vergelijkbaar met de essentie van een ding: de fundamentele manier waarop het in je bewustzijn bestaat. Wanneer je bijvoorbeeld over een boom nadenkt, heeft die boom in je bewustzijn meerdere dimensies. Een voorkant, een achterkant. Ook al is de fysieke boom waar je naar kijkt op dat moment voor jou alleen van 1 kant te bekijken.

En ook al mocht je niet naar een daadwerkelijke boom kijken — misschien is het wel een als boom verklede front-end ontwikkelaar — in je bewustzijn is de essentie van het ding nog steeds een boom.

Dit alles geldt ook voor een knop. Een navigatiebalk. Een invoerformulier. Wanneer je aan een “OK knop” denkt, heb je daar een bepaald beeld en verwachting bij. Bij het doelmatig verkennen van een ontwerp filter je daar op. Zoals je op zoek gaat naar dat éne stukje Lego. Zo probeer ik me bij het keuren van een ontwerp ook nadrukkelijk bewust te zijn van de onbewuste verwachtingspatronen die ik hanteer. Paradoxaal als dat klinkt.

Ludwig Wittgenstein, Filosofische Onderzoekingen (1953) (geparafraseerd)

De aspecten van de dingen die voor ons het meest belangrijk zijn blijven ons door hun eenvoud en alledaagsheid verborgen. (Je merkt het niet op — omdat je het altijd voor ogen hebt.) De echte grondbeginselen van ons onderzoek vallen ons niet op.

Symbolen zien

Tijdens het kijken naar een ontwerp komen er veelvuldig symbolen en iconen voorbij. Ik probeer me hierbij bewust te zijn van de cultuursemiotiekwaarom ik bepaalde symbolen kan interpreteren — en tot in hoeverre de symbolen kunnen bijdragen aan de begrijpbaarheid van het ontwerp. En hoewel het ▶️ ”play” symbool binnen de context van een video bijna universeel begrepen wordt, geef ik er nog steeds de voorkeur aan om er tekst bij te plaatsen. Andersom kunnen symbolen de begrijpbaarheid van tekst vergroten:

Susan B. Barnes: An Introduction to Visual Communication: From Cave Art to Second Life (2nd edition) (2011) - mijn nadruk.

Today, people are more visually wired. They follow directions with text and graphics 323% better than with text alone. Images are also more persuasive. … In electronic contexts—including computer screens, the World Wide Web, multimedia environments, and virtual reality—the use of visual icons can be compared to written language because visual icons execute computer commands […] understanding the relationship between iconic desktops and physical ones is a key concept behind user-friendly metaphors.

Masoud Yazdani, Iconic Communication [chapter 6: Communication Through Icons, by Philip Barker and Paul van Schaik] (2000)

The argument that we should consider the combination of text and icon as a solution to our communicative objective may be a positive step forward. Is it not true that we see in our everyday life people combining spoken language with gestures, hand and eye movements, intonational variations?

Kom en zie

Uiteindelijk beschouw ik het keuren van een ontwerp als een existentiële handeling. Het vertelt me iets over een ander, of anderen: zij die het ontwerp tot stand brachten. Het zegt iets over hun kijk op de wereld, en hoe een spectrum van mogelijke doelen door hen naar een ontwerp wordt vertaald.

Tegelijkertijd vertelt het me ook over mijzelf: de dingen die ik zie (of niet zie) bij het ervaren van het ontwerp. Het schrijven van het rapport dwingt me om deze ervaring — en de daaruit voortvloeiende observaties — in concrete taal op te schrijven. Om na te denken over datgene waar ik precies naar kijk en hoe ik tot die conclusie kom.

Zo gezien (sorry) is ontwerp-keuring een voortdurende dialoog op meerdere aspecten. Een dialoog met een toekomstig gebruiksscenario: wat kan hier misgaan? En op welke manieren en waardoor? Welke perspectieven kan ik hanteren om het ontwerp anders te zien? Van welke dingen ben ik me misschien minder of niet bewust?

James Gibson

One sees the environment not with the eyes but with the eyes-in-the-head-on-the-body-resting-on-the-ground.

Wat we zien, en niet zien. De herfst, het bos, het asfaltpad. Je vrouw. Je zoontje. Blote voetjes. Een vuistje met herfstblaadje.

Hoe ik dit alles concreet toepas tijdens het samenstellen van een keuringsrapport schrijf ik in een vervolg. 🍂

---
Met dank aan Dick Verstegen. Alle afbeeldingen via Wikipedia behalve wanneer anders vermeld.

A Design Token Carol

Design Tokens implementeren. Waarom zou je eraan willen beginnen? Welke mogelijkheden zijn er? En wat komt men zoal tegen tijdens de implementatie ervan?

Het is bijna kerst en als ik denk aan kerst, denk ik aan ‘A Christmas Carol’ van Charles Dickens. Eigenlijk denk ik dan ook altijd aan Harry Potter. Elke kerst kijk ik weer een keer alle Harry Potter films. Maar omdat Harry’s Design Tokens niet zo lekker klinkt en ik 7 delen wat lang vind houd ik het bij de 3 delen van ‘a Christmas Carol’. En met dat kerstverhaal in gedachten, schrijf ik dit verhaal met behulp van de 3 design token geesten:

  1. De geest van de tijd toen we nog niet wisten wat design tokens waren
  2. De geest van de huidige tijd nu we design tokens implementeren
  3. De geest van de toekomst die ons laat zien wat we met design tokens kunnen bereiken

De tijd toen we nog niet wisten wat design tokens waren

De eerste geest neemt ons mee naar de tijd toen we nog niet wisten wat design tokens waren.

  • Toen gebruikten we nog SCSS- en CSS variabelen door elkaar heen.
  • We hadden variabelen voor alle design system kleuren. We hadden ook al variabelen voor lettertypen en scherm groottes. Maar nog niet voor de verschillende lagen, maatvoering en schaduwen van componenten.
  • Bij een rebranding werden er nieuwe kleurnamen bedacht met nieuwe waardes. En dan was het een stoelendans om de nieuwe kleuren op de verouderde kleuren te plotten en ervoor te zorgen dat het design system in overeenstemming met oudere versies bleef.

Er miste nog iets; een structuur voor de benaming van de kleinste herbruikbare onderdelen van het design system. Een methode om die onderdelen te definiëren en te gebruiken in elke technische implementatie. Met als doel de technische implementatie(s) zo agnostisch, droog(DRY) mogelijk en direct overal te kunnen updaten wanneer er wijzigingen zijn.

Voor die redenen zijn Design Tokens bedacht. Design Tokens zijn de kleinste ondeelbare delen van een design system zoals kleuren, tussenruimte en lettergrootte. Design tokens zijn gecreëerd door het Salesforce design system team, en de naam is ook door dat team bedacht.

@jina (1 van de bedenkers) op Twitter

Design Tokens are a methodology. IMHO, saying "design tokens are just variables" is like saying "responsive design is just media queries". It's a technology-agnostic architecture and process for scaling design across multiple platforms and devices, including native, and more.

In 2019 is ‘The Design Tokens Community Group’ opgericht. Het doel van deze groep is om standaarden te creëeren, waarop producten en design software kunnen steunen voor het delen van de styling onderdelen van een design system.

Vandaag

De tweede geest neemt ons mee naar het nu. De tijd waarin we bezig zijn om design tokens te implementeren. Design Token standaarden zijn nog niet definitief. En tot die tijd zijn er verschillende mogelijkheden om uit te kiezen en om mee te werken. De opbouw en stappen die men daarin volgt zijn overal wel hetzelfde:

1. Structuur en Opbouw

Er zijn verschillende manieren om de taxonomie van design tokens in te richten. Zo een structuur zorgt ervoor dat wanneer (nieuwe) tokens geïntroduceerd worden deze dezelfde opbouw hebben. Een voorbeeld vind je in de afbeelding hieronder. Daar bestaat een token altijd uit een design system naam en categorie en zal een token meestal ook een modifier bevatten.

Een voorbeeld van een structuur van de naamgeving van design tokens

Bron: https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676

2. Naamgeving

Elk design system dat ik ben tegen gekomen hanteert weer andere conventies voor de naamgeving van tokens. Zo maakt Adobe Spectrum gebruik van de volgende type tokens en lagen: (Zie afbeelding).

  • globale tokens als basis voor andere tokens zoals bijvoorbeeld een kleur: blue-400
  • alias tokens t.b.v. een activiteit of andere toepassing zoals cta-background-color (cta staat hier voor call to action)
  • component specifieke tokens zoalsbutton-cta-background-color

De naamgeving die Adobe Spectrum hanteert

Bron: https://spectrum.adobe.com/page/design-tokens/#Design-token-types

Salesforce hanteert een iets andere structuur. Ze hebben bijvoorbeeld 2 type tokens en hanteren een andere naamgeving zoals bijvoorbeeld voor kleur: $palette-blue-95 die als basis dient voor $brand-background-primary . En Shopify hanteert ook een eigen structuur. En die heeft bijvoorbeeld gekozen voor de term interactive in plaats van de afkorting for call to action en houdt het bij 1 token: p-interactive.

Welke conventie ook gekozen wordt, leg eerst met het team een aantal voorbeelden vast. Op die manier zorg je ervoor dat de kans op miscommunicatie en misverstanden verkleint.

3. Notatie en Verspreiding

Afhankelijk van hoeveel developers/designers design tokens gaan gebruiken, zijn er verschillende keuzes voor het vastleggen van design tokens. Als de tokens gebruikt gaan worden door een kleine groep die allemaal CSS gebruikt kan het voldoende zijn de tokens alleen als CSS variabelen vast te leggen. Je kunt zelfs overwegen design software in te zetten als compiler voor je tokens. Zowel Figma als Sketch bieden de optie design tokens vanuit je design om te zetten naar CSS variabelen of een JSON bestand. Als de gebruikers groep groter is en ook gebruikt maakt van verschillende technieken zoals SCSS of Flutter dan is het wellicht handiger een standaard notatie als JSON te gebruiken en zelf een compiler te bouwen. Of om een package als Style Dictionary te implementeren die het voor je naar elk gewenst formaat kan omzetten.

De Toekomst

De laatste geest van vandaag neemt ons mee naar de toekomst. In de toekomst is er 1 standaard voor het vastleggen en verspreiden van design tokens; de Design Token(DT) Standaard. De DT Standaard is in 2025 ontwikkeld en gepubliceerd door de Design Token community groep. Via elke design software kunnen designers de design tokens van hun merk veilig publiceren en kunnen de design tokens via die weg in elke applicatie worden gebruikt. Wanneer een designer een token update en opslaat is dat direct te zien in de applicaties die gebruik maken van de tokens.

Wil je op de hoogte gehouden worden van die toekomst of bijdragen eraan? Ga dan naar de Design Token community groep. Wil je af en toe gezellig mee praten over UI en UX op Fronteers Slack? Join dan de channel #ui-ux.