Maak digitale ideeën die echt werken

Elke dag gebruik je interaction design zonder dat je het misschien doorhebt. Denk aan apps, websites, zelfscankassa’s of interactieve schermen. Waarom werkt een app fijn? Waarom weet je meteen waar je moet klikken? Daeze vragen hebben allemaal te maken met interaction design.

In deze lessenserie maak je voor het eerst kennis met interaction design. Je ontdekt hoe digitale producten worden bedacht, ontworpen en getest. Je gaat van alles een beetje uitproberen: onderzoeken, ontwerpen, interactieve prototypes maken en testen.

Deze lessenserie is een eerste introductie in interaction design. Je hoeft dus nog geen expert te zijn. Het doel is vooral ontdekken, experimenteren en ervaren wat er allemaal mogelijk is binnen dit vakgebied.

Na deze korte lessenserie kun je tijdens de specialisatie dieper ingaan op verschillende onderdelen van interaction design en jezelf verder ontwikkelen als interaction designer.

Wat doet een interaction designer eigenlijk?

Als interaction designer bedenk en ontwerp je hoe mensen een app, website of digitaal scherm gebruiken. Je kijkt naar wat gebruikers nodig hebben en zorgt ervoor dat alles duidelijk, logisch en makkelijk werkt. Bijvoorbeeld: waar een knop staat, hoe je door een menu navigeert of hoe iemand snel informatie kan vinden.

Hoe doe je dat dan?
Je begint vaak met onderzoek doen naar de doelgroep. Daarna maak je schetsen, wireframes en prototypes van een app of website. Dat zijn eerste versies waarmee je kunt testen hoe het werkt. Je denkt na over de route die een gebruiker doorloopt en probeert die zo simpel en prettig mogelijk te maken.

Met welke programma's werk  je ?
Een interaction designer werkt veel met programma’s zoals Adobe illustrator, Miro, Sketch en Figma. Daarmee maak je ontwerpen, werk je ideeën uit en test je hoe een app of website werkt. 

Werk je veel samen?
Je overlegt regelmatig met klanten, developers en andere designers. Soms test je jouw ontwerp bij gebruikers om te zien wat goed werkt en wat beter kan. Daarna pas je het ontwerp weer aan. Je bent dus creatief bezig, maar je lost ook problemen op en denkt veel vanuit de gebruiker.

Maak het klikbaar!

Elke dag gebruik je apps, websites en digitale schermen. Je klikt, scrolt, swipet en verwacht dat alles meteen werkt. Maar heb je je ooit afgevraagd wie dat allemaal bedenkt? In deze opdracht ga jij dat zelf ontdekken.

Je werkt in een reeks korte opdrachten toe naar één eindproduct: een interactief ontwerp dat jij zelf bedenkt, ontwerpt en presenteerbaar maakt. Je leert stap voor stap hoe je van een idee naar een werkend digitaal concept gaat.

1.1 Welke apps gebruik je dagelijk?

Wat Schrijf op welke apps, websites en andere soorten interactieve  producten die je op een schooldag allemaal gebruikt. Vanaf dat je opstaat tot je weer naar bed gaat.

Hoe Maak in Word een tabel en voer hier alle schermen van een dag in en geef een uitleg waar je het voor gebruikt.

1.2  Wat kan je nog herinneren?

Wat Kies vier van de apps die je hebt gebruikt. Schets zonder dat je het gaat opzoeken; 

1. •  het logo van deze app

   • het start- of inlogscherm

   • het eerste scherm dat je daarna ziet. 



Het gaat er niet om dat je het goed hebt maar wat je kan herinneren!

Hoe Vul per app 1 A4 met digitale of analoge schetsen.
Uiteindelijk heb je dan 4 vellen uitgewerkt. Download hier de schetsvellen 

1.3. Welke mening heb jij?

Wat Wat vind je goed werken aan de vier interactieve producten en wat vind je niet goed werken? Waar kan wat jou betreft verbetert worden?

Hoe Vul je mening in over de vier apps in op het opdrachtvel. Download hier het opdrachtvel.

2.1 Wat zie je in Figma

1. Canvas: Het grote werkvlak waarop je ontwerpt.
2. Frame: Een scherm van een website of app.
3. Layers: Een overzicht van alle onderdelen van je ontwerp.
4. Properties: Hier kun je kleuren, afmetingen en teksten aanpassen.

2.2 Een UI template downloaden.

Je gaat een bestaande User Interface gebruiken en aanpassen. Je kunt via deze link het ontwerp van de Interface van Spotify downloaden naar je eigen Figma account >> Spotify - Mobile UI Kit  

Je kunt via de community heel veel van deze bestaande UI Kits downloaden en gebruiken. 

2.3 Wat is een Frame?

Een Frame kun je vergelijken met een scherm van een app. Elke pagina die je ziet in de Spotify-app is meestal één Frame.

Zoek in je bestand:

• Home

• Playlist

• Album

• Player

Klik steeds op een ander scherm. Kun je ontdekken hoeveel schermen er in jouw template zitten?

De opdracht loopt door in de afbeelding hieronder!

3.1 Welk probleem ga jij oplossen?

Wat  Kies één van de ideeën hierboven of bedenk zelf een product. Bedenk hoe jouw interactieve product werkt en een probleem oplost. Beantwoord vragen over het probleem, de gebruiker, de oplossing, de interactie en welke schermen je nodig hebt. 

Hoe Vul de vragen zo uitgebreid mogelijk in op het opdrachtvel Welk probleem? Download deze hier.

3.2 Schets jouw idee

Wat Maak schetsen van jouw product.
Schets minimaal:

• Het uiterlijk van het product
  (bijv. apparaat, scherm en omgeving)

• Minimaal 2 interactiemomenten
  (bijv. knop indrukken, scherm dat verandert, feedback)

Hoe Maak 5 schetsen (digitaal of op papier, daarna scherp gefotografeerd). Gebruik pijlen en korte tekst om uit te leggen wat er gebeurt. Dit worden ook wel wireframes genoemd. 

Wireframes zijn handig om te zien hoe je navigeert door de verschillende schermen. Dus wat er gebeurd als je een app opent of op een knop drukt of als je scrollt. 

4.1 Maak je eerste scherm

Wat  Ontwerp het eerste scherm van jouw product. Bijvoorbeeld: 

• startscherm bestelzuil

• beginscherm van een app 

• scherm van een apparaat (zoals een prullenbak of spiegel)

Hoe 

• Maak een nieuwe pagina in Figma aan in het document dat je voor deel 2 hebt gemaakt en noem deze: Design. Start hier met je eerste eerste scherm door een frame aan te maken. 

• Gebruik vormen, tekst, afbeeldingen en kleuren.

• Houd het overzichtelijk (niet te druk).
   

4.2  Werk je ontwerp verder uit

Wat  Vul je eerste scherm aan met vijf ontwerpen en zorg dat je de volgende schermen hebt verwerkt:

1. Startscherm
   (waar de gebruiker begint)

2. Intro / uitleg
   (wat kan je hier doen?)

3. Dashboard
   (overzicht van de app, website etc.)

4. Product pagina
   (gebruiker maakt een keuze voor product, meer uitleg, koopt iets etc. )

5. Error scherm
   (wat gebeurd er als de gebruiker een fout maakt?)

6. Eindscherm (bevestiging of afronding)

Hoe Werk je schermen uit in je Design pagina in figma door middel van de frames.

!! Als het je niet lukt om in Figma je ontwerp te maken. Dan kan je dit doen in illustrator. Uiteindelijk kan je deze ontwerpen in Figma kopieëren.

4.3 Maak je ontwerp klikbaar

Wat  Zorg dat je door alle schermen kunt klikken en dat je een prototype kan inleveren. Dit doe je in de modus prototype in Figma. 

Hoe Hieronder staat in 8 stappen uitgelegd hoe je een prototype maakt van je ontwerp in Figma. Je verbind hiermee de schermen met elkaar, je kan buttons klikbaar maken en je kan als je tijd over hebt animaties toevoegen waardoor je protoype nog meer tot leven komt.

4.4 Deel je prototype

Wat  Als je prototype klaar is deel je de link met je docent en je plaatst deze in je Adobe Express page waar je de hele opdracht in verzameld. 

Hoe 

1. Klik in Figma op de share knop (blauw-paarse knop aan de rechterkant.)

2. Je krijg een pop-up scherm te zien. Daar kan je de link kopieëren. Zorg ervoor dat je bij de instellingen in dat scherm aanvinkt dat iedereen de link kan bekijken. Anders kunnen de docenten die beoordelen je prototype niet bekijken. Dat zou jammer zijn.