Wanneer gebruikers een website of app openen, vallen ze eerst de voor de hand liggende designelementen op: logo, kleuren, iconen, illustraties en beeldmateriaal. Hoewel deze elementen bijdragen aan de totale gebruikerservaring, zijn ze eigenlijk stukjes van een grotere puzzel: interactieontwerp. Dit concept kan subtieler zijn voor eindgebruikers dan een flitsende, nieuwe homepage, maar het is essentieel bij het creëren van een boeiende, intuïtieve digitale ervaring.

Wat is interaction design?

Interaction design gaat over het faciliteren van interacties tussen gebruikers en producten (meestal zijn die producten apps of websites). Volgens de Interaction Design Foundation is “het doel van interaction design het creëren van producten die de gebruiker in staat stellen zijn doel(en) op de best mogelijke manier te bereiken.” Met andere woorden, interactieontwerpers zijn verantwoordelijk voor het creëren van elk element op een scherm waarmee een gebruiker zou kunnen interageren, hetzij door te klikken, swipen, tikken, of een ander soort actie.

De vijf dimensies van interactieontwerp dienen als een nuttig model om te begrijpen wat het inhoudt. Voor het eerst geïntroduceerd door Gillian Crampton Smith, een interaction design academicus, omvatte het model slechts vier dimensies. Kevin Silver, een senior interaction designer bij IDEXX Laboratories voegde de vijfde toe.

1D: Woorden moeten eenvoudig te begrijpen zijn en moeten de juiste hoeveelheid informatie aan de gebruiker communiceren (te veel details kunnen overweldigen, terwijl te weinig informatie verwarring kan veroorzaken).

2D: Visuele voorstellingen, zoals afbeeldingen, typografie en pictogrammen, moeten de woorden aanvullen om informatie aan de gebruiker te communiceren.

3D: Fysieke objecten of ruimte verwijst naar de feitelijke hardware en objecten waarmee een gebruiker interactie heeft. Bijvoorbeeld, gebruiken ze een smartphone of een laptop met een muis? En waar zijn ze, aan hun bureau of in een overvolle metro?

4D: Time verwijst naar hoe gebruikers de voortgang zouden kunnen meten, met geluid en animatie bijvoorbeeld, evenals hoe lang ze interactief bezig zijn met de eerste drie dimensies.

5D: Behavior is toegevoegd door Kevin Silver en omvat hoe de vorige dimensies de interacties van een product bepalen. Het omvat ook de reacties van gebruikers en het product.

Gerelateerd: 6 redenen waarom UX-designers gesturale interactie moeten onderzoeken

10 voorbeelden van interactieontwerp

Hoe ziet ontwerpinteractie er in het echte leven uit? Hier zijn enkele van onze favoriete voorbeelden gevonden op Dribbble.

Door Jony vino. De rekening delen met je vrienden is niet altijd zo makkelijk als het lijkt, vooral als je meer een visueel dan een cijfermatig persoon bent. Met dit app-concept kunt u de totale rekening invoeren, het fooi percentage selecteren, en dan zien hoeveel elke persoon zal betalen. Het beste deel? In plaats van handmatig ieders deel aan te passen en voortdurend ieders aandeel te moeten bijwerken, kunt u eenvoudig de grootte van ieders deel in de app wijzigen en de getallen worden automatisch opnieuw berekend voor iedereen.

Door Prem Gurusamy. Op de meeste e-commercesites moet je naar een heel ander deel van de website of app navigeren om je winkelwagen te bekijken. Met deze interactie ziet u uw artikelen direct in uw winkelwagen “vliegen” zodra u op de knop “Toevoegen aan winkelwagen” klikt. De winkelwagen blijft visueel oppervlak van uw items, zelfs als u andere delen van de site verkennen.

Door Igor Pavlinski. Sociale media-apps zijn berucht om hun overvloed aan informatie. Ze tonen je alle topverhalen, trending video’s of artikelen, en het laatste nieuws tegelijk. Dit concept voor een nieuwe social media app legt de controle terug in de handen van de gebruiker, door content te organiseren per bron (zoals YouTube, Vimeo, Twitter, of Reddit) en je te laten kiezen welk kanaal je wilt verkennen. Dankzij deze kaartachtige lay-out hoef je niet meer van de ene app naar de andere te springen om je favoriete content te bekijken. In plaats daarvan is het gemakkelijk om te wisselen tussen bronnen binnen dezelfde ervaring.

Door tubik. Er zijn een miljoen en een manieren om uw hamburger aan te passen. En als je bestelt op je smartphone, kan het selecteren van elk individueel ingrediënt op een klein scherm een oefening in handigheid zijn. Dit UI-concept voor de Tasty Burger-app vereenvoudigt de bestelervaring door ingrediënten per type in te delen. In plaats van het weergeven van een lange lijst van elke mogelijke variatie van kaas, producten, vlees, of broodje, klik je eerst op de categorie van het ingrediënt (zoals kaas) en vervolgens krijg je de verschillende soorten te zien, zoals gouda of comte.

Door Rahul.Design. Als je op huizenjacht bent en het pand niet persoonlijk kunt zien, is de volgende beste optie een virtuele rondleiding. Dit concept voor onroerend goed app, Spec, maakt gebruik van ons natuurlijke gedrag bij het kijken naar een nieuwe ruimte. Je kunt in een kamer klikken, zoals de keuken of de woonkamer, en je telefoon bewegen om een 360-graden beeld te krijgen. Het is gemakkelijk om te schakelen tussen kamers met slechts een enkele tik.

Door Forest Plasencia. Filters bieden een krachtige, gemakkelijke manier om verschillende delen van informatie naar boven te halen. Maar het probleem met veel filterinteracties is dat ze een popup of nieuwe pagina in de app openen, waardoor de informatie die je wilt filteren verborgen blijft. Deze micro-interactie houdt alles in dezelfde weergave, zelfs wanneer je filtert. Op deze manier ziet u de gegevens direct veranderen wanneer u verschillende filtercriteria selecteert.

Door Dmitro Petrenko. Het is gemakkelijker dan ooit om je huis te bewapenen en te monitoren dankzij smartphone-apps, maar tussen 94%-99%

Gerelateerd: Het maken van een tool die gebruikersinteracties registreert

Door Gil. Deze eenvoudige pagina-interactie verbetert de gebruikerservaring ter plaatse en helpt het bedrijf bezoekers op hun pagina’s te houden, langer. Het belangrijkste doel van de site is om te laten zien hoe deze eigenschappen kunnen worden gebruikt in de natuur, als kantoor, en als uitbreiding. In plaats van voor elk doel een aparte ervaring te creëren, bootst deze pagina de gebruikersstroom na van het vergelijken en contrasteren van de verschillende gebruiksdoeleinden, en het naadloos heen en weer springen tussen beide.

Door Dominik Martin. Interacties hoeven niet vet en opvallend te zijn om indruk te maken. Dit app-concept vereenvoudigt een gedrag dat we allemaal verachten – het kiezen van ons land van verblijf uit een lange lijst. In plaats van gebruikers door de lijst te laten scrollen en hun land te laten vinden, laat deze micro-interactie je eerst de eerste letter van je land kiezen en het dan vinden in een veel kleinere, gerichte lijst van landen.

Door Mykolas Puodziunas. Meer en meer retail sites maken het gemakkelijker voor u om “quick view” een item, in plaats van te klikken op elke detailpagina en dan moeten terugkeren naar de zoekresultaten om meer items te bladeren. Dit concept gaat nog een stap verder en laat je elk product in de verschillende beschikbare kleuren bekijken, zonder de categoriepagina te hoeven verlaten.

Hebben we jouw favoriete interaction design voorbeeld gemist? Deel het met ons op Twitter: @InVisionApp.