{"id":1296,"date":"2020-04-16T17:07:46","date_gmt":"2020-04-16T15:07:46","guid":{"rendered":"https:\/\/maxfest.dk\/port\/?p=1296"},"modified":"2020-05-27T21:18:43","modified_gmt":"2020-05-27T19:18:43","slug":"app-pris-beregner-projekt-5-mmd","status":"publish","type":"post","link":"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/app-pris-beregner-projekt-5-mmd\/","title":{"rendered":"App-pris-beregner &#8211; Projekt 5 MMD"},"content":{"rendered":"\n<p>Til dette projekt var det muligt at v\u00e6lge mellem 3 opgaver. Alle opgaver gik ud p\u00e5 at designe og programmere en digital l\u00f8sning, hvor der er s\u00e6rligt fokus p\u00e5 anvendelse af centrale metoder til udvikling og test af brugergr\u00e6nsefladen for at sikre en god brugeroplevelse.<\/p>\n\n\n\n<p>Der er derfor s\u00e6rligt fokus p\u00e5 tests og testresultater.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"421\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-1024x421.png\" alt=\"OEAMM19EDA gruppe-3 projekt 5 House of Code app-pris-beregner.\" class=\"wp-image-1303\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-1024x421.png 1024w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-300x123.png 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-768x316.png 768w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-1600x658.png 1600w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-1536x632.png 1536w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner.png 1902w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Indledende informationer<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Gruppe<\/h3>\n\n\n\n<p>Til dette projekt deltog:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Khalid Ibrahim Al-Atti<\/li><li>Konrad Pawel Sarna<\/li><li>Max Festersen Hansen<\/li><li>Mie Karoline J\u00f8rgensen<\/li><li>Signe Stentoft Arlbj\u00f8rn<\/li><\/ul>\n\n\n\n<p>Konrad Pawel Sarna agerede som projektleder i dette projekt.<\/p>\n\n\n\n<p>Gruppen gik under navnet &#8220;gruppe 3&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Case valg<\/h3>\n\n\n\n<p>3 virksomheder havde stillet cases til r\u00e5dighed, som flere grupper p\u00e5 MMD \u00e5rgangen kunne v\u00e6lge.<\/p>\n\n\n\n<p>Disse var:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Abtion, med en case hvor Coop er klient og brugeroplevelsen blandt 0-8 \u00e5rige skal forbedres.<\/li><li>Hesehus, med en case der omhandler hvordan Matas digitale indsats kan blive endnu bedre.<\/li><li>House of Code, med en case hvor kunder skal hj\u00e6lpes med at finde information om priser.<\/li><\/ul>\n\n\n\n<p>Under projektets forl\u00f8b afstemte gruppen internt p\u00e5 hvilken case de \u00f8nskede. \u00d8nsket blev afsendt til underviserne. Underviserne tildelte s\u00e5 cases til grupperne.<\/p>\n\n\n\n<p>Min gruppe fik tildelt casen for House of Code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">S\u00e6rlige omst\u00e6ndigheder<\/h3>\n\n\n\n<p>Under hele projektets forl\u00f8b var det ikke muligt at m\u00f8des i gruppen, pga. UCL lukkede for undervisning p\u00e5 skolen (<a href=\"https:\/\/www.ucl.dk\/corona\/corona-nyheder\/ucl-lukker-undervisning-fra-i-morgen\">https:\/\/www.ucl.dk\/corona\/corona-nyheder\/ucl-lukker-undervisning-fra-i-morgen<\/a>).<\/p>\n\n\n\n<p>Alt undervisning har foreg\u00e5et online. Dog ikke uden problemer. L\u00e6ringsplatformen Itslearning var utrolig udfordret under hele forl\u00f8bet, og var n\u00e6rmest ikke anvendelig. Underviserne besluttede i stedet at anvende improviserede google docs ark til at formidle undervisningsplaner og dagsplaner.<\/p>\n\n\n\n<p>De fleste undervisningsgange blev faciliteret med et indledende m\u00f8de, og udleveret materiale. Materialet varierede mellem lektier, videoundervisning, powerpoints og interaktive platforme.<\/p>\n\n\n\n<p>Som gruppe kunne vi ligeledes ikke m\u00f8des forsvarligt.<\/p>\n\n\n\n<p>Gruppen valgte at anvende:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Discord til chat, dagligt samarbejde og m\u00f8der.<\/li><li>Google drev og github til fildeling.<\/li><li>Trello og google docs til planl\u00e6gning.<\/li><li>Facebook og facebook messenger til chat udenfor aftalte arbejdstider.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">L\u00f8sningsforslag<\/h2>\n\n\n\n<p>Det endelige resultat fra projekt 5 er en interaktiv prototype, plakater der viser research processen, en style guide, og pr\u00e6sentationsvideoer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Interaktiv prototype<\/h3>\n\n\n\n<p>Link til den interaktive prototype for app-pris-beregneren: <a rel=\"noreferrer noopener\" href=\"https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/index.html\" target=\"_blank\">https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/index.html<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"421\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-1024x421.png\" alt=\"OEAMM19EDA gruppe-3 projekt 5 House of Code app-pris-beregner.\" class=\"wp-image-1303\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-1024x421.png 1024w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-300x123.png 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-768x316.png 768w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-1600x658.png 1600w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner-1536x632.png 1536w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-house-of-code-app-pris-beregner.png 1902w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>G\u00e5 til l\u00f8sningsforslaget: <a href=\"https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/index.html\">https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/index.html<\/a><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Video pr\u00e6sentation for l\u00f8sningen<\/h4>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"540\" style=\"aspect-ratio: 960 \/ 540;\" width=\"960\" controls src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/UCL_OEDAMM19ED_A_C_projekt-5_-digitalebrugergr\u00e6nseflader_pr\u00e6sentationsvideo.mp4\"><\/video><figcaption>Video pr\u00e6sentation for app-pris-beregneren til House of Code<\/figcaption><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=X11R_j4s7Kk&amp;feature=youtu.be&amp;fbclid=IwAR0DPlrXOTqXLWgbhN_8p7LZfhAHII9BoelCOmm6yJw3pcj3etiHRitJYQE\" target=\"_blank\">Videoen er tilg\u00e6ngelig p\u00e5<\/a> <a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=X11R_j4s7Kk&amp;feature=youtu.be&amp;fbclid=IwAR0DPlrXOTqXLWgbhN_8p7LZfhAHII9BoelCOmm6yJw3pcj3etiHRitJYQE\" target=\"_blank\">youtube<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Style guide<\/h3>\n\n\n\n<p>Interaktiv style guide &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/styleguide.html\" target=\"_blank\">https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/styleguide.html<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/styleguide.html\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"528\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-style-guide-1024x528.png\" alt=\"OEAMM19EDA gruppe 3 projekt 5: style guide.\" class=\"wp-image-1305\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-style-guide-1024x528.png 1024w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-style-guide-300x155.png 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-style-guide-768x396.png 768w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-style-guide-1600x824.png 1600w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-style-guide-1536x791.png 1536w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-style-guide.png 1902w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>G\u00e5 til style guide &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/styleguide.html\" target=\"_blank\">https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/styleguide.html<\/a><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Plakater<\/h3>\n\n\n<div class=\"wp-block-pdfemb-pdf-embedder-viewer\"><a href=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-projekt-5-gruppe-3-plakater.pdf\" class=\"pdfemb-viewer\" style=\"\" data-width=\"max\" data-height=\"max\" data-toolbar=\"both\" data-toolbar-fixed=\"on\">OEAMM19EDA-projekt-5-gruppe-3-plakater<\/a><\/div>\n<p class=\"wp-block-pdfemb-pdf-embedder-viewer\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Udvikling og fremgang<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Versionstyring (med git)<\/h3>\n\n\n\n<p>Versionsstyring og sammens\u00e6tning af arbejde er sket via github.<\/p>\n\n\n\n<p>Github side for den interaktive prototype: <a href=\"https:\/\/github.com\/MaxFestersen\/mmd-projekt-5-gruppe-3\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/MaxFestersen\/mmd-projekt-5-gruppe-3<\/a><\/p>\n\n\n\n<p>Den interaktive prototype blev kodet fra bunden. I en tidlig iteration af siden hentede vi css koden anvendt p\u00e5 <a href=\"https:\/\/www.houseofcode.io\/\">https:\/\/www.houseofcode.io\/<\/a>, men det blev fjernet kort efter.<\/p>\n\n\n\n<p>Metoden der er anvendt for git-flow&#8217;et er baseret p\u00e5 &#8220;A successful Git branching model&#8221; af Vincent Driessen (<a href=\"https:\/\/nvie.com\/posts\/a-successful-git-branching-model\/\">https:\/\/nvie.com\/posts\/a-successful-git-branching-model\/<\/a>).<\/p>\n\n\n\n<p>Vi har dog ikke haft brug for at arbejde med andet end master og develop. De prim\u00e6re versioner af l\u00f8sningen bliver indsat i master branchen. Alt udvikling har foreg\u00e5et p\u00e5 develop branch. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"832\" height=\"390\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-gitflow-eksempel.png\" alt=\"OEAMM19EDA gruppe 3 projekt 5:  gitflow eksempel\" class=\"wp-image-1307\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-gitflow-eksempel.png 832w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-gitflow-eksempel-300x141.png 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-gruppe-3-projekt-5-gitflow-eksempel-768x360.png 768w\" sizes=\"auto, (max-width: 832px) 100vw, 832px\" \/><figcaption>Eksempel p\u00e5 gitflow for den interaktive prototype.<br>Screenshot taget i Sourcetree.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Under projektets forl\u00f8b var der flere tilf\u00e6lde af merge-issues. I 2 tilf\u00e6lde var gruppemedlemmer ikke klar over at der var et merge issue, og implementerede uvidende en \u00e6ldre version af koden der hidtil var blevet udviklet. Dette kan v\u00e6re en bug i github desktop, som var v\u00e6rkt\u00f8jet der prim\u00e6rt blev anvendt som Git klient.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile first<\/h3>\n\n\n\n<p>Det vil blive tydeligt at vi under projekt 5 har anvendt en mobile first tilgang. Is\u00e6r p\u00e5 vores prototyper.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mit bidrag til l\u00f8sningen<\/h3>\n\n\n\n<p>Overordnet set har jeg bidraget meget til tests, projektstyring og kodning og sparing med mine gruppemedlemmer.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Prototyper og testresultater<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Paper prototypes<\/h5>\n\n\n\n<p>Paper prototypes, prototyper udviklet p\u00e5 papir, var et krav. De skulle tegnes individuelt, og afpr\u00f8ves.<\/p>\n\n\n\n<p class=\"has-text-align-right\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/XL8vrltelZ2vQVgr0_5Iaw_o17eO4v5Qvay5niAMemLGLoGUb0nd2cdQL11ScuWVOczX71Ab_JTkCl7LS3HuBDgqP3Z-8NpzYutM2wnheHYDZtEuuzn4Jt1kc_SBbo09wzw9_Iz3\" style=\"width: undefinedpx;\"><\/p>\n\n\n\n<p>Jeg lavede en papirprototype. Pga. at jeg ikke har mulighed for at interagere med fremmede, var jeg n\u00f8dsaget til at fors\u00f8ge at teste l\u00f8sningen p\u00e5 mine for\u00e6ldre. Mine for\u00e6ldre er tidligere erhvervsdrivende, og kunne engang havde v\u00e6ret i m\u00e5lgruppen for at kunne have f\u00e5et udviklet en app. Mine for\u00e6ldre havde ikke overskud til at deltage i testen<\/p>\n\n\n\n<p> Jeg endte med at teste den p\u00e5 mig selv. Jeg fik bekr\u00e6ftet at jeg kunne navigere p\u00e5 siden. Indsigterne fra at teste med sig selv er begr\u00e6nset. Det er essentielt en pilottest.<\/p>\n\n\n\n<figure class=\"wp-block-video alignright\"><video controls src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-projekt-5-gruppe-3-Max-Festersen-Hansen-paperprototype-pilottest.mp4\"><\/video><figcaption>Filmning af testforl\u00f8bet af paperprototypen af Max (pilottest)<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Med-fi wireframe<\/h5>\n\n\n\n<p>Indsigterne fra paperprototypes blev gennemg\u00e5et i plenum, og kritiske indsigter blev dokumenteret. Med den viden pr\u00f8vede vi at arbejde vidre med 4 Adobe XD prototyper.<\/p>\n\n\n\n<p>Heraf udviklede jeg en.<\/p>\n\n\n\n<p class=\"has-text-align-right\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/-Cq06KqZlfjsf8hXxVDS6d4ZrVMwOBGIDHyYMBZ7pokE8DhHvxiPWYBWSYM_uKIF__KaZUTRvYDjtTyRQd3hPDLOxMTN76-Aqz28SfenF7Gdxdhutp1_U1NoVkfq8Bwyx0y5nVuN\" width=\"602\" height=\"437\"><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Med-fi wireframe v.2<\/h5>\n\n\n\n<p>Vi valgte at udvikle nye prototyper.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/xd.adobe.com\/view\/bde78fa3-d209-4342-4fda-2a44dfa27d95-cbd6\/\">https:\/\/xd.adobe.com\/view\/bde78fa3-d209-4342-4fda-2a44dfa27d95-cbd6\/<\/a><\/li><li><a href=\"https:\/\/xd.adobe.com\/view\/9e383e57-b242-4065-5186-5ffb7d5d0cf3-e809\/\">https:\/\/xd.adobe.com\/view\/9e383e57-b242-4065-5186-5ffb7d5d0cf3-e809\/<\/a><\/li><\/ul>\n\n\n\n<p>Jeg har ikke udviklet dem &#8211; men jeg har v\u00e6ret med til at udf\u00f8re brugertests p\u00e5 dem.<\/p>\n\n\n\n<p>Jeg faciliterede en remote test p\u00e5 Mie, hvor Khalid tog noter. Mie blev bedt om at t\u00e6nke h\u00f8jt. Hendes f\u00f8rste interaktion blev dokumenteret og hun blev bedt om at fort\u00e6lle hvilken l\u00f8sning hun bedst kunne lide. Med det fik vi udf\u00f8rt remote test, think aloud method, A\/B test og first click test.<\/p>\n\n\n\n<p>Vi brugte indsigterne i vores vurdering af hvordan vores hi-fi prototype skulle udvikles. <\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Card sorting<\/h5>\n\n\n\n<p>Konrad og jeg opsatte milj\u00f8et for card sorting. Card sorting kunne gennemf\u00f8res i trello. S\u00e5 vi oprettede et trello board til card sorting. Vi oprettede kategorier for hvor indhold kan placeres p\u00e5 den nuv\u00e6rende hjemmeside. Vi oprettede kort som skulle placeres (pris-beregneren og datah\u00e5ndtering policy). Vi udfyldte alle kategorier med beskrivelser og kort som repr\u00e6senterede indholdet som det var nu<\/p>\n\n\n\n<p>Udf\u00f8relsen af tests blev udf\u00f8rt af de enkelte gruppemedlemmer. Hvert gruppemedlem fandt 3 testpersoner.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/jZNBbp0faMUEqIpup-YBreB6D1bMxzQpjF65GKgW_00_kvVIIqws38-zb9-QUAZhy_C8emoI5qYB0_e3CaC3HG7ZiqfSh1Wc7d3A4VsUw6OgDDdRGVHycrK2Bzi-HAKU-lQIM2Lv\" alt=\"\"\/><figcaption>Trello boardet med en udvalgt test session.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Resultaterne fra card sorting blev brugt til at udarbejde Informations arkitektur. Dette kan ses p\u00e5 side 8 i plakater.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Interviews<\/h5>\n\n\n\n<p>Jeg var med til at facilitere en af de interviews der blev udf\u00f8rt. Vi snakkede kort om resultaterne i et morgenm\u00f8de, men ingen nye indsigter blev fundet.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Brugertests af nuv\u00e6rende hjemmeside (og visualisering med Customer Journey Map)<\/h5>\n\n\n\n<p>Jeg var med til at udf\u00f8re en brugertest af <a href=\"https:\/\/www.houseofcode.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">houseofcode.io<\/a>, med think aloud method.<\/p>\n\n\n\n<figure class=\"wp-block-video alignright\"><video controls src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-projekt-5-gruppe-3-Max-Festersen-Hansen-brugertest-testperson-c.mp4\"><\/video><figcaption>Brugertest med testperson C &#8211; udf\u00f8rt af Max<\/figcaption><\/figure>\n\n\n\n<p>Jeg visualiserede alle 3 brugertest i et Cutomer Journey Map. Det kan ses p\u00e5 side 9 i plakater.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-projekt-5-gruppe-3-customer-journey-map-paa-brugertests-af-houseofcode.svg\" alt=\"\" class=\"wp-image-1352\" width=\"1024\"\/><figcaption>Customer Journey Map for brugertests af houseofcode.io<\/figcaption><\/figure><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Neuromarketing analyse med vas3<\/h5>\n\n\n\n<p>Jeg udf\u00f8rte en af 3 test med vas3 for at finde ud af hvor brugere ser p\u00e5 hjemmesider.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/vISvPIbn6Bh9PKE2YpNWgs0-tNI2-jk6_93wa7VN_cUPvsKgQUg30MZQczNNElBbCR6zw6ArrumaDilE45kJObVwdtUNBkw8294P1VDVmH0aopwEAZ1eqtl1etZgtx8PPHMGN4tZ\" width=\"135\" height=\"543\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/RFSuaaU4obFeOqrEeGhhSYMgN-3mAlJTezx-__UHNkhyNods3fAah_m-aZYssqAGx3IoSUGsVdOIujwvwEmoL2wTCD5s5BrwHOT-nuNQqE_6Qr0ZzNVtaVaBCYtNjTGnM2k6__-q\" width=\"136\" height=\"548\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/f4W6CMwIkw4NA-EpQ7KG2gNvejuAEkB3WzQqNr2Rq4lfHNYLT1tJJAuIb37pUeUnuV-yTepDg5GgAJWHWCB7hvj_NLcfQRistXFX7p_IKe4KCvs_Q0GRn_kjepbKtgy36i0pPT3v\" width=\"138\" height=\"555\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/6IjUwoS_F66kAxlzfsdVx0QFaD9BpLIbUUlZ7W4R1NtEXL3xvdoin9lfXWtVFKh3lT2BnN7qR4YVUFhL7gyq72AYnfo66OF3Dwe0OVx9vT0HpqqMK-eH8r9D54_3QwuLnR8joqdo\" width=\"135\" height=\"544\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/Bn4xjqbfxxt7oZpvlaQELqjqQ4ZCNnGO3Ytnk3GkJ_gR7Q-gAI_QJIhHi7UnNgB5vyKdLiNTj6wpzikjFNIu3vT6dM4Hp1mEXWTsd1CAwKTHf-K0lCaW5zSFMZhgMLoLCdoHx2GO\" width=\"139\" height=\"561\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Det prim\u00e6re fokus er p\u00e5 de farvede firkanter, og prim\u00e6rt p\u00e5 farverne. Den mest sete tekst er faktisk tekst sektionen under, som vi \u00f8nsker at have i fokus.<\/p>\n\n\n\n<p>Vores hypotese er at st\u00e6rke farver omkring billedet ville kunne \u00f8ge opm\u00e6rksomheden.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/NqGzHulhE0HqRiJvaVdUpue4EFh6eRwU9VMIjdFFyAjGs0C4zJl5ersN3aEgl_n1tunMz0IYyYe8zcfcRsy0pyTjNu2lWpiXQRFh-k1Cn26XuTuo47Yks593_Op4WbK_fmXhlcx6\" width=\"135\" height=\"561\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/AigdsHND5JOLOpMjj2dI-wBXVcfYAi3ZRKKzyf4B2zLrLFxSeubNYQbxWCkLYmMZD3ux6B12bPOVk3MfaNbEEN_sdIx9GuxQW1RcdLz6GvrlZjDXOUllTbT3E3liS50PI3e7-HfI\" width=\"132\" height=\"550\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/Sv6RTYes_c-yBvGizMozHYrxAVUhhrTgqNuktn855OpSRTJY6sE9BnPqEpkZ5fimgOdvkT3R_67V0cCfCx-PDa9C5fpYaQvNwOfgL-FGKXehw7jdBySNb-RRk7MyvF6HkduB6cRS\" width=\"135\" height=\"563\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/FHwQKlurhaXFpr8lrGIy9qQyd829p2uGQJaRK_nsMTyBqKlRjLDYhqy91WWZtrQJ6oXo810fp4oFl2YY0z4mezVEmiOE26HZBtCDJHsc-wbKb17CoJ1RaK8naVdfu_140QSfhOV8\" width=\"135\" height=\"563\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/gzLyOL5PO0ii__5pDIa8GYq7122rCCmsjdHiFZFAAIXo3y4DkFF4-TpypNejFuXhaDswA1Jn6wKMr7s7zw03ME-i5V8u7GoxwyyGZZbahS_H68V6Iq9WzF3IB4pBHWJ8J7FD83sx\" width=\"135\" height=\"563\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Hypotesen var rigtig, det hjalp at inds\u00e6tte grafik.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Research og analyse<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">PESTEL for projekt 5<\/h5>\n\n\n\n<p>Jeg lavede pestel analysen. Denne kan ses p\u00e5 side 10 under plakater. Pestel er en omverdensanalyse. Jeg anvendte metoden til at beskrive de mest relevante faktorer i omverdenen som kunne p\u00e5virke projekts leverancer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-projekt-5-gruppe-3-pestel.svg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/OEAMM19EDA-projekt-5-gruppe-3-pestel.svg\" alt=\"\" class=\"wp-image-1322\" width=\"1024\" height=\"75\" title=\"\u00c5bn PESTEL billedet i et nyt browser vindue\"\/><\/a><figcaption>Pestel analyse for projekt 5 leverancer<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">UI-patterns (atomic design)<\/h5>\n\n\n\n<p>Jeg var med til at finde UI-patterns for <a rel=\"noreferrer noopener\" href=\"https:\/\/www.houseofcode.io\/\" target=\"_blank\">houseofcode.io<\/a>. Jeg fandt dokumenterede mine findings i et <a rel=\"noreferrer noopener\" href=\"https:\/\/docs.google.com\/document\/d\/1YNS6T87IBIOY0JLoKdECHO5lPO9IpJD7WnmjT05716s\/edit?usp=sharing\" target=\"_blank\">dokument<\/a>. Atomic design blev anvendt som udgangspunktet. hvor man finder sektioner, og s\u00e5 opdeler dem i enkeltdele indtil man n\u00e5r det laveste niveau.<\/p>\n\n\n\n<p>Jeg brugte flere dage p\u00e5 at finde UI-patterns med atomic design principperne. Det tog lang tid. Der er 85 sider p\u00e5 houseofcode.io, og mange af dem har variationer p\u00e5 ui elementer.For at f\u00f8lge atomic design har jeg f\u00f8rst defineret siderne jeg har taget data fra. Sider der ikke har unikke elementer har jeg undg\u00e5et at referere. Derefter har jeg taget sektioner fra siderne, og defineret organismer. Organismerne har jeg s\u00e5 igen opdelt efter dens molekyler og atomer.<\/p>\n\n\n\n<p>Indsigterne blev brugt i styleguide. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Projektstyring<\/h4>\n\n\n\n<p>Gruppen arbejde agilt, og anvendte en fremgang baseret p\u00e5 Scrum. Vi tildelte ikke officielt roller. Jeg agerede  som scrum master, hvor jeg ville facilitere morgenm\u00f8der, backlog og opgaveprioritering. Desuden oprettede jeg l\u00f8bende opgaver.<\/p>\n\n\n\n<p>Gruppen anvende et Trello board som SRUM-board.<\/p>\n\n\n\n<p>Jeg har v\u00e6ret med til at ops\u00e6tte Trello boardet. Jeg har opsat logikken for hvordan vi anvender lables, members, titler, beskrivelser, deadline (Due Date) og checklists. Jeg oprettede eller implementerede dagsplaner deri fra den 30. marts til den 3. april.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/image-1024x520.png\" alt=\"OEAMM19EDA projekt 5 Trello board eksempel\" class=\"wp-image-1313\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/image-1024x520.png 1024w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/image-300x152.png 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/image-768x390.png 768w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/image-1600x813.png 1600w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/image-1536x780.png 1536w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/image.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Eksempel p\u00e5 hvordan trello boardet s\u00e5 ud inden aflevering.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Link til trello board: <a href=\"https:\/\/trello.com\/b\/coZvZpdG\/brugergr%C3%A6nseflader\">https:\/\/trello.com\/b\/coZvZpdG\/brugergr%C3%A6nseflader<\/a><\/p>\n\n\n\n<p>Vi har anvendt det agile flow fra SCRUM som udgangspunkt for liste navnene.<\/p>\n\n\n\n<p>Listerne var opdelt efter flere faktorer.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Opgavers vigtighed var markeret i 4 niveauer.<ul><li>Trivial &#8211; gr\u00f8n &#8211; p\u00e5kr\u00e6vet opgave med lille p\u00e5virkning p\u00e5 projektet<\/li><li>Important &#8211; gul &#8211; p\u00e5kr\u00e6vet opgave med betydningsfuld p\u00e5virkning p\u00e5 projektet.<\/li><li>Optional &#8211; orange &#8211; valgfri opgave \/ en opgave der kan l\u00f8ses eller undlades uden krititsk p\u00e5virkning p\u00e5 projektet.<\/li><li>Critical &#8211; Opgave med kritisk p\u00e5virkning p\u00e5 projektet<\/li><\/ul><\/li><li>Design thinking faserne var tildelt alle opgaver. <ul><li>Discovery &#8211; Lilla &#8211; Indledende fase, hvor man samler indsigter, indtryk og grundl\u00e6ggende informationer<\/li><li>Interpretation &#8211; M\u00f8rkebl\u00e5 &#8211; Indsamling og formatering research<\/li><li>Ideation &#8211; Lys bl\u00e5 &#8211; Udvikling af id\u00e9er og tidligere prototyper<\/li><li>Experimentation &#8211; Lys gr\u00f8n &#8211; Udformning af konkrete prototyper<\/li><li>Evolution &#8211; Lyser\u00f8d &#8211; Udvikling af endelige leverancer.<\/li><\/ul><\/li><li>Sv\u00e6rhedsgrader &#8211; Orange &#8211; nogle opgaver fik tildelt en vurderet sv\u00e6rhedsgrad. Sv\u00e6rhedsgraderne var Nem, Mellem og Sv\u00e6r.<\/li><li>Emne\/leveancer &#8211; sort &#8211; omfattende opgave omr\u00e5der fik tildelt et enme, s\u00e5 man nemt kunne s\u00f8ge efter dem.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Kodning<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">Ops\u00e6tning af Github<\/h4>\n\n\n\n<p>Jeg opsatte <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/MaxFestersen\/mmd-projekt-5-gruppe-3\" target=\"_blank\">github projektet<\/a>, og inviterede deltagerne.<\/p>\n\n\n\n<p>Mappestrukturen blev defineret af Signe, og afstemt af gruppen. Den blev implementeret af Khalid.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Style guide<\/h5>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/styleguide.html\" target=\"_blank\">Style guide<\/a>.<\/p>\n\n\n\n<p>Jeg var med til at oprette skelettet p\u00e5 styleguide. Jeg endte med ikke at deltage s\u00e5 meget i denne opgave, som oprindeligt tilt\u00e6nkt. Opgaven blev overtaget af Khalid, der nemt kan tilskrives som den prim\u00e6re udvikler p\u00e5 denne.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Interaktiv prototype<\/h5>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/konradsarna.com\/mmd-projekt-5-style-guide\/index.html\" target=\"_blank\">Interaktiv prototype<\/a>.<\/p>\n\n\n\n<p>Jeg har deltaget meget i udviklingen af den interaktive prototype.<\/p>\n\n\n\n<p>P\u00e5 Scrum-boardet kan man se hvad jeg har lavet, <a rel=\"noreferrer noopener\" href=\"https:\/\/trello.com\/b\/coZvZpdG\/brugergr%C3%A6nseflader?menu=filter&amp;filter=label:Kodning,member:maxfestersenhansen1\" target=\"_blank\">med denne s\u00f8gning<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Jeg har sammen med Konrad opsat pris-beregneren som en lang HTML form.<\/li><li>Jeg har opsat p\u00e5kr\u00e6vet indhold i HTML (tilf\u00f8jet required attribute p\u00e5 input).<\/li><li>Jeg har f\u00e5et formen til at sende en \u00e5bne en udfyldt e-mail med brugerens e-mail klient i HTML og JavaScript.<\/li><li>Jeg har s\u00f8rget for at formen er anvendelig udelukkende i HTML.<\/li><li>Jeg har v\u00e6ret med til at definere og redefinere point-logikken i beregneren (efter at have f\u00e5et feedback fra House of Code).<\/li><li>Jeg har opsat live validering i JavaScript for valg af l\u00f8sning, besked, udfyldelse af beregner (hvis den bruges), navn, telefonnummer og e-mail.<\/li><li>Jeg har opsat validering for ovenst\u00e5ende felter ved brug af knapper til at forts\u00e6tte og \u00e5bning af e-mail klient.<\/li><li>Jeg har opsat advarsler for hvis validering ikke opfyldes.<\/li><li>Jeg har opsat .gitignore.<\/li><li>Jeg har sammen med Khalid opsat notifikationer for brugeren hvis de gennemf\u00f8rer \u00e5bner e-mail klienten.<\/li><li>Jeg har sammen med Mie implementeret logik for at scrolle til sektioner n\u00e5r formens knapper anvendes.<\/li><li>Jeg har oprettet animationseffekterne i formen.<\/li><li>Jeg har sammen med Khalid designet beregneren.<\/li><li>Jeg har indsat en reference med gruppens navne.<\/li><li>Jeg har opsat grafikken for kaffekopper i pris-beregnerens vurdering.<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Kodeforklaring i videoformat<\/h5>\n\n\n\n<p>Som del af projektet skulle vi filme os selv forklare om en snippet fra vores l\u00f8sning som vi selv har v\u00e6ret med til at l\u00f8se. I videoen tager jeg udgangspunkt i en e-mail validator jeg har v\u00e6ret den prim\u00e6re udvikler p\u00e5.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1008\" style=\"aspect-ratio: 1920 \/ 1008;\" width=\"1920\" controls src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2020\/04\/UCL_OEDAMM19EDA_Max_Festersen_Hansen_projekt_5_kode-pr\u00e6sentation_e-mail_validering.mp4\"><\/video><figcaption>OEDAMM19EDA Max Festersen Hansen projekt 5 kode pr\u00e6sentation: e-mail validering<\/figcaption><\/figure>\n\n\n\n<p>Se de fulde video her, hvor alle gruppemedlemmer fremligger en del kode: <a href=\"https:\/\/www.youtube.com\/watch?v=wODEQDi-in4&amp;feature=youtu.be\"><a href=\"https:\/\/www.youtube.com\/watch?v=X11R_j4s7Kk&amp;feature=youtu.be\">https:\/\/www.youtube.com\/watch?v=X11R_j4s7Kk&amp;feature=youtu.be<\/a><\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Sparring med gruppemedlemmer<\/h4>\n\n\n\n<p>Vi har n\u00e6rmest dagligt afholdt morgenm\u00f8der- Til morgenm\u00f8derne starter vi med at samles, hvorefter vi gennemg\u00e5r hvad vi har lavet siden sidste m\u00f8de, hvad vi er i gang med, og hvilke opgaver der skal l\u00f8ses p\u00e5 dagen. Til dette har vi anvendt dagsprogrammer og et SCRUM-board med trello. dagsprogrammerne har v\u00e6ret oprettet i google docs, og i en periode ogs\u00e5 i trello.<\/p>\n\n\n\n<p>Vi har l\u00f8bende pr\u00e6senteret vores resultater for hinanden i vores morgenm\u00f8der. Vi har pr\u00e6senteret vores resultater og nye indsigter. Derefter har resten af gruppen givet feedback.<\/p>\n\n\n\n<p>Overordnet set var Scrum-boardet modtaget godt i i gruppen. Det blev brugt som  v\u00e6rkt\u00f8j under hele forl\u00f8bet. Signe mener at jeg har lavet Scrum-board for detaljeret og omfattende. Hun n\u00e6vnte flere gange i projektets forl\u00f8b at det var uoverskueligt og for sv\u00e6rt at forst\u00e5. Jeg begr\u00e6nsede m\u00e6ngden af opgaver fremadrettet. Dog var det ikke nok for at Signe effektivt kunne bruge Scrum-boardet. Hun mente dog at det stadig var et effektivt v\u00e6rkt\u00f8j til morgenm\u00f8derne.<\/p>\n\n\n\n<p>Mie var ikke godt bekendt med at anvende git klienter, og ville gerne vejledes i brugen af dem. Personligt er jeg tilh\u00e6nger af Sourcetree, og har stor erfaring med at anvende commandline til at arbejde med Git. Men jeg ved at skolen anbefaler Github desktop, og stort set alle MMD studerende p\u00e5 \u00e5rgangen anvender Github desktop. S\u00e5 jeg gav hende vejledning i hvordan hun kunne anvende det til at deltage i udviklingen, med branching, commits, push og pull. Mie var meget l\u00e6renem, og tog undervisningen til sig. Der var ganske f\u00e5 problemer under projektets forl\u00f8b fra Mie, og \u00f8vrige deltagere i det hele taget.<\/p>\n\n\n\n<p>Jeg har arbejdet en del sammen med Konrad og Mie for at hj\u00e6lpe dem med udviklingen af nogle JavaScript sektioner de arbejde p\u00e5 (individuelt). De har v\u00e6ret gode til at lytte og forst\u00e5, og fik udviklet det indhold de \u00f8nskede.<\/p>\n\n\n\n<p>Signe havde problemer med at implementere pointsystemet hun havde udviklet. S\u00e5 jeg overtog implementeringen. Om end jeg endte med at lave mange ting om, s\u00e5 baserede det p\u00e5 hendes oprindelige udkast.<\/p>\n\n\n\n<p>Mie var lidt nerv\u00f8s for ikke at kunne n\u00e5 pensum, s\u00e5 jeg fandt en opgave der d\u00e6kkede n\u00e6sten hele pensum, som jeg hjalp hende med at udvikle. Jeg fortalte hende hvor hun kunne finde koden, og hvordan hun kunne ops\u00e6tte det som en funktion.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Refleksioner<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">L\u00e6ring<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Dark patterns<\/h4>\n\n\n\n<p>Jeg kendte ikke til udtrykket dark patterns, f\u00f8r undervisningen derom i projekt 5. Jeg har dog undg\u00e5et dem bevidst, bare uden at kende udtrykket.<\/p>\n\n\n\n<p>Dark patterns b\u00f8r undg\u00e5s i l\u00f8sningerne. Dark patterns b\u00f8r anvendes hvis man \u00f8nsker at p\u00e5virke konversion staten, hvor der ingen morale eller lov er, eller hvor man er ligeglad. Man b\u00f8r ikke anvende dark patterns hvis man g\u00e5r op i lov og morale. Mange \u201cbest practises\u201d indeholder dark patterns, s\u00e5 man skal v\u00e6re opm\u00e6rksom p\u00e5 sine valg.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Style guide<\/h4>\n\n\n\n<p>En style guide er en samling af UI patterns som kan anvendes.<\/p>\n\n\n\n<p>Nogen mener at en designmanual er orienteret imod designere og en styleguide er mere programm\u00f8r orienteret. Men som udgangspunkt er det, det samme. De definerer begge retningslinjer for hvordan designet skal udf\u00f8res.<\/p>\n\n\n\n<p>P\u00e5 MMD uddannelsen skelnes der dog mellem designmanual og style guide. En style guide er en interaktiv platform, hvor man kan se kodestykker i aktion, og kopiere koden derfra. En designmanual er en PDF, der beskriver designregler og anvendelse.<\/p>\n\n\n\n<p>Jeg kan af erfaring sige, at i erhvervslivet bliver udtrykke ofte brugt som synonymer. En god designmanual, vil ogs\u00e5 v\u00e6re meget udf\u00f8rlig i at beskrive anvendelsen p\u00e5 webindhold.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Atomic design<\/h4>\n\n\n\n<p>Atomic design var en metode vi anvendte til at definere UI patterns anvendt p\u00e5 <a rel=\"noreferrer noopener\" href=\"https:\/\/www.houseofcode.io\/\" target=\"_blank\">houseofcode.io<\/a>.<\/p>\n\n\n\n<p>Metode indeller designelementer i 5 niveauer.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Pages &#8211; hele sider<\/li><li>Templates &#8211; sektioner p\u00e5 side<\/li><li>Organismer &#8211; snippet<\/li><li>Atomer &#8211; sektioner af snippet<\/li><li>Molekyler &#8211; grundl\u00e6ggende elementer<\/li><\/ul>\n\n\n\n<p>I praksis kan man anvende det til at definere indhold og sammens\u00e6tte prototyper.<\/p>\n\n\n\n<p>Efter at have udf\u00f8rt en atomic design nedbrydning af houseofcode.io, m\u00e5 jeg nok vurdere at der var langt mere arbejde involveret end det var v\u00e6rd. Det var alt for omfattende at bruge til at lave en styleguide ud fra til et mindre projekt som dette. Til st\u00f8rre projekter, hvor der er mere tid, kan det m\u00e5ske v\u00e6re praktisk. Det er ikke en metode jeg vil anvende igen til at nedbryde en side, hvor projektets omfang er under 3 m\u00e5neders arbejde.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Brugertests<\/h4>\n\n\n\n<p>Jeg var ekspert i A\/B testing, of arbejdede sammen med min ekspertgruppe (Emma Engel og Louise Skov). A\/B testing var forklaret lidt anderledes end mit f\u00f8rste bekendtskab med metoden. Jeg har tidligere brugt det for at argumentere for genkendelighed, hvor fokus her var at udf\u00f8re et m\u00e5l.<\/p>\n\n\n\n<p>I gruppen (gruppe 3) fremlagde emnerne vi var eksperter i. Vi gennemf\u00f8rte 4 tests p\u00e5 7 minutter, hvilket jeg syntes var lidt imponerende. Jeg faciliterede gennemgangen, og det blev hurtigt gennemf\u00f8rt.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Card sorting<\/h5>\n\n\n\n<p>Card sorting er essentielt en metode hvor man beder testpersoner tildele en r\u00e6kke emner\/titler i kategorier. Man kan bruge indsigterne til at prioritere sit indhold, f.eks. ved at se hvor hvilket indhold logisk set passer til hvilke kategorier.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">A\/B tests<\/h5>\n\n\n\n<p>A\/B test er simpel, og effektiv. Man viser 2 versioner af noget, og beder en testpersoner vurdere hvad de syntes bedst om.<\/p>\n\n\n\n<p>Metoden b\u00f8r kun anvendes til en ting, og er derfor bedst at anvende sent, og til micro \u00e6ndringer. Den blandes d\u00e5rligt med andre tests.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">First click<\/h5>\n\n\n\n<p>First click handler om at dokumentere den f\u00f8rste (fors\u00f8gte) interaktion<\/p>\n\n\n\n<p>Metoden kr\u00e6ver mange ressourcer og tid. Metoden er misledende simpel.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Think aloud<\/h5>\n\n\n\n<p>Think aloud er en metode man kan benyttes i sammens\u00e6tning med andre tests. Man beder en testperson sige sine tanker h\u00f8jt under testen, hvor man s\u00e5 s\u00f8rger for at f\u00e5 dokumenteret disse tanker.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Remote testing<\/h5>\n\n\n\n<p>Remote testing handler essentielt om at afpr\u00f8ve sine tests p\u00e5 afstand.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Neuromarketing<\/h4>\n\n\n\n<p>Neuromarketing handler om at analysere fokuspunkter, opm\u00e6rksomhed og udtryk.<\/p>\n\n\n\n<p>Gruppen sparrede med nogen klassekamerater fra A-klassen. Vi fik god feedback p\u00e5 vores resultater. De sagde vi havde g\u00e5et for meget op i det. Med andre ord m\u00e5 vi have klaret opgaven godt. Jeg mener de ligeledes var p\u00e5 niveau med os.<\/p>\n\n\n\n<p>Selve undervisningen var jeg lidt skuffet over. Jeg havde forventet at vi skulle have v\u00e6ret i Neurolap p\u00e5 UCL. Dette er selvf\u00f8lgeligt ikke muligt i den nuv\u00e6rende situation.<\/p>\n\n\n\n<p>V\u00e6rkt\u00f8jerne vi fik stillet til r\u00e5dighed var begr\u00e6nsede. De indsamlede enten utrolig f\u00f8lsomme oplysninger eller havde et st\u00e6rkt begr\u00e6nset antal brug. Det g\u00f8r at vi nok ikke kommer til at arbejde med v\u00e6rkt\u00f8jerne igen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Feedback<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Klientm\u00f8de &#8211; feedback undervejs i projektet<\/h4>\n\n\n\n<p>House of code blev pr\u00e6senteret for en hi-fi prototype i XD, og et udvalg af vores testresultater og research.<\/p>\n\n\n\n<p>Til vores f\u00f8rste klient m\u00f8de, fik vi den feedback at det var fint at arbejde mobile first, men de ville helst se desktop prototyper. House of Code fokuserer prim\u00e6rt p\u00e5 desktop, og vil helst se desktop l\u00f8sninger. Fra det m\u00f8de og fremadrettet, arbejder vi med desktop versionen som fokus. Koden bliver dog arbejdet med mobile first i mente, i det omfang den enkelte udvikler kan.<\/p>\n\n\n\n<p>House of Code br\u00f8d sig ikke om konkrete estimater, eller feedback p\u00e5 hvor omfattende en app kunne v\u00e6re. De mente at en potentiel kunde kunne v\u00e6re skr\u00e6mt af at f\u00e5 at vide at deres l\u00f8sning var omfattende, hvor de i dialog ikke ville have det problem.<\/p>\n\n\n\n<p>House of Code mente ogs\u00e5 at flere form felter var ogs\u00e5 potentielt vildledende for deres kunder.<\/p>\n\n\n\n<p>Med de tilbagemeldelser \u00e6ndrede vi vores l\u00f8sning til at i prototyperne at have en desktop first tilgang. Vi \u00e6ndrede fremgangen og planl\u00e6gningen p\u00e5 pris-beregneren, s\u00e5ledes at den var mindre omfattende (f\u00e6rre sp\u00f8rgsm\u00e5l og ingen sv\u00e6re sp\u00f8rgsm\u00e5l). Den ville ikke l\u00e6ngere udtrykkeligt vurdere omfanget af l\u00f8sninger. I stedet vurderer den nu i arbejdsomfanget abstrakt med m\u00e6ngde af kaffe der skal drikkes dagligt.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Card sorting<\/h4>\n\n\n\n<p>Card sorting blev gennemf\u00f8res i trello. <a rel=\"noreferrer noopener\" href=\"https:\/\/trello.com\/b\/isKJ1Iqz\/cardsorting-ia-house-of-code\" target=\"_blank\">Test resultaterne kan ses her<\/a>.<\/p>\n\n\n\n<p>Vi fandt frem til at 14\/15 testpersoner var enige omkring at pris-beregneren tematisk mest ville give mening at have liggende p\u00e5 side &#8220;02 Det tilbyder vi&#8221;. 1 testperson \u00f8nskede ikke at udf\u00f8re testen, da denne mente at den s\u00e5 for omfattende ud.<\/p>\n\n\n\n<p>Card sorting og resultaterne deraf kan ses p\u00e5 side 8 i plakater.<\/p>\n\n\n\n<p>Med et godt grundlag for hvor siden tematisk bedst passer ind, har vi kunne illustrere vores Informationsarkitektur p\u00e5 et grundlag.<\/p>\n\n\n\n<p>Nogen testpersoner kan m\u00e5ske f\u00f8le sig overv\u00e6ldet af information, s\u00e5 m\u00e5ske kan bel\u00f8nninger og forventningsafstemninger fremafrettet anvendes for at forhindre at testpersoner ikke gennemf\u00f8rer udf\u00f8relsen af opgaver.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Usability-test<\/h4>\n\n\n\n<p>I usability tests fandt vi frem til at vi i vores f\u00f8rste test havde stillet et for ledende sp\u00f8rgsm\u00e5l, som brugeren ikke kunne udf\u00f8re. I fremtidige tests stillede vi mindre ledende sp\u00f8rgsm\u00e5l, og alle disse brugere gennemf\u00f8rte testen.<\/p>\n\n\n\n<p>Vi fandt frem til at brugere p\u00e5 nuv\u00e6rende tidspunkt godt kunne finde ud af at kontakte House of Code om priser for udvikling. Af det kunne vi udlede at vi i vores l\u00f8sning havde brug for mere end blot en formular.<\/p>\n\n\n\n<p>Det var meningen at vi ville udf\u00f8re den samme test for den interaktive prototype, men dette blev ikke realiseret pga. manglende tid og ressourcer efter at den den interaktive prototype var udviklet til et stadie hvor den var klar til tests.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Interview &amp; sp\u00f8rgeskema<\/h4>\n\n\n\n<p>Interview&#8217;et var problemfrit. Vi fandt dog ingen kritiske indsigter.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Pr\u00e6sentation og feedback p\u00e5 findings i digital \u00e6stik<\/h4>\n\n\n\n<p>Jeg pr\u00e6senterede vores resultater meget kort under en freml\u00e6ggelse for en lille online forsamling. Jeg syntes ikke selv jeg havde noget interessant at sige, s\u00e5 jeg pr\u00f8vede at holde det kort og konkret. Det tog under 1 minut.<\/p>\n\n\n\n<p>Feedback p\u00e5 pr\u00e6sentationen var mest stille. Jeg fik ikke dokumenteret den n\u00f8jagtige feedback, men det var noget ligende at det s\u00e5 fint ud.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vurdering af potentielle forbedringer<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Potentielle forbedringer I forhold til projektbeskrivelsen<\/h4>\n\n\n\n<p>1 krav fra projektbeskrivelsen blev ikke overholdt.<\/p>\n\n\n\n<p>Det var et krav at udvikle flere undersider, men vi endte med kun at have en enkelt side. Vi tog dette valg bevidst, fordi der i casebeskrivelsen var skrevet at der var \u00f8nsket en landingpage.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Potentielle forbedringer I forhold til casebeskrivelsen<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Den interaktive prototype er ikke optimeret til at blive integreret i wordpress p\u00e5 nuv\u00e6rende tidspunkt.<\/li><li>E-mailen der skrives til er ikke opsat til infohouseofcode.io af 2 grunde. 1 det er en ugyldig e-mail. 2 vi besluttede os for i vores opgave endnu kun at anvende vores egen e-mail, for ikke at give indtrykket af at l\u00f8sningen er officiel.<\/li><li>Den interaktive prototype er ikke responsive. Den kunne havde v\u00e6ret optimeret bedre til mobile enheder, is\u00e6r taget i betragtning af at vi har arbejdet mobile first.<\/li><li>Form\u00e5let med opgaven er at hj\u00e6lpe potentielle kunder med at finde information de mangler prisen p\u00e5 ap. Den interaktive prototype fort\u00e6ller ikke noget konkret om prisen p\u00e5 app udvikling.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Potentielle forbedringer i forhold til MMD uddannelsen<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Den interaktive prototype har ikke haft et stort fokus p\u00e5 SEO.<\/li><li>Den interaktive prototype blev ikke testet med en brugertest, om end det var planen.<\/li><li>I de brugertest der er blevet udf\u00f8rt l\u00f8bende, er m\u00e5lgruppen oftest ikke blevet testet. Det kan prim\u00e6rt tilskrives at det har v\u00e6ret sv\u00e6rt at n\u00e5 ud til m\u00e5lgruppen pga. de s\u00e6rlige omst\u00e6ndigheder.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Forl\u00f8bet, som helhed<\/h3>\n\n\n\n<p>I l\u00f8bet af forl\u00f8bet har det v\u00e6ret problematisk at have god kommunikation. Vi har l\u00f8bende oplevet at der var st\u00f8j p\u00e5 linjen. Da vi alle sider i vores hjem, er der forskellige st\u00f8jkilder vi ikke havde meget indflydelse p\u00e5, men ogs\u00e5 nogle der ikke var forventet.<\/p>\n\n\n\n<p>Vi oplevede at der blev lagt kabler ude foran en af medlemmernes hjem, hvilket gav meget arbejdst\u00f8j, som ikke kunne p\u00e5virkes. Hos mig har familien v\u00e6ret en stor st\u00f8jkilde, da jeg ofte har m\u00e5tte v\u00e6re n\u00f8dsaget til at sidde i \u00e5bne rum, hvor der er hverdagst\u00f8j fra de andre beboere i husstanden. Andre har haft lignende problemer. Undervejs har vi oplevet andre tekniske problemer. Mit headset og min mikrofon gik i stykker undervejs, og ringere udstyr m\u00e5tte anvendes, indtil en erstatning blev k\u00f8bt.<\/p>\n\n\n\n<p>Internetforbindelse har nogen gange v\u00e6ret vanskeligt. Jeg oplevede at min internetforbindelse gik komplet ned kort f\u00f8r vores f\u00f8rste klientm\u00f8de. Min gruppe m\u00e5tte gennemf\u00f8re m\u00f8det uden mig. Flere i gruppen havde til tider d\u00e5rlig forbindelse, og har m\u00e5tte undv\u00e6re at deltage i f\u00e6lles dialog i perioder.<\/p>\n\n\n\n<p>Mine muligheder for at teste l\u00f8sninger har v\u00e6ret meget begr\u00e6nset. Vi har bedst kunne teste p\u00e5 os selv, og hinanden. Men vi er bias, og indsigterne vi kan f\u00e5 er meget begr\u00e6nsede. Vi har l\u00f8bende testet p\u00e5 familie. Personligt har min familie i husstanden ikke haft meget tid til at deltage. Ofte har jeg m\u00e5tte n\u00f8jes med at finde indsigterne fra pilot tests. Vi har fors\u00f8gt at afholde nogle online interview, men ingen har meldt tilbage p\u00e5 foresp\u00f8rgslerne.<\/p>\n\n\n\n<p>Jeg har l\u00e6rt at jeg fremadrettet skal v\u00e6re opm\u00e6rksom p\u00e5 ikke at overtage opgaver, og give plads til at andre kan udvikle sig.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Til dette projekt var det muligt at v\u00e6lge mellem 3 opgaver. Alle opgaver gik ud p\u00e5 at designe og programmere en digital l\u00f8sning, hvor der er s\u00e6rligt fokus p\u00e5 anvendelse af centrale metoder til udvikling og test af brugergr\u00e6nsefladen for at sikre en god brugeroplevelse. Der er derfor s\u00e6rligt fokus p\u00e5 tests og testresultater. Indledende&#8230;<\/p>\n","protected":false},"author":3,"featured_media":1303,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[28,18,24],"class_list":["post-1296","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hjemmesider","tag-house-of-code","tag-mmd","tag-mmd-projekt"],"_links":{"self":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/1296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/comments?post=1296"}],"version-history":[{"count":55,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/1296\/revisions"}],"predecessor-version":[{"id":1378,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/1296\/revisions\/1378"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media\/1303"}],"wp:attachment":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media?parent=1296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/categories?post=1296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/tags?post=1296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}