{"id":1109,"date":"2026-05-02T13:01:30","date_gmt":"2026-05-02T13:01:30","guid":{"rendered":"https:\/\/itdd.au.dk\/single-user-mode\/?page_id=1109"},"modified":"2026-05-05T14:34:49","modified_gmt":"2026-05-05T14:34:49","slug":"prototyper","status":"publish","type":"page","link":"https:\/\/itdd.au.dk\/single-user-mode\/prototyper\/","title":{"rendered":"Prototyper og mockups"},"content":{"rendered":"\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-post-date\"><time datetime=\"2026-05-02T13:13:32.114Z\">maj 2, 2026<\/time><\/div>\n\n<h2 class=\"wp-block-post-title\">Prototyper og mockups<\/h2><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>I denne fase arbejder jeg med enkle mockups som afpr\u00f8vningsmateriale. De er ikke f\u00e6rdige l\u00f8sninger, men midlertidige forslag, som jeg kan bruge til at tale med andre om ankomsten til \u00c1 handil.<\/p>\n\n\n\n<p>Mit projekt handler om, hvordan bes\u00f8gende uden lokalkendskab lettere kan finde butikken, genkende den og f\u00f8le sig trygge ved at g\u00e5 ind.<\/p>\n\n\n\n<p>Jeg arbejder derfor videre med denne k\u00e6de:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Find stedet \u2192 genkend butikken \u2192 f\u00f8l dig tryg ved at g\u00e5 ind<\/strong><\/p>\n<\/blockquote>\n\n\n\n<p>Jeg har tidligere lavet mere f\u00e6rdige HTML-prototyper og skilteforslag, fordi de hjalp med at g\u00f8re id\u00e9en konkret. Men jeg har ogs\u00e5 erfaret, at de hurtigt kan komme til at virke mere afsluttede, end de egentlig er, og dermed begr\u00e6nse den \u00e5bne feedback.<\/p>\n\n\n\n<p>Derfor bruger jeg nu enklere mockups, som tydeligere viser, at projektet stadig er under udvikling. De skal g\u00f8re det lettere for andre at komme med kritik, sp\u00f8rgsm\u00e5l og \u00e6ndringsforslag.<\/p>\n\n\n\n<p>Efter denne iteration vil jeg vurdere, om HTML-prototyperne skal justeres, forenkles eller droppes.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">M1: Kort med markeringer<\/h2>\n\n\n\n<p>Den f\u00f8rste mockup er et kort over ankomsten til \u00c1 handil.<\/p>\n\n\n\n<p>P\u00e5 kortet markerer jeg de steder, hvor bes\u00f8gende kan blive i tvivl eller have brug for st\u00f8tte. Det kan fx v\u00e6re ved kortet i bygden, ved vejen mod butikken, t\u00e6ttere p\u00e5 omr\u00e5det og ved indgangen.<\/p>\n\n\n\n<p>Mockuppen skal hj\u00e6lpe mig med at sp\u00f8rge:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hvor opst\u00e5r der tvivl i ankomsten?<\/li>\n\n\n\n<li>Hvor giver det mening at placere st\u00f8tte?<\/li>\n\n\n\n<li>Er der brug for skilte, markeringer eller noget andet?<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">M2: QR-plakat ved indgangen<\/h2>\n\n\n\n<p>Den anden mockup er en enkel QR-plakat med teksten:<\/p>\n\n\n\n<p><strong>Ny her?<\/strong><\/p>\n\n\n\n<p>Plakaten er t\u00e6nkt som et frivilligt supplement ved indgangen. Den skal ikke forklare alt eller g\u00f8re butikken til en turistattraktion. Den skal bare give bes\u00f8gende mulighed for at f\u00e5 et lille f\u00f8rste indblik, hvis de er usikre.<\/p>\n\n\n\n<p>Mockuppen skal hj\u00e6lpe mig med at unders\u00f8ge:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>F\u00f8les QR-plakaten naturlig ved indgangen?<\/li>\n\n\n\n<li>Er teksten \u201cNy her?\u201d venlig og forst\u00e5elig?<\/li>\n\n\n\n<li>Virker plakaten hj\u00e6lpsom eller un\u00f8dvendig?<\/li>\n\n\n\n<li>Bliver den for turistet?<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">M3: Simpel QR-side<\/h2>\n\n\n\n<p>Den tredje mockup er en simpel mobilside, som QR-koden kan f\u00f8re til.<\/p>\n\n\n\n<p>Siden viser kun det mest n\u00f8dvendige:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>billede af facaden<\/li>\n\n\n\n<li>\u00e5bningstider<\/li>\n\n\n\n<li>kort tekst om butikken<\/li>\n\n\n\n<li>\u201cSp\u00f8rg os gerne\u201d<\/li>\n\n\n\n<li>link til tilbudsblad<\/li>\n\n\n\n<li>link til \u00c1 handils hjemmeside<\/li>\n<\/ul>\n\n\n\n<p>Form\u00e5let er at unders\u00f8ge, hvor lidt information der egentlig er nok. Siden skal st\u00f8tte det f\u00f8rste m\u00f8de med butikken, ikke overtage det.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">M4: Mikrotest af ord og tone<\/h2>\n\n\n\n<p class=\"has-medium-font-size\">Som et mindre delspor har jeg lavet et simpelt sprogtjek-v\u00e6rkt\u00f8j, hvor udvalgte formuleringer fra QR-siden kan kommenteres og rettes p\u00e5 tv\u00e6rs af sprog. Form\u00e5let er ikke at teste en ny hovedl\u00f8sning, men at unders\u00f8ge om designets korte tekster lyder naturlige, venlige og stedssvarende.<\/p>\n\n\n\n<p>Det er is\u00e6r relevant, fordi ordene i designet skal st\u00f8tte bes\u00f8gende uden lokalkendskab uden at g\u00f8re \u00c1 handil til en turistattraktion. M4 bruges derfor som et lille procesv\u00e6rkt\u00f8j til at kvalificere mikrocopyen i M2 og M3.<\/p>\n\n\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Plan for afpr\u00f8vning<\/h2>\n\n\n\n<p>Jeg vil bruge mockupperne som samtaleobjekter.<\/p>\n\n\n\n<p>F\u00f8rst vil jeg vise dem til bestyrer og medarbejder. Her vil jeg is\u00e6r sp\u00f8rge til placering, praktisk brug og om id\u00e9erne passer til \u00c1 handils hverdag.<\/p>\n\n\n\n<p>Derefter vil jeg vise dem til personer uden lokalkendskab. Her vil jeg unders\u00f8ge, om mockupperne giver mening for nogen, der m\u00f8der stedet for f\u00f8rste gang.<\/p>\n\n\n\n<p>Jeg vil ogs\u00e5 gerne sp\u00f8rge min tidligere go-along-deltager igen, fordi han allerede har oplevet, hvor sv\u00e6rt det kan v\u00e6re at finde butikken. Samtidig vil jeg gerne sp\u00f8rge mindst \u00e9n ny person udefra, s\u00e5 jeg ikke kun bygger videre p\u00e5 \u00e9n oplevelse.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Hvad jeg vil unders\u00f8ge<\/h2>\n\n\n\n<p>Jeg vil is\u00e6r unders\u00f8ge:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Sp\u00f8rgsm\u00e5l<\/th><th>Hvorfor?<\/th><\/tr><\/thead><tbody><tr><td>Hvor i ankomsten opst\u00e5r der mest tvivl?<\/td><td>For at finde de vigtigste st\u00f8ttepunkter<\/td><\/tr><tr><td>F\u00f8les QR-plakaten naturlig?<\/td><td>For at vurdere om den digitale del giver mening<\/td><\/tr><tr><td>Hvilken information er n\u00f8dvendig?<\/td><td>For at holde QR-siden enkel<\/td><\/tr><tr><td>Passer tonen til \u00c1 handil?<\/td><td>For at undg\u00e5 et for turistet udtryk<\/td><\/tr><tr><td>Skal HTML-prototypen revideres eller droppes?<\/td><td>For ikke at l\u00e5se mig fast for tidligt<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">N\u00e6ste skridt<\/h2>\n\n\n\n<p>Efter afpr\u00f8vningen samler jeg empirien p\u00e5 siden <strong>Deliver<\/strong>.<\/p>\n\n\n\n<p>Her vil jeg vise, hvad deltagerne reagerede p\u00e5, og hvordan deres feedback p\u00e5virker n\u00e6ste version af designet.<\/p>\n\n\n\n<p>Det kan f\u00f8re til, at jeg:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>reviderer kortet og st\u00f8ttepunkterne<\/li>\n\n\n\n<li>justerer QR-plakaten<\/li>\n\n\n\n<li>forenkler QR-siden<\/li>\n\n\n\n<li>reviderer eller dropper HTML-prototyperne<\/li>\n\n\n\n<li>udvikler mere konkrete skilteforslag<\/li>\n<\/ul>\n\n\n\n<p>P\u00e5 nuv\u00e6rende tidspunkt er det vigtigste ikke at have en f\u00e6rdig l\u00f8sning, men at unders\u00f8ge, hvad der faktisk giver mening i praksis.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-style-default is-layout-flow wp-block-column-is-layout-flow\" style=\"border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Mockups-1024x768.png\" alt=\"\" class=\"wp-image-1189\" srcset=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Mockups-1024x768.png 1024w, https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Mockups-300x225.png 300w, https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Mockups-768x576.png 768w, https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Mockups.png 1448w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Mockups som samtaleobjekter<\/h2>\n\n\n\n<p>Mockupperne viser ikke en f\u00e6rdig l\u00f8sning, men fire m\u00e5der at unders\u00f8ge designretningen p\u00e5. Hver mockup fokuserer p\u00e5 et bestemt led i ankomsten til \u00c1 handil: at finde stedet, genkende butikken, f\u00f8le sig tryg ved at g\u00e5 ind og forst\u00e5 tonen i de korte tekster.<\/p>\n\n\n\n<p>De skal bruges som samtaleobjekter i den n\u00e6ste afpr\u00f8vning. Form\u00e5let er at f\u00e5 reaktioner, kritik og forslag, f\u00f8r designet bliver mere f\u00e6rdigt.<\/p>\n\n\n\n<p>Derfor er mockupperne bevidst enkle og \u00e5bne for \u00e6ndringer.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>M1: Kort med markeringer<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/itdd.au.dk\/single-user-mode\/?attachment_id=1112\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"585\" src=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Unavngivet-4-3-1024x585.png\" alt=\"\" class=\"wp-image-1112\" srcset=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Unavngivet-4-3-1024x585.png 1024w, https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Unavngivet-4-3-300x171.png 300w, https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Unavngivet-4-3-768x439.png 768w, https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Unavngivet-4-3-1536x878.png 1536w, https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Unavngivet-4-3-2048x1170.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>M2: QR-plakat ved indgangen<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69fa2e773265a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69fa2e773265a\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Mockup_qr-plakat-792x1024.png\" alt=\"\" class=\"wp-image-1111\" srcset=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Mockup_qr-plakat-792x1024.png 792w, https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Mockup_qr-plakat-232x300.png 232w, https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Mockup_qr-plakat-768x993.png 768w, https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/Mockup_qr-plakat.png 1103w\" sizes=\"auto, (max-width: 792px) 100vw, 792px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Forst\u00f8r\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>M3: Simpel QR-side (draw.io)<\/p>\n\n\n\n<div style=\"max-width:900px; margin:28px auto; padding:0 12px;\">\n  <div style=\"border:1px solid rgba(0,0,0,0.12); overflow:hidden; background:#f7f7f7; box-shadow:0 8px 22px rgba(0,0,0,0.06);\">\n    <iframe loading=\"lazy\" \n      src=\"https:\/\/drive.google.com\/file\/d\/1x3kDLzzFnGrw4o-cQBWxWKCjptOEZwBo\/preview\" \n      width=\"100%\" \n      height=\"480\" \n      style=\"border:0; display:block;\" \n      allow=\"autoplay\">\n    <\/iframe>\n  <\/div>\n<\/div>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>M4: Mikrotest af ord og tone<\/p>\n\n\n\n<div style=\"width:100%; margin:24px 0; overflow:hidden; background:#ffffff;\">\n  <iframe\n    src=\"https:\/\/katof.github.io\/Ord-ord-ord\/ret.html\"\n    width=\"100%\"\n    height=\"500\"\n    style=\"border:0; display:block; background:#ffffff;\"\n    loading=\"lazy\">\n  <\/iframe>\n<\/div>\n\n\n\n<p class=\"has-small-font-size\">Link til <strong>M4, sprogtjek-v\u00e6rkt\u00f8j<\/strong> p\u00e5 Github: <a href=\"https:\/\/katof.github.io\/Ord-ord-ord\/ret.html\">https:\/\/katof.github.io\/Ord-ord-ord\/ret.html<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@600;700&#038;family=Patrick+Hand&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n  .postit-wrap {\n    padding: 0 28px;\n  }\n\n  .postit-row {\n    display: flex;\n    gap: 22px;\n    align-items: flex-start;\n    flex-wrap: wrap;\n  }\n\n  .floating-postit {\n    position: relative;\n    display: inline-block;\n    width: 118px;\n    min-height: 138px;\n    padding: 18px 14px 14px;\n    border: 0;\n    border-radius: 2px;\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n    color: #111 !important;\n    box-shadow:\n      0 10px 14px rgba(0,0,0,0.17),\n      5px 7px 10px rgba(0,0,0,0.09);\n    transition: transform 0.18s ease, box-shadow 0.18s ease;\n    overflow: visible;\n    background: none;\n    font: inherit;\n  }\n\n  .floating-postit:hover {\n    transform: translateY(-2px);\n    box-shadow:\n      0 14px 18px rgba(0,0,0,0.19),\n      7px 10px 12px rgba(0,0,0,0.11);\n  }\n\n  .floating-postit.note-yellow {\n    background: linear-gradient(182deg, #f7e45d 0%, #efd429 100%);\n  }\n\n  .floating-postit.note-red {\n    background: linear-gradient(179deg, #ff5a45 0%, #f83824 100%);\n  }\n\n  .floating-postit.note-orange {\n    background: linear-gradient(181deg, #ffab46 0%, #f58a11 100%);\n  }\n\n  .floating-postit.note-blue {\n    background: linear-gradient(181deg, #74c7ff 0%, #2f97f5 100%);\n  }\n\n  .floating-postit::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n      linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.02) 28%, rgba(0,0,0,0.03) 100%),\n      radial-gradient(circle at 18% 24%, rgba(255,255,255,0.10) 0, transparent 18%),\n      radial-gradient(circle at 78% 70%, rgba(0,0,0,0.04) 0, transparent 20%);\n    pointer-events: none;\n    opacity: 0.8;\n  }\n\n  .floating-postit::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    right: 13px;\n    width: 24px;\n    height: 21px;\n    background: linear-gradient(135deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.12) 70%);\n    clip-path: polygon(0 0, 100% 0, 100% 100%);\n    opacity: 0.88;\n  }\n\n  .floating-postit:nth-child(1) { transform: rotate(-1.4deg); }\n  .floating-postit:nth-child(2) { transform: rotate(1.2deg); }\n  .floating-postit:nth-child(3) { transform: rotate(-0.8deg); }\n  .floating-postit:nth-child(4) { transform: rotate(1deg); }\n\n  .floating-postit:nth-child(1):hover,\n  .floating-postit:nth-child(2):hover,\n  .floating-postit:nth-child(3):hover,\n  .floating-postit:nth-child(4):hover {\n    transform: translateY(-2px) rotate(0deg);\n  }\n\n  .floating-postit .pin {\n    position: absolute;\n    top: -8px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background: radial-gradient(circle at 35% 35%, #ff8d8d 0%, #cf1010 58%, #850000 100%);\n    box-shadow:\n      0 2px 2px rgba(0,0,0,0.22),\n      inset -1px -2px 2px rgba(0,0,0,0.24);\n    z-index: 3;\n  }\n\n  .floating-postit .pin::after {\n    content: \"\";\n    position: absolute;\n    top: 11px;\n    left: 6px;\n    width: 2px;\n    height: 18px;\n    background: linear-gradient(180deg, rgba(75,75,75,0.9), rgba(170,170,170,0.4));\n    transform: rotate(31deg);\n    transform-origin: top center;\n    border-radius: 2px;\n    z-index: -1;\n  }\n\n  .floating-postit strong {\n    display: block;\n    margin-top: 10px;\n    margin-bottom: 8px;\n    font-family: \"Caveat\", cursive !important;\n    font-size: 1.35rem;\n    line-height: 0.95;\n    font-weight: 700;\n    color: #111 !important;\n    position: relative;\n    z-index: 1;\n  }\n\n  .floating-postit span.text {\n    display: block;\n    font-family: \"Patrick Hand\", cursive !important;\n    font-size: 1rem;\n    line-height: 1.15;\n    color: #111 !important;\n    position: relative;\n    z-index: 1;\n  }\n\n  .focus-modal {\n    position: fixed;\n    inset: 0;\n    width: 100vw;\n    height: 100vh;\n    z-index: 999999;\n    display: none;\n    background: rgba(24, 18, 13, 0.84);\n    backdrop-filter: blur(4px);\n    -webkit-backdrop-filter: blur(4px);\n  }\n\n  .focus-modal.active {\n    display: block;\n  }\n\n  .focus-controls {\n    position: fixed;\n    top: 18px;\n    right: 18px;\n    z-index: 1000001;\n    display: flex;\n    gap: 10px;\n  }\n\n  .focus-btn {\n    width: 46px;\n    height: 46px;\n    border: 0;\n    border-radius: 999px;\n    background: rgba(47, 42, 37, 0.92);\n    color: #fff !important;\n    font-size: 1.2rem;\n    line-height: 1;\n    cursor: pointer;\n    box-shadow: 0 6px 14px rgba(0,0,0,0.18);\n  }\n\n  .focus-btn:hover {\n    background: #000;\n  }\n\n  .focus-panel-wrap {\n    position: fixed;\n    inset: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 84px 28px 32px;\n    background: #f6f1e8;\n  }\n\n  .focus-panel {\n    width: 100%;\n    max-width: 980px;\n    margin: 0 auto;\n  }\n\n  .focus-title {\n    margin: 0 0 14px;\n    font-family: \"Caveat\", cursive !important;\n    font-size: clamp(2.2rem, 4vw, 3.1rem);\n    line-height: 0.95;\n    color: #24180f !important;\n  }\n\n  .focus-intro {\n    display: inline-block;\n    margin: 0 0 22px;\n    padding: 12px 15px;\n    background: #fff6a8;\n    color: #111 !important;\n    box-shadow: 0 8px 14px rgba(0,0,0,0.16);\n    font-family: \"Patrick Hand\", cursive !important;\n    font-size: 1rem;\n    line-height: 1.34;\n    max-width: 760px;\n  }\n\n  .focus-grid {\n    display: grid;\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n    gap: 14px;\n  }\n\n  .focus-note {\n    min-height: 0;\n    padding: 14px 13px;\n    box-shadow: 0 8px 12px rgba(0,0,0,0.14);\n    color: #111 !important;\n    position: relative;\n  }\n\n  .focus-note::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.03) 100%);\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .focus-note.yellow { background: #f7de3a; }\n  .focus-note.red    { background: #ff5542; }\n  .focus-note.orange { background: #ff9a2f; }\n  .focus-note.blue   { background: #7dcbff; }\n  .focus-note.green  { background: #98e88a; }\n\n  .focus-note h3 {\n    margin: 0 0 8px;\n    font-family: \"Caveat\", cursive !important;\n    font-size: 1.34rem;\n    line-height: 0.95;\n    color: #111 !important;\n    position: relative;\n    z-index: 1;\n  }\n\n  .focus-note p,\n  .focus-note li {\n    margin: 0;\n    font-family: \"Patrick Hand\", cursive !important;\n    font-size: 0.98rem;\n    line-height: 1.2;\n    color: #111 !important;\n    position: relative;\n    z-index: 1;\n  }\n\n  .focus-note ul {\n    margin: 4px 0 0 16px;\n    padding: 0;\n    position: relative;\n    z-index: 1;\n  }\n\n  .focus-note li + li {\n    margin-top: 4px;\n  }\n\n  .span-4 { grid-column: span 4; }\n  .span-5 { grid-column: span 5; }\n  .span-7 { grid-column: span 7; }\n  .span-12 { grid-column: span 12; }\n\n  @media (max-width: 980px) {\n    .focus-grid {\n      grid-template-columns: repeat(6, minmax(0, 1fr));\n    }\n\n    .span-12, .span-7, .span-5, .span-4 {\n      grid-column: span 6;\n    }\n  }\n\n  @media (max-width: 700px) {\n    .postit-wrap {\n      padding: 0 14px;\n    }\n\n    .postit-row {\n      gap: 14px;\n    }\n\n    .floating-postit {\n      width: 102px;\n      min-height: 122px;\n      padding: 16px 12px 12px;\n      transform: none !important;\n    }\n\n    .floating-postit strong {\n      font-size: 1.15rem;\n    }\n\n    .floating-postit span.text {\n      font-size: 0.9rem;\n    }\n\n    .focus-controls {\n      top: 10px;\n      right: 10px;\n      gap: 8px;\n    }\n\n    .focus-btn {\n      width: 40px;\n      height: 40px;\n    }\n\n    .focus-panel-wrap {\n      padding: 68px 14px 18px;\n    }\n\n    .focus-grid {\n      grid-template-columns: 1fr;\n      gap: 14px;\n    }\n\n    .span-12, .span-7, .span-5, .span-4 {\n      grid-column: span 1;\n    }\n  }\n<\/style>\n\n<div class=\"postit-wrap\">\n  <div class=\"postit-row\">\n    <a\n      class=\"floating-postit note-yellow\"\n      href=\"\/single-user-mode\/infoboard\/\"\n      aria-label=\"\u00c5bn mit board\">\n      <span class=\"pin\"><\/span>\n      <strong>Mit board<\/strong>\n      <span class=\"text\">Spor, fund<br>og problemfelt<\/span>\n    <\/a>\n\n    <a\n      class=\"floating-postit note-red\"\n      href=\"https:\/\/karina.getoutline.com\/s\/06b7b21b-5a9d-4390-a152-5f05672b8869\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      aria-label=\"\u00c5bn opgaven i Outline\">\n      <span class=\"pin\"><\/span>\n      <strong>Opgaven<\/strong>\n      <span class=\"text\">L\u00e6s projektet<br>i Outline<\/span>\n    <\/a>\n\n    <button class=\"floating-postit note-orange\" id=\"openFocusNote\" type=\"button\" aria-label=\"\u00c5bn fokus nu\">\n      <span class=\"pin\"><\/span>\n      <strong>Fokus nu<\/strong>\n      <span class=\"text\">Mockups<br>og afpr\u00f8vning<\/span>\n    <\/button>\n\n    <a\n      class=\"floating-postit note-blue\"\n      href=\"https:\/\/miro.com\/app\/board\/uXjVJnyZ7HM=\/?share_link_id=214567468654\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      aria-label=\"\u00c5bn Miro board\">\n      <span class=\"pin\"><\/span>\n      <strong>Miro<\/strong>\n      <span class=\"text\">Proces, id\u00e9er<br>og sammenh\u00e6nge<\/span>\n    <\/a>\n  <\/div>\n<\/div>\n\n<div class=\"focus-modal\" id=\"focusModal\" aria-hidden=\"true\">\n  <div class=\"focus-controls\">\n    <button class=\"focus-btn\" id=\"closeFocusNote\" type=\"button\" aria-label=\"Luk\">\u00d7<\/button>\n  <\/div>\n\n  <div class=\"focus-panel-wrap\">\n    <div class=\"focus-panel\">\n      <h2 class=\"focus-title\">Fokus nu<\/h2>\n\n      <div class=\"focus-intro\">\n        I prototypefasen arbejder jeg med enkle mockups som afpr\u00f8vningsmateriale.\n        De skal ikke vise f\u00e6rdige l\u00f8sninger, men bruges til at unders\u00f8ge, hvad der giver mening i praksis.\n      <\/div>\n\n      <div class=\"focus-grid\">\n        <article class=\"focus-note red span-5\">\n          <h3>Hovedfokus<\/h3>\n          <p>\n            Hvordan kan ankomsten til \u00c1 handil g\u00f8res mere l\u00e6sbar for bes\u00f8gende uden lokalkendskab?\n          <\/p>\n        <\/article>\n\n        <article class=\"focus-note blue span-7\">\n          <h3>Mockups lige nu<\/h3>\n          <ul>\n            <li>M1: Kort med mulige st\u00f8ttepunkter<\/li>\n            <li>M2: QR-plakat ved indgangen<\/li>\n            <li>M3: Simpel QR-side<\/li>\n            <li>M4: Mikrotest af ord og tone<\/li>\n          <\/ul>\n        <\/article>\n\n        <article class=\"focus-note orange span-4\">\n          <h3>Afpr\u00f8ves med<\/h3>\n          <p>\n            Bestyrer, medarbejder og bes\u00f8gende udefra.\n          <\/p>\n        <\/article>\n\n        <article class=\"focus-note green span-4\">\n          <h3>Skal unders\u00f8ge<\/h3>\n          <p>\n            Placering, tone, forst\u00e5elighed og om digital st\u00f8tte overhovedet er n\u00f8dvendig.\n          <\/p>\n        <\/article>\n\n        <article class=\"focus-note yellow span-4\">\n          <h3>N\u00e6ste skridt<\/h3>\n          <p>\n            Bruge feedbacken til at revidere, forenkle eller droppe HTML-prototyperne.\n          <\/p>\n        <\/article>\n\n        <article class=\"focus-note red span-12\">\n          <h3>Vigtigt valg<\/h3>\n          <p>\n            Jeg venter med f\u00e6rdige skilte og HTML-versioner, indtil jeg har afpr\u00f8vet mockupperne og f\u00e5et feedback.\n          <\/p>\n        <\/article>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  (function () {\n    const openFocusNote = document.getElementById(\"openFocusNote\");\n    const focusModal = document.getElementById(\"focusModal\");\n    const closeFocusNote = document.getElementById(\"closeFocusNote\");\n\n    if (!openFocusNote || !focusModal || !closeFocusNote) return;\n\n    function openFocusModal() {\n      focusModal.classList.add(\"active\");\n      focusModal.setAttribute(\"aria-hidden\", \"false\");\n      document.documentElement.style.overflow = \"hidden\";\n      document.body.style.overflow = \"hidden\";\n    }\n\n    function closeFocusModal() {\n      focusModal.classList.remove(\"active\");\n      focusModal.setAttribute(\"aria-hidden\", \"true\");\n      document.documentElement.style.overflow = \"\";\n      document.body.style.overflow = \"\";\n    }\n\n    openFocusNote.addEventListener(\"click\", openFocusModal);\n    closeFocusNote.addEventListener(\"click\", closeFocusModal);\n\n    focusModal.addEventListener(\"click\", function (e) {\n      if (e.target === focusModal) {\n        closeFocusModal();\n      }\n    });\n\n    document.addEventListener(\"keydown\", function (e) {\n      if (e.key === \"Escape\" && focusModal.classList.contains(\"active\")) {\n        closeFocusModal();\n      }\n    });\n  })();\n<\/script>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\t<div id=\"respond\" class=\"comment-respond wp-block-post-comments-form\">\n\t\t<h3 id=\"reply-title\" class=\"comment-reply-title\">Skriv et svar <small><a rel=\"nofollow\" id=\"cancel-comment-reply-link\" href=\"\/single-user-mode\/wp-json\/wp\/v2\/pages\/1109#respond\" style=\"display:none;\">Annuller svar<\/a><\/small><\/h3><p class=\"must-log-in\">Du skal v\u00e6re <a href=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-login.php?redirect_to=https%3A%2F%2Fitdd.au.dk%2Fsingle-user-mode%2Fprototyper%2F\">logget ind<\/a> for at skrive en kommentar.<\/p>\t<\/div><!-- #respond -->\n\t\n\n\n<div class=\"wp-block-comments\">\n\n\n\n\n\n\n<style>\n  .wp-block-post-comments-form input#submit.wp-block-button__link.wp-element-button {\n    background: #d70f2f !important;\n    color: #fff !important;\n    border: none !important;\n  }\n\n  .wp-block-post-comments-form input#submit.wp-block-button__link.wp-element-button:hover {\n    background: #b90c28 !important;\n  }\n<\/style>\n<style>\n  .wp-block-comments {\n    border: 1.5px solid rgba(242, 8, 8, 0.9) !important;\n    padding: 20px !important;\n    margin-top: 0 !important;\n    background: rgba(255, 0, 0, 0.025);\n    box-shadow:\n      0 0 0 1px rgba(255,255,255,0.03),\n      0 0 22px rgba(242,8,8,0.12);\n  }\n\n  .wp-block-comments-title {\n    margin-top: 0 !important;\n  }\n\n  .wp-block-comments .wp-block-comment-template {\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  .wp-block-comments li.comment {\n    padding: 18px 0 !important;\n  }\n\n  .wp-block-comment-content {\n    border-left: 2px solid rgba(242,8,8,0.65);\n    padding-left: 14px;\n  }\n<\/style>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I denne fase arbejder jeg med enkle mockups som afpr\u00f8vningsmateriale. De er ikke f\u00e6rdige l\u00f8sninger, men midlertidige forslag, som jeg kan bruge til at tale med andre om ankomsten til \u00c1 handil. Mit projekt handler om, hvordan bes\u00f8gende uden lokalkendskab lettere kan finde butikken, genkende den og f\u00f8le sig trygge ved at g\u00e5 ind. Jeg [&hellip;]<\/p>\n","protected":false},"author":85,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1109","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/1109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/comments?post=1109"}],"version-history":[{"count":68,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/1109\/revisions"}],"predecessor-version":[{"id":1258,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/1109\/revisions\/1258"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/media?parent=1109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}