User Interface

• Applicatie- en mediaontwikkelaar
• Grafische Vormgeving
• MBO
• Studiejaar 1,2

UX/UI
User Interface

UX / UI

User Interface

Leerdoelen

• Begrijpen wat User Interface is 
• De belangrijkste handvatten en regels leren 
• Leren hoe je user interface kunt toepassen 

Wat weet je al over User Interface?

Wat is
User Interface?

Het omvat alle visuele, auditieve en tastbare elementen waarmee een gebruiker kan communiceren. Het hoofddoel van een UI is om een effectieve en efficiënte manier van interactie tussen de gebruiker en het systeem.

• Visuele elementen (knoppen, pictogrammen, kleur)
• Interactieve elementen (acties uitvoeren) 
• Feedback mechanismen (actie is uitgevoerd - animaties/geluiden)
• Informatiearchitectuur (structuur binnen de interface)

De User Interface (UI) is de interactie tussen een gebruiker en een digitaal apparaat of systeem.

Een goede User Interface kan de gebruikerservaring verbeteren, de efficiëntie verhogen en de tevredenheid van gebruikers vergroten. 

Het is de reden voor het succes van een applicatie.

De Kracht van 

User Interface

Can't Un see?

Tijd voor een spelletje! 

In de volgende slide ga je naar de website van cantunsee.space

Speel het spel en haal een zo hoog mogelijke score binnen 5 min.

Maak een foto of schermafbeelding om later in te leveren!

cantunsee.space

Deel je score van de Game: Can't Un see!

Bij het ontwerpen van een User Interface zijn er verschillende handvatten en regels waar je rekening mee moet houden. Denk aan consistentie, gebruiksvriendelijkheid, responsiviteit en toegankelijkheid.

Handvatten 

en Regels

Toepassen van 

User Interface

User Interface kan worden toegepast in allerlei soorten applicaties, zoals websites, mobiele apps en desktopprogramma's. Het is belangrijk om rekening te houden met de specifieke behoeften en doelgroep van de applicatie.

Waar te beginnen?

Bij het ontwikkelen van een User Interface is het belangrijk om te beginnen met een duidelijk ontwerpconcept. Denk na over de doelen van de applicatie en de visuele uitstraling.

Ontwerpconcept

Het ontwerpconcept bevat onder andere de structuur van de applicatie, de plaatsing van interactieve elementen, de kleuren, lettertypen en afbeeldingen die worden gebruikt. Het moet aansluiten bij de doelen en de doelgroep van de applicatie.

Het ontwerpconcept bevat onder andere de structuur van de applicatie, de plaatsing van interactieve elementen, de kleuren, lettertypen en afbeeldingen die worden gebruikt. Het moet aansluiten bij de doelen en de doelgroep van de applicatie.

Ontwerpconcept

• 60/30/10 regel
• Betekenis van de kleur
• Contrast

Kleur

• Het primaire niveau: koppen, kerninformatie, aandacht.
• Het secundaire niveau: makkelijk scannen, sub koppen, bijschriften, snel navigeren.
• Het tertiaire niveau: hoofdtekst, aanvullende gegevens, kleiner weergeven.
  
  
• Leesbaarheid – ook van ‘ver weg’
• Afstand tussen tekst en andere elementen
• Uitlijnen (links/gecentreerd/rechts)

Typografie/font

Better web type?

Tijd voor nog een spelletje?!

In de volgende slide ga je naar de website van https://betterwebtype.com/triangle/

Speel het spel en haal een zo hoog mogelijke score binnen 5 min.

Maak weer een foto of schermafbeelding om later in te leveren!

betterwebtype.com

Deel je score van de Game: Better web type!

Belangrijke Tips UI
(User Interface)

• Houd rekening met de verwachtingen en ervaringen van gebruikers 
• Test de User Interface regelmatig met echte gebruikers 
• Blijf op de hoogte van nieuwe ontwikkelingen en trends in UID

User Interface en User Experience

User Interface en User Experience (UX) zijn nauw met elkaar verbonden. User Interface richt zich op de visuele en interactieve aspecten, terwijl User Experience zich richt op de algehele ervaring van gebruikers met een applicatie.

Samenvatting

User Interface is essentieel voor het succes van een applicatie. Het omvat de visuele en interactieve elementen waarmee gebruikers communiceren. Door rekening te houden met handvatten, regels en de behoeften van gebruikers, kun je een effectieve User Interface ontwerpen.

Bronnen

- Nielsen, J. (1993). Usability Engineering
- Norman, D. (2013). The Design of Everyday Things
- Johnson, J. (2010). Designing with the Mind in Mind

Vragen?

Zijn er nog vragen over User Interface? Stel ze nu!

Opdracht

Combineer de kennis van User Interface en User Experience om verder te gaan met de website/applicatie waar je mee begonnen bent. Denk na over het ontwerp en implementeer een effectieve User Interface. 

Evaluatie

Aan het einde van de les zullen jullie worden geëvalueerd op jullie begrip van User Interface en jullie vermogen om het toe te passen in een applicatie.

Schrijf 3 dingen op die je deze les hebt geleerd.

De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.

Schrijf 2 dingen op waarover je meer wilt weten.

De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.