UserInteractionDesign_Lecture3.pdf

# Gebruikerscontext en omgevingen voor digitale diensten Gebruikerscontext beschrijft de omstandigheden waarin een digitale dienst wordt gebruikt, gevormd door de gebruiker, de taak, het apparaat en de omgeving [2](#page=2). ### 1.1 De factoren van gebruikerscontext De context waarin een digitale dienst wordt gebruikt, wordt bepaald door vier hoofdfactoren [2](#page=2): * **De gebruiker:** Wie is de persoon die de dienst gebruikt? * **De taak:** Wat probeert de gebruiker te bereiken? * **Het apparaat:** Welke technologie wordt ingezet om de dienst te gebruiken? * **De omgeving:** Waar bevindt de gebruiker zich fysiek en sociaal? #### 1.1.1 Omgeving versus situatie Het is belangrijk om onderscheid te maken tussen 'omgeving' en 'situatie' [3](#page=3): * **Omgeving:** Verwijst naar de bredere natuurlijke en sociale omstandigheden die een gebruiker beïnvloeden, zoals thuis, op kantoor of buiten [3](#page=3). * **Situatie:** Beschrijft de directe omstandigheden die op een bepaald moment van invloed zijn op het gedrag van de gebruiker, zoals 'mobiel' of 'on the go' [3](#page=3). ### 1.2 Verschillende omgevingen en hun impact op design De omgeving waarin een gebruiker zich bevindt, heeft directe gevolgen voor het ontwerp van digitale diensten. Er worden drie typen omgevingen onderscheiden: privé, semipubliek en mobiel ('on the go') [4](#page=4) [6](#page=6) [8](#page=8). #### 1.2.1 Privé omgeving Een privé omgeving is een beschermde, persoonlijke ruimte waar de gebruiker volledige controle heeft en zich het meest comfortabel en ongestoord voelt [4](#page=4). * **Kenmerken:** * Beschermde ruimte, niet toegankelijk voor derden [4](#page=4). * Volledige privacy en controle voor de gebruiker [4](#page=4). * Comfort en vertrouwdheid, ideaal voor langdurig gebruik en concentratie [4](#page=4). * **Implicaties voor design:** * Ontwerpen mogen gedetailleerd en complex zijn, aangezien gebruikers zich veilig voelen om gevoelige informatie te bekijken of in te voeren [5](#page=5). * Voorbeelden zijn online bankieren voor jaaropgaven of het schrijven van verslagen en programmeren, die diepe focus vereisen [5](#page=5). * Het 'kopen' proces tijdens online shoppen, waarbij creditcardgegevens worden ingevoerd, vereist maximale privacy en veiligheid [5](#page=5). #### 1.2.2 Semipublieke ruimte Een semipublieke ruimte is een gedeelde, tijdelijke omgeving met beperkte toegankelijkheid voor specifieke groepen, zoals werkplekken, cafés of bibliotheken [6](#page=6). * **Kenmerken:** * Gedeelde ruimte met anderen [6](#page=6). * Tijdelijk verblijf [6](#page=6). * Beperkte controle over de omgeving [6](#page=6). * **Implicaties voor design:** * Gebruikers voelen zich deels bekeken en zijn minder ontspannen [7](#page=7). * Designs moeten discreet zijn om te voorkomen dat gevoelige informatie op het scherm verschijnt [7](#page=7). * Voorbeelden zijn bank-apps die saldo's verbergen met een oog-icoon of chat-apps die berichtinhoud pas tonen na hovering [7](#page=7). #### 1.2.3 Mobiele omgeving ('On the go') Wanneer gebruikers 'on the go' zijn, bevinden ze zich in een dynamische staat met constante veranderingen in locatie en context, wat unieke uitdagingen met zich meebrengt [8](#page=8). * **Kenmerken:** * Gebruiker begint de reis met een specifiek doel [8](#page=8). * Constante verandering van locatie en context tijdens beweging [8](#page=8). * Aankomst bij de gewenste bestemming [8](#page=8). * Handige, verplaatsbare apparaten zoals smartphones en tablets [10](#page=10). * Korte sessies met tussenpozen, geen langdurig gebruik [10](#page=10). * Dynamische context waarbij omstandigheden constant veranderen tijdens de reis [10](#page=10). * **Implicaties voor design:** * Gebruikers hebben hun aandacht verdeeld, letten op verkeer en hebben vaak haast [9](#page=9). * Internetverbindingen kunnen onstabiel zijn [9](#page=9). * Designs moeten extreem simpel zijn, met één taak en één knop [9](#page=9). * Hoog contrast is essentieel voor leesbaarheid in fel licht [9](#page=9). * Offline functionaliteit is cruciaal om vastlopen bij wegvallende verbindingen te voorkomen [9](#page=9). * Rekening houden met hoe gebruikers telefoons vasthouden: belangrijke knoppen moeten zich in de 'Duim-zone' (Thumb Zone) bevinden voor gebruik met één hand [11](#page=11). * Goede voorbeelden zijn apps als Instagram en Snapchat waarbij navigatie onderaan het scherm zit, wat het gebruik met één hand vergemakkelijkt. Slecht design vereist het reiken naar de linkerbovenhoek met de duim, wat onmogelijk is met één hand [11](#page=11). --- # Usage modes: achterover leunen en interactiepatronen De 'lean back' usage mode, ook wel 'achterover leunen' genoemd, kenmerkt zich door passieve contentconsumptie met minimale gebruikerinteractie. In deze modus ligt de focus van de gebruiker op het consumeren van informatie zonder actieve inspanning of diepgaand zoeken. Het ontwerp van interfaces voor deze modus vereist een andere aanpak dan voor actieve taken [12](#page=12) [13](#page=13). ### 2.1 Kenmerken van de 'lean back' modus De gebruiker bevindt zich in een comfortabele en ontspannen houding. De interactie is sporadisch en gericht op het consumeren van content, zoals het bekijken van video's, het doorbladeren van feeds of het lezen van artikelen [12](#page=12). ### 2.2 Gebruikersbehoeften in de 'lean back' modus De primaire behoefte van de gebruiker in deze modus is het leveren van nul moeite. Dit betekent dat de gebruiker niet wil typen, niet wil nadenken en niet actief hoeft te zoeken naar content. De verwachting is dat de content naar de gebruiker toe komt [13](#page=13). ### 2.3 Ontwerpinplicaties voor de 'lean back' modus Om tegemoet te komen aan de behoeften van de gebruiker in de 'lean back' modus, dient het ontwerp de consumptie te faciliteren. Concepten zoals 'autoplay' en 'infinite scroll' zijn hieruit voortgekomen. Bij 'autoplay' (zoals bij Netflix) neemt de applicatie het initiatief om content af te spelen, terwijl 'infinite scroll' (zoals bij TikTok) de gebruiker continu van nieuwe content voorziet zonder dat er expliciet gezocht hoeft te worden. In essentie neemt de applicatie het werk uit handen, zodat de gebruiker zich kan concentreren op het consumeren [13](#page=13). > **Voorbeeld:** Netflix of YouTube kijken op een smart TV, oneindig scrollen door TikTok of Instagram op de bank, en het lezen van een e-book op een tablet zijn typische scenario's waarin de 'lean back' modus wordt toegepast [13](#page=13). --- # Responsive web design principes en implementatie Dit onderwerp behandelt de essentie van responsive web design, waarbij ontwerpen zich automatisch aanpassen aan schermgroottes voor een optimale gebruikerservaring op elk apparaat [14](#page=14). ### 3.1 De kern van responsive design Responsive design is een techniek waarbij de website-layout zich automatisch aanpast aan de beschikbare schermgrootte. Dit resulteert in verschillende weergave-optimalisaties per apparaat [14](#page=14): * **Desktop:** Volledige layout met alle functionaliteit en uitgebreide navigatie [14](#page=14). * **Tablet:** Aangepaste layout die balanceert tussen functionaliteit en compactheid [14](#page=14). * **Mobiel:** Geoptimaliseerde ervaring met gestapelde content en touch-vriendelijke elementen [14](#page=14). #### 3.1.1 Belang van responsive design Responsive design is cruciaal om verschillende redenen: * **UX-optimalisatie:** Het creëren van optimale gebruikerservaringen op elk apparaat, rekening houdend met de context van de gebruiker [15](#page=15). * **Consistente ervaring:** Zorgen dat de gebruikerservaring goed blijft, ongeacht het gebruikte apparaat [15](#page=15). ### 3.2 De responsive design aanpak Twee essentiële factoren zijn cruciaal voor het succes van responsive webdesign [16](#page=16): #### 3.2.1 Breakpoints Breakpoints zijn specifieke schermbreedtes waarbij de layout verandert. Deze kritieke punten bepalen wanneer elementen herschikken, kolommen stapelen of navigatie transformeert [16](#page=16). * Gangbare breakpoints zijn 320 pixels voor mobiel, 768 pixels voor tablets en 1024 pixels voor desktops [16](#page=16). * Het identificeren van strategische breekpunten helpt bij het optimaliseren van layouts voor verschillende schermformaten [17](#page=17). * Meestal worden 3 tot 5 formaten aangehouden: mobiel (portrait en landscape), tablet (portrait en landscape), en desktop [17](#page=17). #### 3.2.2 Visuele content Visuele content omvat beeldmateriaal dat mee schaalt en aanpast aan verschillende schermformaten, zoals flexibele afbeeldingen en video's. Media queries zorgen ervoor dat visuele elementen optimaal worden weergegeven op elk apparaat zonder kwaliteitsverlies [16](#page=16). * Het optimaliseren en comprimeren van afbeeldingen, video's en GIF's is cruciaal voor mobiele apparaten [18](#page=18). * Dit resulteert in aanzienlijk lagere laadtijden en betere performance, wat direct bijdraagt aan een verbeterde gebruikerservaring [18](#page=18). ### 3.3 Beste praktijken voor responsief design Om een naadloze en optimale gebruikerservaring te garanderen, worden de volgende best practices aanbevolen: #### 3.3.1 Flexibiliteit in design * Zorg voor flexibele lay-outs, afbeeldingen en componenten die zich aanpassen aan elk schermformaat [19](#page=19). #### 3.3.2 Mobile-first strategie * Begin je ontwerp met de kleinste schermen en werk omhoog naar grotere formaten [17](#page=17) [19](#page=19). * **Tip:** De mobile-first strategie dwingt tot keuzes wat écht belangrijk is, en opschalen is makkelijker dan downsizen [17](#page=17). #### 3.3.3 Optimalisatie van visuele content * Bewerk en snijd afbeeldingen specifiek bij voor mobiele weergave [19](#page=19). * Prioriteer content op kleinere schermen [19](#page=19). #### 3.3.4 Gebruik van SVG * Gebruik het SVG-formaat voor iconen en logo's om perfecte scherpte op alle resoluties te garanderen [19](#page=19). #### 3.3.5 Aandacht voor breakpoints * Besteed extra aandacht aan breakpoints om een naadloze ervaring te creëren [19](#page=19). --- # Wireframing als fundament voor UX-ontwerp Wireframing is het proces van het creëren van een structureel ontwerp van pagina's dat zich primair richt op inhoudsverdeling en functionaliteit, zonder afleiding door visuele details, om zo een solide basis te leggen voor UX-ontwerp [21](#page=21). ### 4.1 Wat is wireframing? Wireframing is het opstellen van een structureel ontwerp voor pagina's in de vroege stadia van het UX-proces. De focus ligt hierbij op de manier waarop inhoud wordt verdeeld en hoe functionaliteit wordt ingevuld, zonder de afleiding van visuele elementen zoals kleuren, typografie of afbeeldingen [21](#page=21). Belangrijke voordelen van wireframing zijn: * **Visueel inzicht voor stakeholders**: Wireframes maken abstracte ideeën concreet en bespreekbaar voor alle betrokkenen [21](#page=21). * **Vroege bruikbaarheidstests**: Ze helpen bij het identificeren van usability-problemen voordat er aanzienlijke tijd en middelen geïnvesteerd zijn in visueel ontwerp [21](#page=21). * **Correcte content positionering**: Wireframes zorgen ervoor dat alle elementen logisch en gebruiksvriendelijk geplaatst worden [21](#page=21). ### 4.2 Fidelity-niveaus in wireframing Wireframes kunnen op verschillende detailniveaus worden gemaakt, ook wel bekend als fidelity-niveaus. Deze niveaus variëren van low-fidelity tot high-fidelity, elk met hun eigen toepassingen en voordelen gedurende het UX-proces. #### 4.2.1 Low-fidelity wireframes Low-fidelity (low-fi) wireframes zijn snel en eenvoudig te produceren, wat ze uitermate geschikt maakt voor de beginfase van het ontwerpproces. Ze maken uitsluitend gebruik van zwarte en grijze tinten en vermijden visuele details. Deze wireframes kunnen zowel met de hand op papier als digitaal worden gecreëerd met tools zoals Balsamiq of Figma [22](#page=22). Voordelen van low-fi wireframes: * Mogelijkheid tot snelle iteraties [22](#page=22). * Focus op de structuur en de gebruikersflow [22](#page=22). * Minimale investering aan tijd en middelen [22](#page=22). > **Tip:** Gebruik low-fi wireframes om snel verschillende ideeën en structuren te verkennen zonder vast te zitten aan specifieke visuele keuzes. #### 4.2.2 Mid-fidelity wireframes Mid-fidelity (mid-fi) wireframes bevatten meer detail dan hun low-fi tegenhangers en komen dichter in de buurt van het uiteindelijke User Interface (UI) ontwerp. Ze kunnen gebruikmaken van placeholder afbeeldingen en visualiseren de interactie tussen verschillende pagina's op een duidelijkere manier. Mid-fi wireframes zijn ideaal voor het verfijnen van reeds gevormde concepten [22](#page=22). Kenmerken van mid-fi wireframes: * Meer structuur en hiërarchie worden zichtbaar [22](#page=22). * Duidelijke componentplaatsing [22](#page=22). * Verbeterde communicatie met stakeholders door de toegenomen duidelijkheid [22](#page=22). > **Voorbeeld:** Een mid-fi wireframe kan een placeholder tonen voor een productafbeelding met een duidelijke knop voor "toevoegen aan winkelwagen", wat de interactie verder definieert dan bij een low-fi versie. #### 4.2.3 High-fidelity wireframes High-fidelity (high-fi) wireframes benaderen het eindontwerp het dichtst. Ze bevatten bijna alle visuele elementen van het uiteindelijke product, waaronder kleuren, typografie en merkgebonden iconen. Dit geeft een realistisch beeld van hoe de website of applicatie er uiteindelijk uit zal zien [23](#page=23). Belangrijke overwegingen bij high-fi wireframes: * **Iteratief proces vereist**: Men dient nooit direct met high-fidelity wireframes te beginnen. Ze zijn niet geschikt als startpunt vanwege de tijdrovende aard en de beperkte ruimte voor fundamentele aanpassingen. Ze zijn het meest effectief na meerdere iteraties in low- en mid-fidelity [23](#page=23). * **Ideaal voor presentaties**: High-fi wireframes zijn perfect voor eindpresentaties aan stakeholders en voor het overdragen van gedetailleerde specificaties aan developers. Dit minimaliseert misverstanden over het uiteindelijke resultaat [23](#page=23). > **Tip:** Gebruik high-fidelity wireframes als een definitieve blauwdruk om ervoor te zorgen dat iedereen, van ontwerpteam tot developers en eindgebruikers, een gedeeld begrip heeft van het verwachte eindproduct. --- # Grid systemen in layoutontwerp Grid systemen zijn fundamentele hulpmiddelen die hun oorsprong vinden in traditioneel printontwerp en essentieel zijn geworden voor het creëren van consistente en visueel aantrekkelijke lay-outs in webdesign. Ze bieden een gestructureerde methode om tweedimensionale informatie te organiseren. De basiscomponenten van elk grid systeem zijn kolommen, goten en marges [25](#page=25). ### 5.1 De basiscomponenten van grid systemen #### 5.1.1 Kolommen Kolommen vormen de primaire bouwstenen voor het plaatsen van content en componenten binnen een lay-out. Ze bieden verticale structuur en helpen bij het organiseren van elementen op een coherente manier [25](#page=25). #### 5.1.2 Goten Goten zijn de witruimtes die zich bevinden tussen de kolommen. Ze dienen als visuele ademruimte en helpen om de verschillende kolommen van elkaar te scheiden, wat de leesbaarheid en de algehele esthetiek van de lay-out verbetert [25](#page=25). #### 5.1.3 Marges Marges vertegenwoordigen de buitenste witruimte aan de randen van de lay-out. Ze omlijsten de content en dragen bij aan de balans en focus van de pagina [25](#page=25). > **Tip:** Het correct toepassen van kolommen, goten en marges is cruciaal voor het creëren van een harmonieuze en professioneel ogende lay-out. Zonder een grid systeem kan een lay-out chaotisch en moeilijk te navigeren worden. --- ## Veelgemaakte fouten om te vermijden - Bestudeer alle onderwerpen grondig voor examens - Let op formules en belangrijke definities - Oefen met de voorbeelden in elke sectie - Memoriseer niet zonder de onderliggende concepten te begrijpen

| Term | Definition | |------|------------| | Gebruikerscontext | De omstandigheden waarin een digitale dienst wordt gebruikt, bepaald door de gebruiker, de taak, het apparaat en de omgeving. | | Privé omgeving | Een persoonlijke ruimte die niet toegankelijk is voor derden, gekenmerkt door privacy, controle en vertrouwdheid, ideaal voor taken die concentratie vereisen. | | Semipublieke ruimte | Een ruimte die toegankelijk is voor een specifieke, beperkte groep personen, zoals werkplekken of bibliotheken, waar gebruikers tijdelijk verblijven en de ruimte delen. | | On the Go | Een dynamische staat waarbij gebruikers zich in beweging bevinden, met constante verandering van locatie en context, wat unieke uitdagingen met zich meebrengt voor digitale diensten door wisselende connectiviteit en beperkte aandacht. | | Mobiele Situatie | De periode tussen een startpunt en bestemming waarin gebruikers onderweg zijn (te voet, per fiets, openbaar vervoer) en beperkte mogelijkheden hebben voor diepgaande interactie met digitale diensten. | | Duim-zone (Thumb Zone) | Het gebied op een smartphone-scherm dat gemakkelijk bereikbaar is met de duim tijdens het vasthouden van het apparaat met één hand, cruciaal voor de plaatsing van belangrijke knoppen. | | Usage Mode: Achterover Leunen (Lean Back) | Een modus waarin de gebruiker zich in een comfortabele, passieve staat bevindt en voornamelijk content consumeert met minimale interactie, zoals bij het bekijken van video's of browsen door feeds. | | Responsive Web Design | Een techniek waarbij het ontwerp van een website zich automatisch aanpast aan de schermgrootte van het apparaat waarop het wordt bekeken, om een optimale gebruikerservaring te bieden. | | Breakpoints | Specifieke schermbreedtes waarop de layout van een responsive website verandert, elementen herschikt, kolommen stapelt of navigatie transformeert. | | Mobile First Design | Een ontwerpbStrategy waarbij men begint met het ontwerpen voor de kleinste schermen (mobiel) en vervolgens opschaalt naar grotere formaten, wat helpt bij het prioriteren van essentiële content en functionaliteit. | | Wireframing | Het creëren van een structureel ontwerp van pagina's in een vroeg stadium van het UX-proces, dat zich richt op inhoudsverdeling en functionaliteit zonder visuele details zoals kleuren of afbeeldingen. | | Low-Fidelity Wireframes | Snel en eenvoudig te maken wireframes, vaak met de hand of met basistools, die de structuur en flow van een pagina weergeven zonder visuele details. | | Mid-Fidelity Wireframes | Wireframes die meer detail bevatten, dichter bij het uiteindelijke UI-ontwerp komen, mogelijk met placeholder-afbeeldingen en die duidelijkere interactie tussen pagina's tonen. | | High-Fidelity Wireframes | Wireframes die bijna alle visuele elementen van het uiteindelijke product bevatten, inclusief kleuren, typografie en branded iconen, om een realistisch beeld te geven van het eindresultaat. | | Layout Grid | Een systeem van horizontale en verticale lijnen dat gebruikt wordt om content en componenten op een pagina te organiseren, wat zorgt voor consistentie en structuur in webdesign. | | Kolommen | De verticale secties binnen een layout grid die dienen als basis voor het plaatsen van content en componenten. | | Goten (Gutters) | De witruimte tussen kolommen in een layout grid, die zorgt voor visuele ademruimte en de leesbaarheid verbetert. | | Marges | De buitenste ruimte aan de randen van een layout, die de content omlijst en een gecentreerd effect kan creëren. |