Arbejdstype

Hvordan vi introducerede Airbnb-korn til vores UI

Den 15. maj 2018 lancerede Airbnb et nyt skrifttype kaldet Airbnb Cereal på tværs af vores produkt og brand. Airbnb Cereal blev oprettet i partnerskab med Dalton Maag - en global fontstøberi - og Airbnb's team til marketing og oplevelse af design.
Denne casestudie er en del af en lanceringsserie og indeholder detaljer om den tekniske proceshistorie. Lær mere om, hvordan vi designede et karakteristisk skrifttype, der kombinerer karakter, funktion og skala her.

Typografiske beslutninger træffes normalt på et brandniveau - med hensyn til udseende, fornemmelse og nøjagtigt udtryk for et brands ønskede retning. Men hvad med UI? Der henvises ofte til, at 90% af brugergrænsefladen er tekst, der gælder for Airbnb, så ændring af skrifttypen medførte en betydelig ændring af vores UI-design.

Som designleder i Design Language System-teamet undrer jeg mig ofte over, hvad der sker bag kulisserne, når virksomheder rebrand eller skifter skrifttyper. Hvad er processen, og hvor lang tid tager det? Hvordan finder de et godt UI-skrifttype, og hvordan ændrer det faktisk brugergrænsefladen?

Med den nylige lancering af vores nyligt designede skrifttype Airbnb Cereal, var vores team i stand til at opleve processen fra første hånd - inklusive brand marketing og produkt UI. Fra udvikling af typen, UI-test og produktintegration, her er hvad vi lærte undervejs.

Overvejelser og partnerskab

Skriftdesign er som ethvert andet designprojekt. Vores forretningsbehov omfattede varemærkedifferentiering, evnen til at spænde brand og produkt og tekstlæsbarhed i UI. Gennem forskning, brugertest og observation gennem årene lærte vi, at vores tidligere skrifttype, især i små størrelser, var svært at læse.

Vi overvejede kort skrifttyper, der er optimeret til skærme, men fandt, at der ikke var en mulighed, der kunne give en unik og konsistent stemme på tværs af vores medier og platforme. For cirka 18 måneder siden startede vi typespace-projektet i samarbejde med Dalton Maag.

De guidede os gennem hvert trin - opdagelse, ideation og forfining - mens de arbejdede tæt sammen med og indsamlede feedback fra både brand og produktledelse. Det var tidligt tydeligt, at der var behov for en balance mellem funktionalitet og varemærkeudtryk, og dette påvirkede de beslutninger, vi tog under hele processen.

Valg af din familie

Typografi findes ikke i et vakuum - det er forankret i kulturen og traditionen for et givet sprog. Det er ikke opfundet fra tynd luft, det er en fortsættelse af eksisterende traditioner. Al typografi, vi ser i dag, er et produkt af afstamning, der startede med bevægelig type og Gutenberg.

Sammen med brand- og produktledelse besluttede vi retningslinjer for at repræsentere vores ønskede retning - menneskelig, venlig, indbydende og kreativ professionalisme. Denne øvelse førte os mod den moderne neo-grotesk afstamning, som vi ville påvirke med vores egen smag.

For eksempel var nogle af figurerne inspireret af vores mærkesymbol - Bélo - som kan tegnes med hånden i et kontinuerligt slag. Både 'a' og 'b' kan tegnes på denne måde, og løkken på skålen med 'a' forbindes tilbage til Bélo. Enkeltaktstegningen er ganske menneskelig, men også afbalanceret med enklere træk i andre figurer.

Forbinder brand og UI

Marketing- og produkt-UI anvendte typisk typografi til at tjene forskellige formål. Mens marketing sigter mod at sætte et stærkt brand-udtryk, sigter UI at oprette forbindelse til mærket, mens det fungerer i komplekse, ofte skiftende miljøer.

Med UI-typografi er indholdet, skærmstørrelser og kvaliteter dynamiske - tekststørrelse, kopielængde, format og enhedsopløsning varierer alle. Brugergrænsefladen skal understøtte komplekse eller kritiske øjeblikke, hvor samfundet har brug for at læse, forstå eller tage handling baseret på de leverede oplysninger, mens de opretter forbindelse til mærket.

Kort sagt, UI-typografi skal fungere rimeligt godt i de fleste, hvis ikke alle, situationer. Den eneste måde at forstå, hvis dit valgte skrifttype har disse kvaliteter, er at bruge eller simulere brug i den virkelige verden.

Working the Words

Efter forestillingsstadiet begyndte vi at modtage iterationer af skrifttypen fra Dalton Maag. Hver karakter tager tid at skabe og ændre, hvilket betød, at vi var nødt til at arbejde med et begrænset sæt i starten.

For at se, om skrifttypepersonligheden passer til UI, måtte vi designe det. Arbejde med ca. 20 tegn gjorde dette til en udfordrende opgave, fordi hvis vi ved en fejltagelse brugte tegn uden for vores sæt, ville et designprogram (som Sketch) skifte skrifttype helt. Testning af den samme kopi overalt føltes heller ikke realistisk nok. Vi kunne ikke finde en begrænset karakterkopiegenerator, så vi skabte vores eget værktøj til at producere ord.

For at ligne en naturlig sætningsstruktur måtte værktøjet inkludere substantiv, verb og adjektiver. Jeg begyndte med den engelske ordbog, ledsaget af regelmæssige udtryk og AWK-programmering i Unix, for at skabe et sæt ord, der kun indeholdt de tegn, vi havde til rådighed. Jeg fjernede manuelt ord, som ikke var værd at vise, og tilføjede et par navne og steder som f.eks. Airbnb og Alice.

Jeg startede først med enkle strukturer som substantiv-verb-adjektiv-verb. Dette føltes uaktuelt, så jeg kiggede på berømte forfattere som Hemingway, Carroll og Twain for at hjælpe med at bryde ud af mit hjul. Ved groft at modellere mestrene blev sætningerne mere interessante.

Modellen blev oprettet ved hjælp af et simpelt Node.js-program, der genererede titler, afsnit og noveller. Disse blev derefter uploadet til skyen, vendte til et andet sæt indhold over JSON og gengivet på webstedet.

En grundlæggende statisk stedgenerator blev brugt til at være vært for den indholdsgeneratorside, som vores team brugte. Det fungerede også som en tester på egen hånd. Webstedet gjorde det nemt at skifte mellem cirkulære og nye skrifttyper med mulighed for at ændre farve og størrelse. Dette strømlinede også processen med deling af fremskridt og hurtigt test af nye iterationer, da de kom ind.

UI-test

At være bevæbnet med en brugerdefineret indholdsgenerator gjorde det meget lettere at teste skrifttypen i realistiske design. Under test i UI fokuserede vi på læsbarhed i alle størrelser, afbalancerede vægte for hierarki og ikke-distraherende struktur - alle kvaliteter, som vi troede ville resultere i et funktionelt skrifttype.

Tydelige bogstaver og åbninger: Hvis bogstaver har lignende former eller ser ens ud - såsom ‘e’, ‘c’ og ‘o’, eller i ord som Illinois - er øjne og hjerne nødt til at arbejde hårdere for at behandle. Ved at skelne lignende tegn og udvide åbningerne, som f.eks. Åbningen i bogstavet 'c', gjorde vi det lettere at læse.

X-højde og bredde: På latinbaserede sprog er den fleste tekst skrevet med små bogstaver, og de fleste tegn har ikke stigninger (som en 'f' gør). Ved forholdsmæssigt at øge højden på små bogstaver sammenlignet med store eller stigende tegn, kan du gøre et skrifttype lettere at læse. Med 'ræv', for eksempel, kunne vi se en mindre drastisk højdeforskel mellem 'f' og 'okse', hvilket får teksten til at vises større i små størrelser.

Vægt og streger: UI-typen kan blive temmelig lille, og selvom skærmopløsningen typisk er forbedret, er den stadig ikke så skarp som trykte ord. Hvis en tegns vægt er for let i brugergrænsefladen, kan den næsten helt forsvinde. Vi blev meget opmærksomme på den almindelige bogvægt, og Dalton Maag forbedrede den yderligere ved at tilvejebringe platformspecifik font-tip.

Enkelt og konservativt: UI skal være funktionelt og gøre det så let som muligt for folk at udføre opgaver. En god UI-fonttekstur skal føles blød, når dine øjne scanner den. Skrifttypen er klar og let at læse og forsvinder næsten uden at efterlade indholdet.

"Type, der er for dekoreret eller legesyg, kan distrahere eller få folk til at gå glip af vigtig information, og derfor undgås dets tilsigtede formål."

Vi afstemte nogle af kornens mere udtryksfulde former for at skabe en bedre og mere enkel struktur for læseren.

Hvad testning lærte os: I løbet af cirka seks måneder skabte vi hundreder af skærme og testede omkring 30 iterationer for stil og vægt. Denne type test var yderst nyttig, fordi den gav os mulighed for at bedømme skrifttypen efter dens fordele i UI. Mange af skrifttypefunktioner - især tekstur - var vanskelige at vurdere, indtil vi så det i teksttunge UI.

Når vi havde indstillet den overordnede stil og detaljer, fortsatte vi med at forfine og teste i yderligere seks måneder, og arbejdede tæt sammen med Dalton Maag hele tiden.

Produktintegration

Når vi begyndte at færdiggøre fontfilerne, stod vi overfor en udfordring med at integrere det nye skrifttype i produktet. Vi var nødt til at indstille typen - størrelser, føring, afstand - på tværs af et produkt, der har eksisteret i 10 år og har tusinder af brugergrænsefladevisninger.

Vores designsprogsystem administrerer produkttypografien på tværs af alle platforme, og alle vores UI-komponenter, kode og design refererer til specifik typografisk stil fra systemet. For eksempel, hvis en ingeniør refererede til "TextTitle3", ville den gengives som størrelse 24, førende 32 og mellemrum 2. Så når vi ændrede definitionerne, får komponenter automatisk nye indstillinger. Men fordi ingen to skrifttyper deler de samme målinger, måtte vi udvikle vores nye typografi uden drastisk at ændre det eksisterende produkt.

For at teste den nye produkttype opbyggede vi en indstilling, der gjorde det muligt for hold at se skrifttypen og indstillingerne på tværs af vores websted og mobile apps. Med vores QA-partner optog vi over 11.000 skærmbilleder fra produktet på tværs af alle fire platforme og en lang række enheder, typer og størrelser. Vi reviderede alle skærme og bemærkede fejl med UI System-teamet.

Det sidste trin før lancering var at køre et forretningsmetrisk baseret a / b-eksperiment for at sikre, at vores kodeændringer og skriften i sig selv ikke ville forstyrre produktet. Vi gennemførte eksperimentet med over 2 millioner produktbrugere og stødte ikke på nogen væsentlige problemer eller negative effekter på forretningsmetrik.

Going Live

Efter 18 måneder med oprettelse, raffinering, test og integration, vendte vi omskifteren og frigav Airbnb Cereal på tværs af vores brand og produkt. Processen lærte os meget om ins og outs ved at skabe et brugerdefineret skrifttype, samt de udfordringer og succes, der følger med det. Og denne lancering er udgangspunktet, da vi agter at fortsætte med at iterere og tilføje funktioner.

Som en global virksomhed er vi glade for bedre at repræsentere vores forskellige samfund ved at fortsætte med at udvikle vores type på tværs af alle sprog. Det er ikke en hurtig eller let bestræbelse, men det føles givende at skabe noget unikt for os, der vil forbedre, hvordan det globale samfund oplever vores produkt og brand. Vi ser frem til at se, hvordan Airbnb-korn vil vokse med os over tid.

Se det live:

Tjek dette interaktive eksemplarwebsted, som vi oprettede til Airbnb-korn. Det inkluderer også en typetester, så du kan prøve det selv på airbnb.design/cereal