Hvorfor dette site tegner sin produkt-UI i stedet for at tage skærmbilleder

Indtil denne uge gjorde produktsiderne på dette site det, som de fleste produktsider gør: de viste skærmbilleder. Fem optagelser af Detectly, skaleret to gange, lazy-loaded og stablet under hinanden.

De var det svageste på siden, af grunde det tog os lidt tid at indrømme.

Hvad der var galt med dem

De fandtes for ét produkt af fire. Detectly er live og har en brugerflade at fotografere. Diver, Deploy og Sentry er i forskellige stadier af byggeri, så deres sider havde en overskrift, der sagde "indeni", og intet under den. En side, der viser mindre for de produkter vi lige nu bygger, vender forkert.

De var allerede forældede. Optagelserne var fra én udgivelse. To udgivelser senere så hændelsestidslinjen anderledes ud, og skærmbilledet gjorde ikke. Et skærmbillede er en påstand om, hvordan produktet ser ud, der holder op med at være sand ved næste deploy — og ingen husker at tage dem igen.

De kunne ikke fremføre argumentet. Detectlys egentlige pointe er, at en alarm klatrer op gennem vagtkæden af sig selv: advarsel, hændelse, eskalering, normalisering, uden at nogen styrer den. Et stillbillede af en tidslinje viser fire prikker. Det kan ikke vise den fjerde komme til.

De vejede noget. 24 KB hver, gange fem, gange to størrelser. Ikke en katastrofe, men de eneste billeder på en side, der ellers er tekst og CSS.

Hvad vi gjorde i stedet

Hver produkt-UI på sitet er nu markup. En live-panel-komponent gengiver monitorrækker med en åndende statusprik og svartidsbjælker, der fylder op. En status-strip tegner godt halvfjerds oppetidsbjælker. En incident-timeline tegner en rygrad og tænder fire hændelser i rækkefølge. En terminal skriver en deploy ud. En phone-frame pakker enhver af dem ind i en CSS-tegnet iPhone.

To regler gjorde det ærligt frem for dekorativt:

1. Hvert tal, der ligner data, er enten rigtigt indhold eller udtrykkeligt mærket som illustration. Rækkerne i live-panelet kommer fra den samme indholdsfil, der beskriver produktet. Oppetidsprocenten er beregnet ud fra bjælkerne, så billedet og tallet kan ikke være uenige. aria-label på hvert panel siger "en illustration af".

2. Intet bevæger sig, medmindre den besøgende er okay med bevægelse. Hver animation ligger bag prefers-reduced-motion og bag en klasse, som scriptet kun tilføjer, når det kører. Med JavaScript slået fra, eller med reduceret bevægelse slået til, får du et færdigt, læseligt panel — aldrig et skjult.

Hvad det kostede

Cirka to dage. Komponenterne er tilsammen omkring 400 linjer Blade og 200 linjer CSS, og de bliver genbrugt: det samme live-panel optræder i heroen, inde i produktkort, inde i telefonen og på casen.

Skærmbillederne ligger stadig på disken, og billedteksterne står stadig i indholdsfilerne. At sætte et tilbage på en side er én linje. Vi forventer ikke at gøre det.

Hvor det ville være det forkerte valg

Hvis produktets brugerflade er argumentet — et designværktøj, et dashboard hvis layout er pointen — ville en gengivelse i et andet UI-kit misrepræsentere det. Vores er overvågningsværktøjer, hvis argument er adfærd over tid, og adfærd er det, markup kan vise og et skærmbillede ikke kan.