{"id":271,"date":"2025-03-09T16:12:39","date_gmt":"2025-03-09T16:12:39","guid":{"rendered":"https:\/\/proces.mogensen-design.dk\/?page_id=271"},"modified":"2025-03-14T11:12:33","modified_gmt":"2025-03-14T11:12:33","slug":"prototyping","status":"publish","type":"page","link":"https:\/\/proces.mogensen-design.dk\/?page_id=271","title":{"rendered":"Prototyping"},"content":{"rendered":"\n
<\/div>\n\n\n\n

Hvad er protoyping?<\/h4>\n\n\n\n

Prototyping er en proces med at lave en tidlig version af et design eller et produkt for at teste funktionalitet, brugeroplevelse og designvalg, f\u00f8r det f\u00e6rdige produkt udvikles. <\/mark><\/p>\n\n\n\n

<\/div>\n\n\n\n

Hvorfor bruge prototyper?<\/h4>\n\n\n\n

Tester ideer tidligt – fanger fejl og forbedringsmuligheder, f\u00f8r man bruger tid og ressourcer p\u00e5 kodning.<\/mark><\/p>\n\n\n\n

Brugertests og feedback – Man kan f\u00e5 input fra rigtige brugere og justere designet<\/mark><\/p>\n\n\n\n

Kommunikation – G\u00f8r det lettere for designere, udviklere og interessenter at forst\u00e5 l\u00f8sningen.<\/mark><\/p>\n\n\n\n

<\/div>\n\n\n\n

Typer af prototyper<\/h4>\n\n\n\n
    \n
  • Low-fidelty (lav detaljegrad)<\/strong><\/mark><\/li>\n<\/ul>\n\n\n\n

    Papirskiter eller enkle wireframes uden interaktivitet<\/mark><\/p>\n\n\n\n

    Bruges til at afpr\u00f8ve ideer og layout<\/mark><\/p>\n\n\n\n

      \n
    • High-fidelty (h\u00f8j detaljegrad)<\/strong><\/mark><\/li>\n<\/ul>\n\n\n\n

      Interaktive prototyper, der ligner det f\u00e6rdige produkt med farver grafik og animationer.<\/mark><\/p>\n\n\n\n

      Bruges til brugertest og pr\u00e6sentationer<\/mark><\/p>\n\n\n\n

      <\/div>\n\n\n\n

      Opgavebeskrivelse<\/h4>\n\n\n\n

      I l\u00f8bet af workshoppen skal hver gruppe genneml\u00f8be 3 iterationer af en l\u00f8sning p\u00e5 et multimedieprodukt. For hver iteration skal produktet testes og herefter forbedres i forhold til feedback fra testen. <\/mark><\/p>\n\n\n\n

      Det endelige resultat skal dokumenteres p\u00e5 din personlige procesportfolie, hvor processen fra hver iteration visualiseres. <\/mark><\/p>\n\n\n\n

      M\u00e5lgrupper: <\/p>\n\n\n\n

        \n
      1. B\u00f8rn <\/mark><\/li>\n\n\n\n
      2. Hunde<\/mark><\/li>\n\n\n\n
      3. Unge mennesker (18-25)<\/mark><\/li>\n\n\n\n
      4. \u00c6ldre mennesker (70+)<\/mark><\/li>\n<\/ol>\n\n\n\n
        <\/div>\n\n\n\n

        Gruppen<\/h3>\n\n\n\n

        Vi blev sat i grupper og jeg kom i gruppe med Janne, Emilie, Josefine, Alaa og Mig.<\/p>\n\n\n\n

        I l\u00f8bet af workshoppen skulle hver gruppe igennem 3 iterationer og en l\u00f8sning p\u00e5 et multimedieprodukt. For hver iteration skal produktet testes og herefter forbedres i forhold til feedback fra testen.<\/p>\n\n\n\n

        Ud fra de m\u00e5lgrupper der var at v\u00e6lge imellem skulle vi selv v\u00e6lge den vi kunne t\u00e6nke os at arbejde med og vi valgte derfor m\u00e5lgruppen hunde. Vi ville ikke lave en dating app men mere en app hvor andre hundeejere kunne snakke sammen og m\u00f8des til g\u00e5ture og legeaftaler.<\/p>\n\n\n\n

        Vi startede med en lo-fi prototype p\u00e5 papir. Hvor vi sidder sammen og finder ud af hvordan vi t\u00e6nker at appen skal se ud.
        <\/p>\n\n\n\n

        \n
        \"\"<\/figure>\n\n\n\n
        \"\"<\/figure>\n<\/figure>\n\n\n\n
        <\/div>\n\n\n\n

        Lo-Fi prototype<\/h3>\n\n\n\n

        Da vi har f\u00e6rdiggjort prototypen p\u00e5 papir forts\u00e6tter vi i Figma<\/strong>.<\/mark><\/p>\n\n\n\n

        Det er i Figma vi f\u00e5r sat det op som vi har t\u00e6nkt og derefter skal det brugertestet for at se om ops\u00e6tningen af appen virker efter hensigten. F\u00f8lgende punkter skal testes:<\/mark><\/p>\n\n\n\n

          \n
        • Forst\u00e5r brugeren, hvor de skal trykke<\/mark><\/li>\n\n\n\n
        • Kan de finde de vigtigste funktioner og informationer<\/mark><\/li>\n\n\n\n
        • Er navigationen logisk og intuitiv<\/mark><\/li>\n\n\n\n
        • Er de vigtigste elementer nemme at f\u00e5 \u00f8je p\u00e5.<\/mark><\/li>\n\n\n\n
        • Er der en klar forskel mellem overskrifter, br\u00f8dtekst og interaktive elementer.<\/mark><\/li>\n\n\n\n
        • Er der nogle forvirrende eller un\u00f8dvendige elementer
          <\/mark>
          Denne prototype er kun for at vise hvor elementerne skal v\u00e6re. Dette er ikke det f\u00e6rdige resultat<\/mark><\/li>\n<\/ul>\n\n\n\n
          <\/div>\n\n\n
          \n
          \"\"<\/figure>\n<\/div>\n\n\n
          <\/div>\n\n\n\n

          Brugertest<\/h3>\n\n\n\n

          Ud fra vores Lo-Fi i Figma lavede vi en Hi-Fi. Da vi mente at denne var f\u00e6rdig fandt vi nogle testpersoner som kunne bruges til at lave en Think-aloud test.
          Denne metode er hvor brugeren skal gennemg\u00e5 vores app og samtidig t\u00e6nke h\u00f8jt alts\u00e5 sige hvad der falder dem ind i situtationen de sidder i, hvad man g\u00f8r for bedre at forst\u00e5 hvad de t\u00e6nker.<\/mark><\/p>\n\n\n\n

          \n
          \n
          \n
          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n
          <\/div>\n\n\n\n

          Testplan<\/h3>\n\n\n\n

           M\u00e5lgruppe: Hundeejere<\/mark><\/strong><\/p>\n\n\n\n

          TESTPLAN<\/strong><\/td>Svar<\/strong><\/td><\/tr>
          Anvendelsesomr\u00e5de(Hvad tester du og hvilke test g\u00f8r du brug af? f.eks. website og usability test med think aloud)<\/td>Vi tester brugervenligheden af vores hundelufter-app ved hj\u00e6lp af en usability-test med Think-Aloud-metoden. Testen udf\u00f8res p\u00e5 en digital prototype i Figma, hvor testpersonerne skal gennemf\u00f8re specifikke opgaver, mens de verbalt deler deres tanker.<\/td><\/tr>
            Form\u00e5l(Hvad er m\u00e5l, l\u00f8sninger og sp\u00f8rgsm\u00e5l, hvad vil du teste?)<\/td>Form\u00e5lForm\u00e5let med testen er at identificere brugervenlighedsm\u00e6ssige udfordringer og optimere appens design baseret p\u00e5 brugerfeedback. Specifikke fokusomr\u00e5der inkluderer:Navigation og intuitivitetForst\u00e5else af ikoner og UI-elementerEffektiviteten af onboarding-processenGenerel brugeroplevelse<\/td><\/tr>
          Tidsplan & lokation(Hvorn\u00e5r og hvor vil man udf\u00f8rer testen)<\/td>Dato: 17\/2 2025Tidspunkt: 12:40Lokation: UCL<\/td><\/tr>
          Sessions(Testens l\u00e6ngde)  <\/td>Hver test varer cirka 10-15 minutter, inklusive introduktion, test og kort opsummering.<\/td><\/tr>
          Udstyr(Hvilket udstyr bruges i testen?f.eks. computer, skrivebord)<\/td>Computer med Figma-prototypeSkrivebord og stole til komfortable testforholdNotatblok og pen til observeringMobilkamera  til dokumentation<\/td><\/tr>
            Deltagere(Antal og typer af deltagere, der skal testes)<\/td>4 testpersoner, der er studerende p\u00e5 UCL.<\/td><\/tr>
            Scenarier(Hvilke tasks skal testpersonen teste formuleret som scenarie?)<\/td>Testpersonerne skal gennemf\u00f8re f\u00f8lgende opgaver:Find et match.Afvis et match.Naviger til kortet og tilbage til startsiden.Gennemse egen profil.G\u00e5 ind i beskeder og naviger i beskeder.<\/td><\/tr>
          Roller(Hvem deltager og hvad er deres opgave?)<\/td>Moderator: Styrer testen, guider testpersonerne gennem opgaverne og sikrer, at de t\u00e6nker h\u00f8jt. Testpersoner: Fire brugere, der tester appen og deler deres oplevelser. Observat\u00f8r: Noterer testpersonernes reaktioner, problemer og feedback samt tager billeder til dokumentation<\/td><\/tr>
          Dokumentation(f.eks. billeder, optagelser, notater, skemaer fra testen)<\/td>Billeder af testpersoner under testen.Notater om brugerens oplevelser og problemer. <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

          Feedback <\/p>\n\n\n\n

          Noter til forbedringer<\/td>Generelle noter<\/td><\/tr>
          Besked knap dur ikke i map.Forvirring over swipe funktion i map, men ingen andre steder.Forvirring over det skiftende antal af ikoner i \u201cKnap bar\u201d. Nogle steder er der fire ikoner og andre to. Brugeren \u00f8nsker at der er det samme antal ikoner p\u00e5 alle sider. Sm\u00e5t skrift ved vores pr\u00f8ve logo.Hj\u00e6lp til at skrive en profil tekst. (Hj\u00e6lpeord)Mindre cirkler i map. At man ikke skal holde knappen inde for at se hunden. Brugeren har et \u00f8nske om kun at skulle trykke engang. 

          Ved ikke, hvad hundepoten betyder. M\u00e5ske bedre med et hus som hjemknap.Un\u00f8dvendig mange steps indtil man rammer login-siden.Der skal v\u00e6re en login-side til dem, der allerede har oprettet sig, s\u00e5 man kan springe direkte videre til det.Selve navnet: \u201cHundelufteren\u201d er misvisende. Er det en app, hvor andre kan lufte min hund?

          Evt. svar p\u00e5 alle sp\u00f8rgsm\u00e5l \u201com mig\u201d f\u00f8r man skal logge sig ind<\/td>          		Er glad for, at der b\u00e5de er billeder og tekst p\u00e5.Evt. tilf\u00f8j lokationer, hvor det er fedt at lufte sin hund.\u200b\u200bMange muligheder for at ombestemme sig under oprettelsen, fordi der er s\u00e5 mange \u201cinfosider\u201dGod intro med en forklaring om appen.Appen er intuitiv for brugeren. <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
          Forbedringer<\/td>Hvad skal der g\u00f8res?<\/td>Hvem g\u00f8r det?<\/td><\/tr>
          Besked knap dur ikke i map.<\/td>Ordnes<\/td>Janne<\/td><\/tr>
          Forvirring over swipe funktion i map, men ingen andre steder.<\/td>Slettes<\/td>Janne<\/td><\/tr>
          Forvirring over det skiftende antal af ikoner i \u201cKnap bar\u201d. Nogle steder er der fire ikoner og andre to. Brugeren \u00f8nsker at der er det samme antal ikoner p\u00e5 alle sider. <\/td>Gjort barer ens OG \u00e6ndre\/tilf\u00f8je pilene.<\/td>Josefine<\/td><\/tr>
          Sm\u00e5t skrift ved vores pr\u00f8ve logo.<\/td>Hele logo skal \u00e6ndres<\/td>Alaa<\/td><\/tr>
          At man ikke skal holde knappen inde for at se hunden. Brugeren har et \u00f8nske om kun at skulle trykke engang. <\/td>Kan overvejes.<\/td><\/td><\/tr>
          M\u00e5ske bedre med et hus som hjemknap.<\/td>Poten skal v\u00e6re et hus<\/td>Josefine<\/td><\/tr>
          Un\u00f8dvendig mange steps indtil man rammer login-siden.<\/td>\u00c6ndre s\u00e5 der er 2 frem for 3 introsider<\/td>Josefine<\/td><\/tr>
          Der skal v\u00e6re en login-side til dem, der allerede har oprettet sig, s\u00e5 man kan springe direkte videre til det.<\/td>Tilf\u00f8j pil fra \u201clogin\u201d p\u00e5 signup-siden til loginsiden<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
          <\/div>\n\n\n\n
          \n
          \n
          \"\"<\/figure>\n<\/div><\/div>\n\n\n\n
          \n
          \"\"
          Style Tile<\/strong><\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
          <\/div>\n\n\n
          \n
          \"\"<\/figure>\n<\/div>\n\n\n
          <\/div>\n\n\n\n

          Refleksion <\/h3>\n\n\n\n

          Denne opgave var rigtig sp\u00e6ndende og jeg l\u00e6rte meget i Figma, men det gjorde mig ogs\u00e5 opm\u00e6rksom p\u00e5 at jeg slet ikke er f\u00e6rdig med at l\u00e6re og der er meget at fordybe sig i, n\u00e5r det kommer til Figma, s\u00e5 jeg er ikke i tvivl om at jeg kan blive meget bedre endnu og jeg ser frem til at arbejde meget mere i Figma.<\/mark><\/p>\n\n\n\n

          Det har i hvert fald givet mig en ide om at det nok er s\u00e5dan noget jeg gerne vil arbejde med, alts\u00e5 content creation. <\/mark><\/p>\n\n\n\n

          Ang. gruppe arbejdet s\u00e5 syntes jeg det fungerede rigtig godt. Vi havde alle samme visuelle ide\/stil og mod p\u00e5 opgave. Vi var dog en ret stor gruppe og det var ikke hele tiden at der var nok at lave for os alle sammen, men det var en fed opgave. <\/mark><\/p>\n","protected":false},"excerpt":{"rendered":"

          Hvad er protoyping? Prototyping er en proces med at lave en tidlig version af et design eller et produkt for at teste funktionalitet, brugeroplevelse og designvalg, f\u00f8r det f\u00e6rdige produkt udvikles. Hvorfor bruge prototyper? Tester ideer tidligt – fanger fejl og forbedringsmuligheder, f\u00f8r man bruger tid og ressourcer p\u00e5 kodning. Brugertests og feedback – Man… Prototyping<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-271","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=271"}],"version-history":[{"count":2,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages\/271\/revisions"}],"predecessor-version":[{"id":361,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages\/271\/revisions\/361"}],"wp:attachment":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}