Frakobler Chrome

Omdesign omniboxen

Til ære for Chromes tiårs fødselsdag i september 2018 lancerede vi en komplet redesign af vores UI, som involverede en revision af vores designproces. Og selvom Chrome altid har været open source, ville jeg dele flere af vores designhistorier i håb om, at andre kan lære af det.

1. Mød vores kasse

Jeg får ofte spørgsmål som "Hvorfor har Chrome brug for en designer?" Min kollega, Sebastien, beskrev det smukt i sit Medium-indlæg, da han sagde,

”Den sværeste feedback, jeg modtog, var:” Det er det? ”

Begravet dybt inden for dette spørgsmål var en antagelse om, at browsere skulle se sådan ud:

Det er velkendt, fordi det ligner kassen på min pc, og med 2 milliarder brugere så det ud til at fungere. Så hvorfor redesigne det?

Fordi skjult inde i denne boks var verdens mest sofistikerede, sikre, søge- og gengivelsesmotor til internettet.

Og vi ønskede at give det et design, der ændrede måden, hvorpå verden så browsere.

2. En kort historie med kasser

Lad os se nærmere på, hvordan vi kom hertil:

Boks nr. 1

Denne 0.5dp gradient skitseret, dobbelt 22% opacitet drop skyggefuld boks og dens varme lille 1dp hjørneradius siger en ting: Jeg kan skrive i den.

Hvorfor? For tilbage, da computere bare var tastaturer knyttet til skærme, var hele skærmen i det væsentlige bare tekst.

Men da musen blev opfundet, var der et behov for at vise, hvilket område der kunne klikkes. Da skærme derefter kun kunne tegne firkantede pixels, blev "tekstindtastningsfeltet" født.

Kasse nul

Da browsere blev introduceret, havde denne boks det dobbelte formål at vise din placering eller "Uniform Resource Locator (URL)" - deraf navnet "adresselinjen."

I 2008, da Chrome første gang blev lanceret, var vores primære designprincip at reducere kognitiv overhead. Så vi fusionerede Googles søgefelt med adresselinjen og tilføjede en dropline-menu til hårgrænsen med en 4dp drop-skygge for at gøre forslag lettere at scanne - deraf navnet "omnibox."

2008

Da browsere først kom til mobil, var skærmens ejendom dyrebar, så vi lavede hver pixel til at optage så lidt plads som muligt. Vi brugte en 1 dp indre dråbsskygge i stedet og gjorde den grå blanding ind.

2012

Siden da er internettet blevet mere kompliceret og enheder, smartere. Vi begyndte at bekymre os om, hvad der sker, når et websted bliver hacket og går på kompromis med din identitet. Eller når du pludselig mister din internetforbindelse. Eller vil du vende tilbage til en side, du har besøgt for en uge siden, men ikke kan huske adressen til.

I løbet af de sidste 10 år tænkte tusinder af ingeniører over hele verden (og hos Google) over disse typer spørgsmål og hældte deres hjerte og sjæl i at finde løsninger, der hjælper brugere med at navigere på dette eksponentielt skiftende web.

Miraklet ved mobil browsing bragte også en flod af mennesker, der kom online første gang på deres telefoner. De havde aldrig set denne boks før; de vidste ikke alle de ting, vi lærte ved desktop-browsing.

Jeg må indrømme, jeg kendte ikke halvdelen af ​​Chrome's funktioner, før jeg begyndte at arbejde her. For eksempel kan du skubbe værktøjslinjen til venstre eller højre for at skifte mellem faner. Eller stryg ned for at se alle dine faner.

Stryg ned på værktøjslinjen for at se fanerne #protips

Funktioner som dette var tilsyneladende skjult, fordi vi aldrig ville spam vores brugere. Faktisk var vores omnibox designet til at være usynlig for at ære vores kerneværdi, "indhold, ikke krom." Et princip, jeg kunne lide så meget, det er faktisk en af ​​grundene til, at jeg kom med.

Som introvert var der en appel til at designe til noget, der også forsøger at være usynlig. Produktet i sig selv så ud til at spejle mit syn på design:

at beskytte det hellige rum mellem brugeren og indholdet - ikke for at søge opmærksomhed.

Ligesom Beatrice Wardes opfattelse af typografi som en "krystalkugle" så jeg Chrome kun som en "krystaldisplay."

Jeg tog så forkert.

Da internettet ændrede sig, begyndte andre tredjeparter at foregive at være Chrome for at stjæle information eller var med vilje vildledende.

Mens der tidligere ikke var noget imod os, om nogen kunne vælge Chrome fra andre browsere, begyndte det at påvirke vores brugers sikkerhed.

Så for første gang begyndte vi at stille spørgsmålstegn ved vores behov for at være mindre usynlige.

3. En kasse med 2.000 sider

Da jeg først sad sammen med vores ingeniører for at få en bedre idé om, hvordan vores omnibox blev bygget, kunne intet have forberedt mig på, hvad der skulle følge.

Dette var som intet, jeg nogensinde havde designet i min 15 års erfaring.

Vi understøtter over 6 versioner af Android på tværs af 40 sprog - inklusive dem, som Roboto Medium ikke understøtter - som vi har en yndefuld tilbagevenden til. Vi tillader også udviklere at ændre farven på vores værktøjslinje til stort set alt, alt sammen med opretholdelse af kontrastforhold for tilgængelighed for at understøtte webapp-økosystemet.

Vores UI tilpasser sig også, så enheder med høj og lav pixeltæthed har lignende berøringsmål og kører glat uanset din enheds hukommelseskapacitet eller producent.

Det er over 2.000 permutationer for denne boks - inden du engang interagerer med den.

Så snart du trykker på, skriver, ruller, stryger eller taler med det, omdannes vores omnibox til tusinder af andre permutationer.

Når du skriver, sørger vi for, at det tastatur, du ser, er det, du er bekendt med. Når du deler et websted, viser vi de samme muligheder, som du normalt har på din telefon.

Et par af de formfaktorer, vi designer til. (Den sorte vandrette linje repræsenterer tilstand af delt skærm)

Vores statiske felt med 2.000 permutationer ganges derefter til over 20.000 med alle de interaktioner, der er inkluderet.

Ser det ud som lidt meget? Ikke rigtig.

Fordi vi vil sikre os, at alle har fuld adgang til internettet - uanset hvor de har adgang til det fra.

4. Femoghalvfarvet grå nuancer

Selv i vores team vidste ingen, hvor mange variationer af tekstformater der boede i denne boks. Da Chrome blev bygget over 10 år, havde vi et spredt sæt ufuldstændige eller forældede kildefiler.

Så i due diligence (men mest for at sikre, at jeg ikke ødelagde vores brugergrænseflade for milliarder af mennesker) gennemsøgte vi gennem hver kodelinje for hver tekststil og kortlagede hundredevis af variationer i størrelse, vægt, farve og gennemsigtighed.

Selvfølgelig, vi havde "materialiseret" vores brugergrænseflade for et par år siden, men vi havde ikke nogen retningslinjer for, hvordan og hvornår vi skal bruge disse specifikationer, hvilket resulterede i over 14 nuancer af materiale grå til kun 14 sp Roboto regelmæssig tekst.

Vi brugte over 95 forskellige grå nuancer i alt.

Det var umuligt at beslutte, hvilke der skulle erstattes uden at se på konteksten. Selv den mindste ændring kunne bryde tilgængelighedsstandarder. Men jeg ville gerne vide det mindste antal farver, vi faktisk havde brug for.

Svaret kom næsten et halvt år senere: 8.

Derefter gjorde vi det samme for hvert ikon i vores UI. Alle 115 af dem * - omhyggeligt at vælge, hvilke der var Materiale (menuikoner), hvilke der var Chrome-specifikke (som Incognito), og hvilke der var platformspecifikke (som kopi / indsæt) - inklusive ikke de valgte, pressede og deaktiverede tilstande for dem alle.

* Derudover vendes nogle af vores ikoner til sprog fra højre til venstre, så det samlede antal er faktisk tættere på 400+

5. Design er aldrig (ikke) udført

Efter måneder med at stirre på grå bokse, ville jeg lyve, hvis jeg sagde, at det bjerg af arbejde, der var tilbage, ikke virkede skræmmende.

Med den vildledte tillid fra en person, der netop havde slå spillet Getting Over It, troede jeg ærligt, at jeg kunne gøre det helt alene. Men jo hårdere jeg prøvede, desto mere indlysende blev det, at dette problem ikke forsvandt med en simpel redesign.

Vi var nødt til at gennemgå hele vores designproces for at sikre, at vores nuværende og fremtidige UI forbliver konsistent.

Dette var vanskeligt, fordi Chrome er i en konstant afbalancerende handling mellem Google-specifikationer (konton-login-strømme), Materialespecifikationer (knapper og ikoner), Native UI (tastaturer) og Chrome-brandelementer (det offline dino-spil).

Så jeg bad vores ingeniører om hjælp, og forbløffende glædede de sig over omfanget af krybning. Dette spørgsmål gjorde det også vanskeligt for dem at gennemgå kode, da platformbegrænsninger og funktionsændringer betød et vandfald af regressioner og uoverensstemmelser. Faktisk hyrede vores Eng-leder, Ted Choc * endda nogen til at støtte vores indsats. (Mit bogstavelige ønske går i opfyldelse!)

* For at give dig en idé om, hvor fantastisk vores Eng-team er, siger Teds missionserklæring bogstaveligt "Chrome Mobile Awesomification."

Med nyudviklet support har vi til hensigt at opbygge en visuel spec af delte komponenter baseret på et kodebibliotek. Materielle komponenter, som andre apps får "gratis", måtte tilpasses for at imødekomme alle Chrome's (2.000) permutationer til det punkt, hvor det næsten blev bygget fra bunden. Så vi var nødt til at finde en skalerbar måde at kortlægge alle disse forskelle på.

Resultatet var vores første Chrome stickerark nogensinde:

Vores v1 (M54) klistermark - kortlægning af enhver farve, tekst, ikon og komponent i vores UI

6. Design til hastighed

I flere måneder fjernede vi blot ting. Oprydning af år med akkumuleret design og teknisk gæld. Nu hvor vi havde en knirkende ren overflade og et system med byggesten, var vi klar til at begynde at designe.

Lad os vende tilbage til det felt, vi først mødte i kapitel 1. Boks nr. 1 bor i en større grå boks, vi kalder "værktøjslinjen."

Boks nr. 2

Værktøjslinjen adskiller vores UI fra indholdet og system-UI. Når du trykker på den hvide boks, udfylder den den grå boks og afslører en anden grå boks nedenfor. (Forvirrende ikke?)

Boks nr. 3

Det er her vi får vist alt, hvad vi gør bag gardinet for at prøve at gøre Chrome så hjælpsom som det kan være. Men hvorfor har alle disse bokse ændret størrelse og ændret sig fra en tilstand til den næste?

De mange ansigter i boks nr. 1

Når noget skifter fra skærm til skærm, bliver det vanskeligt at genkende eller blive bekendt med.

Hvis brugergrænsefladen ændres, når brugerne interagerer med det, behandler de den ændring som oplysninger, der kan være nyttige senere. For eksempel, hvis et billede forsvinder i et ikon, skal du muligvis huske det ikon, hvis du vil åbne dette billede igen.

Dette tilføjer den sekundære kognitive belastning af at forstå en brugergrænseflade og prøve at beslutte, hvilke oplysninger der er nødvendige for at bevare.

Vi fjernede hver pixel af visuel støj for at gøre det hurtigere for dig at kognitivt behandle - ikke kun for at gøre det æstetisk tiltalende.

Selv hvis den reddede 1 person i hver by bare 1 sekund, er det cirka 2.000.000 sekunder eller 23.14 dages tid. Tænk, hvad folk kunne gøre med 23 ekstra dage!

For at demonstrere, lad os se på vores værktøjslinje med kun teksten og ikonerne fjernet:

Lægger du mærke til, hvor meget dit øje dart rundt på skærmen for at behandle de forskellige elementer?

Lad os nu se på den samme skærm med kun de farver og skygger, der er fjernet:

Udøvelsen af ​​at starte fra ingenting, eller hvad vi kalder "bygning fra hvidt", betød, at ethvert element måtte tages i betragtning. Inkluderet denne boks, der stille sad over vores UI alle disse år:

Boks nr. 4

Heldigvis kendte vi skaberne af boks nr. 4 og havde en masse støtte fra Android-teamet til at ændre farven baseret på indholdet (en anden 6 måneders rejse, som fortjener sit eget indlæg).

Men lad os gå videre til de andre indbyggere i boks nr. 2: ikonerne. Disse ikoner fulgte med to andre usynlige kasser:

1. “Afgrænsningsboks”, som skitserede formen på billedaktivet.

Usynlig boks nr. 5

2. “Berøringsmål”, som skitserede det område, du kunne trykke på.

Usynlig rubrik nr. 6

Da ikonet “3-punktsmenu” var tyndere, havde det et mindre berøringsmål. Men blot ved at gøre kassen større, gjorde den visuelt ubalanceret og skabte ujævne mellemrum mellem ikonerne.

Så vi var nødt til at gå på kompromis og lidt bryde fra materialespecifikationen for at gøre det lettere at tappe og visuelt afbalanceret.

Ja, jeg tilbragte en hel uge og stirrede på usynlige kasser. Vil nogen lægge mærke til det? Mest sandsynligt ikke. Var det det værd? 2.000.000 gange ja.

7. En boks til at styre dem alle

Efter at jeg havde opbygget nok tillid ved at gennemgå alle tekster, farver og ikoner i vores UI, var jeg klar til at tackle omniboxen.

Vi ønskede at finde en måde at subtile forstærke Chromes brand - en udfordring i betragtning af vores logo vises sjældent i vores UI. Jeg lavede snesevis af designs, der syntes lovende, kun for at indse, at ingen af ​​dem fungerede, fordi de alle manglede mening.

Så jeg gik tilbage til vores mærkesøjler og kiggede et godt hårdt kig på vores logo. Den første ting, jeg bemærkede, var små bogstaverne "c."

Dette taler til vores mærkes uformelle karakter, så det var vigtigt at finde en venlig form. Vi deler også de samme 4 farver som Google-logoet for at vise vores arv. Faktisk havde Android, Google og Chrome alle en tilbagevendende form på tværs af deres logoer:

Cirklen.

Cirkler er naturligt forekommende former, i modsætning til rektangler. Så de har en mindre visuel kognitiv belastning. Denne form var også stadig frisk i mit sind fra en to-års stint, der bor i London.

Da navnene på metrostationen først blev vist med rektangulære skilte, var det vanskeligt for bevægelse af togpassagerer at skelne dem fra plakatannoncer. Så i 1912 tilføjede de røde cirkler bag dem for at gøre det lettere at finde. Frank Pick integrerede derefter cirklen i det nu berømte logo.

Billedet kommer fra London Transport Museum

Dette slog mig som en bedre metafor for vores omnibox.

Det skal ikke bare vise dig, hvor du var, det skulle hjælpe dig med at komme fra et sted til det næste.

Når vi kiggede dybere på vores logo, var den form, der især stak ud for mig, denne:

Det var bogstaveligt talt formen på vores brand.

Det udtrykte vores karakter, mens vi demonstrerede, at dette ikke kun var et "søgefelt" eller "adresselinje", men noget nyt og venligt.

Da introduktionen af ​​musen førte til formen på tekstboksen, havde vi brug for noget nyt til den indførte enhed, mobiltelefoner, der blev introduceret - vores fingre. Som denne form også forstærket.

Tilfældigt havde vi også et team udflugt til en Frank Stella-udstilling på de Young Museum. Stellas brug af kurveformede lærråder brød ud af den rektangulære standardramme. Ligesom mig elskede han også racerbiler, og i sit maleri Deauville, en del af sin ”racerspor-serie”, brugte han en lignende form for at antyde hastighed - en af ​​Chromes kerne-søjler.

Jeg gentog den modernistiske følelse af, at traditionelle kunstformer blev irrelevante og forældede for vores opgaver. Så vi navngav vores nye visuelle designretning "Moderne."

Derefter udforskede vi tusinder af designs.

Alle sketch-artboards

Først tog jeg den samme tilgang, som vi oprindeligt tog på mobil. Brug af en 1 dp hårgrænse syntes at være fornuftig. Men i henrettelse gik det let tabt i et hav af hvide steder med søgestænger på toppen. Hårlinjen fungerede heller ikke så godt i inkognitotilstand og var vanskelig at afbalancere imod de tykke skitserede ikoner.

En af vores designere troede bogstaveligt talt, at det kun var en wireframe.

Brug af Materiale dråbsskygge følte sig heller ikke helt passende, da det ikke løste vores originale problem med at virke som bare en "søgefelt." Og den nederste dråbsskygge tilføjede en yderligere 4 dp, som var tung og lodret fra centreret.

Vi forsøgte endda at fjerne boksen helt, men elementerne virkede nu tilfældigt placeret, og en ændring som centrering af URL-adressen havde betydelige Eng-omkostninger.

Da det viste sig, arbejdede vores kolleger også på at få vores URL til at vises renere, og materiale 2 var lige begyndt at rulle ud. Det bragte rigere farvepaletter, der gav vores liv mere liv.

FørEfter opdaterede farver og webadresser

Og som det viste sig, at have en ensartet form også gjorde vores kode mindre kompleks med færre overgangsanimationer - den perfekte balance mellem design og effektivitet.

Nu var vi klar til at sætte det på prøve. Tusinder af brugere, måneder med eksperimenterings- og anvendelighedsundersøgelser og krydsede fingre, sammenlignet med vores tidligere design, blev det vurderet til at være mere "venligt", "innovativt" og "intelligent" uden at virke mindre "hurtig" eller "pålidelig" .”

M68 til M69Vores årlange rejse

Og selvom jeg kun har tid til at skrive om denne ene boks, er der et dusin andre historier ligesom det for hver anden tomme af vores UI.

Vores nye “moderne” M69-klistermærke

Er det perfekt? Ikke endnu, men det er ikke det, der gør mig stolt af det, vi har gjort. Det er det faktum, at vi gjorde Chrome mindre og billigere at downloade, mens vi gjorde det - og sørgede for, at hver pixel, vi byggede, banede vejen for den næste designer, der kommer med noget endnu bedre.

Personligt vidste jeg, at vi havde gjort noget rigtigt, da en deltager i vores brugerundersøgelse sagde,

”Dette giver mig en bedre følelse af ro og kan faktisk hjælpe mig i hele min dag.”

Ikke fordi de kunne lide designet. Men fordi det var sådan, jeg også så på Chrome.

Vi brugte næsten et år på at porte over hver pixel i vores UI, fordi vi ønskede, at indpakningen skulle matche kvaliteten af ​​gaven indeni - bare på en chance for, at du måske denne gang måske bemærker, at dette ikke er en almindelig kasse.