Hvordan jeg genskabte Facebooks mikrointeraktioner til funktionsopdagelse

For dem, der bare ønsker at gå mod kodeeksemplet, er det lige her.

Hvis du ønsker at gå direkte mod udfordringen, skal du klikke her

* En mikrointeraktion er en subtil visuel kø til engangsbrug, der henleder opmærksomheden på en ændring i status. En tændingslampe på en kaffekande eller en farveændring på knapper er to eksempler.

Hvorfor? Hvem?! Hvad!? og noget orientering

Et almindeligt UX-problem designere og frontend udviklere lejlighedsvis støder på er behovet for at introducere en ny funktion eller udsætte en "godt skjult" en, der af en eller anden grund måske på grund af funktionalitet rod, dårlig design eller en anden grund brugeren sjældent interagerer med det område eller funktion i din ansøgning.

Uanset om det er en ny spændende funktion, din virksomhed gerne vil begynde at få brugsdata-reaktioner og feedback fra brugere, eller om det er en allerede eksisterende funktion, der sjældent bruges af en eller anden grund - dette problem findes, og vi støder på det hver gang i vores branche.

Jeg stødte på denne ekstraordinære mulige løsning på Facebook Mobile App. Interaktionsdesignere og frontend-udviklere på Facebook besluttede at fjerne en bestemt handling fra min navigationslinje i appen og sætte en ny - det hurtige link til min profil. Uanset om det er, at de studerede min opførsel specifikt, eller om det er et mere robuste fænomen, er det bestemt en værdig sag efter min mening.

Et førstehånds UX-problem - løst

Ofte finder jeg mig selv på udkig efter den hurtigste måde at navigere til min profil via Facebook-appen. I de fleste tilfælde flytter jeg synet til et par områder i appen og søger visuelt såvel som at klikke på et par områder fulde af forventning for at nå min endelige destination, indtil jeg til sidst når min profil (Det varierer selvfølgelig i hvilken appstat eller skærm du er i under din session) - for at konkludere, en ikke så behagelig oplevelse mildest sagt.

Facebook, og mere specifikt Interaction Designers såvel som frontend-udviklere, der sammen har sammenkøbt denne unikke løsning, løste dette problem efter min mening perfekt.

Beskeden, de forsøgte at formidle, som jeg opfatter det, er, at der er noget nyt, skinnende og sjovt, som blev begavet til os brugere. Det ligner en gave, der signaliserer os, at det at løsne og fjerne unboxing af denne nye handling ville føre os til en behagelig og en meget ønsket oplevelse. Yderligere, når man kigger på den statiske skærm på Facebook-mobilappen, er den eneste bevægelige del denne vidunderlige skinnende og gnistrende mikrointeraktion - et klart signal til en opfordring til handling.

Lad os tage en dyb dyk om, hvordan en så kraftig, omhyggeligt designet mikrointeraktion og et mikrointeraktionsfanatik (som mig) udløste en søgen efter udforskning!

Original - Facebook fortæller mig, at en ny mulighed er nu tilgængelig på min proceslinje, som jeg ofte brugerMin version - eller vent, er dette originalen? Jeg er lidt forvirret ...

Enkel, men alligevel kraftfuld og lokkende

Et tilsyneladende enkelt brugergrænseflade-element - disse 3 enkle blålige gnister, der vises kort over avatarikonet - antyder, at dette element er en "skinnende ny" gave, som brugeren kan afsløre, åh, spændingen - jeg kan ikke vente!

En påstået enkel touchup sammen med et minimalistisk avatarikon - smeltet sammen til en elegant, smart og simpel mikrointeraktion, der bor i en meget statisk eller inaktiv skærm i Facebook Mobile App. Dette beder den observerende bruger straks om at interagere med dette UI-element og opdage dets skjulte dyder - en skræddersyet, ordentligt designet og implementeret opfordring til handling.

Nærmer sig udfordringen

En simpel analyse af mikrointeraktion gør det temmelig klart - at finde et lignende eller nøjagtigt ikon ville være en relativt simpel opgave, mens konstruktion af en enkelt "gnist" -effekt ville være den temmelig mere komplekse del.

Jeg inviterer dig til at hoppe ombord på min tankeproces "træne" og dele min erfaring med at danne ideer, eksperimentere og opdage indsigt langs min vej til at opnå det ønskede slutresultat.

Jeg håber også, at du lærer noget nyt, som jeg gjorde ved at bruge CSS-clip-path-egenskaben til at tackle denne udfordring, og lær dens ind-og-outs.

Lad os starte med uden videre, :) Jeg trådte frem for at nedbryde effekten i mindre, mere håndterbare og intuitive miniudfordringer.

Clip ?! sti!? Uddybe…

clip-path er en CSS-egenskab, der skærer væk (klip) et område, der indstiller hvilken del af et element, der skal vises, mens delene udenfor er skjult.

En udvikler, der bruger clip-path til at skabe en kompliceret form på sit HTML Element

clip-path giver os mulighed for at oprette komplekse figurer med CSS ved at klippe et element ind i en bestemt form (som cirkel, trekant, ellipse, polygon og mere). Vi kan yderligere animere mellem figurer frit og modtage lettede overgange og morphing-effekter ud af kassen, så længe begge overgangsformer har samme antal point (koordinater x, y).

Mig eksperimenterer med clip-path for at skabe nogle grundlæggende former

Opdeling af animationer

En enkelt “gnist” -effekt i mikrointeraktionen

At fokusere min opmærksomhed på et enkelt element gjorde det meget lettere at dissekere hver animation, der aktiveres. Og så bestemte jeg følgende:

  1. transform: skala (...) - Nemmes fra 0 til 1 og tilbage til 0 langs animationens livscyklus.
  2. transform: rotation (180deg) - det tog lidt mere tid for mig at indse, at denne ninja-stjerners rotation til en firkant og tilbage er i alt 180 grader (fra dens udseendefase til dens slutposition, hvor gnisten forsvinder også).
  3. clip-path: polygon (...) - Denne del ville stort set være en af ​​de mere komplekse og interessante udfordringer inden for denne enkelt Spark Effect Challenge - derfor vil jeg diskutere den nærmere med meget mere detaljeret nedenfor.

Skalering - En byggesten til gnisteffekten

At timere skaleringen af ​​elementet har en afgørende rolle i at bidrage til effekten af ​​"gnisthed", da elementets hurtige udseende og forsvinden er stort set hvad en gnist er sammensat af - abrief skinnende besøg, der giver en midlertidig glæde for vores øjne.

Roatation - Uklarhed af linierne, et "lim" til gnistereffekten

Sammen med skaleringsovergangen, når elementet først vises og straks begynder at rotere fra venstre til højre, gør rotationen det mere livligt og holistisk. Dette tvinger det menneskelige øje til at fokusere på ikonet dekoreret af denne skinnende eller gnistrende følelse.

Den rene CSS-måde at forme form på - Clip Path: Polygon (…)

Med visse begrænsninger er dette den "indfødte" måde at opnå en morphing-effekt for CSS-former.

Kendt problem - den første, vigtigste begrænsning, der skal være klar for os udviklere, før vi nærmer os denne teknologi, er, at antallet af koordinater i begyndelsesformen og slutformen skal være lige - at vende en firkant til et rektangel er en perfekt, enkel brug, der fungerer problemfrit med teknologien.

Eksperimenter

For at være helt ærlig er det næsten første gang, jeg har brugt klippestien: Polygon () i en rigtig arbejdsrelateret brugssag. Så jeg besluttede at vove mig med nogle eksperimenter for bedre at forstå dens in-and-outs før jeg nærmer mig den specifikke udfordring, der var ved hånden.

Eksperiment 1 - En naiv tilgang - Square → 4-point Star

Square → 4-Point-Star Morphing på hover

Wow, det er kun mit første eksperiment, og jeg er allerede begejstret for klippestien :) selvom der var sket noget ret særligt her… Den morfende retning ser ud til at opføre sig underligt. Årsagen er enkel: Oprindelsesformen havde i alt 8 koordinatpunkter, hvoraf 4 var stablet på hvert hjørnekoordinat, hvilket førte til denne underlige morph-opførsel.

2 punkter (koordinater) stablet på hvert hjørne → 8 lige store spredte punkter langs de firkantede sider

Et par skridt videre med at eksperimentere opdagede jeg dette vidunderlige værktøj og brugte det til at begynde at arbejde med procentdel snarere end pixler. Jeg var også i stand til at redigere mine figurer online med det. Generelt anbefaler jeg stærkt at prøve det - dette er Clippy!

Eksperiment 2 - Justerede Morph retninger - Square → 4-point Star

I henhold til mine planer viser følgende gif en forenklet fremgangsmåde, jeg tog for at prøve at løse dette problem med et 200px med 200px-kvadrat:

Planlægning af morferne trin for trin

En simpelt koordinatjustering - spredning af 4 af de stiplede punkter lige over kvadratet (mellem hjørnerne) - ville forhåbentlig føre til en jævnere morfeffekt og i den rigtige retning (henholdsvis lodret og vandret) med det mål mod begge former snarere end diagonal retning som før:

Aha succes! - Morphing-effekten ser ordentlig ud nu

Eksperiment 3 - Octagon → Square

Enkelt gnistelement - bremsedes for at se Octagon- og firkantfaserne

Hvis vi ser nøje og gentagne gange på den enkelt gnisteffekt ovenfor, bemærker vi kort, at et sted omkring 50% gennem animationen bliver det til en ottekant. I faser før og efter Octagon forandres gnisten desuden til en firkant.

Ser ud til at være en ganske simpel opgave, gør det ikke? Jeg tænkte, at jeg bare ville bruge klipstien til at forme min forrige firkant til en ottekant som GIF ovenfor. Virkeligheden var lidt anderledes, og jeg var nødt til at ændre den oprindelige form og tegne dens polygon (...) lidt anderledes for at have kvadratet inden i ottekanten, når jeg skiftede over.

Den måde, hvorpå klipstien fungerer, er, at den opretter det ønskede klipregion i elementet ved hjælp af egenskaben, og da min originale firkant optog hele regionen af ​​dets element. Jeg kunne ikke ændre sig uden for denne region med den nuværende tildeling af koordinater.

Et par justeringer måtte foretages - og jeg skiftede også til at arbejde med procentdel nu for at understøtte dynamisk bredde / højde på figurerne fra det overordnede element.

Og voilà - vi har gjort nogle fremskridt, og nu har vi en Octagon, der overgår til en firkant og tilbage. Men vent ... vi er ikke færdige endnu!

Åndedræt Octagons er ægte ?!

Eksperiment 4— Octagon → 4-point Star → Back (Full Cycle)

Nu hvor vi ved, at Octagon er den største udseende af morfingformen, kan vi gøre vores morphingform meget mere nøjagtig og overgangen mellem dens faktiske faser af 4-punktsstjerne → Octagon → Tilbage, som det ses nedenfor:

Det var bedre

Eksperiment 5 - Skalering og uendelig loop-animation

Så jeg begyndte dette eksperiment med først at flytte fra hover-begivenheden til en øjeblikkelig udløst uendelig animation, der først bruger skala (...) -transformationen for at få stjernen til at vises og forsvinde, som det ses nedenfor:

Nu ser du mig, nu gør du det ikke - demo her

Eksperiment 6 - Rotér, start og slut positioner

Et par yderligere justeringer for at få stjerneskalaen op til fuld størrelse i startpositionen og bestemme dens slutposition med transform: roter (180deg)

Det er en roterende, Mario! - demo her

The Border Challenge

Efter lidt tid på at eksperimentere indså jeg, at det, jeg havde opnået indtil videre, ikke ville være tilfredsstillende. I det originale eksempel ser det ud til, at når gnisterne vises over ikonet i den originale mikrointeraktion, har de en slags hvid kant langs den form, der formes sammen med formen gennem hvert trin i dets nøglerammer:

Lidt forstørret - men det er tydeligt, at der er grænser langs morfingen

Eksperiment 6 - Opbygning af en grænse, der forenes sammen med gnisten

Efter at have søgt efter løsninger på internettet, stackoverløb og andre forslag i artikler for at nærme sig spørgsmålet, forstod jeg, at denne udfordring var ganske unik. Jeg kunne ikke finde nogen specifikke løsninger på mit problem. Det faktum, at min grænse måtte ”holde sig” til formen, mens den morfiserer komplicerede spørgsmål endnu mere. Så jeg turde med at lave et par test, indtil jeg fandt løsningen.

En “gnist-klon”, der er gengivet lige før mit vigtigste gnistelement som et søskendelement var den perfekte løsning. Begge måtte vises: flex og lodret såvel som vandret placeret i midten af ​​deres indpakning med retfærdig indhold: center og justere elementer: center for at opnå følgende:

Men Johnny vent! Hvordan skal du sikre dig, at klonen følger sin bror i løbet af den morfende keyframes-animation? Efter at have forsøgt at animere forælderen og barnet samtidigt og opleve nogle underlige browserproblemer eller fejl, fandt jeg, at søskendens tilgang med flex gav den bedste løsning, som det ses nedenfor:

Søskende, der animerede, skabte samtidig en perfekt justerende grænse - demo her

Tilslutning af prikker

På dette tidspunkt følte jeg allerede, at de vanskelige udfordringer i dette projekt var slut. Alt, hvad jeg skulle gøre nu, var at finde et lignende avatarikon, placere 3 gnister, justere deres positioner manuelt, indtil jeg var tilfreds, og justere deres bredde / højde også, indtil jeg nåede slutresultatet.

En forstørret version for bedre at se, hvordan tingene fungererDen endelige mikrointeraktion - demo her

Resumé

For at pakke tingene nød jeg at udfordre mig selv med at genskabe denne mikrointeraktion. Jeg lærte meget om, hvordan et tilsyneladende enkelt element i vores daglige liv (som en invitation til at klikke på et nyt ikon fra udviklerne af en software, vi forbruger) faktisk er meget mere end bare et sæt elementer og animationer, der er perfekt timede og korrekt orienterede .

En sådan skræddersyet mikrointeraktion er et kunstværk. Det er et unikt UI-element, der er omhyggeligt designet til at løse et hårdt problem. I vores tilfælde ændrede udviklerne på Facebook min mobilapps navigationslinje, fjernede et ikon, jeg ikke brugte ofte, og erstattede det med et ikon, der gjorde det muligt for mig at udføre en handling, jeg havde kæmpet for at finde og ønsket at tage mange gange - gå tilbage til min profil.

Det er en smart beslutning, en mesterværdig mikrointeraktion, der er inde i en statisk skærm. Det er den eneste bevægelige del af skærmen, og selvom den er meget minimal og relativt lille på skærmen, lokkede de skinnende glitrende stjerner på tværs af ikonets margener mine øjne og min finger til automatisk at klikke på den. Nu sætter jeg pris på arbejdet og tænkte bag det endnu lidt mere - så tak Interaktionsdesignere og Frontend-udviklere i Facebook for at opbygge så fantastiske mikrointeraktioner!

Konklusion

Jeg opfordrer jer alle til at våge og prøve at løse hårde UI- og UX-problemer gennem ideation og eksperimentering. Selvom det er rart og måske er en smule egoforbedrende at nå slutresultatet og lykkes, synes jeg det er den mindre betydningsfulde del af oplevelsen.

I mine øjne er den rejse, du går igennem, udstyret med dit dygtighedssæt til at eksperimentere, tænke og konsultere med andre den bedste del. De indlærings- og indsigtsindsamlingsprocesser, du oplever, er meget vigtigere, ganske enkelt sagt og betyder langt mere end destinationen.

korrekturlæsere

Mange tak for hjælp fra disse fantastiske mennesker, der har hjulpet med at gennemgå og give feedback til mine artikeldrag, du er fantastisk! ;) - Jared M. Spool Yoni Weisbrod Ofir Ovadia Dima Vishnevetsky

* Demoorientering - Eksempler er i en Vue.js-konfiguration, der er hostet på Codesandbox.io, for at nå den rene HTML / SCSS-logik efter at have navigeret væk, klik på komponentmappen → klik derefter på spark.vue-fil → HTML er viklet omkring tags → SCSS er bare en rulle væk indpakket omkring