User Interface Design
UI Design staat voor User Interface Design. Hierbij gaat het om het uiterlijk – de vormgeving - van een app of een website. Een UI Designer doet in principe het digitale, grafische ontwerp van de app of website.
Het draait dus om het visuele uiterlijk van de app, hoe het eruitziet en aanvoelt. Dit omvat de vormgeving van de interface, zoals kleuren, typografie, iconen en knoppen.
"A composition is an arangement built out of parts"
Paul Rand
Leerdoelen
Experimenteren en analyseren
Typografie kiezen en toepassen
Samenvoegen in Figma
Realiseren
Feedback geven en ontvangen
Opdracht User Interface Design
Jullie hebben nu de User Experience Design en de style guide van de app uitgewerkt. Jullie gaan nu de User Interface ontwerpen en uitwerken in Figma tijdens Digitaal.
De onderstaande onderdelen van jullie app moeten worden vormgegeven en worden uitgewerkt in de software:
Lay-out:
De manier waarop knoppen, teksten, afbeeldingen en andere onderdelen op een scherm worden geplaatst.
Kleuren en thema's:
De keuze van kleuren die zorgen voor een aantrekkelijke en duidelijke uitstraling.
Typografie:
Het gebruik van lettertypes, groottes en kleuren om teksten leesbaar en mooi te maken.
Knoppen en iconen:
Elementen waarmee gebruikers interactie hebben, zoals klikbare knoppen, invoervelden en pictogrammen.
Theorie User Interface Design
Voor de User Interface (UI) van de app zijn er verschillende elementen waaraan moet worden voldaan om een optimale gebruikerservaring te bieden.
1. Samenhang
Kleuren, lettertypes en stijlen moeten in samenhang zijn in de hele app om een uniforme uitstraling te creëren.
Knoppen, menu's en andere interface-elementen moeten er hetzelfde uitzien en hetzelfde reageren in verschillende delen van de app.
2. Leesbaarheid
Tekst en achtergrond moeten voldoende contrast hebben om leesbaar te zijn, vooral voor mensen met visuele beperkingen.
Het gebruik van lettertypes die makkelijk leesbaar zijn, zoals sans-serif-lettertypes, helpt bij de leesbaarheid.
De tekstgrootte moet groot genoeg zijn om gemakkelijk te kunnen lezen.
3. Eenvoudige navigatie
De navigatiestructuur moet intuïtief* zijn, zodat gebruikers snel kunnen vinden wat ze zoeken.
Breadcrumbs(broodkruimels) en tab-navigatie: Gebruik van duidelijke navigatierichtlijnen en tabs om gebruikers door de app te leiden.
4. Visuele hiërarchie
Belangrijke elementen moeten opvallen door grotere afmetingen of contrasterende kleuren.
Gebruik van witruimte om de interface overzichtelijk en niet overvol te houden, wat de focus van de gebruiker op de belangrijkste elementen houdt.
5. Aanraakvriendelijkheid
Knoppen moeten groot genoeg zijn om makkelijk aan te tikken zonder fouten met voldoende ruimte tussen elementen. Dit voorkomt dat gebruikers per ongeluk op het verkeerde item tikken.
6. Feedbackmechanismen
Wanneer gebruikers op een knop drukken of een actie uitvoeren, moet er feedback zijn om aan te geven dat de app reageert (bijv. een lichte trilling, een verandering in kleur).
Gebruik van laadicoontjes of animaties om gebruikers te laten weten dat een actie wordt verwerkt.
7. Responsiviteit en aanpasbaarheid
De UI moet zich aanpassen aan verschillende schermformaten en oriëntaties van andere devices(mobile, tablat, computerscherm).
8. Iconografie en visuele symbolen
Iconen moeten intuïtief en herkenbaar zijn, zodat gebruikers onmiddellijk begrijpen waarvoor ze dienen.
Voor extra duidelijkheid moeten iconen worden aangevuld met tekstlabels, vooral als hun betekenis niet meteen duidelijk is.
9. Minimalistisch ontwerp
Een eenvoudige UI zonder overbodige elementen zorgt ervoor dat gebruikers zich kunnen concentreren op de essentiële functies.
Alleen de belangrijkste functies en informatie moeten op het scherm worden getoond om gebruikers niet te overweldigen.
10. Animaties en overgangen
Gebruik van zachte overgangen en animaties om de interactie levendig te maken zonder af te leiden.
Animaties moeten vloeiend en natuurlijk zijn, zodat ze de gebruikerservaring verbeteren in plaats van verstoren.
Deze UI-voorbeelden helpen bij het creëren van een app die er niet alleen aantrekkelijk uitziet, maar ook gebruiksvriendelijk en intuïtief* is voor een breed scala aan gebruikers.
Intuïtief: Direct inschatten zonder erbij na te hoeven denken.
Tips/Bronnen
De bestaande ontwerpnorm voor lettergrootte op mobiele apps is minimaal 16 pixels, wat een probleem kan opleveren voor mensen met een visuele beperking. Voor ontwerpers van mobiele apps betekent dit dat de tekstgrootte niet kleiner mag zijn dan 16 pixels om een optimale gebruikerservaring te garanderen.
https://appmaster.io/nl/blog/eenvoudige-tips-en-trucs-voor-het-gebruik-van-lettertypen-in-uw-mobiele-en-webapps
Hieronder vind je de overige lesbrieven voor het project Toffe Peer