Mig, der forklarer mine kolleger, hvad jeg mener med et

Indhold, design systemer har brug for dig!

Designsystemer er byens samtale, og der er en god grund til det. De holder produkterne ensartede, hold skalerbare og designere sane. Dette fik nogle af os til at tænke, "hvorfor fanden laver vi ikke dette til indhold?"

Det er godt hovedsageligt, at livet på Deliveroo er hektisk. Content designteamet er travlt, spredt tyndt over flere projekter hver. Men i sidste ende var det vores største motivation, fordi designsystemer er en enorm tidsbesparelse for deres brugere.

Tanken på at være i stand til at fokusere på nye problemer snarere end at designe indhold, som en af ​​os allerede havde designet før, var ganske incitamentet.

Der var også blank sidesyndrom. Det var skræmmende, især med så lidt vejledning derude om, hvordan man gør det. Men så snart vi startede (jeg vil gå nærmere ind på dette nedenfor) smeltede eventuelle nerver væk. Vi begyndte fra starten at dette ville være eksperimentelt og iterativt.

Det følgende er en beskrivelse af, hvad vi har gjort indtil videre, hvad vi forsøger at opnå, og hvordan vi tænker på at gøre det. Jeg har ikke været i stand til at finde ud af, hvordan andre hold gør det, men det er måske i din efterslæb. Hvis du har nogle ideer, så send os en kommentar eller to - vi vil meget gerne høre om, hvordan du nærmer dig den.

Et hurtigt advarsel: Vi er gået ad denne vej, fordi vi forsøger at integrere indhold i et eksisterende, omfattende designsystem, der ejes af vores Design infra-team. Vi nærmer os meget anderledes, hvis vi starter fra bunden som en del af et hold.

Forside i Figma: skal starte et sted ...

Første ting først, hvad er et indholdsdesignsystem (CDS)?

Lad os starte med det, det ikke er.

Vi taler ikke om stilguider, ordforrådslister, tonefaldsretningslinjer eller noget af ovenstående, der er knyttet til et designsystem.

Når vi siger Content design-system, mener vi et sæt scenarie-specifikke komponenter, bakket op af forskning og aftalt af teamet, fuldt integreret i det designsystem, som vores produktdesignere og ingeniører bruger lige nu. Noget, der giver dem mulighed for at træffe beslutninger om solidt indhold uden os.

Som jeg sagde ovenfor, ønsker vi et sæt gentagne indholdsmønstre, der holder os konsistente og giver os mulighed for at rette mere af vores opmærksomhed mod nye problemer.

Hvad med stilguider?

Vores stilguide hos Deliveroo hjælper os med at sikre konsistens i ting som datoformater, fortæller nyansatte, at vi ikke bruger oxford-komma og vigtigst af alt indeholder alle vejledninger om tilgængelighed, vi støder på. (Og mere, ovenstående var bare en smag)

Det er vigtigt at holde sig til en stil, men det fremskynder ikke designprocessen, reducerer arbejdsbyrden eller forbedrer konsistensen af ​​indholdsmønstre. De scenarie-specifikke komponenter, vi vil systematisere, fungerer ikke i det samme format som vores stilguide Google-sted.

Plus, jo længere væk fra arbejdet, desto mere usandsynligt er du at henvise til det. Den sidste ting, du har brug for, er en anden åben fane eller, Gud forby, et trykt dokument.

Vi ønsker at reducere friktionen ved at tage indholdsbeslutninger, især for distribuerede eller strakte teams. Så vi vil følge indholdsdesign 101 - give dine brugere den rigtige info til det rigtige tidspunkt på det rigtige sted. Det betyder fuld integration i de værktøjer og software, vi og vores andre brugere (produktdesignere og ingeniører) bruger: Figma og komponentbiblioteket.

Vores værktøjsdesignsystem i FigmaEn snik-kig på vores komponentbibliotek

Hvordan er en CDS forskellig fra et designsystem?

Der henviser til, at et almindeligt designsystem kan give en sammenhæng som:

  • Brug dette afkrydsningsfelt, når du har brug for en undertekst
  • Brug dette afkrydsningsfelt, når du har brug for et link
  • Brug denne filinput, hvis du kan uploade flere filer på én gang

Indhold har brug for mere kontekst, for eksempel:

  • Brug denne gemme modal, når brugeren prøver at forlade en uafsluttet form
  • Brug denne fejlmeddelelse, når en input er ufuldstændig

Men…

  • Brug denne fejlmeddelelse, når indgangen er for lang

Det handler om sammenhæng

Valg af en komponent til at opbygge en side eller flow betyder at tage en indholdsbeslutning for denne side eller flow.

Når en komponent har kontekst, kan du som standard tage den rigtige beslutning om indhold.

Som et eksempel indeholder vores designsystem en sidetitelkomponent med en valgfri undertekst. Det er fantastisk, fordi det er fleksibelt. Men det fortæller dig ikke, hvornår du skal tage den indholdsbeslutning om at medtage underteksten eller ej. Når du tilføjer systemet til kontekst og indhold, ved brugeren at vælge undertekst, når værdien på siden ikke automatisk er klar for brugeren. Men at ikke bruge det, hvis dit eneste mål er at orientere brugeren, efter at de har valgt et valg fra en navigationsmenu.

I den forstand ville du sandsynligvis holde op med at tænke på disse som titel / undertekst og titel / ingen undertekst og i stedet lide forklaringstitel og orienteringstitel.

Og det er det, vi håber på at gå hen imod.

Et eksempel fra vores CDS

For virkelig at hjælpe med at køre punktet hjem er her et eksempel på, hvad vi arbejder på. Dette er et ganske kortfattet eksempel, da der kun er få kontekster, hvor vi mener, at et skifte er den rigtige mulighed baseret på vores aftalte indholdsmønster.

Eksempelvejledning til skift: Skifter bruges kun til tilstande, ikke valg. Tænk på dem som en designproxy for en tænd / sluk-switch. Hvis interaktionen mere er et valg, ligesom ja eller nej, skal du overveje andet brugergrænseflade. Etiketten skal være entydig og beskrive den ting, du slukker eller tænder for - de skal aldrig være handlingsbaseret. Etikettekopien bør ikke ændres baseret på staten. Underkopien skal forklare den tilstand, du er i, og hvad det betyder om nødvendigt. Muligt scenario: Kunder vil slå en indstilling til eller fra.

Anvendelse og eksempel

Skift til
Etiket: [Tinget] for eksempel underretninger
Underkopi: [Resultatet af tilstanden on] for eksempel, Du får meddelelser

Slå fra
Etiket: [Tinget] for eksempel underretninger
Underkopi: [Resultatet af slukket tilstand] for eksempel Ingen meddelelser til dig

Hvorfor?

  • Substantivmærket er entydig og statisk for at undgå forvirring, om det drejer sig om vs at flytte vipperen for at tænde den
  • Beskrivelsen af ​​staten hjælper brugeren med at forstå, hvad der i øjeblikket sker

Hvad man ikke skal gøre

Skift til
Etiket: Tillad meddelelser til
Underkopi: Hold dig ajour, slå meddelelser til

Slå fra
Etiket: Tillad meddelelser fra
Underkopi: Hold dig ajour, slå meddelelser til

Og hvorfor er det så dårligt?

  • Den verbledede etiket gør det vanskeligt at forstå, hvad du tænder / slukker
  • Underkopien prøver at påvirke adfærd og beskriver ikke, hvad der sker
  • Etiketten ændres baseret på tilstand

Så hvad er slutmålet?

Jeg har talt meget om CDS, som om det er en separat enhed, vi bygger. I nogen grad er det sandt, men det er ikke slutmålet. Jeg ser vores CDS som vores testmiljø. Det er rodet, og vi vil prøve at bryde alt derinde for at se, hvor robuste vores beslutninger er. Men når indholdet passerer, poperer vi det direkte ind i det designsystem, der allerede er i brug.

Den sidste ting, vi ønsker at gøre, er at oprette mere dokumentation.

Vi ønsker at fremskynde designet af fælles mønstre og spare vores hjernekraft.

For eksempel har vi alle i teamet med indholdsdesign designet en serverfejlmeddelelse. Når det er i systemet, kan du bare plukke det ud, når du har brug for det. Detaljerne kan muligvis ændre sig, men alle, der designer til dette scenarie, ender med en fejlmeddelelse, der forklarer, hvad der er sket, og opfordrer brugerne til at prøve igen eller give dem mulighed for at kassere handlingen og "Gå tilbage".

Nogle eksempler på backend-fejl fra vores CDS

Vi ønsker kun at redesigne ting, hvis forskning eller test fortæller os, at vi er nødt til det.

En ekstra bonus er, at alt dette virkelig hjælper med at stivne det faktum, at ord er et designaktiv og bør behandles som sådan. Heldigvis for os er dette velkendt hos Deliveroo, men det kan være massivt i organisationer med mindre modenhed til indholdsdesign.

Hvad er vores strategi for CDS?

Som jeg sagde ovenfor, er det super tidlige dage. Vi har kun for nylig fundet tid til at gøre dette. Hvis noget, håber jeg, at hvis jeg skriver alt dette og åbner vores tanker, holder vi os til det. Med held og lykke får vi også nogle tip fra det bredere designsystem eller indholdssamfund!

Gør mig ikke forkert, jeg tror stærkt på værdien af ​​denne bestræbelse, men det er vanskeligt. Et designsystem er et heltidsprodukt, og vi kan ikke bruge så meget tid til det endnu. Men vi har en plan, så det vil jeg dele.

Fastlæg brugssager, formål og acceptkriterier

At få hele holdet på den samme side var virkelig vigtigt, især omkring formålet med systemet og hvem det var til. Vi har brugt mange møder i fortiden med at gå frem og tilbage om, hvorvidt vi havde brug for mere vejledning til vores team eller til de discipliner, vi samarbejder med. Jeg ønskede at sikre, at vi var i krystal om dette som en gruppe - så jeg oprettede en one-personsøger, der fungerer som en kort introduktion til systemet, der skitserede dets mål og brugere.

Vi besluttede også om nogle acceptkriterier. Det er nemt at tilbringe et helt møde med debattering om kun en linje med indhold - så vi ønskede en ramme på plads til at hjælpe med beslutningstagningen.

For at indhold kan accepteres i systemet, skal det være:

  • tilgængelig
    Dette er en given
  • gentagelig
    Er der mere end en brugssag i denne sammenhæng?
  • optimal
    Vi tilføjer ikke noget, som vi ikke ønsker at blive et standardmønster - ingen løsninger
  • muligt at lokalisere
    Undgå alt, hvad vi ved, der gør livet vanskeligt for oversættere

Dette er vores arbejdsramme, men vi er åbne for at gentage dette, mens vi går.

Valider tidligt og ofte

Én ting, der har været særlig nyttig indtil videre, er at få tidlige feedback fra produktdesignere (en af ​​systemets brugere). Det lyder indlysende, men medmindre du har den tankegang, at et system er et produkt, får feedback tidligt og ofte måske ikke helt på dagsordenen - for os er det helt sikkert.

Saml, debatter, integrer

Som ved enhver skrivning er et tomt lærred fjenden for bare at komme i gang. Så som et team besluttede vi bare at gå efter det, men arbejde på det i trin. Vi valgte at starte med modals, så alle i teamet sorterede modalerne, de havde brugt i nylige projekter - alt sammen grupperet efter scenarier som "gemme inden du afslutter", "annullering af ændringer" og "sletning af enheder" (handlinger ofte krævet i vores værktøj ).

Vi begik bevidst til bredde i starten - det gør alt mindre skræmmende.

Det gik omtrent som følger:

  1. Tilføj så mange modaler som muligt
  2. Gå igennem som et team for at beslutte, hvad vi ville / ikke ville ændre
  3. Opnå konsensus

Vi tog disse beslutninger på ugentlige holdmøder og holdt meget opmærksom på de ovenfor nævnte acceptkriterier. Jeg har også tidsboksede diskussioner omkring hvert scenarie til 10 minutter for at holde tingene i bevægelse og sikre, at vi ikke fik klemt. Hvis vi virkelig ikke kunne nå en enighed, ville vi parkere den og gå videre og tage det senere.

At pakke sammen

Alt, hvad jeg hidtil har læst om emnet, fortæller mig, at du ikke kan behandle et designsystem som et sideprojekt.

Men vi kommer et sted. Vores system indeholder nu indholdsmønstre til skift samt masser af forskellige modeller, der dukker op i vores produkter. Selvfølgelig vil dette sandsynligvis alt ændre sig over tid, når vi bliver mere effektive, men det var en fantastisk måde at komme i gang.

Selvom vi alle er spændt over mange forskellige produkter, har det bare båret frugt at dedikere en del af vores tid til det. Jeg håber det er nok motivation til at komme i gang, hvis du er i en lignende båd som os.

Vi har en vision, og vi har startet, så nu handler det om at forblive engageret, disciplineret og åben for feedback. Indholds- og designsystemer vinder konstant trækkraft, så jeg ser frem til at læse mere fra andre for at se, hvordan de nærmer sig dette.