Stop med at designe grænseflader, Begynd at designe oplevelser

Denne artikel er en del af en serie om vores nye retningslinjer for grænseflade.

Rodet proces, rodede resultater

For 8 måneder siden, efter at have tilbragt nogen tid i agenturer, besluttede jeg at tage en ny udfordring, og jeg var stolt med i designteamet fra BlaBlaCar.

I mine første par uger kan jeg huske, at jeg blev ramt af den måde, de arbejdede på. Deres værktøjer bestod mere eller mindre af en tom Sketch-fil med tomme kunstplader og to testtelefoner til at lave skærmbilleder af applikationen.

Værktøjsdesignere bruges til at bruge på BlaBlaCar: en tom Sketch-fil og 2 testtelefoner.

For at arbejde på en side eller en flow importerede de deres skærmbilleder til Sketch, beskær dem, arbejdede direkte på dem, maskerer nogle elementer, oprettede nogle nye, åbn gamle skissefiler for at få komponenter, de ville have oprettet før ... Og alle de mens jeg stiller sig spørgsmål som "hvad er de rigtige margener?", "hvad er den rigtige størrelse for en knap?", "hvad er den rigtige farve?" osv. Jeg fandt konstant, at jeg spurgte mine kolleger, hvilken fil jeg kunne åbne for at få en knap eller en øverste bjælke ... bare for at ende med at oprette en ny ... og afslutte med et totalt inkonsekvent resultat.

Det er faktisk sådan, den samme private profilside ser ud på Android, iOS, MWeb og Web. Hvorfor er det så anderledes?

Rot til harmoni

Jeg kan huske, at jeg spurgte mig selv: ”Hvordan administrerer de for en samme side forskellige designs med forskellige logikker på forskellige platforme?”. Svaret er relativt enkelt: De klarede sig ikke.

Deres måde at arbejde på var OK for et team på 3, men vi så allerede, at det kunne være udfordrende at opretholde konsistens med et hurtigt voksende team. Vi var alle enige om, at vi ikke ønsker at bruge for meget tid på grænseflader længere, men fokusere i det væsentlige på oplevelsen.

Vi besluttede at løse vores problem, og løsningen, vi kom på, er virkelig enkel:

Lego-metafor i design: lego-mursten svarer til vores mursten af ​​UI-komponenter.

Legos! Du har sandsynligvis hørt om metaforen om Lego i design allerede, lego-klodser svarer til vores klodser med komponenter. Hvis jeg tager en kasse med de samme Legos, kan jeg bygge alt dette ...

... en søflyvemaskine, en muskelbil og endda en skide T-Rex!

Så vi oprettede et bibliotek med UI Lego Bricks for at give vores designere mulighed for at gøre det samme! Nu med vores UI Lego Bricks ...

Eksempel på UI-mursten designere bruger på BlaBlaCar.

... de kan hurtigt bygge en side eller endda en flow, og så iterere og teste hurtigere.

Designere kan nu bygge, itere og teste hurtigere.

Hvor meget tid sparer dette virkelig?

Du spekulerer sikkert på, hvor meget tid vi faktisk kan spare ved at bruge denne metode. Vi var også i tvivl om det, så vi besluttede at lave en simpel test. Vi tog den private profilside og bad vores designere om at genopbygge den, nogle med vores UI Lego Bricks, nogle uden.

Dette er den side, vi bad vores designere om at bygge med og uden lego mursten.

Vi timede dem, mens de gjorde arbejdet, og resultaterne var virkelig positive: I gennemsnit brugte de 24 minutter på at bygge siden uden Lego Bricks, mens de kun ville tilbringe 13 minutter med Lego Bricks. Vi siger ikke, at vi prøver at fokusere på produktivitet, det er ikke det, men vores designere brugte faktisk 50% mindre tid på at tænke på pixels og 50% mere tid på at tænke på oplevelsen, og det er præcis, hvad vi ønsker.

Intet mere gentaget arbejde

Hos BlaBlaCar er vi aldrig tilfredse, og efter at have brugt vores UI-klodser i et stykke tid og forbedret dem med et par små iterationer, tænkte vi "Vi kan helt sikkert spare endnu mere tid!"

Vi kiggede fortsat på deres mest gentagne og tidskrævende opgaver. Der er faktisk en, som alle designere møder dagligt: ​​flere platforme!

Én komponent = Flere platforme

Vi ved alle, hvor irriterende det er at oprette en side til iOS for derefter at bygge den igen til Android og mobilweb. Vi arbejdede hårdt for at skabe et bibliotek med komponenter, der ville være identiske for hver platform, mens de forbliver platformkompatible. Nu kan vores designere designe til kun en platform, sikker i den viden, at for eksempel en front-end-udvikler kan bruge et iOS- eller Android-design til at opbygge den samme side til mobilweb.

Tag genveje

Vi formåede at få vores designere til at spare 50% tid på bygningsgrænseflader, vi prøver at reducere antallet af platforme, de designer til, men vi vil stadig spare meget mere end det. Hvis vi ser på processen med at skabe grænseflader i dag på BlaBlaCar, er det sådan, det ser ud:

Designere tegner → de flytter næste til wireframes → derefter prototyper → og afsluttes derefter design → der vil derefter gå til udvikling.

Som du allerede har forstået, ønsker vi ikke, at vores designere skal bruge tid på pixels! Så det næste trin er, at vores designere skal gå direkte fra skitser til udviklingsfase.

Dette kan virke lidt for meget, men vi er så sikre på vores designsystem, at vi mener, at en designer kunne give en skitse til en udvikler og få en produktionsversion, der er helt tilpasset vores bibliotek af komponenter.

Vi ønsker ikke, at vores designere skal bruge mere tid på grænseflader, vi ønsker, at de kun skal fokusere på oplevelsen.

De regler, vi fulgte

Vi hentede vores inspiration fra Atomic Design-metodikken oprettet af Brad Frost, der var inspireret af kemi og den måde, hvorpå komplekse organismer er lavet af molekyler, der igen er lavet af atomer. Hvis du ikke allerede kender denne metode, anbefaler jeg dig kraftigt at læse hans artikel her.

Vi anvendte denne metode til en stærk metafor (LEGO), der var dyb og tæt i mening, og som hjalp os med at kommunikere, så folk hurtigt kunne forstå det og komme i forbindelse med ideen. Folk fra ethvert felt i virksomheden ville let dele ideen uden at have os til at forklare det.

Efter flere måneders arbejde med vores designsystem var jeg i stand til at trække nogle store regler for, hvordan man nærmer sig det. Det er ikke raketvidenskab, men det hjalp os virkelig ikke med at gå tabt:

  • Metafor: vælg en stærk metafor for at hjælpe folk med hurtigt at forstå, hvad du taler om, uden selv at forklare det. Vi valgte LEGOS, men der er andre ideer, du kan bruge (kemi, fordisme, økologi ...)
  • Kommunikation: dette er en vigtig regel om, hvordan du ikke får dit projekt til at mislykkes. Kommuniker så tidligt som muligt med alle i virksomheden: udviklere, premierminister, dataforskere, designere, administrerende direktør ... Lad dem være en del af projektet.
  • Almindeligt sprog: alt, der ikke har noget navn, findes ikke. Sørg for, at alle er på linje med de navne, du giver til komponenterne. Du behøver ikke at det skal være for teknisk, det vigtigste er, at alle kalder en komponent på samme måde.
  • Regler: for ethvert UI-valg skal du lave en klar regel. Hvis du ikke kan forklare et valg, skal du finde en regel. (Jeg vil tale mere om dette i en anden artikel)
  • Ingen undtagelser: Undtagelse er det, der hurtigt kan føre dig til total inkonsekvens. Hold dig til dine regler og komponentdesign, og selvom det ser underligt ud i starten, skal du ikke gøre nogen undtagelser. Undtagelser tages hånd om, når dit produkt er helt på linje med dine retningslinjer.

Jeg siger ikke, at min metode er den rigtige, jeg vil endda sige, at det, vi prøver at opnå, passer til vores produktvision, men sandsynligvis ikke ville passe ind i et agenturmiljø. Jeg har mødt mange mennesker, der var interesseret i at arbejde på et designsystem, og jeg er helt åben for diskussion, feedback og debatter, så del dine tanker. Jeg skriver snart en mere præcis artikel om den måde, vi oprettede vores designsystem på, men i mellemtiden skal du kontakte mig, hvis du ønsker mere information! ;)