PARKSIDE-käyttöohjeetKatalogi, jota ei ollut olemassa

Rajapinta, jota ei voi selata

Lidlin manuaalihaku palauttaa enintään kolme tulosta kyselyä kohden, jättää huomiotta jokaisen sivutusparametrin eikä tarjoa listausreittiä lainkaan.

Tämä on suunnittelun kannalta ratkaiseva yksityiskohta. Rajapinta olettaa, että käyttäjä tietää jo mitä etsii: syötä tuotenumero, saat manuaalisi. Kaikki muut kysymykset — mitä tuotteita on olemassa, mikä näistä on uusin, mikä akku tähän käy — ovat rakenteellisesti vastaamattomia, koska mitään selattavaa pintaa ei ole.

Käyttöliittymän tehtävä ei siis ollut nopeuttaa hakua. Se oli tehdä olemassaolo näkyväksi. Kaikki myöhemmät päätökset seuraavat tästä.

Kenelle

Käyttäjä on työkalun omistaja tai sitä harkitseva — käytännössä kuka tahansa 20 V akkuekosysteemissä, joka yrittää selvittää mikä sopii mihin. Kolme kysymystä toistuvat:

• Mikä akku tähän käy? Alusta ei lue tuotteen nimestä, ja 40 V ei ole oma alustansa vaan kaksi 20 V kennostoa.
• Onko tämä uudempi kuin minun? Revisio (A1 → B2 → C4) kertoo sen, mutta vain saman mallin sisällä.
• Mitä laatikossa on? Nimi ei kerro: “Akkuiskuporakone­sarja” ei paljasta sisältyykö akku ja laturi.

Sivun tehtävä ei ole hakeminen. Sen tehtävä on tehdä olemassaolo näkyväksi.

Mikä on yksi rivi ruudulla?

Ennen kuin ruudukkoa voi piirtää, on päätettävä mitä yksi kortti tarkoittaa. Datassa on kolme eri identiteettiä, ja ne eroavat kertaluokan verran.

Sama akku esiintyy 29 eri tuotenumerolla — paljaana, laturin kanssa, osana sarjaa — ja jokaisella markkinalla on oma listauksensa. Jos kortti olisi listaus, sama työkalu täyttäisi ruudun kolmesti. Jos kortti olisi tuotenumero, akkua olisi 29 kappaletta.

Kortti on tuote. Se yhdistää kaksi eri päällekkäisyyttä kerralla, ja koska yhdistäminen on väite, korttiin kuuluu myös se mitä väite ei sano.

Ryhmittely ei ole puhdas sääntö. Mallikoodi ratkaisee valtaosan, mutta viisi poikkeusta on kirjattu käsin: kaksi listausta yhdistetty vaikka mikään koodi ei liitä niitä, yhdeksän pidetty erillään vaikka koodi on sama (PARS 4 A1 on sekä auton puhdistussetti että 4 V ruuvinväännin), lisävarusteita omille korteilleen, monen työkalun sarjat avattuina työkaluikseen, ja malli tunnistettuna yli markkinarajojen. Lyhyesti: tuote on malli ja revisio, paitsi silloin kun ihminen on sanonut toisin.

Layout

Yksi näkymä, ei reittejä. Suodattimet ylhäällä pysyvinä riveinä, ruudukko alla — koska kysymys “mitä on olemassa” vaatii, että vaihtoehdot ovat näkyvissä samaan aikaan tuloksen kanssa.

Yhdeksän päätöstä

Suunnittelupäätös ilman hylättyä vaihtoehtoa on mielipide. Nämä on kirjattu niin, että myöhempi minä — tai kuka tahansa muu — näkee mitä mitattiin ennen kuin valittiin.

Suodatus on sivun varsinainen käyttöliittymä

Ruudukko ei tee päätöksiä — se piirtää sen mitä jää jäljelle. Kaikki merkityksellinen tapahtuu suodatinriveillä, ja siksi niihin meni enemmän suunnittelua kuin mihinkään muuhun osaan sivua.

Kuusi riviä, kussakin yksi kysymys

Rivi ei ole datakenttä vaan kysymys. Sama tieto voisi olla jaettu monella tapaa; jako on tehty sen mukaan, mitä ihminen tulee kysymään.

Huomaa Käyttövoima-rivin sanamuoto. Se ei kysy “mikä tämän tekniikka on” vaan “mitä minun täytyy omistaa”. Siksi 40 V on oma sirunsa vaikkei se ole oma alustansa — se on kaksi 20 V kennostoa, ja siru sanoo sen ääneen — ja siksi painepesu ja puutarha ovat ryhmiä eivätkä käyttövoimia.

Rivin sisällä TAI, rivien välillä JA

Yhden rivin sirut ovat vaihtoehtoja samaan kysymykseen, joten useampi valinta laajentaa tulosta. Eri rivien valinnat ovat eri kysymyksiä, joten ne kaventavat sitä. Tämä on ainoa sääntö, joka käyttäjän täytyy oppia, eikä sitä kerrota missään — se opitaan lukuja katsomalla.

Laskuri jättää oman rivinsä laskematta

Tämä on koko suodatuksen tärkein yksityiskohta ja samalla se, joka on helpoin tehdä väärin. Kun lasketaan mitä Käyttövoima-rivin siru tuottaisi, kaikki muut rivit ovat voimassa — mutta käyttövoimavalintaa itseään ei huomioida. Muuten valitseminen nollaisi saman rivin muut vaihtoehdot, ja käyttäjä joutuisi umpikujaan, josta pääsee vain perumalla valintansa.

Mitkä ehdot ovat voimassa, kun kunkin rivin sirujen luvut lasketaan

Laskettava rivi	Markk.	Käyttöv.	Pakk.	Sarja	Rev.	Vuosi	Haku
Markkina	—	✓	✓	✓	✓	✓	✓
Käyttövoima	✓	—	✓	✓	✓	✓	✓
Pakkaus	✓	✓	—	✓	✓	✓	✓
Sarja	✓	✓	✓	—	✓	✓	✓
Revisio	✓	✓	✓	✓	—	✓	✓
Vuosi	✓	✓	✓	✓	✓	—	✓

Neljä kohtaa, jotka rikkovat symmetrian

Puhdas fasettimalli olisi siisti mutta valehtelisi datan luonteesta. Neljä poikkeusta on tehty tarkoituksella:

• Monijännitteinen työkalu näkyy jokaisessa perheessä, jonka se hyväksyy. 20 V radio, joka käy myös 12 V kennostolla, löytyy kummallakin sirulla — ei vain sirulla “monijännitteinen”. Se, mitä sinun täytyy omistaa, on kysymys johon on kaksi oikeaa vastausta.
• “Ei vuotta” istuu vuosirivissä, ei erillisenä valintana. Sen pyytäminen vuoden 2019 rinnalla antaa molemmat: vuosisiru on TAI, ja vuoden puuttuminen on yksi vastaus lisää samaan kysymykseen.
• Ryhmäliput eivät ole poissulkevia. Puutarha, painepesu ja kompressori kertovat mihin työkalu on tarkoitettu — eivät sitä, että se olisi jotain muuta kuin työkalu. Siksi ne eivät kilpaile pakkaustyyppien kanssa vaan elävät niiden rinnalla.
• “Tarvitsee tarkistuksen” on sirunsa käyttövoimarivissä, vaikkei se ole käyttövoima. Se on tuotteen sijaan väite tiedon laadusta — ja juuri siksi se kuuluu samaan riviin: se on vastaus kysymykseen “mikä tätä käyttää”, ja vastaus kuuluu “emme tiedä varmasti”.

Haku ei ole suodatin

Hakukenttä ja suodatinrivit näyttävät samalta työkalulta mutta käyttäytyvät eri tavalla, ja ero on tietoinen. Suodatin rajaa; haku nimeää.

• Pelkistä tuotenumeroista koostuva haku ohittaa suodattimet. Jos kirjoitat numeroita jotka arkisto tuntee, saat täsmälleen ne — vaikka aktiivinen suodatin sanoisi muuta. Nimeäminen on vahvempi aikomus kuin selailu.
• Jokaisen osan on oltava tunnettu tuotenumero. Muuten 2015 olisi ohitus eikä vuosiluku, jonka joku kirjoitti. Arkiston oma numeroalue 35391–550492 ratkaisee kumpi on kyseessä — sääntö tulee datasta, ei arvauksesta.
• Kaksi tai useampi tuotenumero on vertailu. Kortit pidetään tarkoituksella erillään sen sijaan että ne ryhmiteltäisiin — usean nimeäminen on nimenomaan pyyntö nähdä ne rinnakkain.
• Mallikoodit ovat hakukelpoista tekstiä. Suomenkielinen nimi on usein vain “Akkuporakone”, joten koodi on ainoa tapa pyytää tiettyä työkalua. Ja koska sarja nimeää osansa, akku + laturi -paketti löytyy myös laturin koodilla.
• Vähintään kaksi merkkiä. Yksi merkki osuu tuhansiin tuotteisiin eikä kerro mitään siitä mitä haluttiin — sama raja, jonka alkuperäinen rajapinta asettaa, samasta syystä.

Poissaolo on tuotteen ominaisuus, ei listauksen

“Vain ilman manuaalia olevat” kuulostaa yksinkertaiselta ehdolta ja osoittautui kolmiportaiseksi. IAN 300098 menetti saksalaisen tiedostonsa, mutta suomalainen ja englantilainen ovat levyllä: se ei ole tuote ilman manuaalia. Eikä siihen pysähdytä — jos saman tuotteen toinen listaus tarjoaa saman dokumentin, se on jo samalla kortilla. Tuote on ilman manuaalia vasta, kun yksikään sen listaus ei tarjoa sellaista.

Kokeile itse

Alla on sama logiikka 18 aidolla suomalaisella listauksella. Vaihda laskutapaa oikealta ja katso mitä naiivi tekee saman rivin muille vaihtoehdoille.

Yliviivattu rivi kortissa on katalogin alkuperäinen nimi. Oikeassa tuotteessa se on hoverilla.

Kolmetuhatta korttia ilman kehystä

Sivu ei valitse oletusmarkkinaa, joten ensimmäinen näkymä on koko arkisto: 2 932 korttia. Suomen katalogi on pienempi tapaus (1 105), ei oletus. Kehyksetön sivu ei tarkoita, ettei suorituskykyä tarvitse tehdä — se tarkoittaa, että se on tehtävä itse.

Sama oire, kolme eri syytä

Puhelimella ensimmäinen painallus tuntui katoavan. Helppo selitys oli, että ruudukko pitää pääsäiettä varattuna. Se oli osa totuutta, mutta vasta profilointi kertoi loput — ja tämä on koko osion tärkein kohta: oire oli yksi, syitä kolme, eikä ensimmäisenä korjattu ollut niistä suurin.

• Ruudukko ei ollut keskeytettävissä. Erän koko mitataan nyt ajassa, ei korttimääränä — hidas puhelin saa pienemmän erän kuin työpöytä ilman että kumpaakaan säädetään käsin — ja pointerdown pysäyttää täytön, jotta kosketus saa vastauksen heti eikä jonon perässä.
• Käynnistys oli aidosti hidas, muttei siitä syystä kuin oletin. 5,7 MB:n JSON.parse on 28 ms — ei ongelma. Kaksi apufunktiota sen sijaan kävi läpi kaikki 10 257 listausta jokaista korttia kohden kysyäkseen mitä muuta samalla tuotenumerolla on: yhdestä 1 104 ms:n tehtävästä 945 ms ja 620 ms. Ne lukevat nyt indeksiä.
• Ja lopulta aloitusruutu söi kosketuksen. Se pidetään näkyvissä yhden raitajakson ajan (1 300 ms), vaikka sivu on valmis paljon aiemmin — joten ensimmäinen painallus osui overlayhin ja katosi. Se poistuu nyt ensimmäisestä pointerdown-tapahtumasta, ja koska samalla katoaa pointer-events, sama painallus läpäisee alla olevaan painikkeeseen.

Rehellinen tulkinta on siis, ettei mikään näistä yksin selitä lukua alla. Paloittelu teki ruudukosta keskeytettävän, indeksi lyhensi käynnistyksen — ja aloitusruutu piilotti sen, että kumpikin oli jo toiminut.

Näkymän ulkopuoliset kortit eivät maksa mitään

Teeman vaihto ja hakukentän näppäinpainallus paranivat samasta muutoksesta: content-visibility ja mitattu contain-intrinsic-size 430 px. Ilman mitattua arviota vierityspalkki hyppii; mitatun kanssa selain ohittaa näkymän ulkopuolisten korttien tyylityksen ja asettelun kokonaan. Kansikuvat ladataan laiskasti: 245 kuvaa 6 153:sta ensimmäisellä maalauksella.

Kaksi halvalta näyttänyttä asiaa, jotka eivät olleet

Profilointi nosti esiin kaksi kohtaa, joita kumpaakaan ei olisi arvannut lukemalla koodia. String.localeCompare rakentaa uuden vertailijan jokaista vertailua kohden, joten 2 935 tuotteen lajittelu nimen mukaan maksoi 155 ms — jaettuna Intl.Collator-oliona 2 ms. Ja fasettiluvut käyvät jokaisen listauksen läpi kerran sirua kohden, yhteensä 164 ms.

Fasettilukujen kohdalla korjaus ei ollut tehdä työtä nopeammin vaan tehdä se eri järjestyksessä. Kukaan ei lue sirun lukua sillä sekunnilla kun ensimmäiset kortit vasta ilmestyvät, joten luvut lasketaan nyt ruudukon jälkeen eikä ennen sitä. Mitattu kokonaisaika ei muuttunut lainkaan.

Kolme teemaa, yksi token-joukko

Värit on luettu PARKSIDEn omista design-tokeneista heidän tyylitiedostostaan — ei näytteistetty silmämääräisesti kuvakaappauksesta. Vihreä #1e4b32, power-vihreä #00ff99, punainen #cd2828.

Oletus: Parkside · valinta muistetaan localStoragessa

Kolme yksityiskohtaa, jotka teema pakotti ratkaisemaan

• Otsake on kokonaan brändivihreä, joten kaikki sen päällä tarvitsee oman kontrastinsa: --header-bg, --header-ink, --header-muted, --header-line ovat toinen token-joukko, ja sirut pitävät oman vaalean pintansa.
• Valittu siru ottaa power-vihreän #00ff99, koska brändivihreä brändivihreällä katoaisi täysin. Sama sääntö toistuu tälläkin sivulla — valitun sirun väri on lainattu suoraan.
• Teema asetetaan <head>:ssä ennen tyylitiedostoa. Muuten jokainen käynti välähtäisi edellisen teeman värit ennen oikeaa.

Käyttöliittymän kieli ei ole katalogin kieli

Ylhäällä oikealla on FI / EN. Alempana suodatinriveissä on Markkina. Ne ovat eri asioita, ja niiden sekoittaminen olisi ollut helppo — mutta väärä — yksinkertaistus.

• FI / EN vaihtaa sivun tekstit. Oletus on suomi vain jos selain pyytää suomea, muuten englanti.
• Markkina valitsee selattavan katalogin. Suomenkielinen käyttöliittymä voi hyvin listata englantilaisia manuaaleja — se on täysin kelvollinen tilanne.
• Englanti on lähdeteksti, suomi on päällyste. Puuttuva avain putoaa englantiin, ei näytä avaimen nimeä. Käyttäjä ei koskaan näe facet.power.label-tyylistä vuotoa.

Mikä on yhä kesken

Arkisto on käytössä ja julkaistu, mutta kolme asiaa tiedetään keskeneräisiksi. Ne ovat kirjattuina, koska tunnettu puute on eri asia kuin tuntematon.

• Lisävarusteet perivät jännitteitä. Reikäsahasarja, joka mainitsee yhteensopivat 20 V työkalut, luokittuu 20 V akkutyökaluksi. Tarvitsee nimitason lisävarustesäännön.
• Tuotekuvia on 1 356 / 2 935. Loput näyttävät manuaalin ensimmäisen sivun, joka on mitä sattuu olemaan. Neljää Lidlin verkkokauppaa (BE / PL / NL / ES) ei ole vielä käyty läpi.
• Hyväksytty listaus ei enää parane säännöllä. Kaikki 10 257 on merkitty varmaksi, joten myöhemmin lisätty luokka ei tavoita niitä — vain merkinnän poistaminen tavoittaa.

Mitä tekisin toisin

Kaksi asiaa. Ensinnäkin olisin rakentanut rekisterin invarianttitarkistuksen ensimmäisenä päivänä enkä viimeisellä viikolla — jokainen virhe tässä projektissa oli samanmuotoinen: sääntö, joka oli oikeassa käsillä olevasta tapauksesta ja muutti hiljaa satoja muita. Toiseksi olisin mitoittanut suodatinsarakkeen suomeksi heti alusta; englanniksi mitoitettu layout oli rakennettava kahdesti.