Micro-inacties: een kleine charme die een geweldige gebruikerservaring creëert.

Niet alleen prachtige websites maken! De klant is ingevoerd. "Verward". Druk op de knop. "Hoe gaat het met je?

Heb je je ooit zo gevoeld? U bent van plan de website goed te ontwerpen. De lay -out is perfect, perfect, maar wanneer anderen het proberen. In plaats daarvan zegt de feedback: "De website ziet er nog steeds uit." "Druk op deze knop en wat is er gebeurd? Niet zeker." Of erger is dat de gebruiker zich verward voelt, niet zeker of de actie die hij een moment geleden deed succesvol was of mislukt.

Dit probleem is als "haar dat de bergen bedekt" die veel mensen over het hoofd zien. We zijn toegewijd aan een groot algemeen beeld. Tot het vergeten dat de gebruikerservaring van de gebruiker (gebruikerservaring) wordt veroorzaakt door een klein detail dat bestaat uit een lezing die knikken vereist of reageert, is de website hetzelfde. Als het stil is, is er geen reactie. Is niet anders dan praten met de muur waardoor de gebruiker zich onzeker voelt en kan klikken om uw website meteen te sluiten!

Prompt voor illustraties: vergelijkingsafbeeldingen. Een kant is een nog steeds uitziend website -scherm. Wees levendig, de gebruiker is in de war en wijst naar de knop. De andere kant is hetzelfde scherm, maar een kleine animatie vindt plaats op de knop na het drukken. De gebruiker glimlachte gelukkig.

Waarom is de "mooie" website "saai" en "verwarrend"?

De belangrijkste reden waarom de website er prachtig uitziet, geeft een "droge" ervaring of "verwarrend" komt voort uit het "gesprek" tussen gebruikers en systemen. We hebben de neiging om ons te concentreren op "Data Presentation (Presentation)" tot het vergeten "interactie (interactief)"

Voorstellen:

• Gebrek aan antwoord (gebrek aan feedback): wanneer de gebruiker op de knop klikt "Producten toevoegen aan de mand" maar er is niets gebeurd. Geen bevestigingsbericht Er is geen mandpictogram dat beweegt of verhoogde aantallen. De eerste vraag in de geest van de gebruiker is: "Eh ... ik heb gedrukt?" En misschien herhaaldelijk drukken. Of erger nog, denkend dat de website brak en vervolgens is overleden
• Statisch ontwerp: de website wordt gewoon "digitale brochure" is mooi maar niet levendig. Scroll om informatie, klikken of acties te zien, is bevroren zonder de charme waardoor gebruikers willen blijven of weer terugkomen
• Wijzigingen in de staat: de gebruiker weet niet wat het systeem momenteel doet, zoals bij het uploaden van het bestand. Als er geen laadbalk of animatie is, vertel de voortgang. De gebruiker denkt misschien dat de website uitstekend is en vervolgens op Vernieuwen drukken, waardoor alles breekt!

Dit alles is gebeurd omdat we vergaten aandacht te besteden aan de details die micro-inacties , de sleutel is om de normale website te veranderen in een memorabele en echt gemakkelijk te gebruiken ervaring.

Prompt voor illustraties: eenvoudige infographic afbeeldingen tonen de hersenen van de ontwerper één kant Miss alleen lay -out, kleur, lettertype (Big Picture). De andere kant die wordt verlaten met kleine pictogrammen zoals het laden van het pictogram, vinkje pictogram, zoals pictogram met vonken. Maar werd tot een vaag grijs gemaakt

Laat de "stille" website doorgaan ... de resultaten zijn enger dan alleen "saai"

Het hebben van een website die geen goede antwoorden heeft, niet alleen de gebruiker zich verveelt, maar het heeft ook direct invloed op uw zakelijke doelen. Als ze nog lang overblijven, beginnen deze problemen uw website op te eten:

• Boundce rate (back rate) hoger: wanneer de gebruiker binnenkomt, voelt zich verwarrend, verward of denken dat de website moeilijk te gebruiken is. Ze zijn klaar om onmiddellijk op de achterste knop te drukken. Dit signaal wordt naar Google verzonden dat uw website mogelijk niet kwaliteit genoeg is.
• Conversieratio (doelrente) lager: de mogelijkheid voor u om te veranderen om klanten te bezoeken (zoals het aanvragen van lidmaatschap, bestelling) wordt verminderd, slechts een beetje onzekerheid in het betalingsproces. Het kan klanten in staat stellen de mand gemakkelijk te verlaten. Het bijwerken van de UX/UI op de WebFlow om de conversie te verhogen is daarom ongebruikelijk.
• De betrouwbaarheid van het merk neemt af: een website die er hard uitziet en niet reageert. Laat uw merk er onprofessioneel uitzien. Geen aandacht besteden aan details en ziet er verouderd uit in de ogen van consumenten
• De gebruiker wil niet meer terugkomen: slechte ervaring. Zal beter worden herinnerd dan normale ervaring als de gebruiker zich gefrustreerd voelt door uw website pas te gebruiken als de kans voor hem weer terugkomt, is bijna nul.

U ziet, de "stilte" van de website is luid voor uw prestaties. Het creëren van een goede ervaring door kleine details is niet alleen "mooie dingen", maar het is de "investering" die nodig is.

Prompt voor illustraties: 2 grafiekbeelden vergeleken met de eerste balk genaamd "Silent Web" met een hoog bouncepercentage, een andere lage conversieratio genaamd "De website die reageert op" heeft een lage bouncepercentage, conversieratio, met een fronsende en glimlachend gezichtspictogram.

Oplossing: maak het web wakker om te leven. "Micro-International", een geweldige kleine charme

De oplossing van al dit probleem is eenvoudiger dan u denkt dat "het leven toevoegen" en "dialoog creëren" voor uw website door wat "micro-interne" wordt genoemd (micro-integratie)

Als u zo gemakkelijk mogelijk wilt uitleggen, is micro-inacties een kleine reactie. Dat gebeurt wanneer de gebruiker op de website of applicatie handelt, het zijn de details die helpen de actie te bevestigen, de status van het systeem te vertellen en gebruikers op natuurlijke wijze te navigeren. Maakt het gebruik soepeler en meer bevredigend

Experts van Nielsen Norman Group hebben het gedefinieerd als het hart van communicatie met gebruikers. Stel je een eenvoudig voorbeeld voor. Dat we elke dag ontmoeten:

• Mobiele trillingen met "ting" -geluid wanneer we drukken om een bericht te verzenden
• De hartvormige animatie die wordt verspreid wanneer we op sociale media op " -zoals" drukken.
• De laadbalk die naar voren liep om ons te vertellen: "Laden, wacht even!"
• Het vibrerende passerende kanaal wanneer we de verkeerde informatie invullen

Dit zijn niet alleen prachtige animaties, maar "feedback". Het belangrijkste geeft ons het gevoel dat het systeem "luisteren" en "reactie" is, wat helpt om verwarring te verminderen en enorm vertrouwen op te bouwen. Het UX/UI -ontwerp op de WebFlow waardoor klanten klikken en kopen. Gebruik dit principe als hart

Prompt voor illustraties: prachtige infographic toont 4-5 pictogrammen als een voorbeeld van micro-inacties, zoals het hartkloppende pictogram, het kruispictogram, verandert in een correct merk, een open-close pictogram, een levendig laadbalkicoon.

Voorbeelden van het echte werk: micro-inacties die je elke dag ontmoet (maar nooit wist!)

Vaak is micro-internationaal het beste dat het soepel werkt totdat we het zelden opmerken. Maar het maakt duidelijk een verschil, laten we het voorbeeld bekijken. Dat is succesvol in het gebruik van kleine charme deze

1. Trek op vernieuwing: in de sociale media zoals X (Twitter) of Facebook, wanneer we bovenaan de feed staan en uw vinger gebruiken om het scherm naar beneden te trekken, is er een laadpictogram. "Een nieuwe inhoud laden" en een goed gevoel maken tijdens het wachten in plaats van ergens op de rifknop te moeten klikken

2. De animatie die drukt op "Like": Like -knop is niet alleen een normale knop. Wanneer u op de hartknop in het Instagram of het applaus in het medium drukt, is er een kleine animatie. Schattig en bevredigend lijkt erop dat het onmiddellijk de gevoelens van gebruikers beloonde. En laat de emotionele uitdrukking er levendiger uitzien

3. FORM FOUTE FEEDBACK: in plaats van het rode bericht, "vul het verkeerde alleen in". Veel moderne websites. Framer bijvoorbeeld aan om het kanaal dat "trillen" te laten vullen alsof ze ons willen vertellen: "Hé! Kijk hier wat er mis is?" Het is een zeer intelligente en vriendelijkere manier.

4. Het display bij het toevoegen van de basket: leidend e-commerce-website wanneer u op de knop "Toevoegen aan kar" drukt. De knop kan veranderen in een correct mark. Of heb een kleine animatie die een productafbeelding is dat het mandpictogram binnenkomt, samen met de nummers op de mand die onmiddellijk bijgewerkt, dit is een duidelijke bevestiging en ervoor te zorgen dat gebruikers dat "uw product al in de mand zit. Kan blijven winkelen of betalen."

Zal zien dat dit allemaal een klein detail is dat helpt om het normale gebruik te veranderen in een soepele en memorabele interactie

Prompt voor illustraties: GIF-afbeeldingen of 4 korte video's, met voorbeelden van micro-international beschreven, bijvoorbeeld, het eerste kanaal wordt getrokken om te vernieuwen, de tweede is een animatie, druk op kanaal drie is de vorm die schudt wanneer de vier onjuist is.

Wil je volgen, hoe te beginnen? Eenvoudige checklist voor het wonen van uw website.

Lees hier veel mensen willen het proberen. Micro-inacties om met uw eigen website te gebruiken Het goede nieuws is dat u geen godheidsprogrammeur hoeft te zijn, u kunt beginnen! Probeer deze eenvoudige checklist te gebruiken. Verken uw website.

1. Zoek "Identificeer belangrijke touchpoints): Probeer te vermelden wat gebruikers op uw website moeten doen.
   • Klik op de knop (Call -to -ction)
   • Vul- en formulierinzending
   • Navigatie
   • Producten toevoegen aan de mand (toevoegen aan kar)
   • Wachten op het laden van gegevens (laadstaten)
2. Vraag jezelf af: "Wat wil je weten?": Wat willen gebruikers in elk contactpunt doorgaan?
   • Bij het klikken op de knop: ik wil bevestigen dat "klik op" (zoals kleurveranderende knoppen, schaduwen of kleine animatie)
   • Bij het verzenden van het formulier: ik wil weten dat "succesvol verzonden" of "er fouten zijn" (zoals een groene bevestigingsbericht of schudden en het verkeerde punt vertellen)
   • Bij het wachten op download: ik wil weten dat "het systeem niet werkt." (Bijvoorbeeld het laden van spinner of prachtige voortgangsbalk)
3. Begin met iets eenvoudigs en de start eenvoudig en subtiel: U hoeft niet meteen complexe animatie te maken. Kleine verandering kan veel verschillen maken
   • Hover State: ervoor zorgen dat de knop of link de kleur wijzigt of een beetje verplaatst wanneer de gebruiker de muis speelt
   • Succesbericht: laat u duidelijk bedanken nadat de gebruiker een formulier heeft verzonden.
   • Focusstatus: laat de vullende kanalen een meer prominente grens hebben.
4. Gebruik de juiste tool: een webflowplatform met een ingebouwde interactieve tool waarmee u deze dingen kunt maken zonder een complexe code te hoeven schrijven. Of als u met ontwikkelaars werkt, kan deze ideeën voor hen communiceren om het uit te laten komen

De sleutel is om de acties van elke gebruiker een "betekenis" -reactie te laten krijgen. Dit kan helpen de gebruikerservaring enorm te verbeteren.

Prompt voor illustraties: mooie checklistafbeeldingen. Samenvatting van 4 stappen hierboven met pictogrammen in elk item (zoals het muispictogram, het pictogram Vraagteken, het startende raketpictogram, pictogram, tools)

Vragen die mensen de neiging hebben zich af te vragen (en het antwoord is duidelijk!)

Wanneer het gaat over het toevoegen van bewegingselementen op de website, hebben ik altijd vragen en zorgen, ik heb een populaire vraag over micro-inacties verzameld om te antwoorden om hier te verdwijnen.

Q1: Voer micro-inacties in. Zullen deze websites de website vertragen?
A: Niet altijd. Als het correct wordt gedaan, worden de meeste van hen gemaakt met CSS-animaties of SVG, die erg licht zijn en bijna helemaal geen invloed hebben op de belastingssnelheid. Het probleem is alleen wanneer we grote GIF -bestanden gebruiken, zware videobestanden. Of een script dat complexer is dan nodig, daarom is het hart om de juiste technologie te kiezen.

V2: Het is noodzakelijk om een goede code te schrijven. Kun je het doen?
A: Niet altijd nodig! Zoals ik al zei, heeft het no-code/low-code platform zoals WebFlow een krachtig en gemakkelijk te gebruiken interactietool. U kunt hover-effecten maken, door scrol getroffen animaties of op animaties klikken zonder de code aan te raken. Maar als iets heel ingewikkeld wil, is het raadplegen van een expert in UX/UI een goede keuze.

V3: Hoe verschilt het van "animatie" op internet?
A: Het verschil is dat "doelstellingen". Algemene animatie kan gewoon decoratief (decoratief) zijn, zoals achtergronden die heen en weer gaan, maar micro-international zal altijd een "functie" -animatie zijn (functioneel). Het zal plaatsvinden als reactie op "trigger" (acties van de gebruiker) en het geven van "feedback" (reactie) betekenis terug.

Q4: Veel dragen, hoe beter, toch?
A: Nee! Met behulp van micro-internationaal te veel of meer spectaculair, wordt het de concentratie van gebruikers vervelend en verstoort. Net als mensen die in elk woord ingrijpen, zijn de regels "Subtiliteit is de sleutel" of "zwakte is de sleutel". Het zou moeten helpen de ervaring te verbeteren. Niet om te concurreren voor de scène. Donkere modusontwerp dat goed is voor UX, gebruikt ook dezelfde principes voor zachte resolutie.

Prompt voor illustraties: 2 stripfiguren praten. De eerste stelt vragen. (Heb een merk? Boven het hoofd) Het andere antwoord met vertrouwen. (Er is een helderder lamppictogram). Achtergrond is een symbool van code- en ontwerptools.

Samenvatting: Het is tijd om uw website wakker te maken!

We hebben door de wereld van micro-inacties gereisd al genoeg, het is te zien dat het niet alleen "gimmicks" of "decoraties" zijn, maar het is de "geest" van goede gebruikerservaring. Het is een klein detail. Dat maakt een verschil tussen de website die "gewoon gebruik" met de website die "leuk en memorabel"

Aandacht besteden aan micro-international is om de gebruiker te laten zien dat u "zorgt" in elk detail dat het helpt om vertrouwen op te bouwen. Navigeer soepel door de gebruiker en transformeer de droge interactie in een levendig gesprek waardoor uw merk er professioneel en modern uitziet.

Dus wacht niet! Laten we teruggaan en uw website verkennen. Zoek vandaag een klein punt waar u het leven kunt toevoegen. Misschien maakt het gewoon uw "bericht" -knop om enigszins levendig te zijn nadat hij is geklikt. Dat is genoeg om een glimlach en indruk voor gebruikers te creëren.

Het is tijd om uw website te veranderen van "stille brochure" om een "assistent te worden die klaar is om te chatten"? Laten we het doen!

Prompt voor illustraties: de laatste afbeelding die het inspireerde is de hand van de gebruiker. Klik op de knop op het scherm. En er is een lijn van mooi licht dat uit die knop komt, geeft een geweldige ervaring die voortkomt uit een enkele klik. Met een kort bericht "Every Click Matters".

‍