När användarna öppnar en webbplats eller app ser de först de uppenbara designelementen: logotyp, färger, ikoner, illustrationer och bilder. Även om dessa element bidrar till den övergripande användarupplevelsen är de faktiskt delar av ett större pussel: interaktionsdesign. Detta koncept kan vara mer subtilt för slutanvändarna än en flashig, ny hemsida, men det är viktigt för att skapa en engagerande, intuitiv digital upplevelse.

Vad är interaktionsdesign?

Interaktionsdesign handlar om att underlätta interaktioner mellan användare och produkter (oftast är dessa produkter appar eller webbplatser). Enligt Interaction Design Foundation är ”målet med interaktionsdesign att skapa produkter som gör det möjligt för användaren att uppnå sina mål på bästa möjliga sätt”. Med andra ord är interaktionsdesigners ansvariga för att skapa varje element på en skärm som en användare kan interagera med, oavsett om det sker genom att klicka, svepa, knacka eller någon annan åtgärd.

De fem dimensionerna av interaktionsdesign fungerar som en användbar modell för att förstå vad det innebär. Modellen introducerades först av Gillian Crampton Smith, en akademiker inom interaktionsdesign, och omfattade endast fyra dimensioner. Kevin Silver, senior interaktionsdesigner på IDEXX Laboratories, lade till den femte.

1D: Orden ska vara enkla att förstå och kommunicera rätt mängd information till användaren (för mycket detaljer kan överväldiga, medan för lite information kan skapa förvirring).

2D: Visuella representationer, som bilder, typografi och ikoner, ska komplettera orden för att kommunicera information till användaren.

3D: Fysiska objekt eller utrymme hänvisar till den faktiska hårdvaran och de faktiska objekten som en användare interagerar med. Använder de till exempel en smartphone eller en bärbar dator med en mus? Och var befinner de sig, vid sitt skrivbord eller i en överfull tunnelbana?

4D: Tid avser hur användarna kan mäta framstegen, till exempel med ljud och animationer, samt hur länge de tillbringar med att interagera med de tre första dimensionerna.

5D: Beteende lades till av Kevin Silver och omfattar hur de tidigare dimensionerna definierar interaktionerna med en produkt. Den omfattar även användarnas och produktens reaktioner.

Relaterat: 6 anledningar till varför UX-designers bör utforska gestuell interaktion

10 exempel på interaktionsdesign

Hur ser designinteraktion ut i verkligheten? Här är några av våra favoritexempel som vi hittat på Dribbble.

Av Jony vino. Att dela på notan med dina vänner är inte alltid så lätt som det verkar, särskilt inte om du är mer visuell än numerisk. Med det här appkonceptet kan du mata in den totala notan, välja dricksandel och sedan se hur mycket varje person kommer att betala. Det bästa av allt? Istället för att manuellt justera varje persons del och ständigt behöva uppdatera allas andel, kan du helt enkelt ändra storleken på varje persons del i appen och siffrorna räknas automatiskt om för alla.

Av Prem Gurusamy. På de flesta e-handelssajter måste du navigera till en helt annan del av webbplatsen eller appen för att se din varukorg. Med den här interaktionen kan du omedelbart se dina varor ”flyga” in i din varukorg så snart du klickar på knappen ”Lägg i varukorgen”. Varukorgen fortsätter att visuellt visa dina varor även när du utforskar andra delar av webbplatsen.

Av Igor Pavlinski. Appar för sociala medier är ökända för sin överbelastning av information, eftersom de visar dig alla toppnyheter, trendiga videor eller artiklar och nyheter på en gång. Det här konceptet för en ny app för sociala medier ger användaren kontrollen tillbaka genom att organisera innehållet efter källa (som YouTube, Vimeo, Twitter eller Reddit) och låta dig välja vilken kanal du vill utforska. Denna kortliknande layout eliminerar också behovet av att hoppa mellan olika appar för att konsumera ditt favoritinnehåll. Istället är det enkelt att växla mellan källor inom samma upplevelse.

By tubik. Det finns en miljon och ett sätt att anpassa din hamburgare. Och när du beställer på din smartphone kan det vara en övning i fingerfärdighet att välja varje enskild ingrediens på en liten skärm. Det här UI-konceptet för Tasty Burger-appen förenklar beställningsupplevelsen genom att ingredienserna delas upp efter typ. I stället för att visa en lång lista med alla möjliga varianter av ost, råvaror, kött eller bröd klickar du först på kategorin av ingrediens (t.ex. ost) och sedan visas de olika typerna, t.ex. gouda eller comte.

By Rahul.Design. Om du är på husjakt och inte kan se fastigheten personligen är det näst bästa alternativet att få en virtuell rundtur. Det här konceptet för fastighetsappen Spec utnyttjar vårt naturliga beteende när vi tittar på ett nytt utrymme. Du kan klicka dig in i ett rum, t.ex. köket eller vardagsrummet, och flytta telefonen för att få en 360-graders vy. Det är enkelt att växla mellan rummen med ett enda tryck.

Av Forest Plasencia. Filter är ett kraftfullt och enkelt sätt att få fram olika delar av informationen. Men problemet med många filterinteraktioner är att de öppnar en popup-fönsterruta eller en ny sida i appen som döljer just den information du vill filtrera. Denna mikrointeraktion håller allt i samma vy, även när du filtrerar. På så sätt kan du se hur data ändras direkt när du väljer olika filterkriterier.

Av Dmitro Petrenko. Det är enklare än någonsin att beväpna och övervaka ditt hus tack vare smartphoneappar, men mellan 94%-99%

Relaterat: Skapa ett verktyg som registrerar användarinteraktioner

Av Gil. Denna enkla sidinteraktion förbättrar användarupplevelsen på plats och hjälper företaget att hålla besökarna kvar på sina sidor längre. Huvudsyftet med webbplatsen är att visa hur dessa egenskaper kan användas i naturen, som kontor och som tillbyggnader. I stället för att skapa separata upplevelser för varje ändamål efterliknar den här sidan användarflödet när man jämför och kontrasterar de olika användningsområdena och smidigt hoppar mellan dem.

Av Dominik Martin. Interaktioner behöver inte vara djärva och märkbara för att få effekt. Det här appkonceptet förenklar ett beteende som vi alla avskyr – att välja vårt bosättningsland från en lång lista. I stället för att låta användarna bläddra igenom listan och hitta sitt land, låter den här mikrointeraktionen dig först välja den första bokstaven i ditt land och sedan hitta det från en mycket mindre, fokuserad lista över länder.

Av Mykolas Puodziunas. Fler och fler detaljhandelssajter gör det lättare för dig att ”snabbvisa” en vara, i stället för att klicka in på alla detaljerade sidor och sedan behöva gå tillbaka till sökresultaten för att bläddra bland fler varor. Det här konceptet tar det ett steg längre och låter dig se varje produkt i dess olika tillgängliga färger, utan att behöva lämna kategorisidan.

Missade vi ditt favoritexempel på interaktionsdesign? Dela det med oss på Twitter: @InVisionApp.