Så här lägger du till Magic Magic till dina interaktioner

Varje gång en användare gör något med din design skapas en interaktion. Vissa interaktioner, till exempel klick, går nästan obemärkt av användaren. Men andra interaktioner inkluderar en viss magi som gör att användaren vill spela med designen ännu mer.

Det finns en bra linje mellan en interaktion som har ett magiskt streck och en som kan vara helt överväldigande. De mest magiska interaktionerna är lite oväntade, enkla, skapa ett känslomässigt svar och få användaren att använda den igen.

Interaktioner med magi

Magic är en kvalitet som gör att något verkar borttaget från vardagen, särskilt på ett sätt som ger glädje.?

Det som gör en interaktion verkligen magisk är att den förutse vad användaren kommer att göra nästa. Designen rör dig nästan med dig? eller kanske bara ett steg före dig, att göra exakt vad du vill ha bara en spilld sekund innan du ens fattat det beslutet.

För att utforma denna typ av interaktivt gränssnitt måste du känna dina användare exceptionellt bra. Du kommer att behöva undersöka sina vanor och mönster innan du någonsin tänker på visuella eller interaktioner. Och när du har den data kan du brainstorma sätt för att skapa dessa anslutningar.

Så, vad gör en interaktion magisk? Hur definierar du det? Den bästa beskrivningen kommer från ett akademiskt papper, Magic-interaktioner med information för visuell berättelse:

Några exempel är:

  1. Att klicka och dra en ritning av en tecknad karaktär som då svarar "intelligent" genom att ändra sin ställning i direkt svar på användarens inmatning, förstå hur man rör sig som om det är magiskt;
  2. Bläddrar videodata genom att klicka direkt på tecken i videon istället för att använda en reglage
  3. Bumping mobila enheter för att överföra filer; och
  4. Välja 3D-punktmoln bara genom att dra en 2D-lasso.

Alla dessa interaktioner har "kraften att tydligen påverka händelsernas gång genom att använda mystiska eller övernaturliga krafter" och "en kvalitet som gör att något verkar borttaget från vardagen, särskilt på ett sätt som ger glädje" - två egenskaper som tas direkt från definition av ordet magi.

Intelligent Animation

Animationer är överallt. Det verkar som att nästan varje webbplats har något som rör sig inbäddad, oavsett om det är ett videoklipp eller en svängningseffekt eller att ladda divot. Denna rörelse är meningsfull. Rörelsen fångar naturligt ögat och ger ett ögonblick av engagemang som också kan fungera som en distraktion medan webbplatsen laddar eller fungerar fullt ut i bakgrunden.

En typ av intelligent interaktion kan vara ett rörligt foto eller filmfält. Denna teknik blandar fortfarande och levande åtgärder med subtila rörelser eller rörelser på ett sätt som gör att användarna vill se djupare in i designen. (Du kan lära dig mer om trenden i vårt inlägg på foton som lever.)

De mest intelligenta animationerna är mer än enkla rörelser - användaren vill göra något och finner att det faktiskt är funktionellt. Denna typ av interaktion börjar hända ofta för e-handel, där användare vill ha erfarenheten att se eller hålla? en produkt från alla vinklar. Qantas Airlines, ovanför, gör detsamma med en webbdesign som gör att användarna kan se inuti sina plan och titta på platsalternativ och mer. (Gå klickar runt den här webbplatsen, du skulle bli förvånad över alla saker du kan? Se, och det känns väldigt verkligt.)

Direkt klickbarhet

Alltför ofta landar du på en webbplats och de element du klickar inte gör någonting. Med mer direktklickbarhet är fler element objekt som tar dig till nya element och så vidare för att skapa en webbsida med klick och länkar och vägar som användaren kan ta. Flödet har en sömlös kvalitet som gör dessa klick interaktioner önskvärda.

Det finns inte tillräckligt med dessa interaktioner där ute, men när du hittar det är de mycket roliga. Webbplatsen för filmen, Sing, är ett bra exempel. (Du måste gå runt.) Varje element är utformat så att webbplatsen känns som en interaktiv förlängning av filmen. Du kan klicka på ganska mycket och någonting kommer att hända. Kombinera det med tecknadens aspekt och det känns verkligen magiskt.

Bump och Haptics

Medan akademikerna älskade magiken i "bumpen" fler användare älskar haptics magi. Det kan göra det enkelt att växla med din klocka - jag saknar aldrig ett samtal - för att spela ett spel som känns mer intuitivt tack vare rörelse. Bump kan vara verkliga eller uppfattas, som i Konterball-spelet, beroende på enhetstypen.

I många av dessa fall använder skrivbordets webbdesign rörelse som användarna känner, men på telefoner eller klockor eller VR-enheter finns det ett haptiskt element för det.

Webbdesign, som varit praktiskt taget virtuell till denna punkt, lever vid beröringsbaserade interaktioner. Förvänta fler gränssnitt som du berör och återkopplingsslingan stängs med ett fysiskt svar från enheten.

Dimensionellt perspektiv

Linjerna mellan dimensioner börjar bli suddiga. Medan skärmarna är ett tvådimensionellt landskap skapar fler mönster tredimensionella världar. Användare agerar dock fortfarande med 2D-rörelser. Det är ett konstigt och nästan tankegångande koncept.

Men då intakt med hemsidan på detta sätt.

Du får se magiken.

Campo Alle Comete, ovan, berättar en historia som är magisk, i huvudsak, men också interaktivitet. Dra musen i raka linjer runt skärmen för att se världens förändring och flytta. Och det verkar inte vara några regler. Rörelse sker i den riktning och hastighet du väljer. Den bästa delen av denna saga erfarenhet? Du kommer sannolikt att klicka och spela i flera minuter innan du ens inser vad webbplatsen försöker presentera. (Det är för vin.)

Slutsats

Så, vad gör en interaktion magisk? Det måste vara förutseende och göra precis vad användaren vill ha på sättet som användaren vill att det ska hända.Det borde vara intressant och bara lite annorlunda. Och det måste vara enkelt att det inte finns någon förvirring.

Slutligen händer den verkliga magiken när användaren svarar på det med ett leende eller en känsla av glädje eller tillfredsställelse. Magic är ett mänskligt band, utan den känslan från användare, det är bara ett annat designtrick.