Go to content

Interaktionsdesign - en kort introduktion

I denne artikel vil jeg give en indføring i, hvad interaktionsdesign er, og hvordan det kan bruges til at fremme brugeroplevelsen på dit site. Jeg håber, du finder inspiration til selv at komme i gang.

Published marts 31, 2023

Hvad er interaktionsdesign?

Interaktionsdesign er samspillet mellem bruger og computer (HCI) med hjælp fra enten design, animation, video og/eller lyd.

Interaktionsdesign er også kendt som IxD og er en del af den samlede brugeroplevelse (User Experience – UX). Det gør et website ”levende” og tiltrækker opmærksomhed – gerne så det også gavner UX. Derfor skal interaktionsdesign laves med et formål og ikke kun for effektens skyld.

Her kan du se et eksempel på, hvordan det kan fungere på et site. Dette er fra et af de tidlige udkast til design og interaktion, vi lavede til sitet Naturkanon 2018:

Mikrointeraktion

En del af den overordnede interaktion kaldes mikrointeraktion. Mikrointeraktion er de små øjeblikke, som man ikke nødvendigvis bemærker, men som kan være rigtig vigtige. De kan nemlig forstærke brugeroplevelsen, hvis de bliver brugt rigtigt. Eksempler på mikrointeraktioner på websites kan være burger-knap og download-knap, som begge ses herunder:

https://cms.novicell.com/media/zdwl35ze/download-micro-novicell.gif

https://cms.novicell.com/media/utrbsfvz/menu-micro-novicell.gif

"Moving elements are a powerful tool to attract users’ attention. When designing an animation consider its goal, its frequency of occurrence, and its mechanics." 
Norman Nielsen Group

Hvorfor skal man bruge interaktionsdesign?

Morgendagens brugere af websites forventer interaktion. Det er dog vigtigt, at du altid bruger interaktionsdesign med måde. Det kan fx være til at:

  • Forstærke og forbedre storytelling, branding og digital experience
  • Fortælle den gode historie, fange og vedholde deres opmærksomhed

 

Vi er alle ret enige om, at video og bevægelse er et stærkt redskab på SoMe kanaler. Det samme gælder faktisk for websites, hvor de udgør det tredje lag, som hidtil ofte er blevet glemt. Ved brugen af animeret og interaktivt indhold viser man, at man er ajour med tidens tendenser inden for webdesign og udvikling. Derudover hjælper de til, at brugeren ikke keder sig, og det kan være med til at holde dem både informeret og visuelt engageret.

 

Stå stærkere i det digitale kapløb

Interaktioner og animationer kombineret med Single Page Application (SPA) og progressive webapps gør, at man står stærkt i det digitale kapløb. Det er ikke længere bare noget, der ser flot ud – det har også en funktion. Og gøres det ordentligt og af de rigtige folk fra start, tager det ikke mange ekstra timer at tilføje til et website. Et produkt opfattes bare bedre, når det har en oplevelse tilknyttet - og den oplevelse kan fx komme fra et veludviklet interaktionsdesign.

 

Sådan bruger vi interaktionsdesign hos Novicell

Vores egne kunder efterspørger og forventer i højere grad ”bevægelse og liv” på de digitale løsninger, vi leverer. I designafdelingen har vi i noget tid derfor testet brugen af interaktion som en del af leverancen. Sideløbende med, at design indtænkes, afprøves derfor interaktioner og animation. Vi leverer prototyper, som kan ses på iPads internt i huset, og derudover kan der også leveres en video til kunden, hvis det giver mening.

Vi bruger altså prototyper som et værktøj, der forbedrer mange processer:

  • Frontend bliver bedre informeret og kan ved hjælp af prototypen bedre komme med et præcist estimat
  • Frontend kan også arbejde ud fra prototypen og i bedste fald få designet hurtigere i browseren
  • Prototypen bruges desuden aktivt som en del af vores Design QA
  • Kunden kan se, hvad der er blevet snakket om i processen, så der ikke er uventede overraskelser senere
  • Projektlederen kan afkode og beskrive opførslen ret detaljeret i hand-off
  • Prototypen kan også bruges til pitches af projekter – det giver god respons med en iPad og en brugbar prototype til præsentationer

Vil du gerne vide mere om interaktionsdesign? Så kontakt mig gerne: