Wat is interactief vormgeven?

Interactief vormgeven is het vormgeven van de interactie tussen mens en machine. Het vak interactief vormgeven houdt zich niet bezig met de interactie tussen mensen. Dit is meer het terrein van het vak communicatie.

Voor interactie vormgeven wordt vaak het Engelse woord Interaction design gebruikt.

De volgende definitie komt van Wikipedia:

“ Interaction design is een ontwerpdiscipline die zich bezighoudt met het gebied waarin mens en systeem (=machine of applicatie) elkaar tegenkomen; elkaar ontmoeten.”

Interaction design omvat een breed gebied. In het schema hierboven die je allemaal onderdelen van het vak.

Oefening 1

In het schema worden nogal moeilijke woorden gebruikt. Maak een omschrijvng van alle deelgebieden die genoemd worden. Zoek op internet de betekenis van de woorden die je niet kent.

(naar boven)

Web en applicaties

In deze opleiding leer je vooral een interactie ontwerp te maken voor online toepassingen. Dus voor web en apps.

Een interactief ontwerp voor websites of applicaties laat zien hoe de interactie tussen de bezoeker en de website/app zal zijn. Hoe werkt de navigatie? Hoe wordt de content gepresenteerd? Hoe worden (complexe) bezoekerstaken uitgevoerd? Hoe worden de doelen van de organisatie gerealiseerd? Kortom: wat staat waar, hoe werkt dat en waarom?

Hierbij zijn een aantal zaken van belang:

• Usability
• Accesibility

Gebruikersvriendelijkheid is de Nederlandse term die het dichts komt bij het Engelse woord usability.

Usability gaat over het gemak waarmee een gebruiker de machine kan gebruiken, de informatie kan vinden en bijvoorbeeld een product kan bestellen. De totale ervaring van een bezoek aan een site of het gebruik van een app wordt aangeduid met gebruikerservaring of ‘user experience’.

Accesibility geeft aan hoe ver mensen met een handicap het apparaat of applicatie kan gebruiken.

Een veel gebruikte term is User Centered Design. Bij User Centered Design staat de gebruiker centraal in het gehele ontwerpproces. Het doel is om tot een product te komen dat goed functioneert voor de doelgroep. Hiervoor moet je altijd onderzoek doen naar de gebruiker en naar de gewenste functionaliteit.

User Centered Design gaat uit van de 5 e's:

• Effective: Hoe volledig en accuraat wordt een taak of ervaring afgerond
• Efficient: Hoe snel wordt de taak voltooid
• Engaging: Hoe goed kan de gebruiker met de interface omgaan en hoe fijn en prettig is het om die te gebruiken;
• Error Tolerent: Hoe goed worden fouten voorkomen en worden fouten door gebruikers opgelost;
• Easy to Learn: Hoe gemakkelijk is het te gebruiken en door het gebruik te leren.

Een gemiddelde eindgebruiker is niet altijd hetzelfde. Eigenlijk bestaat de gemiddelde mens. Een site of een app zal dan ook pas 100% gebruiksvriendelijk zijn als het de gehele doelgroep kan bedienen. Dit is onmogelijk. Daarom wordt de P5 tot P95 norm vaak gehanteerd. Dit betekent dat 95% van de doelgroep tevreden moet zijn over de gebruiksvriendelijkheid.

Oefening 2

1. Lees deze webpagina met de 20 grootste irritaties op internet. Al deze irritaties kunnen voorkomen worden door een goed interaction design. Geef bij alle 20 punten weer aan welke "E" een site dan niet voldoet.
2. Een website wordt niet in alle browsers op dezelfde manier weergegeven. Om een website gebruikersvriendelijk te maken, moet je de site dus in verschillende browsers testen. Kijk naar het gebruik van browsers op de site van w3schools en browserchecker.nl. In welke browsers moet je een website testen om zeker te weten dat je voldoet aan de P5 tot P95 norm?

(naar boven)

Wat doet een interactie ontwerper?

Als interactie ontwerper ontwerp je websites en applicaties. Vergelijk het met een architect die je helpt bij het ontwerpen van een huis: een interactie ontwerper doet dit voor websites en applicaties.

Een interactie ontwerper bepaalt:

• Wat staat waar op je website of app?
• Hoe werkt het en waarom?
• Hoe vindt de bezoeker zijn weg en hoe wordt de inhoud gepresenteerd?

Een interactie ontwerper heeft te maken met:

• businessdoelen (wat wil de klant)
• gebruikersdoelen (wat wil de gebruiker)

In de volgende lessen leer je stap voor stap hoe je een interactie ontwerp maakt. Hieronder zie je een korte samenvatting.

Het maken van een interactie ontwerp verloopt volgens de volgende stappen:

• vaststellen van de doelstelling
• gebruikersonderzoek
• ontwikkelen gebruikersscenario's (userstories) / functies vastleggen
• ordenen van informatie
  • navigatie
  • wireframes
  • interface design
• interaction design
  • events

Het ontwerpproces begint met het achterhalen van de klantvraag, en de businessdoelstellingen.

De volgende stap is het achterhalen van de wensen van de eindgebruiker. Met welk doel bekijkt/gebruikt de gebruiker de website of de applicatie? De doelen worden vast gelegd in userstories:

Hierna ga je inventariseren welke informatie en functies de gebruiker nodig heeft om het doel te bereiken. Met andere woorden: wat zijn de taken en de acties. Alle informatie moet worden geordend. Dit wordt meestal vast gelegd in wireframes. Wireframes zijn een visuele functionele weergave van een website of applicatie. Wireframes zijn dus géén grafisch design, maar bedoelt als bespreekdocument. Dit is handig voor bijvoorbeeld gebruikerstests of om een applicatie te demonstreren aan klanten of projectleden.

Interactief vormgeven is een vak dat snel veranderd.

Vroeger:

• Waren computers heel groot
• Waren ze heel duur
• Werden gebouwd voor één toepassing
• Werden gebruikt door experts

Nu:

• Zijn computers overal, in elke maat
• Zijn computers “wegwerp”artikelen
• Worden ze gebruikt voor allerlei oplossingen
• Worden computers gebruikt door mensen die amper weten hoe het werkt

De eerste computer in de VS was enkele klaslokalen groot. Deze computer gebruikte evenveel  energie als een zware locomotief. Het werd gebruikt door het leger. Vergeleken met hedendaagse apparatuur kon het apparaat niet veel maar voor die tijd was het een revolutionaire ontwikkeling. De computer kon het zelfde als een moderne chip ter grootte van enkele vierkante millimeters.

Oefening 3

1. Bekijk de volgende video:

2. Ga naar de site http://9292.nl/ en teken het wireframe van deze pagina.