Kun "se sininen juttu" ei enää riitä – UI-terminologian merkitys

Olemme kaikki olleet siinä tilanteessa. Olet kokouksessa, yrität selittää bugia, ja sanot jotain tyyliin "se sininen juttu napin vieressä" sen sijaan, että sanoisit "lisäyskursori" tai "laajennuskolmio". Kehittäjä pöydän toisella puolella nyökkää kohteliaasti, mutta ei ymmärrä tuon taivaallista.

Tämä ei ole vain pieni harmi. Tekoälyavusteisen kehityksen aikakaudella tarkkuus on tärkeämpää kuin koskaan. Kun kirjoitat kehoteita koodaaville agenteille, epämääräiset kuvaukset tuottavat epämääräisiä tuloksia. Kirjoitat "tee tuo pudotusvalikko siistimmäksi" ja saat juuri sitä mitä pyysit – sekasotkun. Kirjoitat "tyylittele combobox selkeällä tyhjennysnapilla ja sopivalla fokusointikehyksellä" ja tekoälyavustajasi toimittaa yllättäen juuri sitä mitä tavoittelit.

Terminologiakuilu

UI-suunnittelussa jokaisella elementillä on oma nimensä. Osa on intuitiivisia – nappi, valintaruutu, liukusäädin. Toiset taas ovat yllättävän tarkkoja ja omituisen hauskoja. "Traffic Lights" viittaa macOS:n ikkunan hallintapainikkeisiin eli niihin punaisiin, keltaisiin ja vihreisiin ympyröihin. "Bento Grid" kuvaa modernia asettelua, jossa on erikokoisia laattoja. "Scrim" on puolestaan sen läpikuultavan kerroksen tekninen nimi, jonka näet modaalin takana.

Kuilu arkikielen ja oikean terminologian välillä aiheuttaa oikeita ongelmia. Suunnittelijat ja kehittäjät puhuvat usein toistensa ohi. Sivustouhmat pyytävät "sitä ilmoitusjuttua, joka pomppaa esiin" kun he tarkoittavat "toastia" tai "snackbaria" – ja kyllä, nämä ovat eri asioita erilaisilla käyttötapauksilla.

Miksi tämä on tärkeää tekoälykoodaukselle?

Jos käytät tekoälyavusteisia koodausapureita (ja olkaamme rehellisiä – jos et vielä käytä, tulet käyttämään), valitsemasi sanat vaikuttavat suoraan saamaasi koodiin. Ajattele asiaa näin: modernit UI-kehykset sisältävät tuhansia komponentteja. Kun kuvaat mitä haluat, olet käytännössä kääntämässä visiosi kehotteeksi, jonka tekoäly tulkitsee.

Kehote "add a segmented control with an active state" tuottaa huomattavasti parempia tuloksia kuin "se välilehtimäinen juttu missä yksi on valittuna". Tekoäly ei arvaile aikeitasi – se seuraa kuvaustasi. Tarkempi sanasto tarkoittaa vähemmän toistoja, vähemmän edestakaisin käymistä ja koodia, joka todella vastaa mielikuvaasi.

Ilmeisimmän tuonpuoleisuus

Jotkut UI-termat ovat ihastuttavan tarkkoja. "Visual Effect Material" eli "Vibrancy" viittaa siihen läpikuultavaan, sumennettuun tehosteeseen, jota macOS käyttää läpi käyttöliittymänsä. "Easing" eli "timing functions" säätelevät animaatioiden tuntua – olivatpa liikkeet teräviä, pomppahtavia tai pehmeitä. Nämä eivät ole pelkkiä pikkutarkkoja erotteluja; ne edustavat eroa mekaanisten ja elävien käyttöliittymien välillä.

Toiset erot ovat yllättävän tärkeitä saavutettavuuden kannalta. "Focus Ring" ei ole vain visuaalinen vihje – se on tapa, jolla näppäimistökäyttäjät navigoivat. Sen ymmärtäminen, että :focus-visible käyttäytyy eri tavalla kuin tavallinen fokusointimerkki, on valtavan tärkeää kun rakennetaan inklusiivisia sovelluksia.

Oman UI-sanaston rakentaminen

Sinun ei tarvitse painaa mieleen jokaista termiä visuaalisesta sanakirjasta parantaaksesi työtäsi. Aloita pienesti. Valitse kolme elementtiä, jotka sekoitat säännöllisesti – ehkä popoverit ja pudotusvalikot, tai tooltikit ja hover-kortit. Sen ymmärtäminen, milloin kutakin käytetään, muuttaa komponenttivalintasi arvailusta tietoiseksi suunnitteluksi.

Todellinen muutos tapahtuu kun terminologia muuttuu osaksi suunnittelu- ja kehityssanastoasi. Sen sijaan että sanoisit "se juttu", alat sanomaan "koonmuuton kahva" tai "scrim-peite" tai "popover-kontti". Yhtäkkiä kaikki pöydän ympärillä ymmärtävät täsmälleen mistä puhut.

Lopuksi

Nimien keksiminen on vaikeaa. Jopa legendaarinen Martin Fowler on myöntänyt, että nimeämiskäytännöt ovat ohjelmistokehityksen vaikeimpia osa-alueita. UI-elementit eivät ole poikkeus – olemme vuorovaikutuksessa niiden kanssa jatkuvasti, mutta harvoin pysähdymme oppimaan niiden oikeita nimiä.

Olipa kyse bugien selvittämisestä kehittäjän kanssa, kehotteiden suunnittelusta tekoälyavustajalle, tai yksinkertaisesti siitä kun yrität Googleta miksi CSS-animaatiosi näyttää väärältä, oikean terminologian tunteminen avaa nopeammat ratkaisut ja selkeämmän viestinnän.

Joten kun seuraavan kerran törmäät "siihen juttuun" käyttöliittymässä, pysähdy hetkeksi oppimaan sen oikea nimi. Tulevaisuuden sinä – ja kaikki joiden kanssa työskentelet – kiittävät.

Ja jos tarvitset nopean muistin: NameThatUI-projekti toimii kätevänä visuaalisena sanakirjana juuri tällaisiin hetkiin. Lisää se kirjanmerkkeihin. Käytä sitä. Viestintäsi paranee lähes välittömästi.