is front-end kennis relevant voor een UX designer

In hoeverre

is front-end kennis relevant voor een UX designer tijdens een designproces?

Door: Studentnummer: Opleiding:

Wessel Grift 1622057 Communicatie & Multimedia Design

Specialisatie: Vak: Docent: Datum:

UXD Seminar Laurens Vreekamp 2 januari 2016

Inhoudsopgave Inleiding

blz 3.

Hoofdvraag

blz 4.

Deelvraag 1

blz 5.

Deelvraag 2

blz 8.

Deelvraag 3

blz 11.

Conclusie

blz 15.

Bronnen

blz 17.

Inhoudsopgave

2.

Inleiding Ik heb als front-end developer bij een softwarebedrijf gewerkt en doe nu regelmatig front-end werkzaamheden als freelancer. Daarnaast hoop ik er in de toekomst (in combinatie met user experience design) iets mee te doen omdat ik het een interessant en leuk vakgebied vind. Daarom vraag ik me af wat de relevantie van deze kennis is tijdens een designproces. Is het waardevol om HTML, CSS en Javascript vaardigheden te beheersen (in meer of mindere mate)? Of is het leuk om te weten maar heb ik er niks aan omdat ik toch niet de front-end en de UX-

Inleiding

posities tegelijk kan bedienen? In dit onderzoek zet ik duidelijk uiteen wat de vaardigheden van front-end developers en UX designers zijn. Daarnaast kijk of deze vaardigheden elkaar ten goede komen of aanvullen tijdens een designproces. Daaruit zal blijken of een UX designer baat heeft bij het beheersen van frontend vaardigheden.

3.

Hoofdvraag “In hoeverre is het hebben van front-end development kennis relevant voor een UX designer tijdens een designproces?”

Om antwoord te geven op de bovenstaande vraag heb ik de volgende deelvragen gefomuleerd:

1. Wat zijn front-end vaardigheden? 2. Wat zijn UX design vaardigheden? 3. Hoe vullen deze vaardigheden elkaar wel of niet aan ten opzichte van een UX designproces?

Hoofdvraag

4.

Wat zijn

front-end vaardigheden? Front-end? Om de vraag “wat zijn front-end vaardigheden” te beantwoorden is het belangrijk eerst goed te begrijpen wie de front-end developer is. Want wat doet hij/zij? En met wie werkt de front-ender samen? De front-end developer bestaat in ieder geval al heel lang. Eigenlijk sinds het moment dat “client side development” belangrijk werd, kreeg de front-ender een plek in het ontwikkelproces. Client side development betekent: ontwikkelen voor wat de gebruiker daadwerkelijk te zien krijgt, of anders gezegd: “de voorkant”. Een back-end developer houdt zich daarentegen bezig met de communicatieprocessen en data-architectuur tussen de servers en front-end, of anders gezegd: "de achterkant". Context Om verder te gaan met wat een front-ender doet hebben we de context nodig. Laten we een blik werpen op het onstaan van de front-end developer zoals wij hem nu kennen. Misschien verbazend maar de makers van het wereld wijde web, waaronder Tim-Lee Berners (W3.org, 2014), leven nog. Evenals de maker van de eerste webbrowser: Netscape (W3.org, 2014). In vergelijking met wat het internet nu is, was het toen een kaal, tekstgebaseerd medium. Nadat de eerste website ooit gelanceerd werd in 1991, ontstonden langzamerhand de eerste visuele HTML tags, zoals en

voor lijsten. Er was toen weinig werk voor een front-end developer. Zoals eerder gezegd, het was vooral “text-based” en had weinig interactie (Dżaluk, 2014). In 1996 werd CSS1 geïntroduceerd door het W3C consortium. CSS staat voor Cascading Style Sheets (Cssneuse.net, 2016). CSS beschrijft de manier waarop HTML tags worden weergegeven. Deze kunnen worden aangepast wanneer men wil dat een website anders weergegeven wordt. In het begin waren de mogelijkheden hiervan nog miniem. Front-end development, een term die toen nog niet gebruikt werd, was beperkt en werd voornamelijk gedaan door de webmaster. Het ging dan vooral om kleuren aanpassen en lettertypes veranderen. Front-end development zoals we het nu kennen kreeg meer vorm met de komst van CSS3 in 1999. Daarnaast werd het Javascript framework waar Netscape op gebaseerd was steeds populairder als tool om de DOM mee te manipuleren. In deze tijd heette de persoon die een website bouwde, vormgaf en het onderhoud deed nog steeds een “webmaster”. Naarmate de technologieën steeds geavanceerder werden en het vormgeven en programmeren voor interactie met websites steeds complexer, werd de rol van “webmaster” verdeeld in back-end en front-end. De frontender moest verstand hebben van HTML, CSS en Javascript. De back-ender verzorgde de communicatie tussen servers en moest verstand hebben van diverse internet protocollen en tools die hier op aansloten (PHP, Python, Ruby) (Long, 2012). Volgens experts op het gebied van internet-tools was 2008 het

Deelvraag 1

5.

geboortejaar van de moderne front-ender. “users expect the wow factor” (Cummings, 2016). Om deze “wow factor” te behalen gebruikt de front-ender technologieën als HTML, CSS, Javascript en frameworks zoals jQuery. Als we vooruit springen naar 2015 heeft de front-ender een volwaardige en belangrijke plek in het ontwikkel- en designproces ingenomen. Waarom belangrijk? Omdat interactie belangrijk is geworden. De front-end developer vertaalt de designkeuzes naar het internet. En met alle nieuwe mogelijkheden is dat een complexe taak geworden (De Jong, 2016). Van welke technologieën maakt een front-end developer gebruik om interactie tot leven te brengen? De front-end developer maakt gebruik van HTML5, CSS/Proprocessing en Javascript (Learn to code with me, 2016). HTML(5) HTML (Hyper Text Markup Language) is de taal die wordt gebruikt om content te structureren op het wereld wijde web. “Hypertext” betekent dat er gelinkt kan worden naar andere HTML bestanden vanuit een HTML bestand. Daarnaast zijn er strikte regels die gevolgd moeten worden, voorgeschreven door het W3C. Onder deze regels valt de syntax van HTML5. In 2014 was HTML5 officieel af. Het volgt zijn voorganger HTML4, welke in 1997 af was, op. HTML biedt ontwikkelaars via HTML tags de mogelijkheid content op de website te structureren en te beschrijven. Elke tag heeft een ander doel. Het doel hiervan is een semantisch web te creëren. Daarnaast herkennen zoekmachines deze tags en snappen zoekmachines op deze manier de inhoud van een website beter. HTML tags kunnen attributen bevatten. Zoals links, data of specifieke selectoren waar de CSS op inhaakt. De regels van HTML zijn niet al te strikt en laten ruimte voor interpretatie over. Al zijn er wel best practices. Deze dient een front-end developer te volgen om betekenis en structuur aan te brengen op een website of in een applicatie (W3schools.com, 2016). CSS 'Cascading Style Sheets' zijn style-aanduidingen die verwijzen naar HTML tags op een HTML pagina. Waar deze vroeger in de HTML pagina zelf de pagina van style voorzagen (inline), wordt een stylesheet tegenwoordig los opgeslagen. Vanuit een stylesheet wordt er een HTML tag geselecteerd middels een selector. Zo verwijzen de toegepaste stylen vanuit een stylesheet naar een bepaalde HTML tag zodat deze gestyled kan worden. CSS is louter bedoeld voor de styling van een pagina. In principe worden er geen berekeningen uitgevoerd en wordt er geen dynamische data verstuurd naar een pagina. Tussen 2007 en 2012 was het probleem van CSS dat veel webbrowsers anders omgingen met bepaalde style-attributen. Zo werden de CSS regels (opgesteld door het W3C) door Internet Explorer heel anders geïnterpreteerd dan door Google Chrome. Front-end developers moesten zich dus bewust zijn van alle valkuilen in het landschap van CSS en webbrowsers. In 2015 zijn een hoop van deze problemen met postprocessors verholpen. CSS postprocessors pakken de geschreven CSS en valideren deze op alle internet browser standaarden en passen deze aan waar nodig. Op deze manier wordt de front-ender werk uit handen genomen (W3schools.com, 2016). Javascript Javascript is de programmeertaal van HTML en het web. Met Javascript kunnen HTML attributen en CSS gewijzigd worden en kan Javascript data valideren. Het wordt veel gebruikt om een website interactief te maken. Naast de uitgebreide mogelijkheden van Javascript is het een ‘native’ taal in elke browser. Dat betekent dat Javascript niet als bestand ingeladen hoeft te worden omdat elke browser het heeft en kent (W3schools.com, 2016).

Deelvraag 1

6.

Andere vaardigheden Het houdt niet op met de bovengenoemde vaardigheden. Afhankelijk van het project waar een frontender op ingezet wordt is er vaak specifieke kennis van frameworks of tooling nodig. Bijvoorbeeld Javascript frameworks die hand in hand gaan met de MVC (Model, View, Controller) design methode voor ontwikkelaars. Voorbeelden van deze frameworks zijn Google’s “AngularJS”, Facebooks “React” en het front-end framework “EmberJS”, naast velen anderen (Wind, 2015). Daarnaast moet de front-ender van 2015 in staat zijn te dezelfde taal te spreken als die van designers en kunnen samenwerken in een team. Ook is het waardevol als de front-ender op de hoogte is van bepaalde conceptuele modellen. Bijvoorbeeld: hoe verwacht een gebruiker dat een winkelmandje werkt? Wanneer een project geen uitgebreide documentatie toelaat, is het waardevol als een front-ender hier over mee kan denken (Garrett, 2011). Volgens Kim Goodwin moet de “design engineer” dan ook vóór het design proces in het team worden opgenomen zodat hij goed aansluit bij het designproces (men spreekt meer dezelfde taal) en daarnaast, ook belangrijk, is het goed om de softwarematige beperkingen door te nemen met de designers (Goodwin, 2009).

Deelvraag 1

7.

Wat zijn

UX design vaardigheden? Wat zijn de vaardigheden van een UX designer? Om de vaardigheden van een UX designer te benoemen moet eerst helder worden uitgelegd wat een UX designer is en wat hij/zij doet. Wanneer we zoeken naar een definitie voor een UX designer zijn er verschillende te vinden. Een probleem is dat veel definities hetzelfde uitgangspunt hebben maar dit met verschillende kenmerken benoemen. Zowel als in de literatuur als op het internet. Als we eerst kijken naar de term “User Experience”, omschrijft Jesse James Garret dit als volgt: “The experience the product creates for the people who use it in the real world.” (Garrett, 2011).

Wanneer we hier “design” bij betrekken, wordt de definitie volgens Gabriel-Petit Pabini van UX-Matters een stuk breder: “A holistic, multidisciplinary approach to the design of user interfaces for digital products, defining their form, behavior, and content. User experience design integrates interaction design, industrial design, information architecture, information design, visual interface design, user assistance design, and user-centered design, ensuring coherence and consistency across all of these design dimensions.” (Pabini, 2010). Vervolgens kwam Oxford University in een onderzoek met een duidelijke en compactere definitie die een brug slaat tussen "user experience" en design: “UXD Aims to improve customer satisfaction and loyalty through the utility, ease of use, and pleasure provided in the interaction with a product.” (Kujala et al., 2011).

Deelvraag 2

8.

Wie zich een designproces inbeeld ziet al verscheidene rollen die UX designer moet kunnen vervullen. Een designproces begint, afhankelijk van de opdrachtgever en bedrijf, met planning gevolgd door research, datamodelling, requirements, frameworkdesign, visualdesign, user testing, iteratie en evaluatie en tot slot implementatie. Wie nadenkt over de bovengenoemde fases zou misschien al een aantal compententies en vaardigheden kunnen bedenken. Zoals het kiezen van de juiste tools, het om kunnen gaan met deze tools, de verscheidene research methodes, het om kunnen gaan en het vinden van de juiste gebruikers en daarnaast omgaan met klanten en werken in een team. Wanneer de definitie van Pabini van UX Matters erbij wordt gehaald, komen er nog tal van aspecten bij. Zoals het bezitten van goede design vaardigheden en kennis van de technische aspecten van een medium. Het blijkt moeilijk te zijn om een scherpe definitie van competenties samen te stellen wanneer de definitie van UX design zelf al zo uiteenlopend is en zoals Pabini zelf in het artikel zegt zegt: multidisciplinair. In hetzelfde artikel benoemt Robert Reimann 48 UXD vaardigheden (Reimann, 2010). Irene Au, voormalig hoofd van de designafdeling bij Google erkent dit en verdeelt de multidisciplinariteit daarom in een aantal categorieën die overzicht bieden en een stuk begrijpbaarder zijn. Au omschrijft de volgende disciplines binnen UX design (Au, 2014). 1. User research Formatief onderzoek Onderzoek vóórdat een product ontworpen wordt met als doel de latente gebruikersbehoeftes, drijfveren en wensen te ontdekken. Dit verscherpt het beeld van het product met betrekking tot het prioriteren van bijvoorbeeld requirements en features. Summatief onderzoek Onderzoek nadat het design gemaakt en/of geïmplementeerd is. Dit is bedoeld om informatie te verzamelen over hoe het design door de gebruiker wordt ontvangen en of het aan hun wensen en verwachtingen voldoet. Au zegt dat het bij dit discipline binnen UXD gaat om het kiezen en beheersen van de juiste onderzoeksmethodes. Maar ook hoe ze deze data omzetten (datamodelling) in bruikbare insights voor het design team. 2. Interaction & Product design Volgens Au gaat het bij design niet alleen om hoe iets er uit ziet, maar ook hoe het werkt. Op een bepaald niveau gaat dit ook over hoe de visie, missie, principes en waarden van een bedrijf in een product naar voren komen. Product design speelt hier een belangrijke rol volgens Au: het kunnen vertalen van deze eigenschappen naar een product. Dit vraagt een bepaald niveau van conceptueel denken. Wanneer het meer naar het tactisch en functioneel aspect gaat moet een UX designer het in een context kunnen plaatsen en bepaalde producten kunnen opleveren zoals wireframes, flowcharts, functionele ontwerpen en low-fi prototypes. Wat belangrijk is, is dat de designers kennis hebben van "mental concepts" en medium specifieke gebruikerstrends, zoals ook Jesse James Garret dit aankaart in "The elements of user experience". 3. Visual Design De visual designer moet detailgedreven kennis bezitten van typografie, kleur, grids en layouts, iconografie en daarnaast merkwaarden kunnen vertalen. Au kaart aan dat het belangrijk is om vaardig te zijn in het ontwerpen voor interactieve producten omdat dit werkelijk een andere tak van sport is dan ontwerpen voor statische media zoals posters, banners en ads. Kennis van wat een medium wel en niet kan ten opzichte van het product is een must. Visual designers zijn zich bewust dat wat zij leveren de gebruikerservaring ondersteunt, maar niet de gebruikerservaring is.

Deelvraag 2

9.

4. Prototyper / Webdeveloper Dit is een groep binnen UX design waarbij de personen vaak een front-end of web development achtergrond hebben. Ze verschillen van reguliere developers doordat zij ingesteld zijn op snelheid en flexibiliteit en de bereidheid om code weg te gooien waar nodig en opnieuw te itereren. Prototyping betekent niet ‘production-ready’ code schrijven. Kim Goodwin beaamt dit met haar quote: "A design engineer is perfectly willing to experiment and to throw away code or other technical prototypes." (Goodwin, 2009). Degelijke kennis van HTML, CSS, Javascript en prototyping tools zijn nodig om de features, requirements en functionele ontwerpen te vertalen naar een prototype dat voelt zoals de voorgaande disciplines bedoeld hebben. Volgens Au zijn de meeste UX professionals bekwaam in één of twee van de bovenstaande disciplines binnen het UX vakgebied. In de vier profielen die Irene Au schetst, kunnen we samenvattend de volgende competenties per profiel neerzetten: User Researchers • •

UX onderzoeksmethodes kennen en deze effectief kunnen toepassen. Datamodelling en insights genereren.

Interaction & Product design • •

Visual Designers • •

Design toepassen in het kader van functionele/interactie ontwerpen en bedrijfs/productidentiteit. Gevoel voor en kennis van visuele hiërarchie, typografie, kleur en layout en gridmethodiek kunnen toepassen in het kader van een device en gebruiker gedreven omgeving.

Conceptualiseren: wat bouwen we wel en wat bouwen we niet a.d.v. onderzoek, visie, principes, waardes, missie en content. Design frameworks opstellen en hier over itereren (wireframes, flowcharts, interactie en functionele ontwerpen, customer journeymaps).

Prototypers / Webdevelopers • •

Kennis hebben van prototyping tools en HTML/CSS/JS of andere front-end frameworks in het kader van iteraties en snelheid. Deze kennis snel kunnen toepassen voor rapidprototyping met behoud van design.

De competenties hierboven zijn wellicht onder te verdelen in tal van sub-competenties. We zouden kunnen stellen dat dit de top-level competenties zijn. Omdat het UXD vakgebied zich snel ontwikkelt zullen deze definities in de toekomst wellicht specifieker of nog meer opgedeeld worden.Volgens UX consultant voor o.a. Samsung en AT&T, Elisabeth Hubert zijn er nog meer categorieën op te merken. Namelijk content strategy, information architecture en usability (Hubert, 2016). Omdat Au deze punten ook aanstipt kunnen we (om dit onderzoek niet te ingewikkeld te maken) stellen dat deze extra categorieën ook passen in het raamwerk van Au.

Deelvraag 2

10.

Hoe vullen deze vaardigheden elkaar

wel of niet aan ten opzichte van een UX designproces? Het designproces van een product of service bevat vele aspecten. Om te kijken hoe de vaardigheden van een front-ender en een UX designer elkaar ontmoeten is het goed om te weten hoe een designproces eruitziet. Dit verschilt hoogstwaarschijnlijk per product, team, bedrijf of opdrachtgever. Om toch een kader aan te geven voor een UX designproces kijken we naar wat de literatuur ons te vertellen heeft. In “The Elements of User Experience” geeft J.J. Garrett vijf “planes” aan welke een designteam doorloopt. Als we deze uiteenzetten zien we de (Garrett, 2011): • • • • •

Strategy plane Scope plane Structure plane Skeleton plane Surface plane

Vervolgens bekijken we het designproces van Kim Goodwin die ook teamrollen bevat (Goodwin, 2009). Strategy Deze planes volgen elkaar op van abstract (strategy) naar concreet (surface) niveau. Als eerst wordt in de "strategy plane" onderzocht en vastgelegd wat de eigenaar van het product of de service uit het opgeleverde willen halen. Daarnaast wordt er ook gekeken naar wat de gebruiker eruit wil en kan halen. Kort gezegd, in de "strategy plane" worden doelen en behoeftes van de eigenaar en gebruiker vastgelegd. Scope De "scope plane" bekijkt welke features er nodig zijn om deze doelen en behoeftes te behalen. Een voorbeeld dat Garrett geeft is bijvoorbeeld dat gebruikers van een webshop voorgaande verzendadressen kunnen opslaan zodat deze later weer gebruikt kunnen worden. Een functie als deze wordt in de "scope plane" bepaald.

Deelvraag 3

11.

Structure In de "structure plane" wordt bepaald hoe deze features en functies bij elkaar passen en samenhangen. Bijvoorbeeld in welke stap van het verzendproces een gebruiker de opties krijgt om zijn verzendadres op te slaan. Skeleton Vervolgens wordt er in de "skeleton plane" bepaald waar deze elementen bij bijvoorbeeld een website geplaatst moeten worden. Een winkelmandje komt bijvoorbeeld rechtsboven in de header en de link naar de FAQ in de footer. Een voorbeeld van dit proces is wireframen. Surface Dit gaat vooral over wat gebruiker ziet en hoe het aanvoelt. Kim Goodwin omschrijft een vergelijkbaar proces in Designing For The Digital Age. Namelijk de volgende: • • • • • • • •

Planning Research Modeling Requirements Definition Framework Definition Detailed Design Implementation support

Goodwin omschrijft het proces iets breder in wat zij noemt een ‘Goal directed-proces’ omdat zij ook planning en implementatie betrekt bij het proces. Goodwin geeft hier de volgende illustratie voor waar de workload per teamlid in te zien is:

Research, modeling, requirements, definition, framework definition en detailed design vinden we ook terug in Garretts model, alleen anders benoemd en samengevoegd. Zoals eerder genoemd omvat het model van Goodwin ook planning en implementatie. Planning In planning komen een aantal elementen terug die ook te vinden zijn in de strategy plane bij Garret. Zoals verwachtingen van stakeholders. Maar hier wordt ook rekening gehouden met risico’s, kosten, een planning per dag/week en de requirements hierbij. Deelvraag 3

12.

Implementation support Goodwin heeft het hier over de transitie van design naar development. Ze kaart aan dat het belangrijk is hoe designers hun specificaties opleveren aan de ontwikkelaars en dat het belangrijk is een goede lijn van communicatie te houden en engineers te blijven ondersteunen waar ze dat nodig hebben. In de illustratie hieronder laat Goodwin zien dat design engineers vooral in het laatste proces nauwbetrokken zijn in het designproces. Maar ook bij eerdere fases zoals research, requirements definition, en bij het opmaken van het gedetailleerde design.

Volgens Goodwin moet de design engineer (wat een front-ender kan zijn) al vroeg betrokken zijn in het proces om sturing te geven en aannames van het team uit de lucht te halen ten opzichte van technische specificaties. Tijdens de ‘detailed design’ fase kan een design engineer volgens Goodwin optimaal meewerken door snel prototypes te bouwen en hier over te itereren waar nodig. Wat Goodwin aantoont is dat in een ideaal designproces de ‘design engineer’, of ook wel front-ender, niet pas ná het designproces komt kijken. Deze is gedurende het project betrokken, geeft feedback en levert informatie wanneer het designteam hierom vraagt. Vooral aan het einde van de planningsfase en met ingang van de researchfase (vergelijkbaar met Garrets strategy plane) werken de vakgebieden samen om een kader te scheppen zodat er later in het designproces geen onduidelijkheden zijn. Daarna ondersteunt de design engineer het team bij het opstellen van de requirements van het product. De requirements zoals de stakeholders die opstellen moeten worden getoetst op haalbaarheid, schaalbaarheid en usability in het kader van technologie. Hier helpt design engineer bij (Goodwin, 2009). Deze fase vinden we ook bij Garrett terug in de scope en structure plane. Frankwatching merkt ook op dat de front-ender tegenwoordig vroeg in het proces betrokken moet worden. Dit vraagt dus een bepaalde samenwerking en dialoog van beide partijen (UX en Front-end) (De Jong, 2016). Zeker in de eindfases waar het design (Detailed Desing of Skeleton/Surface) tot stand komt, wordt er veel samengewerkt met de front-ender. Een designer die geen benul heeft van responsive design of de restricties van het web krijgt gegarandeerd een geïrriteerde front-ender aan de deur. Een belangrijk punt om terug te gaan naar de hoofdvraag. Want dezelfde taal spreken en elkaar begrijpen komt ten goede van een goede samenwerking. Hoeveel moet je dan weten om een waardevol dialoog te kunnen voeren? Wie deze vraag op internet stelt zal zien dat anderen hem met regelmaat al voor zijn gegaan.

Deelvraag 3

13.

Een vraag die niet geheel onterecht is wanneer men naar het vacature aanbod kijkt. Hier wordt vaak gevraagd om kennis van HTML, CSS en Javascript. Een aantal recente vacatures van Linkedin:

Adidas - UX Designer / Interaction Designer

Booking.com - UX Designer

Coolblue - UX Designer

Deze vragen rijmen vaak met “moet ik leren programmeren als UX designer?”. Long kaart aan in Medium (2014) dat “design with code” steeds populairder wordt. Wellicht dat de vraag of een UX designer moet leren programmeren voortkomt uit deze trend. Verschillende professionals hebben hier hun mening over. Volgens Jared Zimmerman (Google Voiceplatform & Productdesign) moeten UX designers en front-enders elkaar vooral ondersteunen en dezelfde taal spreken. Zimmerman stelt zelfs dat teveel kennis een handicap kan zijn voor UX designers. Designers met vergaande kennis van front-end lopen het risico te denken in hun eigen scope en (misschien onbewust) beslissingen maken die de front-ender normaliter maakt, gebaseerd op zijn uitgebreide expertise. Volgens Zimmerman moeten beide partijen net genoeg leren van elkaars vak zodat ze een geïnformeerd dialoog kunnen voeren en samen beslissingen kunnen maken (Zimmerman, 2012). “UX beginner” en “UXpin” geven hetzelfde geluid en pleiten voor een basiskennis van elkanders vak. Front-end development is niet voor niets een apart vak net zoals UX design dat is. Ken als designer de beginselen van HTML, CSS en Javascript en wees vooral op de hoogte van wat het medium waarmee je werkt wel en niet kan als basis voor een waardevolle samenwerking met ontwikkelaars waarmee er een efficiëntie slag gemaakt kan worden in het designproces (Treder, 2013), (UX Beginner, 2014).

Deelvraag 3

14.

Conclusie Op de vraag wat zijn front-end vaardigheden kunnen we antwoord geven. Kort gezegd: het beheersen van de drie talen HTLM, CSS en Javascript zijn vaardigheden die een front-ender moet bezitten. De front-ender gebruikt deze talen om interactie tot leven te brengen (net zoals de prototyper). Wie alle vaardigheden van een UX designer telt heeft aan twee handen niet genoeg. Daarnaast zijn er verschillende interpretaties te vinden over hoe deze vaardigheden moeten worden verdeeld in disciplines binnen het UXD domein. Irene Au, Google’s voormalig Head of Design, verdeelt de disciplines overzichtelijk in vier categorieën: user research, interaction & product design, visual design en prototyping. Als we deze disciplines onder het "goal-directed designprocess" van Kim Goodwin leggen en bekijken waar volgens haar de design engineer bij het proces betrokken moet worden, zien we de volgende verbanden.

De bovenste grafiek laat zien waar in het proces de design engineer (front-ender) betrokken is bij het proces. Daaronder is te zien in welke volgorde de door Irine Au beschreven disciplines te werk gaan in een proces zoals die door Goodwin beschreven is. Er kan geconcludeerd worden dat alle vier de disciplines gaandeweg in aanraking komen met een frontender en dat er samengewerkt moet worden. Basiskennis van front-end komt bij elk discipline goed van pas zodat er geïnformeerd gecommuniceerd kan worden. De teamleden spreken dezelfde taal.

Conclusie

15.

Twee disciplines hebben meer baat bij het hebben van front-end kennis. In de grafiek hieronder is duidelijk te zien welke dat zijn.

User Research

Interaction & Product designer

Visual Designer

Prototyper

De disciplines 'visual design' en 'prototyping' hebben extra baat bij front-end kennis. Deze werken nauw samen met een front-ender, front-end afdeling of met andere ontwikkelaars. Irine Au kaart aan dat prototypers zelf vaak een front-end achtergrond hebben. Men zou dan kunnen stellen dat de prototyper eigenlijk volstaat als design engineer, afhankelijk van de kennis en samenstelling van het core team (Au, 2014). Door kennis te hebben van front-end technieken en werkwijzen wordt de overgang naar de implementatie en developmentfases versoepelt omdat er vooraf, tijdens en na het proces beter gecommuniceerd kan worden. Hierbij spelen alle disciplines een rol waarbij visual design en prototyping er het meeste baat bij hebben en er misschien wel op uit moeten zijn om deze kennis zich eigen te maken voor een efficiëntere samenwerking en workflow. Maar zoals Zimmerman zei, respecteer elkanders vakgebied.

Conclusie

16.

Bronnen Au, I. (2014). Understanding UX Skills. [online] Medium. Available at: https://medium.com/@ireneau/ understanding-ux-skills-21ad9c22f0bf#.x3cry89u5 [Accessed 6 Dec. 2015]. Christoffersen, M. (2015). The State of UX Design — Blog Posts from the FFW Team. [online] Medium. Available at: https://medium.com/blog-posts-from-the-ffw-team/the-state-of-ux-designb4e3999243e5#.s6fskjcxd [Accessed 15 Dec. 2015]. Cssneuse.net, (2016). The History of CSS - Css Neuse - CSS Information. [online] Available at: http:// www.cssneuse.net/the-history-of-css.php [Accessed 14 Dec. 2015]. Cummings, J. (2016). Front-End Development: The Emerging Role. [online] Tech.lds.org. Available at: https://tech.lds.org/blog/264-front-end-development-the-emerging-role [Accessed 14 Dec. 2015]. De Jong, R. (2016). Frankwatching - Front End Developers van codeklopper naar spin in het web. [online] Frankwatching.com. Available at: http://www.frankwatching.com/archive/2014/12/09/front-enddevelopers-van-codeklopper-naar-spin-in-het-development-web/ [Accessed 5 Dec. 2015]. Dżaluk, P. (2014). The Golden Era of Front-end Web Development - Octivi Labs. [online] Octivi Labs. Available at: http://labs.octivi.com/the-golden-era-of-front-end-web-development/ [Accessed 7 Dec. 2015]. Garrett, J. (2011). The elements of user experience. Berkeley, CA: New Riders, pp.102, 4. Goodwin, K. (2009). Designing for the digital age. Indianapolis, IN: Wiley Pub., pp.57, 15 - 31. Hubert, E. (2016). UX Disciplines. [online] Treehouse. Available at: https://teamtreehouse.com/library/ ux-basics/what-is-user-experience-ux/ux-disciplines [Accessed 8 Dec. 2015]. Kujala, S., Roto, V., Väänänen-Vainio-Mattila, K., Karapanos, E. and Sinnelä, A. (2011). [online] UX Curve: A method for evaluating long-term user experience. Interacting with Computers, 23(5). [Accessed 10 Dec. 2015] Learn to code with me, (2016). Front-end development skills. [online] Available at: http:// learntocodewith.me/web-dev/front-end-developer-skills/ [Accessed 12 Dec. 2015]. Long, J. (2012). I Don't Speak Your Language: Frontend vs. Backend - Treehouse Blog. [online] Treehouse Blog. Available at: http://blog.teamtreehouse.com/i-dont-speak-your-language-frontend-vs-backend [Accessed 16 Dec. 2015]. Long, J. (2014). Generating visual designs with code. [online] Medium. Available at: https://medium. com/@jasonlong/generating-visual-designs-with-code-62e59c4881ca#.yfcidiu9d [Accessed 17 Dec. 2015]. Pabini, G. (2010). Essential and Desirable Skills for a UX Designer :: UXmatters. [online] Uxmatters.com. Available at: http://www.uxmatters.com/mt/archives/2010/12/essential-and-desirable-skills-for-a-uxdesigner.php [Accessed 20 Dec. 2015]. Reimann, R. (2010). Essential and Desirable Skills for a UX Designer :: UXmatters. [online] Uxmatters. com. Available at: http://www.uxmatters.com/mt/archives/2010/12/essential-and-desirable-skills-fora-ux-designer.php [Accessed 17 Dec. 2015].

17.

Treder, M. (2013). Should Designers Code?. [online] Studio by UXPin. Available at: http://studio.uxpin. com/blog/should-designers-code/ [Accessed 7 Dec. 2015]. UX Beginner, (2014). The Last Post You’ll Read On Whether UX Designers Need to Learn Code. [online] Available at: http://www.uxbeginner.com/do-ux-designers-need-to-learn-code/ [Accessed 7 Dec. 2015]. W3.org, (2016). Architecture of the World Wide Web, Volume One. [online] Available at: http://www. w3.org/TR/webarch/ [Accessed 21 Dec. 2015]. W3.org, (2016). Tim Berners-Lee. [online] Available at: http://www.w3.org/People/Berners-Lee/ [Accessed 3 Dec. 2015]. W3schools.com, (2016). Introduction to HTML. [online] Available at: http://www.w3schools.com/html/ html_intro.asp [Accessed 16 Dec. 2015]. W3schools.com, (n.d.). CSS Tutorial. [online] Available at: http://www.w3schools.com/css/default.asp [Accessed 20 Dec. 2015]. W3schools.com, (n.d.). JavaScript Introduction. [online] Available at: http://www.w3schools.com/js/ js_intro.asp [Accessed 15 Dec. 2015]. Wind, W. (2015). Kort gesprek over front-end. Zimmerman, J. (2012). Why don't more designers code? - Quora. [online] Quora.com. Available at: https://www.quora.com/Why-dont-more-designers-code [Accessed 7 Dec. 2015].

18.