Hoe ik de micro-interacties van Facebook heb nagebouwd voor het ontdekken van functies

Voor degenen die gewoon naar het codevoorbeeld willen gaan, het is hier.

Klik hier als je meteen de uitdaging wilt aangaan

* Een microinteractie is een subtiele visuele wachtrij voor eenmalig gebruik die uw aandacht vestigt op een statusverandering. Een aan / uit-lampje op een koffiepot of een kleurverandering bij het aanwijzen van knoppen zijn twee voorbeelden.

Waarom? Wie?! Wat!? en enige oriëntatie

Een veel voorkomend UX-probleem dat ontwerpers en frontend-ontwikkelaars zo nu en dan tegenkomen, is de noodzaak om een ​​nieuwe functie te introduceren of een "goed verborgen" functie te onthullen die om een ​​of andere reden misschien te wijten is aan rommel in de functionaliteit, een slecht ontwerp of een andere reden waarom de gebruiker zelden interactie heeft met dat gebied of kenmerk van uw applicatie.

Of het nu een nieuwe, opwindende functie is die uw bedrijf graag gebruikersdatareacties en feedback van gebruikers zou willen ontvangen of als het een reeds bestaande functie is die om een ​​of andere reden zelden wordt gebruikt - dit probleem bestaat en we komen het zo nu en dan in onze branche tegen.

Ik kwam deze uitzonderlijk mogelijke oplossing tegen op de mobiele Facebook-app. Interactieontwerpers en Frontend-ontwikkelaars op Facebook besloten een bepaalde actie uit mijn in-app navigatiebalk te verwijderen en een nieuwe te plaatsen - de snelle link naar mijn profiel. Of het nu is dat ze mijn gedrag specifiek hebben bestudeerd of dat het een robuuster fenomeen is, het is naar mijn mening absoluut een waardige oorzaak.

Een UX-probleem uit de eerste hand - opgelost

Vaak vind ik mezelf op zoek naar de snelste manier om naar mijn profiel te navigeren via de Facebook-app. In de meeste gevallen verplaats ik mijn zicht naar een paar gebieden in de app om visueel te zoeken en op een paar gebieden vol verwachting te klikken om mijn eindbestemming te bereiken totdat ik uiteindelijk mijn profiel bereik (het varieert natuurlijk in welke app-status of scherm je bent tijdens je sessie) - tot slot, op zijn zachtst gezegd een niet zo aangename ervaring.

Facebook, en meer in het bijzonder Interaction Designers en de frontend-ontwikkelaars die samen deze unieke oplossing hebben bedacht, hebben dit probleem naar mijn mening perfect opgelost.

De boodschap die ze probeerden over te brengen zoals ik het waarneem, is dat er iets nieuws, glans en plezier is dat aan ons gebruikers is geschonken. Het is vergelijkbaar met een cadeau dat ons aangeeft dat het ontrafelen en uitpakken van deze nieuwe actie ons zou leiden tot een prettige en veel gewenste ervaring. Verder, wanneer we naar het statische scherm van de mobiele Facebook-app kijken, is het enige bewegende deel deze prachtige glanzende en vonkende micro-interactie - een duidelijk signaal voor een call-to-action.

Laten we een diepe duik gaan maken over hoe zo'n krachtige, zorgvuldig ontworpen Microinteraction en een Microinteraction Fanatic (zoals ik) een zoektocht naar exploratie hebben veroorzaakt!

Origineel - Facebook vertelt me ​​dat er een nieuwe optie beschikbaar is in mijn taakbalk die ik vaak gebruikMijn versie - of wacht, is dit het origineel? Ik ben een beetje in de war…

Eenvoudig maar krachtig en aantrekkelijk

Een ogenschijnlijk eenvoudig UI-element - deze 3 eenvoudige blauwe glitters die kort boven het avatar-pictogram verschijnen - laten doorschemeren dat dit element een "glimmend nieuw" geschenk is voor de gebruiker om te ontrafelen, oh de opwinding - ik kan niet wachten!

Een naar verluidt eenvoudige touch-up samen met een minimalistisch avatar-pictogram - samengesmolten tot een elegante, slimme en eenvoudig ogende micro-interactie in een zeer statisch of inactief scherm van de Facebook Mobile App. Dit vraagt ​​de observerende gebruiker onmiddellijk om te communiceren met dit UI-element en zijn verborgen deugden te ontdekken - een op maat gemaakte, correct ontworpen en geïmplementeerde call-to-action.

De uitdaging naderen

Een eenvoudige analyse van de micro-interactie maakt het vrij duidelijk - het vinden van een vergelijkbaar of exact pictogram zou een relatief eenvoudige taak zijn, terwijl het ontwerpen van een enkel "vonk" -effect het nogal complexere onderdeel zou zijn.

Ik nodig je uit om aan boord te gaan van mijn denkproces 'trainen' en mijn ervaring te delen in het vormen van ideeën, experimenteren en het ontdekken van inzichten op mijn pad om het gewenste eindresultaat te bereiken.

Ik hoop ook dat je iets nieuws leert zoals ik deed door de CSS clip-path eigenschap te gebruiken om deze uitdaging aan te gaan en de ins en outs te leren.

Laten we beginnen zonder :), stapte ik naar voren om het effect op te splitsen in kleinere, beter beheersbare en intuïtieve mini-uitdagingen.

Klem?! pad!? Uitwerking van ...

clip-path is een CSS-eigenschap die een gebied wegsnijdt (clips) dat bepaalt welk deel van een element wordt getoond terwijl de delen buiten verborgen zijn.

Een ontwikkelaar die een clippad gebruikt om een ​​ingewikkelde vorm te maken op zijn HTML-element

clip-path stelt ons in staat om complexe vormen te maken met CSS door een element in een bepaalde vorm te knippen (zoals cirkel, driehoek, ellips, veelhoek en meer). We kunnen verder vrij animeren tussen vormen en versoepelde overgangen en morphing-effecten uit de doos ontvangen zolang beide overgeschakelde vormen hetzelfde aantal punten hebben (coördinaten x, y).

Ik experimenteerde met clippad om enkele basisvormen te maken

Animaties Breakdown

Een enkel

Door mijn aandacht op een enkel element te richten, werd het veel gemakkelijker om elke animatie te ontleden die wordt geactiveerd. En dus besloot ik het volgende:

  1. transform: scale (...) - Wordt tijdens de levenscyclus van de animatie versoepeld van 0 naar 1 en terug naar 0.
  2. transformeren: roteren (180 graden) - het kostte me wat meer tijd om te beseffen dat de rotatie van deze ninja-ster naar een vierkant en terug in totaal 180 graden is (van de verschijningsfase tot de eindpositie, waarin de vonk verdwijnt ook).
  3. clip-path: polygon (...) - Dit deel zou vrijwel een van de meer complexe en interessante uitdagingen binnen deze enkele Spark Effect Challenge zijn - daarom zal ik het hieronder met veel meer detail hieronder bespreken.

Scaling - Een bouwsteen van het vonkeffect

Het timen van de schaal van het element speelt een cruciale rol bij het bijdragen aan de 'sprankeling' van het effect, omdat het snelle uiterlijk en het verdwijnen van het element vrijwel is wat een vonk is samengesteld - een glimmend bezoek dat een tijdelijk plezier voor onze biedt ogen.

Roatation - Vervaging van de lijnen, een "lijm" voor het vonkeffect

Samen met de schaalovergang, wanneer het element voor het eerst verschijnt en onmiddellijk van links naar rechts begint te draaien, maakt de rotatie het levendiger en holistischer. Dit dwingt het menselijk oog zich te concentreren op het pictogram dat is versierd met dit glanzende of sprankelende gevoel.

De pure CSS-manier van vormen vormen - Clip Path: Polygon (...)

Met bepaalde beperkingen is dit de "oorspronkelijke" manier om een ​​morphing-effect voor CSS-vormen te bereiken.

Bekend probleem - de eerste, belangrijkste beperking die voor ons ontwikkelaars duidelijk moet zijn voordat we deze technologie benaderen, is dat het aantal coördinaten in de beginvorm en eindvorm gelijk moet zijn - een vierkant naar een rechthoek draaien is een perfecte, eenvoudig gebruik dat naadloos samenwerkt met de technologie.

experimenteren

Om eerlijk te zijn, dit is vrijwel de eerste keer dat ik clip-path heb gebruikt: Polygon () in een echte werkgerelateerde use-case. Dus besloot ik om wat experimenten te doen om de in- en outs beter te begrijpen voordat ik de specifieke uitdaging naderde.

Experiment 1 - Een naïeve benadering - Vierkant → 4-punts ster

Vierkant → 4-punts-ster Morphing bij zweven

Wauw, het is pas mijn eerste experiment en ik ben al enthousiast over het clippad :) hoewel hier iets heel bijzonders is gebeurd ... De morphing lijkt zich vreemd te gedragen. De reden is eenvoudig: de oorsprongsvorm had in totaal 8 coördinaatpunten, waarvan er 4 op elke hoekcoördinaat waren gestapeld, wat leidde tot dit rare morphgedrag.

2 punten (coördinaten) gestapeld op elke hoek → 8 gelijkmatig gespreide punten langs de vierkante zijden

Een paar stappen verder in het experimenteren ontdekte ik dit prachtige hulpmiddel en gebruikte het om te werken met percentages in plaats van pixles. Ik heb er ook mijn vormen online mee kunnen bewerken. Over het algemeen raad ik het ten zeerste aan om het eens te proberen - dit is Clippy!

Experiment 2 - Aangepaste morph-richtingen - Vierkant → Vierpuntige ster

Volgens mijn plannen laat de volgende gif een vereenvoudigde aanpak zien die ik heb gebruikt om te proberen dit probleem op te lossen met een vierkant van 200 bij 200 pixels:

Stap voor stap de morphs plannen

Een eenvoudige coördinaataanpassing - 4 van de gestapelde punten gelijkmatig over het vierkant verspreiden (tussen de hoeken) - zou hopelijk leiden tot een vloeiender morph-effect en in de juiste richting (respectievelijk verticaal en horizontaal) gericht naar het midden van beide vormen in plaats van de diagonale richting als voorheen:

Aha Succes! - Het Morphing-effect ziet er nu behoorlijk uit

Experiment 3 - Octagon → Vierkant

Single Spark Element - vertraagd om de Octagon en Square Phases te zien

Als we zorgvuldig en herhaaldelijk kijken naar het enkele vonkeffect hierboven, merken we kort op dat het ongeveer door de animatie ergens in een achthoek verandert. Verder verandert de vonk in de fasen voor en na de Octagon naar een vierkant.

Lijkt me een vrij eenvoudige taak, niet? Ik dacht dat ik gewoon clip-path zou gebruiken om mijn vorige vierkant te veranderen in een achthoek zoals de gif hierboven. De realiteit was een beetje anders, en ik moest de oorspronkelijke vorm veranderen en de polygoon een beetje anders tekenen (...) om het vierkant binnen de achthoek te hebben tijdens de overgang.

De manier waarop clip-path werkt is dat het het gewenste uitknipgebied binnen het element creëert met behulp van de eigenschap en terwijl mijn oorspronkelijke vierkant het hele gebied van zijn element in beslag nam. Ik kon niet buiten deze regio veranderen met de huidige toewijzing van coördinaten.

Er moesten een paar aanpassingen worden gedaan - en ik ben nu ook met percentages gaan werken om de dynamische breedte / hoogte van de vormen van het bovenliggende element te ondersteunen.

En voilà - we hebben enige vooruitgang geboekt en nu hebben we een Octagon die overgaat in een vierkant en terug. Maar wacht ... we zijn nog niet klaar!

Ademhalingshoeken zijn echt ?!

Experiment 4 - Achthoek → Vierpuntige ster → Terug (volledige cyclus)

Nu we weten dat de Octagon het grootste uiterlijk van de morphing-vorm is, kunnen we onze morphing-vorm veel nauwkeuriger maken en de overgang maken tussen de werkelijke fasen van 4-punts ster → Octagon → Terug, zoals hieronder te zien:

Dat lijkt er meer op

Experiment 5 - Schalen en oneindige lusanimatie

Dus ik begon dit experiment met de eerste stap van de hover-gebeurtenis naar een direct getriggerde oneindige animatie die eerst de schaaltransformatie (...) gebruikt om de ster respectievelijk te laten verschijnen en verdwijnen, zoals hieronder te zien:

Nu zie je me, nu niet - demo hier

Experiment 6— Rotatie-, begin- en eindposities

Nog een paar aanpassingen om de sterschaal op volledige grootte te maken in de beginpositie en zijn uiteindelijke positie te bepalen met transformeren: roteren (180 graden)

Het is een roterende Mario! - demo hier

De grensuitdaging

Na enige tijd experimenteren, besefte ik dat wat ik tot nu toe had bereikt, niet bevredigend zou zijn. In het oorspronkelijke voorbeeld lijkt het erop dat wanneer de vonken boven het pictogram in de oorspronkelijke micro-interactie verschijnen, ze een soort witte rand langs de vorm hebben die samen met de vorm verandert in elke stap van de hoofdframes:

Een beetje vergroot - maar het is duidelijk dat grenzen aanwezig zijn langs de morphing

Experiment 6 - Een rand bouwen die samen met de vonk verandert

Na het zoeken naar oplossingen op internet, stapeloverloop en andere suggesties in artikelen om het probleem aan te pakken, begreep ik dat deze uitdaging vrij uniek was. Ik kon geen specifieke oplossingen voor mijn probleem vinden. Het feit dat mijn border aan de vorm moest 'plakken' terwijl deze ingewikkelde zaken nog meer morst. Dus ik waagde het om een ​​paar tests te maken totdat ik de oplossing had gevonden.

Een "vonkenkloon" die net voor mijn hoofdfonkelingelement als broer of zus werd weergegeven, was de perfecte oplossing. Beiden moesten worden weergegeven: flex en verticaal en horizontaal gepositioneerd naar het midden van hun wrapper met justify-content: center en align-items: center om het volgende te bereiken:

Maar Pom wacht! Hoe ga je ervoor zorgen dat de kloon zijn broer volgt tijdens de animatie met morphing-keyframes? Nadat ik probeerde de ouder en het kind tegelijkertijd te animeren en wat rare browserproblemen of bugs ervoer, ontdekte ik dat de broers en zussen met flex de beste oplossing boden, zoals hieronder te zien is:

Broers en zussen animeerden tegelijkertijd een perfect aanpasbare rand - demo hier

De punten aansluiten

Op dit moment voelde ik al dat de moeilijke uitdagingen in dit project tot een einde waren gekomen. Het enige dat ik nu moest doen was een vergelijkbaar avatar-pictogram vinden, positie 3 vonken, hun posities handmatig aanpassen totdat ik tevreden was, en ook hun breedte / hoogte aanpassen totdat ik het eindresultaat bereikte.

Een vergrote versie om beter te zien hoe dingen werkenDe laatste Microinteractie - demo hier

Overzicht

Om het af te ronden, vond ik het leuk om mezelf uit te dagen met het opnieuw creëren van deze micro-interactie. Ik heb veel geleerd over hoe een ogenschijnlijk eenvoudig element in ons dagelijks leven (zoals een uitnodiging om op een nieuw pictogram te klikken van de ontwikkelaars van een software die we consumeren) eigenlijk veel meer is dan alleen een set elementen en animaties die perfect getimed en correct georiënteerd zijn .

Een dergelijke op maat gemaakte micro-interactie is een kunstwerk. Het is een uniek UI-element dat zorgvuldig is ontworpen om een ​​moeilijk probleem op te lossen. In ons geval hebben de ontwikkelaars op Facebook de navigatiebalk van mijn mobiele app gewijzigd, een pictogram verwijderd dat ik niet vaak gebruikte en vervangen door een pictogram waarmee ik een actie kon uitvoeren die ik vaak had geprobeerd te vinden en wenste uit te voeren - terug naar mijn profiel.

Het is een slimme beslissing, een meesterlijk vervaardigde micro-interactie die zich in een statisch scherm bevindt. Het is het enige bewegende deel van het scherm, en hoewel zeer minimaal en relatief klein in het scherm, lokten de glimmende fonkelende sterren over de randen van het pictogram mijn ogen en mijn vinger om er automatisch op te klikken. Nu waardeer ik het werk en de gedachte er nog meer over - dus bedankt Interaction Designers en Frontend Developers op Facebook voor het bouwen van zulke geweldige micro-interacties!

Gevolgtrekking

Ik moedig jullie allemaal aan om harde UI- en UX-problemen te durven en op te lossen door middel van ideeën en experimenten. Hoewel het leuk is en misschien een beetje egoverbeterend is om het eindresultaat te bereiken en te slagen, denk ik dat dit het minder belangrijke deel van de ervaring is.

In mijn ogen is de reis die je doormaakt, uitgerust met je vaardigheden van experimenteren, denken en overleggen met anderen, het beste. De leer- en inzichtenprocessen die u ervaart zijn veel belangrijker, simpel gezegd, en betekenen veel meer dan de bestemming.

recensenten

Heel erg bedankt voor de hulp van deze geweldige mensen die hebben geholpen bij het beoordelen en feedback geven voor mijn artikelconcepten, je bent geweldig! ;) - Jared M. Spool Yoni Weisbrod Ofir Ovadia Dima Vishnevetsky

* Demo-oriëntatie - Voorbeelden zijn in een Vue.js-configuratie gehost op Codesandbox.io, om de zuivere HTML / SCSS-logica te bereiken na het navigeren, klik op de componentenmap → klik vervolgens op het bestand spark.vue → de HTML is rond gewikkeld tags → de SCSS is slechts een schuif verwijderd rond