Når brugerne åbner et websted eller en app, lægger de først mærke til de åbenlyse designelementer: logo, farver, ikoner, illustrationer og billeder. Disse elementer bidrager ganske vist til den overordnede brugeroplevelse, men de er faktisk brikker i et større puslespil: interaktionsdesign. Dette koncept kan være mere subtilt for slutbrugerne end en prangende, ny hjemmeside, men det er afgørende for at skabe en engagerende, intuitiv digital oplevelse.

Hvad er interaktionsdesign?

Interaktionsdesign handler om at lette interaktioner mellem brugere og produkter (oftest er disse produkter apps eller websteder). Ifølge Interaction Design Foundation er “målet med interaktionsdesign at skabe produkter, der gør det muligt for brugeren at nå sit(e) mål på den bedst mulige måde”. Med andre ord er interaktionsdesignere ansvarlige for at skabe hvert eneste element på en skærm, som en bruger kan interagere med, hvad enten det sker ved at klikke, swipe, trykke på eller en anden form for handling.

De fem dimensioner af interaktionsdesign tjener som en nyttig model til at forstå, hvad det indebærer. Modellen blev først introduceret af Gillian Crampton Smith, en akademiker inden for interaktionsdesign, og den omfattede kun fire dimensioner. Kevin Silver, senior interaktionsdesigner hos IDEXX Laboratories, tilføjede den femte.

1D: Ord skal være enkle at forstå og skal kommunikere den rette mængde oplysninger til brugeren (for mange detaljer kan overvælde, mens for få oplysninger kan skabe forvirring).

2D: Visuelle repræsentationer, som billeder, typografi og ikoner, skal supplere ordene for at kommunikere oplysninger til brugeren.

3D: Fysiske objekter eller rum henviser til den faktiske hardware og de objekter, som en bruger interagerer med. Bruger de f.eks. en smartphone eller en bærbar computer med en mus? Og hvor befinder de sig, ved deres skrivebord eller i en overfyldt undergrundsbane?

4D: Time henviser til, hvordan brugerne kan måle fremskridt, f.eks. med lyd og animation, samt hvor lang tid de bruger på at interagere med de tre første dimensioner.

5D: Behavior blev tilføjet af Kevin Silver og omfatter, hvordan de foregående dimensioner definerer interaktionerne med et produkt. Den omfatter også brugernes og produktets reaktioner.

Relateret: 6 grunde til, at UX-designere bør udforske gestisk interaktion

10 eksempler på interaktionsdesign

Hvordan ser designinteraktion ud i det virkelige liv? Her er nogle af vores yndlingseksempler fundet på Dribbble.

Af Jony vino. At dele regningen med dine venner er ikke altid så let, som det ser ud, især hvis du er mere en visuel person end en talperson. Med dette app-koncept kan du indtaste den samlede regning, vælge drikkepengeprocenten og derefter se, hvor meget hver person skal betale. Det bedste ved det hele? I stedet for manuelt at justere hver enkelt persons andel og konstant skulle opdatere alles andel, kan du blot ændre størrelsen på hver enkelt persons del i appen, og tallene vil automatisk blive genberegnet for alle.

Af Prem Gurusamy. På de fleste e-handelswebsteder skal du navigere til en helt anden del af webstedet eller appen for at se din indkøbskurv. Med denne interaktion kan du straks se dine varer “flyve” ind i din kurv, så snart du klikker på knappen “Læg i kurv”. Kurven fortsætter med visuelt at vise dine varer, selv når du udforsker andre dele af webstedet.

Af Igor Pavlinski. Apps til sociale medier er berygtede for informationsoverbelastning, idet de viser dig alle de vigtigste historier, videoer eller artikler, der er på vej frem, og aktuelle nyheder på en gang. Dette koncept for en ny app til sociale medier giver brugeren kontrollen tilbage ved at organisere indholdet efter kilde (f.eks. YouTube, Vimeo, Twitter eller Reddit) og lade dig vælge, hvilken kanal du vil udforske. Dette kortlignende layout eliminerer også behovet for at hoppe mellem apps for at bruge dit yndlingsindhold. I stedet er det nemt at skifte mellem kilder inden for den samme oplevelse.

Af tubik. Der er en million og en måde at tilpasse din burger på. Og når du bestiller på din smartphone, kan det være en øvelse i behændighed at vælge hver enkelt ingrediens på en lille skærm. Dette UI-koncept til Tasty Burger-appen forenkler bestillingsoplevelsen ved at opdele ingredienserne efter type i spandevis. I stedet for at få vist en lang liste med alle mulige variationer af ost, råvarer, kød eller boller, klikker man først på ingredienskategorien (f.eks. ost), hvorefter man får vist de forskellige typer, f.eks. gouda eller comte.

Af Rahul.Design. Hvis du er på boligjagt og ikke kan se ejendommen personligt, er den næstbedste mulighed at få en virtuel rundvisning. Dette koncept for ejendomsmægler-appen Spec udnytter vores naturlige adfærd, når vi ser på et nyt rum. Du kan klikke ind i et rum, f.eks. køkkenet eller stuen, og bevæge din telefon for at få et 360-graders billede. Det er nemt at skifte mellem rummene med et enkelt tryk.

Af Forest Plasencia. Filtre er en effektiv og nem måde at få forskellige dele af information frem på. Men problemet med mange filterinteraktioner er, at de åbner en popup eller en ny side i appen og skjuler netop de oplysninger, som du ønsker at filtrere. Denne mikrointeraktion holder alting i den samme visning, selv når du filtrerer. På denne måde kan du se dataene ændre sig med det samme, når du vælger forskellige filterkriterier.

Af Dmitro Petrenko. Det er nemmere end nogensinde før at armere og overvåge dit hus takket være smartphone-apps, men mellem 94%-99%

Relateret: Oprettelse af et værktøj, der registrerer brugerinteraktioner

Af Gil. Denne enkle sideinteraktion forbedrer brugeroplevelsen på stedet og hjælper virksomheden med at holde de besøgende længere på deres sider. Hovedformålet med webstedet er at vise, hvordan disse egenskaber kan bruges i naturen, som kontor og som tilbygninger. I stedet for at skabe separate oplevelser for hvert formål efterligner denne side brugerens flow ved at sammenligne og kontrastere de forskellige anvendelser og springe gnidningsløst mellem dem.

Af Dominik Martin. Interaktioner behøver ikke at være fede og iøjnefaldende for at gøre indtryk. Dette app-koncept forenkler en adfærd, som vi alle foragter – at vælge vores bopælsland fra en lang liste. I stedet for at brugerne skal scrolle gennem listen og finde deres land, får denne mikrointeraktion dig først til at vælge det første bogstav i dit land og derefter finde det fra en meget mindre, fokuseret liste over lande.

Af Mykolas Puodziunas. Flere og flere detailhandelssider gør det lettere for dig at “hurtigt se” en vare, i stedet for at klikke ind på hver enkel detaljeside og derefter skulle vende tilbage til søgeresultaterne for at gennemse flere varer. Dette koncept går et skridt videre og giver dig mulighed for at se hvert produkt i de forskellige tilgængelige farver uden at skulle forlade kategorisiden.

Gik vi glip af dit foretrukne eksempel på interaktionsdesign? Del det med os på Twitter: @InVisionApp.