UX / UI Ontwerp door Benoît Drouillat

Benoît Drouillat, expert in UX/UI en oprichter van de vereniging designer interactif, praat in deze MOOC met Dominique Moulon over onderwerpen die aan bod komen in zijn boek « Le design interactif. Van webdesign tot verbonden objecten ». Samen proberen zij de termen UX/UI Design, en alle begrippen en problemen die daarmee samenhangen, te verduidelijken.

B. Drouillat presenteert Don Norman en Jakob Nielsen als de pioniers van UX Design thinking. Met een achtergrond in de cognitieve psychologie legden zij de basis voor de huidige vragen over Mens-Computer Interactie en de verschillende principes om de gebruikerservaring te verbeteren.

Tegenwoordig zijn de termen User Experience Design en User Interface Design in de plaats gekomen van Web Design. UX design richt zich op het ontwerp van een interface en probeert de best mogelijke ervaring te bieden aan de eindgebruiker door rekening te houden met zijn behoeften en verwachtingen. Het werk van de UI Designer ligt in het verlengde van het UX-proces; hij richt zich op de integratie van de visuele, geluids- en gebarenidentiteit van het project in de interface. Zij richten zich ook op de manier waarop de gebruiker met het medium omgaat.

Het ontwerp van een interface kan niet los worden gezien van de assimilatie van de inhoud en de door het project overgebrachte boodschap; het ontwerp moet de door de inhoud overgebrachte boodschap onderstrepen, en vice versa. Ongeacht de gebruikte werkmethode moet UX/UI-ontwerp worden geïntegreerd in een iteratief proces, waarbij elke fase van het project moet worden getest om problemen op te sporen en mogelijke oplossingen te formuleren.

Gedurende het interview vraagt Dominique Moulon zijn gesprekspartner naar de belangrijke stadia van UX/UI design. De briefing van de klant, om de verwachtingen van de klant voor dit project beter te begrijpen. De benchmark, de analyse van goede en slechte praktijken van concurrenten. Het gebruikersonderzoek, dat in de vorm van interviews wordt uitgevoerd, is van cruciaal belang aan het begin van een project om inzicht te krijgen in de specifieke kenmerken van de doelgroep, zijn verwachtingen en zijn behoeften. Het gebruiksscenario, dat de context bepaalt waarin de gebruiker met het project zal worden geconfronteerd, zijn doelstellingen, maar ook het pad dat hij zal volgen. De cartografie, die een synthese vormt van de massa gegevens uit de opdracht en het gebruikersonderzoek. Het moodboard, dat het mogelijk maakt een projectoriëntatie visueel aan de klant te tonen zonder de creatie te beperken. Prototyping, een high-fidelity weergave van het product, inclusief interacties. Ten slotte vermelden zij het testen van gebruikers, waardoor zij kunnen begrijpen waar het project kan worden verbeterd.

Zij vermelden ook de standaardisering van het web, met de belangrijke aanwezigheid van templates en frameworks, en proberen te definiëren hoe deze elementen samengaan met UX/UI design. Ook mobiele toepassingen moeten voldoen aan de in de richtsnoeren vastgestelde conventies. Benoît Drouillat wijst er ook op dat een goed begrip van de code door de ontwerpers bevorderlijk is voor constructieve uitwisselingen tussen de verschillende teams tijdens het ontwerp van een project.

Geannoteerde bibliografie

Boeken

Drouillat Benoît, Le design interactif: du web design aux objets connectés, Parijs, Frankrijk, Dunod, 2016.

In dit boek begint Benoît Drouillat met het uitleggen van de definitie van interactief ontwerp, evenals alle gebruikersgerichte ontwerpbenaderingen: informatie-architectuur, user experience design, interface design, webdesign, interface-ergonomie en bruikbaarheid. Hij maakt ook van de gelegenheid gebruik om de interfaces van het verleden, die van vandaag en die van de toekomst te ontcijferen. Het tweede deel van het boek richt zich op de verschillende fasen van de ontwikkeling van een project: de ontdekking van de context en de behoeften, gebruikersonderzoek, modellering, ideevorming en verkenning van oplossingen en tenslotte de formalisering van de ervaring.
De MOOC is ontwikkeld rond de thema’s die in dit boek aan bod komen; het is dus een onmisbaar instrument om je inzicht in UX/UI design te vergroten en de concepten die in het interview aan bod komen beter te begrijpen.

Norman Donald A., The design of everyday things, Herziene en uitgebreide editie, New York, New York, Basic Books, 2013.

Donald Norman probeert de kritische blik van de lezer op de wereld om hem heen te wekken. Het dagelijks leven zit vol voorwerpen waarmee we in wisselwerking staan, al dan niet digitaal. Zij hebben echter één ding gemeen: zij moeten zo zijn ontworpen dat zij voor iedereen begrijpelijk zijn, zonder te leren en zonder vallen en opstaan. Als er een fout of aarzeling optreedt bij het gebruik van een van deze voorwerpen, hoeft de gebruiker zichzelf niet in twijfel te trekken. Het is het voorwerp zelf dat ter discussie moet worden gesteld, aangezien bij het ontwerp ervan geen rekening is gehouden met de behoeften en verwachtingen van de eindgebruiker. Door de aandacht te vestigen op vaak voorkomende problemen, presenteert Don Norman de implementatie van eenvoudige concepten die de gebruiker zullen begeleiden in zijn gebruik van een object.
D. Norman wordt vaak beschouwd als een van de pioniers van het gebruikersgerichte ontwerpdenken. Dit boek biedt de ontwerper belangrijke inzichten in de wereld om hem heen, en helpt hem te begrijpen welke praktijken hij in zijn projecten moet toepassen, om meer rekening te houden met de boodschap die een gebruiker door het ontwerp van het produkt zal waarnemen.

Garrett Jesse James, « The Elements of User Experience », Jesse James Garrett – Ergolab, webergonomie, New Riders, 2002.

Gebaseerd op het diagram dat hij in 2000 voorstelde, presenteert Jesse Garrett in dit boek alle aspecten waar je aan moet denken voordat je een webinterface ontwerpt waarvan je de gebruikerservaring wilt optimaliseren. Hij begint met uit te leggen waarom het nodig is om te geven om de gebruikerservaring, dan ontwikkelt hij de 5 pijlers die een webinterface bouwen: strategie, bereik, structuur, skelet en oppervlak. Inzicht in de behoeften van de gebruiker en de doelstellingen van de site is essentieel in de ontwerpfase, zodat we de functies en aanbevelingen kunnen selecteren die in de site moeten worden opgenomen, terwijl we in gedachten houden hoe de gebruiker met die inhoud zal interageren.
Net als Norman, is Jesse Garrett een belangrijke speler in de huidige user experience design concepten. Dit boek moedigt gebruikers aan zich de juiste vragen te stellen bij het ontwerpen van interfaces en laat hen de gebruikerservaring en de uitdagingen ervan ontdekken.

Lallemand Carine, Gronier Guillaume, Robillard-Bastien Alain et al, UX design methods: 30 fundamentele methoden voor het ontwerpen van optimale ervaringen, Parijs, Frankrijk, Eyrolles, 2018.

Carine Lallemand stelt hier voor om de lezer te begeleiden bij de implementatie van UX-processen. Terwijl de theoretische implementatie vaak besproken wordt in de literatuur en gespecialiseerde blogs, wijdt zij haar boek aan het centraliseren van alle UX methodes die zij beschrijft, stap voor stap om de ontwerper te helpen de meest geschikte voor zijn project te kiezen, maar ook om concreet te begrijpen hoe er het meeste uit te halen valt. De concepten, methoden, technieken en ontwerptools verkennen onderwerpen zo breed als gebruikersonderzoek en werving, interviews en focusgroepen, experience maps, ideation maps, card sorting, UX scale en user testing. Elke methode heeft een « Guerrilla Mode »-sectie waarin alternatieven worden geboden voor de methoden wanneer de middelen beperkt zijn.
Dit boek, bedoeld voor ontwerpers, geeft een concretere kijk op de begrippen die Benoît Drouillat in de MOOC oproept. Er wordt stap voor stap uitgelegd hoe deze in concrete projecten in praktijk kunnen worden gebracht, rekening houdend met de omstandigheden.

Saffer Dan, Microinteracties – Ontwerpen met details, O’Reilly, 2014.

Dan Seffer stelt in dit boek de definitie van micro-interacties voor: de manier waarop de interface visueel reageert op de handelingen van de gebruiker. In het bijzonder ontwikkelt de auteur de 4 basisprincipes van micro-interacties. Triggers, of zij nu het gevolg zijn van een gebruikersactie of van de wil van het systeem. De regels, die de manier bepalen waarop de animaties plaatsvinden volgens het pad van de gebruiker. De feedback, d.w.z. de boodschap die dankzij deze animaties door de gebruiker wordt begrepen. Tenslotte is er sprake van modes, die de regels bepalen voor weinig voorkomende animaties, en loops, die de duur van de animaties en het aantal herhalingen ervan bepalen. Het geeft ook instructies over hoe ze op te zetten, en hoe deze animaties te testen in gebruikerstests.
Dit boek is bijzonder interessant omdat het zich richt op interactieontwerp en hoe de interface informatie kan overbrengen aan de gebruiker via
de gebruiker door middel van eenvoudige animaties.

Artikelen

Beyaert-Geslin Anne, « Informatiearchitectuur versus informatieontwerp », Communicatiestudies. talen, informatie, mediations (50), Groupe d’Études et de Recherche Interdisciplinaire en Information et Communication de l’Université Lille 3, 01.06.2018, pp. 161-174. Online: https://doi.org/10.4000/edc.7651.

Dit artikel van Anne Beyaert-Geslin gaat over het thema informatie-architectuur. Zij traceert de oorsprong en de evolutie van deze methode, die zij tracht te definiëren door middel van een metafoor met de architectuur van steden. De studie van de standpunten van de deskundigen maakt het mogelijk de punten van convergentie en divergentie van informatie-architectuur met informatie-ontwerp te verduidelijken. De uitdaging bestaat erin de specificiteit van deze twee begrippen beter te begrijpen; ook hun relatie met de begrippen tekens en betekenis wordt bestudeerd. Op basis van de grote veranderingen uit het verleden stelt de auteur zich vragen over hun toekomstige evolutie en de manier waarop zij door de gebruikers zullen worden geassimileerd.
Dit artikel helpt om de evolutie van ontwerpmethoden en -praktijken te begrijpen. Het geeft geen antwoorden, maar biedt eerder een reeks beschouwingen die bedoeld zijn om de ontwerper te helpen de problemen, overeenkomsten en verschillen tussen de concepten informatie-architectuur, informatie-ontwerp en UX te begrijpen.

Camere Serena, Schifferstein Hendrik N.J. en Bordegoni Monica, « From Abstract to Tangible: Supporting the Materialization of Experiential Visions with the Experience Map, » International Journal of Design (12:2), 2018. Online: http://www.ijdesign.org/index.php/IJDesign/article/view/2825, bekeken op 23.04.2020.

Dit artikel is toegespitst op de methode van de ervaringskaart. Dit proces stelt ontwerpers in staat zich los te maken van de functionaliteit en de fysieke kenmerken van een product, om zich meer op de gebruiker te richten. De ervaringskaart is een visuele synthese van de behoeften en verwachtingen van de gebruiker, van de manier waarop hij het product zal ervaren, maar ook van zijn zintuiglijke gevoelens. Het stelt ontwerpers in staat om alle elementen van het interactieverhaal tussen het product en de gebruiker gemakkelijk te transcriberen. Het artikel bevat twee case studies die de implementatie van de experience map in een user-centered design laten zien.
Dit artikel geeft volledige en geïllustreerde informatie over een methode die, hoewel niet algemeen gebruikt in UX-processen, het mogelijk maakt om alle elementen, min of meer abstract, die bekend zijn over de gebruiker in kaart te brengen. Deze visualisatie is nuttig in alle fasen van een project, om de doelstellingen voor ogen te houden waaraan het eindproduct moet voldoen.

Marcoux Yves en Rizkallah Élias, « La dimension sémantique, négligée de l’approche expérience-utilisateur », Communication Studies. languages, information, mediations (41), Groupe d’Études et de Recherche Interdisciplinaire en Information et Communication de l’Université Lille 3, 01.12.2013, pp. 119-138. Online: https://doi.org/10.4000/edc.5418.

Terwijl de kwaliteit van de gebruikerservaring voor veel ontwerpers lijkt te worden gewaarborgd door de uitvoering van gebruikerstests, wordt in het artikel de nadruk gelegd op een andere belangrijke dimensie: een semiotische voorstelling van de interface, gebaseerd op natuurlijke taal. Het bevordert de totstandbrenging van een zinvolle communicatie tussen de ontwerper en de gebruiker. Het gebruik van de interface is des te duidelijker voor nieuwe gebruikers. Dit artikel presenteert intertekstuele semiotiek, alvorens in te gaan op een interface-ontwerpvoorstel dat gebruik maakt van ideatie-testcycli. Het hoofddoel van dit artikel is de strijd aan te binden tegen « bedrieglijke » interfaces, die de gebruiker niet volledig inlichten over de mogelijkheden.
Dit artikel is interessant, omdat het verder gaat dan de eenvoudige fase van het testen van gebruikers, en zich richt op een praktijk die ingewikkeld is om uit te voeren, maar niettemin bijzonder essentieel voor een kwaliteitsvolle gebruikerservaring.

Pucillo Francesco en Cascini Gaetano, « A framework for user experience, needs and affordances », Design Studies 35 (2), 03.2014, pp. 160-179. Online: https://urlz.fr/cvHW.

Dit artikel geeft inzicht in de criteria die een goede gebruikerservaring definiëren. Ook wordt nagedacht over toekomstige conventies voor het ontwerpen van dergelijke ervaringen die zouden kunnen worden ingevoerd.
Bij de ontwikkeling van een produkt is het van essentieel belang rekening te houden met de specifieke kenmerken van het voorwerp, maar ook om de gebruiker in zijn benadering tevreden te stellen: dit vereist dat rekening wordt gehouden met zijn verwachtingen, zijn behoeften en zijn emotionele aspect. Deze dubbele overweging wordt geassocieerd met de term affordance, gedefinieerd als een mogelijkheid tot actie die door een interface aan een gebruiker wordt geboden, waarbij deze laatste alleen in staat is deze mogelijkheid te benutten in een bepaalde context en met voldoende geletterdheid.
Dit artikel is bijzonder interessant als aanvulling op de MOOC, omdat het ingaat op de vraag hoe een ervaring voor een gebruiker kan worden ontworpen; hoewel we niet zeker kunnen zijn van de werkelijke ervaring die de gebruiker zal hebben, is het belangrijk om hun frustraties te begrijpen en te verminderen.

Serrault David, « Design, wendbaarheid en collectieve intelligentie: motieven en gevolgen van een mutatie van praktijken », Sciences du Design n° 2 (2), Presses Universitaires de France, 2015, pp. 40-47. Online: https://www.cairn.info/revue-sciences-du-design-2015-2-page-40.htm.

In dit artikel gaat David Serrault in op de wijze waarop het ontwerpen en zijn praktijken zijn geëvolueerd, en op de nieuwe uitdagingen waarvoor de discipline zich geplaatst ziet, waarbij met name meer rekening wordt gehouden met de behoeften van de opdrachtgever en de gebruikers. De auteur laat de oorsprong van de Agile-methoden de revue passeren en concentreert zich vervolgens op de integratie van deze methoden, die hun oorsprong vinden in de informatica, in het ontwerp, dat moest worden heroverwogen. In een tweede stap roept het artikel de nu belangrijke rol op van co-design bij het ontwerpen van diensten; dit is gebaseerd op collectieve intelligentie en brengt alle actoren van een project samen.
Dit artikel maakt een beter begrip mogelijk van de evolutie van ontwerppraktijken en projectontwikkelingsmethoden, zoals Agile of Sprint methoden. Het verbetert het begrip van de oorspronkelijke band tussen ontwerp en softwareproductie. Het toont ook de groeiende plaats aan van design in projecten, parallel met de opkomende behoefte om de gebruikerservaring te verbeteren.

Webpagina en conferenties

Drouillat Benoît, « De visie van een project overbrengen met een prototype », Interactive Designers, 2018, https://www.designersinteractifs.org/transmettre-la-vision-dun-projet-avec-un-prototype/, geraadpleegd op 22.04.2020.

In dit artikel komt Benoït Drouillat terug op een van de belangrijke fasen in de ontwikkeling van een project: prototyping. Het maakt het mogelijk om al het reeds verrichte werk visueel weer te geven, maar ook om een preciezer beeld te krijgen van het eindproduct. Het biedt bovendien een concrete, min of meer realistische ondersteuning aan de gebruikers, die zich gemakkelijker in het project zullen kunnen projecteren. Hij definieert het prototype aan de hand van verschillende parameters: de schaal, de vorm die het aanneemt, de gewenste mate van getrouwheid met het uiteindelijke project, maar ook het doel ervan. Aan de hand van voorbeelden gaat hij vervolgens in op de verschillende representaties van het prototype: papier, hybride, narratief of interactief.
Dit artikel sluit aan bij de MOOC, waar de term « prototype » vaak werd gebruikt zonder dat dit werd toegelicht. Het is bedoeld voor een beginnend publiek en biedt een interessante en toegankelijke ingang tot dit onmisbare ontwerpinstrument in UX-ontwerp.

Fadell Tony, Het eerste geheim van design is… opmerken. Online: https://www.ted.com/talks/tony_fadell_the_first_secret_of_design_is_noticing, bekeken op 22.04.2020.

In deze lezing richt Tony Fadell, computerwetenschapper, ingenieur en ontwerper, zich op wat hij « onzichtbare problemen » noemt. In ons dagelijks leven zijn er veel min of meer contraproductieve problemen die een handeling of een wil in gevaar brengen. Interfaces vormen hierop geen uitzondering en vertonen veel gebreken. De hersenen raken echter gewend aan deze alledaagse problemen, die ze automatisch verwerken. Deze problemen verdwijnen echter niet, en ontwerpers hebben de verantwoordelijkheid ze te onderkennen, zodat zij een oplossing kunnen vinden die de gebruiker ontlast. Oplossen wat niemand meer ziet is moeilijk.
Deze interventie is bijzonder relevant op het gebied van UX, zij stelt ons in staat de problemen die in ons dagelijks leven blijven bestaan beter te begrijpen, en het belang dat aan deze onzichtbare problemen moet worden gehecht in de interfaces om de ervaring van de eindgebruikers te vereenvoudigen en te verbeteren.

LALLEMAND Carine, Guerilla UX, « snel » maar niet « vuil » – Carine LALLEMAND, Conferentie, 48:29. Online: https://www.youtube.com/watch?v=NTlBB9yhC1s, bekeken op 22.04.2020.

Carine Lallemand introduceert hier de Guerrillamethode, die steeds vaker wordt toegepast in UX. Guerrilla kan worden aangepast aan alle stadia van het UX-proces. Het gebruik ervan houdt in dat rekening wordt gehouden met de klassieke methoden, maar dat deze worden aangepast aan de beperkingen van een project. Zo zal voor elke stap een guerrilla-alternatief worden voorgesteld, waarbij de voordelen en risico’s worden afgewogen. In de verkenningsfase kunnen interviews bijvoorbeeld worden vervangen door virtuele interviews en zinsaanvulling. In de ideatiefase kunnen persona’s worden omgezet in confronterende proto-persona’s, kan brainstormen worden geoptimaliseerd met ideatiekaarten. In de productiefase kan een schets de mock-up vervangen. Het sorteren van kaarten kan ook worden vereenvoudigd tot het sorteren van Delphi-kaarten.
Deze conferentie is interessant omdat ze guerrilla-ontwikkeling in zijn geheel introduceert, zonder zich alleen te concentreren op gebruikerstests, en het mogelijk maakt te begrijpen hoe UX-methodes kunnen worden geïmplementeerd zonder een grote hoeveelheid middelen.

Laureau Julien, « Nielsen’s heuristiek: de 10 geboden van usability », Medium, 28.03.2019, https://medium.com/@j.laureau/heuristiques-de-nielsen-les-10-commandements-de-lutilisabilit%C3%A9-e1a1c0a49ddf, geraadpleegd 22.04.2020.

Dit artikel introduceert Nielsen’s heuristieken die, indien gevolgd, helpen om de bruikbaarheid van een interface en dus de gebruikerservaring te verbeteren. De tien beginselen zijn: zichtbaarheid van de status van het systeem, afstemming van het systeem op de reële wereld, controle en vrijheid van de gebruiker, overeenstemming van het systeem met de normen, voorkoming van misstappen en fouten, nadruk op herkenning in plaats van memorisatie, flexibiliteit en doeltreffendheid van het gebruik van het systeem, beperking van de hoeveelheid informatie in de interface, ondersteuning van de gebruiker in geval van fouten en tenslotte gemakkelijke toegang tot aanvullende hulp.
Dit artikel is interessant voor een niet-ervaren ontwerper; deze principes openen de reflectie over de eerste elementen die moeten worden opgezet in een logica van gebruikersgericht ontwerpen.

Orsini Yuna, « UX design: hoe organiseer je een gebruikerstest? « Medium, 27.08.2018, https://medium.com/poool-stories/conception-ux-comment-organiser-un-test-utilisateurs-cd20f5b3e283, bekeken op 22.04.2020.

Dit artikel geeft een reeks antwoorden op de vragen die een ontwerper zich moet stellen voordat hij zijn eerste gebruikerstests uitvoert. Yuna Orsina put uit haar eigen ervaring om advies te geven over het beste moment om een gebruikerstest uit te voeren, afhankelijk van het project, en over het ideale aantal deelnemers en hoe die te rekruteren. Zij schat ook de optimale duur van een test in, hoe deze kan worden voorbereid, en beschrijft elke stap van het proces. Ten slotte wordt uitgelegd hoe de testresultaten moeten worden geanalyseerd en welk effect zij moeten hebben.
Dit artikel geeft enkele kernbegrippen van een zeer populaire UX-methode, die alleen in de MOOC wordt genoemd. Gebruikerstesten zijn cruciaal in een gebruikersgerichte aanpak, dus is het belangrijk dat beginnende ontwerpers snel een idee krijgen van hoe deze methode werkt, en hoe ze het best kan worden toegepast om vooringenomenheid te vermijden.