Når dit designsystem mislykkes

Vi har hørt meget om gode designsystemer, men hvad sker der, når de ikke fungerer?

Introduktion

Enhver moden applikation vil til sidst opleve en UI-identitetskrise: knapperne er overalt, typeskalaen kører amok, og - omg - er det en skrå kant? Oof. Du har tre til fire konkurrerende æstetik, der går tilbage i årene. Det er et rod.

Hvis du befinder dig i denne situation, skal du aldrig frygte. Internettet har forventet dette: du har brug for et designsystem. Leder du efter inspiration? Der findes mange eksempler - komplet med trin for trin instruktioner. Store virksomheder som Twitter, Salesforce, Airbnb og Google har set et eksempel for produktdesignteam overalt til at efterligne.

På nuværende tidspunkt kender du den historiske historie. Du har brug for en speciel, tværfaglig taskforce til at være vært for et offsite, udføre en interface-revision og krænke de nødvendige komponenter i henhold til funktion og form. Derefter skal du blot konsolidere, iterere, dokumentere og frigive til glæde for alle interessenter, udviklere og brugere. Hvis du føler dig ekstra, kan du brand og open source til glæde for designsamfundet som helhed.

Selv den mest hensigtsmæssige middelartikel er ligefrem og natur, der dog er en vis virkelighed: produktstylguider, hvad så det drejer sig om et helt navngivet og åbent designsystem, har et helt liv efter deres oprindelige oprettelse. Medmindre disse systemer aktiveres i produktet, når de aldrig deres fulde potentiale. Faktisk kan de ofte gøre det meget problem, du forsøger at løse, værre. De kan mislykkes.

Hvad mener du, mislykkes?

Jeg har personligt været en del af flere redesignbestræbelser, der involverede oprettelsen af ​​en stilguide (nogle inden for samme virksomhed). Jeg har set disse projekter begynde med løfte og falde i glemmebogen. Det gør ondt. Jeg har levet og følt min egen fiasko. Tillad mig at illustrere dette punkt ved hjælp af en historie.

Dag i livet for et talsmand for et designsystem

Da jeg var i gang med et stilprojekt, havde jeg daglige samtaler som dette:

Anden designer: Hej, har vi stilarter til fejltilstande?

Mig: Ja, vi har for nylig oprettet en fejlspecifikation som en del af det nye Shiny ™ -system. Desværre er din del af produktet stadig på Old Dumb-systemet.

Anden designer: Ok, hvilken farve skal jeg bruge? Skal jeg bruge den gamle stumfejlstil eller den nye skinnende fejlstil?

Mig: Lad os spørge devs, om de kan begynde at bruge det nye skinnende system.

Udvikler: Jeg tror ikke det. Jeg ønsker ikke at integrere nye skinnende stilarter i dette projekt. Jeg ved ikke, hvordan det vil interagere med Old Dumb stilarter. Dette skulle være en 1-punkts historie.

Anden designer: Så skal jeg i det mindste begynde at bruge den nye hex-værdi? Så det matcher?

Mig: Nå, så matcher det ikke noget andet i dit projekt.

Udvikler: Jeg formoder, at vi kunne opdatere de gamle dumme-variabler til de nye skinnende variabler.

QA: Jeg har ikke tid til at regressionsteste hele Old Dumb-systemet.

PM: Så hvilken farve bruger vi?

Du kan erstatte "fejlfarver" med "knaphøjde", "inputrand" eller "gitter system." Historien forbliver den samme. Hvorfor er ovenstående scenario så typisk? Hvorfor når designsystemer ikke deres potentiale?

Hvad gik galt? Almindelige faldgruber i designsystemer

Det er ikke, at selve designsystemet mislykkes - at bringe orden til kaos er i sig selv meningsfuldt arbejde. Du kan oprette komponenter, der skaber den perfekte balance mellem genbrug og kontekstfølsomhed. Men at definere komponenterne i dit designsystem er bare det første trin. Det skal komme ind i produktet. Hvis det ikke gør det, er et designsystem som et sprog uden eksisterende litteratur eller sædtekster.

Et projekt kan gå galt af flere årsager - budget, ressourcer, tid, forkert styring - også omsætning. Men selv succesrige designsystemer med organisatorisk opkøb kan mislykkes. De faldgruber, jeg er ved at fremhæve, føles iboende ved selve ideen om et designsystem, selv i de mest ideelle scenarier. (Tænk på Google: Kalenderen tog mange år at gå materiale.)

1.) Omdesign er ikke prioriteret

Fordi det er sjældent, at virksomheder prioriterer rent stilarbejde som sådan (tænk på den ovenstående fortælling), bliver sådan designgæld ofte bagt ind i andet - typisk fremtidig - funktion eller revision. Men nogle dele af et produkt, endda missionskritiske dele, kan tage år at gennemgå. Resultatet er et produkt med flere stilsystemer, der er ansvarlige for forskellige dele af UI. Dette er selvfølgelig det nøjagtige problem, du har lagt ud for at løse, forstærket af endnu en ufuldstændig løsning. Et produkt, mange sprog.

2.) Teknisk stakken ændrer sig

Når tidslinjen for implementering spredes over flere måneder (og mere sandsynligt, kvartaler eller år), kan meget ændres. Og ud fra et implementeringssynspunkt ændrer front-end-udviklingen sig hurtigere end nogensinde før. I de sidste par år har paradigmer skiftet fra anvendelseslignende genanvendelige klasser (tænk .margin-sm) til BEM-syntaks, fra monolitiske sass-output til scoped-stilarter inden for React-komponenter. Og når CSS-specifikationen tilføjer mere og mere funktionalitet, fra gitter til variabler, er fremtiden langt fra fast.

Jeg har set flere implementeringer af stilguider mislykkes, fordi de simpelthen ikke kunne holde trit med frontend. Oppustede bootstrap-lignende filer, når alle er bekymrede for ydelsen. En rubin perle i det øjeblik, noden var ved at begynde. Og selvom React forekommer næsten designet til komponentiserede designsystemer, gør den skiftende karakter af tech hele opfattelsen af ​​at skabe et permanent, evigt system usandsynligt.

3.) Vedligeholdelse tager disciplin

På designsiden mangler ofte forpakkede komponenter den fleksibilitet, der kræves til den tilsigtede brugeroplevelse. Det er næsten umuligt ikke at ændre et specifikt eksempel på en komponent eller omstrejfe fra stilguiden (ja, endda en tankevækkende designet). I sidste ende er det svært at argumentere for UI-konsistens over en bedre UX-løsning.

Den ubehagelige og ufortalte historie er, at det er svært at opretholde en stilguide efter den oprindelige ophidselse slides. Det er meget mindre sjovt end at skrive din indledende 'folio case study.

Men, men - designsystemer stadig?

Hvis dette lyder dyster, er det ikke min hensigt at afskrække nogen fra at oprette en stilguide. På trods af udfordringerne er jeg stadig en stor tilhænger af designsystemer af alle de grunde, som alle nævner, især dem, der vedrører samarbejde på tværs af team. Men efter at jeg personligt har været vidne til designsystemer, jeg har oprettet, når forskellige niveauer af aktualisering, har jeg lært et par ting til at hjælpe med at sætte forventninger.

Hvad jeg ville gøre næste gang

1.) Få buy-in fra hele holdet

Dette er et fælles punkt i den eksisterende litteratur, men det kan ikke understreges nok. De fleste mennesker vil gå ind for et designsystem abstrakt; det er ikke det, jeg mener med buy-in. Som ethvert andet projekt skulle designsystemet have afsat ressourcer i form af design og udviklingstid. Udviklere bør også blive enige (på tværs af hold) om detaljerne om teknisk implementering. Produktledere og interessenter skal forstå, at det er en værdifuld investering. I det, der ofte kan være sloget med funktionsudvikling, er det svært at prioritere UI-omarbejdning. Sørg for, at dit mønsterbibliotek har mere end bare læbtjenester: få det på køreplanen. Men hvad skal der præcist være på køreplanen?

2.) Prioriter en let hud på ældre dele af produktet

Vi kan have en tendens til at ønske at gøre tingene på den rigtige måde. Vi bør ikke spilde et par dage med tekniske anstrengelser på et system, vi alligevel vil smide væk, 'når vi redesigner'. Jeg er her for at fortælle dig, nogle sider vil ikke blive redesignet snart. Hvis du har dele af produktet, der ikke er beregnet til en større redesign, skal du tage tid til at opdatere et par små stilarter - ting, som en bruger måske vil lægge mærke til og ikke er for svært at regressionstest. Bare rolig, hvis det er gjort ved hjælp af det faktiske bibliotek. Opdater et par knapfarver, kantradiier, input-styling og skrifttyper. Det kan involvere lidt fund og udskiftning af nogle gamle css, som ingen ønsker at røre ved, men det forhindrer dig i at tilføje endnu en knapstil. Det vil hjælpe med det problem, du har sat ud for at løse - konsistens - og glæde dit brandteam.

3.) Behandl et designsystem som ethvert andet produktprojekt: start i det små

Hvis du tænker over det, er designsystemprocessen lidt af en anomali i moderne produktudvikling. En stor designindsats, der kulminerer med en foreslået total revision af et websted? Hvis jeg arbejdede med en funktion, ville jeg aldrig bruge uger eller måneder på at designe et perfekt system, der havde alle svarene. Jeg vil gerne starte i det små og lære. Test disse ideer med virkelige mennesker, indhent feedback og lær af mine fejl. Jeg tror, ​​at det samme kunne være tilfældet med designsystemer.

Hvis du har begrænsede ressourcer, kan det være fornuftigt at reducere omfanget af din oprindelige stilguide. Gør bare knapper, indgange eller typeskalaen på dine marketing sider. Små trinvise trin vil hjælpe dig med at lære, hvordan du har brug for at opbygge dine komponenter, små gevinster vil hjælpe med at motivere teamet. Det vil også hjælpe dig med at lære det rigtige niveau af fleksibilitet kontra specificitet med dine regler, en umulig balance, der bliver lettere med tiden. At se ting i naturen hjælper dig med at forstå, hvad du har brug for.

4.) Vent ikke på andre. Bly ved eksempel.

Når jeg designer designsystemer, har jeg altid haft en vision for, hvordan forskellige komponenter vil passe sammen - hvordan de ville være følsomme over for hinanden, tilføje og trække marginer afhængigt af kontekst, arve stilarter på smarte måder og følge et konsekvent gitter. Hvis du er en designer, der koder, kan du ofte ikke undgå at have meninger om implementering.

Som designer er jeg ligeglad med, hvordan tingene laves, men jeg er i sidste ende ansvarlig for ikke engineering men overfor vores brugere. Og vores brugere er ligeglad med, om den knap, de klikkede på, var en frisk myntet React-komponent eller blev skrevet fra bunden inde i den gamle kode, du vil smide. At gøre tingene på den rigtige måde fra et kodeperspektiv er svært. Lad ikke udviklingsidealisme forhindre dig i en ensartet brugeroplevelse. Samarbejd med teknik - selv konstruer det selv - men stol ikke for stærkt på eksterne teams for at få succes. Fokuser i stedet på at være tro mod dine designbeslutninger og mønstre. Bly ved eksempel. Hvis du er konsekvent, vil ingeniørerne bemærke og (forhåbentlig) følge efter.

5.) Til sidst skal du ikke sammenligne dig med andre på Internettet

Dette er måske det vanskeligste punkt, men hvis du føler dig utilstrækkelig, kan det være på tide at omdefinere, hvad succes betyder for dit team. Hvis succes er et altomfattende designsystem, skabt med avanceret teknologi, implementeret på tværs af hvert produkt touchpoint og åbent til samfundet, er du måske kommet til kort. Men for hvert Lightning-designsystem er der et stræbende team på 8 designere, der bare prøver at gøre deres absolut bedste med begrænset tid og ressourcer. Når jeg ser tilbage på designbestræbelser, jeg er gået i gang med, er der mange små sejre at fejre. Og mine teams har konsekvent afbalanceret bekymringer over højere orden (som designsprog) med mindre orden på vores masloviske hierarki af produktdesignbehov. Du har ikke brug for et brugervenlighedsrum for at få feedback fra brugerne. Og du behøver ikke et designsystem for at skabe fantastiske produkter.

epilog

I løbet af den sidste måned oprettede en designer i vores team et ikonbibliotek i React og ved hjælp af støttende devs kunne tilføje det til vores delte webmappe og opdatere ikoner på tværs af siden. Det er en lille gevinst, designledet og PM-godkendt. Vi har endda en lille mikrosite med alle ikoner og henvisninger til deres kode. Lille i omfang (men alligevel stadig en stor indsats), vi har nu en start på en vellykket vej fremad. Hvis du har et magert designteam, håber jeg, at du kan efterligne vores succes ved at starte i det små og gøre trinvise fremskridt hen imod en bedre og mere ensartet brugeroplevelse.

Har du nogle eksempler på, at dit designsystem underleverer eller svimler ud? Jeg ville meget gerne høre dine historier i kommentarerne herunder.