{"id":23515,"date":"2022-02-08T06:34:04","date_gmt":"2022-02-08T04:34:04","guid":{"rendered":"https:\/\/www.software-developer-india.com\/?p=23515"},"modified":"2022-02-08T06:34:20","modified_gmt":"2022-02-08T04:34:20","slug":"ui-vs-ux-hvad-er-forskellen-mellem-user-interface-design-og-user-experience-design","status":"publish","type":"post","link":"https:\/\/www.software-developer-india.com\/da\/ui-vs-ux-hvad-er-forskellen-mellem-user-interface-design-og-user-experience-design\/","title":{"rendered":"UI vs UX: hvad er forskellen mellem User Interface Design og User Experience Design?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">UI vs UX: hvad er forskellen mellem User Interface Design og User Experience Design?<\/h2>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2022\/02\/prototype.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"575\" height=\"250\" src=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2022\/02\/prototype.jpg\" alt=\"\" class=\"wp-image-23484\" srcset=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2022\/02\/prototype.jpg 575w, https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2022\/02\/prototype-300x130.jpg 300w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><\/a><\/figure><\/div>\n\n<p>UI st\u00e5r for User Interface Design, og UX Design er en forkortelse for User Experience Design. Med denne forskel er det indlysende, at mens UI handler om \u00e6stetiske elementer af hjemmesiden, fokuserer UX p\u00e5 den oplevelse en bruger har med hjemmesiden eller produktet. <\/p>\n\n<p>I l\u00e6gmandssprog. UI handler om de dekorationer, du s\u00e6tter i, mens du bygger et hus, mens UX handler om husets fundament og struktur. P\u00e5 samme m\u00e5de, n\u00e5r man bygger et hus, t\u00e6nker man p\u00e5 fundamentet, og hvor st\u00e6rkt det ville v\u00e6re, og s\u00e5 ville man forts\u00e6tte med at forsk\u00f8nne ved at forbinde husets rum, trapper og etager. N\u00e5r fundamentet er f\u00e6rdigt, og huset er bygget, kan du begynde at t\u00e6nke p\u00e5 at g\u00f8re huset endnu mere tiltalende, tage stilling til v\u00e6gfarverne, dekorationerne og alle de andre tilf\u00f8jelser, du g\u00f8r for at g\u00f8re huset \u00e6stetisk tiltalende og fantastisk. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Lad os nu g\u00e5 lidt dybere ind i de to<\/strong><\/h3>\n\n<p>Tidligere var livet enkelt, med hjemmesidedesignere, der havde den enkle opgave at designe en funktionel hjemmeside, og brugerfladen og brugergr\u00e6nsefladen var ikke s\u00e5 opdelt. Men efterh\u00e5nden som designindustrien voksede og modnedes, blev skellet mellem de to st\u00f8rre, og rollerne blev mere specifikke. Det er dog vigtigt at forst\u00e5, at b\u00e5de UI og UX ikke konkurrerer med hinanden, snarere supplerer de hinanden, fordi det ene ikke kan eksistere uden det andet. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Hvad er UX-design?<\/strong><\/h3>\n\n<p>UX Design handler om din brugers rejse, mens personen interagerer med produktet, lige fra start til slut p\u00e5 en f\u00f8lelsesm\u00e6ssig m\u00e5de. Hele grundlaget for UX-design er brugervenlighed, og hvordan brugeren nyder at bruge produktet.<\/p>\n\n<p>For at f\u00e5 dette aspekt til at lykkes, skal designeren v\u00e6re bekendt med brugeren, deres behov og m\u00e5l, selv deres kampe. For eksempel p\u00e5 et e-handelswebsted b\u00f8r prioriteringen v\u00e6re at g\u00f8re det nemt for brugeren at finde det produkt, de leder efter, og foretage et problemfrit k\u00f8b. En masse trin er involveret for at f\u00e5 dette til at ske, for medmindre webstedet er let at navigere, vil ingen bes\u00f8ge. Hvis produktet ikke er tilg\u00e6ngeligt, skal brugeren nemt have et alternativ. Designeren kan g\u00f8re brug af forskellige data, der er tilg\u00e6ngelige for ham, for at sikre en nem kunderejse. <\/p>\n\n<p>S\u00e5 man kan sige, at udviklingen af UX begyndte med udviklingen og v\u00e6ksten af UI, fordi det giver noget for brugerne at interagere, positivt, negativt eller neutralt. <\/p>\n\n<h3 class=\"wp-block-heading\">Her er nogle opgaver for en<strong>UX Designer<\/strong> :<\/h3>\n\n<p><strong>Udf\u00f8relse af brugerunders\u00f8gelser<\/strong><\/p>\n\n<p>UX Designeren vil udf\u00f8re brugerunders\u00f8gelser for at f\u00e5 en fornemmelse af, hvad brugeren \u00f8nsker. Dette g\u00f8res gennem interviews, unders\u00f8gelser, observationer mm. Under researchen vil designeren identificere kundens smertepunkter og m\u00e5ske endda lytte til deres forslag. Der vil helt sikkert v\u00e6re mere end \u00e9n id\u00e9 til at l\u00f8se kundens problemer, s\u00e5 designeren bliver n\u00f8dt til at brainstorme p\u00e5 de forskellige ideer og beslutte, hvad der er muligt, og hvad der ikke er. Ud fra alle mulige ideer ville den mest levedygtige blive valgt. <\/p>\n\n<p><strong>H\u00e5ndtering af brugervenlighed<\/strong><\/p>\n\n<p>Usability er relateret til brugeroplevelse, i den forstand at den sv\u00e6ver et sted mellem nytte og \u00f8nskv\u00e6rdighed. S\u00e5 n\u00e5r du f\u00f8rst har fundet en holdbar l\u00f8sning p\u00e5 brugerens problem, skal du ogs\u00e5 tage fat p\u00e5 dens anvendelighed. Usability-faktoren handler om, hvordan man im\u00f8dekommer brugerens behov og \u00f8nsker. <\/p>\n\n<p><strong>Udarbejdelse af en strategisk plan<\/strong><\/p>\n\n<p>I n\u00e6ste trin mod UX Design laver udvikleren en strategisk plan for at skabe produktet, her en hjemmeside, og s\u00f8rger for, at planen ikke kun involverer det, kunderne \u00f8nsker, men ogs\u00e5 det, investorerne og interessenterne eftersp\u00f8rger. <\/p>\n\n<p><strong>Prototyping<\/strong><\/p>\n\n<p>Prototyping er en anden vigtig fase i designsprintene. Dette trin kommer efter en levedygtig id\u00e9 er besluttet, s\u00e5 prototypen vil v\u00e6re en eksperimentel model af produktet. Dette skal passe godt sammen med, hvad kunderne og interessenterne har brug for, s\u00e5 der er forskellige m\u00e5der, hvorp\u00e5 prototypen kan skabes &#8211; det kunne v\u00e6re papirprototyping, blot skitser til digitale mockups p\u00e5 h\u00f8jt niveau. <\/p>\n\n<p>Det ville hj\u00e6lpe dig med at skubbe en l\u00f8sning, der ville gavne virksomheden og brugerne. Det bedste ved prototyping er, at du kan tilpasse \u00e6ndringer tidligt, vise ideen til brugerne for at se, om de kan lide det. At have en tidlig prototype hj\u00e6lper med at forhindre dyre fejl. <\/p>\n\n<h3 class=\"wp-block-heading\">Hvad er <strong>UI-design<\/strong>?<\/h3>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2022\/02\/wireframe-1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"575\" height=\"250\" src=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2022\/02\/wireframe-1.jpg\" alt=\"\" class=\"wp-image-23545\" srcset=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2022\/02\/wireframe-1.jpg 575w, https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2022\/02\/wireframe-1-300x130.jpg 300w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><\/a><\/figure><\/div>\n\n<p>UI eller brugergr\u00e6nseflade er det aktiv, som brugeren interagerer med. S\u00e5 det ville handle mere om layoutet af hvert produktelement som tekst, knap og andre gr\u00e6nsefladeelementer. Og hvordan disse elementer ser ud og fungerer. UI fokuserer ikke kun p\u00e5 det \u00e6stetiske aspekt af hjemmesiden, men p\u00e5 effektiviteten, tilg\u00e6ngeligheden og responsiviteten af hjemmesiden som helhed. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>De forskellige elementer i UI-design<\/strong><\/h3>\n\n<p>UI-elementerne falder i fire hovedkategorier:<\/p>\n\n<p><strong>Navigationskomponenter<\/strong> &#8211; Disse komponenter hj\u00e6lper brugeren med at navigere rundt p\u00e5 hjemmesiden, for eksempel hamburgermenuen p\u00e5 Android og fanebj\u00e6lker p\u00e5 Apple-enheder. <\/p>\n\n<p><strong>Input kontroller<\/strong> &#8211; Gennem disse kontroller kan brugere indtaste information i systemet. Brugerne kan v\u00e6lge den information, de har brug for, fra en r\u00e6kke input, hvilket g\u00f8r det nemmere for dem at indtaste information. <\/p>\n\n<p><strong>Informationskomponenter<\/strong> &#8211; Disse komponenter inkluderer v\u00e6rkt\u00f8jstip, meddelelser, beskedbokse, ikoner, statuslinjer osv., og hvordan disse oplysninger deles med brugerne. <\/p>\n\n<p><strong>Containere<\/strong> &#8211; En container i UI fungerer som et element, der er skabt til at indeholde sideelementerne til en vis, rimelig bredde i forhold til brugerens sk\u00e6rm. Dette kan kombineres med andre UI-elementer (eksempel gitter, menu) for bedre visning. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>UI forskning<\/strong><\/h3>\n\n<p>UI-designet indeb\u00e6rer ogs\u00e5 forskning, fordi slutproduktet skal designes med brugernes behov og forventninger. Til dette arbejder UI-designerne og UX-designerne sammen for at vide, om projektets m\u00e5l og publikums forventninger er opfyldt. UI-designerne vil unders\u00f8ge de bedste visuelle elementer, der ville fungere med de bedste, farvepaletterne, fronttyperne, m\u00f8nstre osv.<\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Konklusion<\/strong><\/h3>\n\n<p>Kombinationen af de to er s\u00e5 vigtig for at levere en fremragende brugeroplevelse af produktet. N\u00e5r brugere sammenligner et produkt, vil det dog v\u00e6re UX-designet, der fungerer som differentiatoren, n\u00e5r det kommer til dine produkter og dine konkurrenters. Folk, der oplever d\u00e5rlig UX, vil helt sikkert skifte til konkurrerende produkter.<\/p>\n\n<p>S\u00e5 faktisk konkurrerer de ikke med hinanden, men supplerer deres funktioner for at sikre, at brugerne navigerer p\u00e5 hjemmesiden uden problemer. Hvis brugerfladen er god, men brugergr\u00e6nsefladen ikke er behagelig nok, kan de blive afskr\u00e6kket fra at komme tilbage, og omvendt. <\/p>\n\n<p>Kort sagt handler UI om, hvordan brugeren interagerer med hjemmesidens visuelle og tekniske komponenter, og UX handler om en samlet oplevelse givet til brugeren. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Interessante links:<\/strong><\/h3>\n\n<p><a href=\"https:\/\/careerfoundry.com\/en\/blog\/ux-design\/the-difference-between-ux-and-ui-design-a-laymans-guide\/\">Mere information om UI og UX Design<\/a><\/p>\n\n<p><a href=\"https:\/\/xd.adobe.com\/ideas\/process\/ui-design\/ui-vs-ux-design-understanding-similarities-and-differences\/\">Nogle af lighederne og forskellene mellem UX-design og UI-design<\/a><\/p>\n\n<p id=\"block-c2d83490-e9b4-4038-96ff-d995e535c318\">Billeder: Canva<\/p>\n\n<hr class=\"wp-block-separator\" id=\"block-a2e18acd-d91c-40c4-9d4c-6953d5e70eb2\" \/>\n\n<div class=\"wp-block-image\"><figure class=\"alignleft\"><img decoding=\"async\" src=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2015\/02\/1.jpg\" alt=\"\" class=\"wp-image-229\"\/><\/figure><\/div>\n\n<p>Forfatteren: Sascha Thattil arbejder p\u00e5 Software-Developer-India.com, som er en del af YUHIRO Group. YUHIRO er en tysk-indisk virksomhed, der leverer programm\u00f8rer til IT-virksomheder, agenturer og IT-afdelinger. <\/p>\n<div class=\"shariff\"><ul class=\"shariff-buttons theme-default orientation-horizontal buttonsize-medium\"><li class=\"shariff-button twitter shariff-nocustomcolor\" style=\"background-color:#595959\"><a href=\"https:\/\/twitter.com\/share?url=https%3A%2F%2Fwww.software-developer-india.com%2Fda%2Fui-vs-ux-hvad-er-forskellen-mellem-user-interface-design-og-user-experience-design%2F&text=UI%20vs%20UX%3A%20hvad%20er%20forskellen%20mellem%20User%20Interface%20Design%20og%20User%20Experience%20Design%3F\" title=\"Del p\u00e5 X\" aria-label=\"Del p\u00e5 X\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#000; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"#000\" d=\"M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0\"\/><\/svg><\/span><span class=\"shariff-text\">del<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button facebook shariff-nocustomcolor\" style=\"background-color:#4273c8\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.software-developer-india.com%2Fda%2Fui-vs-ux-hvad-er-forskellen-mellem-user-interface-design-og-user-experience-design%2F\" title=\"Del p\u00e5 Facebook\" aria-label=\"Del p\u00e5 Facebook\" role=\"button\" rel=\"nofollow\" class=\"shariff-link\" style=\"; background-color:#3b5998; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 18 32\"><path fill=\"#3b5998\" d=\"M17.1 0.2v4.7h-2.8q-1.5 0-2.1 0.6t-0.5 1.9v3.4h5.2l-0.7 5.3h-4.5v13.6h-5.5v-13.6h-4.5v-5.3h4.5v-3.9q0-3.3 1.9-5.2t5-1.8q2.6 0 4.1 0.2z\"\/><\/svg><\/span><span class=\"shariff-text\">del<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button linkedin shariff-nocustomcolor\" style=\"background-color:#1488bf\"><a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fwww.software-developer-india.com%2Fda%2Fui-vs-ux-hvad-er-forskellen-mellem-user-interface-design-og-user-experience-design%2F\" title=\"Del p\u00e5 LinkedIn\" aria-label=\"Del p\u00e5 LinkedIn\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#0077b5; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 27 32\"><path fill=\"#0077b5\" d=\"M6.2 11.2v17.7h-5.9v-17.7h5.9zM6.6 5.7q0 1.3-0.9 2.2t-2.4 0.9h0q-1.5 0-2.4-0.9t-0.9-2.2 0.9-2.2 2.4-0.9 2.4 0.9 0.9 2.2zM27.4 18.7v10.1h-5.9v-9.5q0-1.9-0.7-2.9t-2.3-1.1q-1.1 0-1.9 0.6t-1.2 1.5q-0.2 0.5-0.2 1.4v9.9h-5.9q0-7.1 0-11.6t0-5.3l0-0.9h5.9v2.6h0q0.4-0.6 0.7-1t1-0.9 1.6-0.8 2-0.3q3 0 4.9 2t1.9 6z\"\/><\/svg><\/span><span class=\"shariff-text\">del<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button xing shariff-nocustomcolor\" style=\"background-color:#29888a\"><a href=\"https:\/\/www.xing.com\/spi\/shares\/new?url=https%3A%2F%2Fwww.software-developer-india.com%2Fda%2Fui-vs-ux-hvad-er-forskellen-mellem-user-interface-design-og-user-experience-design%2F\" title=\"Del p\u00e5 XING\" aria-label=\"Del p\u00e5 XING\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#126567; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 25 32\"><path fill=\"#126567\" d=\"M10.7 11.9q-0.2 0.3-4.6 8.2-0.5 0.8-1.2 0.8h-4.3q-0.4 0-0.5-0.3t0-0.6l4.5-8q0 0 0 0l-2.9-5q-0.2-0.4 0-0.7 0.2-0.3 0.5-0.3h4.3q0.7 0 1.2 0.8zM25.1 0.4q0.2 0.3 0 0.7l-9.4 16.7 6 11q0.2 0.4 0 0.6-0.2 0.3-0.6 0.3h-4.3q-0.7 0-1.2-0.8l-6-11.1q0.3-0.6 9.5-16.8 0.4-0.8 1.2-0.8h4.3q0.4 0 0.5 0.3z\"\/><\/svg><\/span><span class=\"shariff-text\">del<\/span>&nbsp;<\/a><\/li><\/ul><\/div>","protected":false},"excerpt":{"rendered":"<p>UI vs UX: hvad er forskellen mellem User Interface Design og User Experience Design? UI st\u00e5r for User Interface Design, og UX Design er en &#8230; <a title=\"UI vs UX: hvad er forskellen mellem User Interface Design og User Experience Design?\" class=\"read-more\" href=\"https:\/\/www.software-developer-india.com\/da\/ui-vs-ux-hvad-er-forskellen-mellem-user-interface-design-og-user-experience-design\/\" aria-label=\"Read more about UI vs UX: hvad er forskellen mellem User Interface Design og User Experience Design?\">L\u00e6s Mere<\/a><\/p>\n","protected":false},"author":9,"featured_media":23485,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[310,169],"tags":[],"class_list":["post-23515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-da","category-udvikling"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/posts\/23515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/comments?post=23515"}],"version-history":[{"count":4,"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/posts\/23515\/revisions"}],"predecessor-version":[{"id":23559,"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/posts\/23515\/revisions\/23559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/media\/23485"}],"wp:attachment":[{"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/media?parent=23515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/categories?post=23515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.software-developer-india.com\/da\/wp-json\/wp\/v2\/tags?post=23515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}