Mikroinaktioner: En lille charme, der skaber en god brugeroplevelse.

Ikke kun at lave smukke websteder! Kunden er gået ind. "Forvirret". Tryk på knappen. "Hvordan har du det stille?

Har du nogensinde følt dig sådan? Du har til hensigt at designe webstedet godt. Layout er perfekt, perfekt, men når andre prøver det. I stedet siger feedbacken "webstedet ser stille ud." "Tryk på denne knap, og hvad skete der? Ikke sikker." Eller værre er, at brugeren føles forvirret, ikke sikker på, om handlingen, som han gjorde for et øjeblik siden, var vellykket eller mislykkedes.

Dette problem er som "hår, der dækker bjergene", som mange mennesker overser. Vi er dedikeret til et stort samlet billede. Indtil glemt, at brugeroplevelsen af brugeren (brugeroplevelsen) er forårsaget af en lille detalje, der består af en tale, der kræver nikker eller svar på webstedet, er det samme. Hvis det er stille, er der ingen reaktion. Er ikke anderledes end at tale med væggen, hvilket får brugeren til at føle sig usikker og kan klikke for at lukke dit websted med det samme!

Spørg om illustrationer: Sammenligningsbilleder. Den ene side er en stadig -ser på websitet. Vær livlig Brugeren er forvirret og peger på knappen. Den anden side er den samme skærm, men en lille animation forekommer på knappen efter tryk. Brugeren smilede lykkeligt.

Hvorfor er det "smukke" websted "kedeligt" og "forvirrende"?

Hovedårsagen til, at webstedet ser smukt ud, giver en "tør" oplevelse eller "forvirrende" stammer fra "samtalen" mellem brugere og systemer. Vi har en tendens til at fokusere på "Data Presentation (præsentation)" indtil glemme "interaktion (interaktiv)"

Forestille sig:

• Manglende respons (mangel på feedback): Når brugeren klikker på knappen "Tilføj produkter til kurven", men der skete intet. Ingen bekræftelsesmeddelelse Der er ikke noget kurvikon, der bevæger sig eller øget antal. Det første spørgsmål i brugerens sind er "eh ... jeg pressede?" Og måske gentagne gange presse. Eller værre, tænkte, at webstedet brød og derefter døde
• Statisk design: Hjemmesiden bliver bare "digital brochure" er smuk, men ikke livlig. Rul for at se information, klik eller handlinger er frosset, der mangler den charme, der får brugerne til at blive eller komme tilbage igen
• Uklar tilstandsændringer: Brugeren ved ikke, hvad systemet gør i øjeblikket, f.eks. Når man uploader filen. Hvis der ikke er nogen belastningsbjælke eller animation, skal du fortælle fremskridtene. Brugeren tror måske, at webstedet er enestående og derefter tryk på Refresh, hvilket får alt til at bryde!

Alt dette skete, fordi vi glemte at være opmærksomme på de detaljer, der kaldes mikroinaktioner, er nøglen til at ændre det normale websted til en mindeværdig og virkelig brugervenlig oplevelse.

Spørgsmål om illustrationer: Enkle infografiske billeder viser designerens hjerne One Side Miss Only Layout, Color, Font (Big Picture). Den anden side, der er forladt med små ikoner, såsom indlæsningsikon, tjekmark -ikon, som ikonet med gnister. Men blev gjort til en svag grå formidler det overset

Lad webstedet "stille" fortsætte ... resultaterne er mere skræmmende end bare "kedelige"

At have et websted, der mangler gode svar, ikke bare får brugeren til at føle sig keder, men det påvirker direkte dine forretningsmæssige mål uventet. Hvis de er tilbage i lang tid, begynder disse problemer at spise dit websted:

• Bound Rate (ryghastighed) Højere: Når brugeren kommer ind, føler du dig forvirrende, forvirret eller synes, at webstedet er vanskeligt at bruge. De er klar til straks at trykke på rygknappen. Dette signal vil blive sendt til Google om, at dit websted muligvis ikke er kvalitet nok.
• Konverteringsfrekvens (målhastighed) Lavere: muligheden for dig at skifte til at besøge kunder (såsom at ansøge om medlemskab, orden) reduceres, bare en lille usikkerhed i betalingsprocessen. Det kan give kunderne mulighed for let at forlade kurven. Opdatering af UX/UI på webstrømmen for at øge konverteringen er derfor usædvanlig.
• Mærkets pålidelighed falder: et websted, der ser hårdt ud og ikke reagerer. Få dit brand til at se uprofessionelt ud. Ikke at være opmærksom på detaljer og ser forældet ud i forbrugernes øjne
• Brugeren ønsker ikke at vende tilbage igen: dårlig oplevelse. Vil blive husket bedre end normal oplevelse, hvis brugeren føler sig frustreret ved kun at bruge dit websted, når muligheden for ham at komme tilbage igen er næsten nul.

Du kan se, "tavshed" på webstedet er højt for din præstation. At skabe en god oplevelse gennem små detaljer er ikke kun "smukke ting", men det er den "investering", der er nødvendig.

Spørgsmål om illustrationer: 2 grafbilleder sammenlignet med den første bar kaldet "Silent Web" med en høj afvisningshastighed, en anden lav konverteringsfrekvens ved navn "webstedet, der reagerer på", har en lav afvisningshastighed, konverteringsfrekvens, med en rynke og smilende ansigtsikon.

Løsning: Vågn op på nettet for at leve. "Mikro-internationalt", en stor lille charme

Løsningen af alt dette problem er enklere, end du tror er "at tilføje liv" og "skabe dialog" til dit websted gennem det, der kaldes "mikro-internationalt" (mikrointegration)

Hvis du vil forklare så let som muligt, er mikroinaktioner en lille respons. Det opstår, når brugeren handler på webstedet eller applikationen, det er detaljerne, der hjælper med at bekræfte handlingen, fortælle status for systemet og navigere brugere naturligt. Gør brugen glattere og mere tilfredsstillende

Eksperter fra Nielsen Norman Group har defineret det som hjertet af kommunikation med brugere. Forestil dig et simpelt eksempel. At vi mødes hver dag:

• Mobile vibrationer med "ting" lyd, når vi trykker på for at sende en besked
• Hjertetsformet animation, der er spredt, når vi trykker på "på" på sociale medier.
• Loading Bar, der løb frem for at fortælle os, "Læs, vent et øjeblik!"
• Den vibrerende forbipasserende kanal, når vi udfylder de forkerte oplysninger

Disse er ikke kun smukke animationer, men "feedback". Den vigtige ting får os til at føle, at systemet "lytter" og "respons", hvilket hjælper med at reducere forvirring og opbygge enorm tillid. UX /UI -designet på webstrømmen, der får kunderne til at klikke og købe. Brug dette princip som et hjerte

Spørgsmål om illustrationer: Smukke infographic viser 4-5 ikoner som et eksempel på mikroinaktioner, såsom hjerteslagikonet, krydsikonet, bliver til et korrekt mærke, et åbent ikon, et pulserende belastningsstangsikon.

Eksempler fra den rigtige ting: mikroinaktioner, som du møder hver dag (men vidste aldrig!)

Mange gange er mikro-internationale det bedste, at det fungerer jævnt, indtil vi sjældent bemærker. Men det gør tydeligvis en forskel, lad os se på eksemplet. Det er vellykket med at bruge lille charme disse

1. Træk for at opdatere: I de sociale medier som X (Twitter) eller Facebook, når vi er øverst på foderet og bruger din finger til at trække skærmen ned, vil der være et belastningsikon. "Indlæser et nyt indhold" og skaber en god følelse, mens du venter i stedet for at skulle klikke på Reef -knappen et eller andet sted

2. Animationen, der trykker "som": som knap er ikke kun en normal knap. Når du trykker på hjerte -knappen i Instagram eller bifald i mediet, vil der være en lille animation. Sød og tilfredsstillende ser ud til, at det straks belønnes brugernes følelser. Og få det følelsesmæssige udtryk til at se mere livligt ud

3. formularfejl feedback: I stedet for den røde meddelelse "Udfyld kun det forkerte". Mange moderne websteder. For eksempel anbefaler eksperter fra Framer at få kanalen til at udfylde den "rysten" som for at fortælle os, "Hey! Se her, hvad er der galt?" Det er en meget intelligent og mere venlig måde.

4.. Displayet, når du tilføjer kurven: førende e-handelswebsted, når du trykker på knappen "Tilføj til indkøbskurv". Knappen kan ændres til et korrekt mærke. Eller har en lille animation, som er et produktbillede, der løber ind i kurvikonet sammen med numrene på kurven, der straks opdateres, er dette en klar bekræftelse og sikrer, at brugere, at "dit produkt allerede er i kurven. Kan fortsætte med at shoppe eller betale."

Vil se, at alt dette er en lille detalje, der hjælper med at ændre den normale anvendelse til en glat og mindeværdig interaktion

Spørg for illustrationer: GIF-billeder eller 4 korte videoer, der viser eksempler på mikrointernett National beskrevet, for eksempel, den første kanal trækkes til at opdatere, den anden er en animation, presse som, kanal tre er den form, der ryster, når de fire er forkerte.

Vil du følge, hvordan man starter? Enkel tjekliste til at vågne dit websted til at bo.

Læs her, som mange mennesker gerne vil prøve. Mikroinaktioner, der skal bruges med dit eget websted Den gode nyhed er, at du ikke behøver at være en guddommens programmør, du kan starte! Prøv at bruge denne enkle tjekliste. Udforsk dit websted.

1. Find "Identificer nøgle touchpoints): Prøv at liste over, hvad brugerne skal gøre på dit websted.
   • Ved at klikke på knappen (call -to -funktion)
   • Udfyldning og formular indsendelse
   • Navigation
   • Tilføjelse af produkter til kurven (tilføj til indkøbskurv)
   • Venter på indlæsning af data (indlæsningstilstande)
2. Spørg dig selv: "Hvad vil du vide?": Hvad ønsker brugerne i hvert berøringspunkt at fortsætte med at fortsætte?
   • Når jeg klikker på knappen: Jeg vil bekræfte, at "klik på" (såsom farveændringsknapper, skygger eller lille animation)
   • Når jeg sender formularen: Jeg vil gerne vide, at "med succes sendt" eller "der er fejl" (såsom en grøn bekræftelsesmeddelelse eller rystende form og fortæller det forkerte punkt)
   • Når jeg venter på download: Jeg vil gerne vide, at "systemet ikke fungerer." (For eksempel indlæser spinner eller smuk statusbjælke)
3. Start med noget enkelt og starten enkel og subtil: Du behøver ikke straks oprette kompleks animation. Lille ændring kan gøre mange forskelle
   • Hover tilstand: forårsager knappen eller link til at ændre farven eller flytte lidt, når brugeren spiller musen
   • Succesmeddelelse: Vis tak tydeligt, efter at brugeren har sendt en formular.
   • Fokustilstand: Få fyldningskanalerne har mere fremtrædende grænse.
4. Brug det rigtige værktøj: En webflow -platform med et indbygget interaktivt værktøj, der giver dig mulighed for at oprette disse ting uden at skulle skrive en kompleks kode. Eller hvis du arbejder med udviklere, kan kommunikere disse ideer for dem for at gøre det til virkelighed

Nøglen er at få enhver brugers handlinger til at få et "betydning" svar. Dette kan hjælpe med at forbedre brugeroplevelsen enormt.

Spørg om illustrationer: Smukke tjeklistebilleder. Resumé af 4 trin ovenfor med ikoner i hvert element (såsom musikonet, spørgsmålstegnskonet, startraketikonet, ikonet, værktøjer)

Spørgsmål, som folk har en tendens til at undre sig (og svaret er klart!)

Når jeg taler om at tilføje bevægelseselementer på webstedet, har altid spørgsmål og bekymringer, jeg samlet et populært spørgsmål om mikroinaktioner, der svarer til at forsvinde her.

Q1: Indtast mikroinaktioner. Vil disse websteder bremse webstedet?
A: Ikke altid. Hvis det gøres korrekt mikroinaktioner, er de fleste af dem oprettet med CSS-animationer eller SVG, hvilket er meget let og næsten ikke påvirker belastningshastigheden overhovedet. Problemet er kun, når vi bruger store GIF -filer, tunge videofiler. Eller et script, der er mere kompliceret end nødvendigt, at hjertet er at vælge den rigtige teknologi.

Q2: Det er nødvendigt at skrive en god kode. Kan du gøre det?
A: Ikke altid nødvendigt! Som sagt har platformen uden kode/lav kode som WebFlow et kraftfuldt og brugervenligt interaktionsværktøj. Du kan oprette hovereffekter, rulle-udløste animationer eller klikke på animationer uden at skulle røre ved koden. Men hvis jeg ønsker noget meget kompliceret, er det et godt valg at konsultere en ekspert i UX/UI .

Q3: Hvordan er det anderledes end "animation" på nettet?
A: Forskellen er, at "mål". Generel animation er muligvis bare dekorativ (dekorativ), såsom baggrunde, der bevæger sig frem og tilbage, men mikrointernational vil altid være en "funktion" -animation (funktionel). Det vil forekomme som svar på "trigger" (brugerens handlinger) og give "feedback" (svar) med mening tilbage.

Spørgsmål 4: Iført meget, jo bedre, ikke?
A: Nej! Ved hjælp af mikro-internationale for meget eller mere spektakulært bliver det irriterende og forstyrrer koncentrationen af brugere. Ligesom mennesker, der griber ind i hvert eneste ord, er reglerne "subtilitet er nøglen" eller "svaghed er nøglen". Det skal hjælpe med at forbedre oplevelsen. Ikke at konkurrere om scenen. Dark Mode Design , der er godt for UX, bruger også de samme bløde opløsningsprincipper.

Spørg om illustrationer: 2 tegneseriefigurer taler. Den første stiller spørgsmål. (Har et mærke? Over hovedet) Det andet svar med selvtillid. (Der er et lysere lampeikon). Baggrund er et symbol på kode- og designværktøjer.

Resumé: Det er tid til at vække dit websted!

Vi har rejst gennem verdenen af mikroinaktioner har allerede nok, det kan ses, at det ikke kun er "gimmicks" eller "dekorationer", men det er "ånd" af god brugeroplevelse. Det er en lille detalje. Det gør en forskel mellem webstedet, der "bare bruger" med det websted, der "pænt og mindeværdigt"

At være opmærksom på mikro-international er at vise brugeren, at du "plejer" i enhver detalje, det hjælper med at opbygge tillid. Naviger brugeren jævnt og omdanner den tørre interaktion til en livlig samtale får dit brand til at se professionelt og moderne ud.

Så vent ikke! Lad os gå tilbage og udforske dit websted. Find i dag et lille punkt, hvor du kan tilføje liv. Måske er det bare at få din "besked" -knap til at være lidt livlig efter at være blevet klikket. Det er nok til at skabe et smil og indtryk for brugerne.

Det er tid til at ændre dit websted fra "stille brochure" for at blive "assistent, der er klar til at chatte"? Lad os gøre det!

Spørg om illustrationer: Det sidste billede, der inspirerede det, er brugerens hånd. Klik på knappen på skærmen. Og der er en linje med smukt lys, der kommer ud af den knap, formidler en stor oplevelse, der opstår fra et enkelt klik. Med en kort besked "Hvert klik betyder noget."

‍