Du\/UX-designere kan anvende det i din designprocess, som en mulighed for at skabe et udgangspunkt. Du skal g\u00f8re det nemmere for dine brugere, og wireframes er et v\u00e6rkt\u00f8j du kan opn\u00e5 det med.<\/li><\/ol>\n\n\n\nKilde 1 beskriver det egentlig godt, men er ikke ubais. De har en agenda for at s\u00e6lge designl\u00f8sninger, og bringer sig selv ind i svaret. Kilde 3 antyder kun et svar, og lader en selv finde svaret. Kilde 4 tager en selv med i svaret, og tvinger en selv ned i rollen som UX-designer. Hvorfor wireframes anvendes forklares egentlig ret godt.<\/p>\n\n\n\n
Ingen af kilderne forklarer hvem der bruger wireframes s\u00e6rligt godt. Kilde 1 er for generisk, og kilde 4 laver antydninger der ikke n\u00f8dvendigvis er sande.<\/p>\n\n\n\n
Noter fra UX design for beginners<\/h2>\n\n\n\n
Wireframes er et teknisk dokument. De indeholder linjer, kasser, labels og h\u00f8jst 2 farver. Det kan sammenlignes med blueprints.<\/p>\n\n\n\n
Et wireframe er f\u00f8rst et wireframe n\u00e5r klienter og kolleger kan anvende det. Indtil da, er det en skitse.<\/p>\n\n\n\n
Wireframes tager v\u00e6sentligt l\u00e6ngere tid at planl\u00e6gge end at tegne. Ca. 90% af arbejdet er planl\u00e6gning. De resterende 10% af arbejdet er at tegne.<\/p>\n\n\n\n
Det er vigtigt at tage wireframes alvorligt, hver del kan repr\u00e6sentere en vigtig del. Man b\u00f8r dokumentere sine valg s\u00e5 godt, at en udvikler ikke beh\u00f8ver sp\u00f8rge hvad et element skal g\u00f8re.<\/p>\n\n\n\n
Det er ikke meningen at et wireframe skal ligne det endelige produkt.<\/p>\n\n\n\n
Wireframes b\u00f8r designes i det simpleste v\u00e6rkt\u00f8j der kan klare opgaven. Man skal dog ikke lade sig begr\u00e6nse af programmet, og st\u00f8der man p\u00e5 en begr\u00e6nsning b\u00f8r man finde en anden metode eller et andet v\u00e6rkt\u00f8j.<\/p>\n\n\n\n
Brugergenereret indhold skal v\u00e6re t\u00e6nkt ind i designet, nogen folk skriver ikke meget indhold, m\u00e5ske endda bare et enkelt tegn. Dette b\u00f8r man tage h\u00f8jde for i designet og i specifikationerne. Blankt indhold skal ogs\u00e5 designes. Slettet indhold eller n\u00e6rmere h\u00e5ndteringen deraf, b\u00f8r t\u00e6nkes ind.<\/p>\n\n\n\n
Nogle designelementer er dovne og d\u00e5rlige, s\u00e5 som men\u00fc knappen man kender fra facebook p\u00e5 mobile enheder, der viser indhold som ikke kunne v\u00e6re p\u00e5 sk\u00e6rmen. Ofte brugt til me\u00fcer.<\/p>\n\n\n\n
Brugere l\u00e6sser i Z-m\u00f8nster. Din side skannes kun. T\u00e6nk designet ind i strukturen. Andre l\u00e6ser i et F-m\u00f8nster, hvor de starter med at et Z m\u00f8nster, og derefter f\u00f8lger venstre side og l\u00e6ser ned, og l\u00e6ser interessante sektioner, hvorefter de forts\u00e6tter med at skanne ned. M\u00f8nstre er vigtige til at prioritere indhold. For at l\u00f8se problemet kan man skabe et visuelt hierarki. Det kan give fokuspunkter i ens design, og det er mere behageligt at scanne efter.<\/p>\n\n\n\n
Det er en god id\u00e9 at starte med at designe de g\u00e6ngse sektioner f\u00f8rst, s\u00e5 som footer, navigation og header. Design ikke en side ad gangen, men design delelementerne f\u00f8rst.<\/p>\n\n\n\n
Det f\u00f8rste en bruger ser er det vigtigste. T\u00e6nk scrolling points ind i designet. Undg\u00e5 derfor store billeder og grafiske elementer der fylder meget p\u00e5 alle sider.<\/p>\n\n\n\n
Billeder kan bruges til at lede brugerens opm\u00e6rksomhed.<\/p>\n\n\n\n
Elementer man skal interagere med b\u00f8r ligge steder hvor man skanner med \u00f8jnene, og dermed ligge hvor vi opfatter der er en (m\u00e5ske usynlig) kant.<\/p>\n\n\n\n
Form data skal f\u00f8les simpelt. Brug inputs der passer til indholdet. Labels og instruktioner b\u00f8r v\u00e6re kortfattede. Data der kan valideres b\u00f8r valideres, med bl.a. inline validering, og nogle inputs b\u00f8r formatere, f.eks. telefonnumre. Start med nemme sp\u00f8rgsm\u00e5l, og slut med hvad der er sv\u00e6rt. Hvis man slutter med noget sv\u00e6rt, m\u00e5 godkend knappen gerne side til h\u00f8jre, da man m\u00e5ske trykke den inden man er f\u00e6rdig, da man skanner den hurtigere til venstre.<\/p>\n\n\n\n
Der er 2 typer knapper, prim\u00e6re og sekund\u00e6re knapper. Dette skal v\u00e6re repr\u00e6senteret i designet. Prim\u00e6re knapper hj\u00e6lper med at n\u00e5 i m\u00e5l. Sekund\u00e6re knapper g\u00f8r ikke.<\/p>\n\n\n\n
Adaptive design er n\u00e5r man laver et design til flere sk\u00e6rmst\u00f8rrelser. Responsivt design er et design der virker p\u00e5 alle sk\u00e6rmst\u00f8rrelser. Til responsivt design skal man identificere break points, og l\u00f8sninger til disse.<\/p>\n\n\n\n
N\u00e5r man skal redesigne ved hvad der er galt, s\u00e5 skal man l\u00f8se det. Men n\u00e5r man ikke ved det, skal man lave mindst mulige \u00e6ndringer indtil man finder det.<\/p>\n\n\n\n
Mus og touch h\u00e5ndteres forskelligt, og dette skal t\u00e6nkes ind i design. Musen kan udf\u00f8re handlinger, anvende hover bedre og skifte ikon baseret p\u00e5 handlinger. Men de fleste har 10 fingre, og har linket bestemte bev\u00e6gelser sammen med bestemte handlinger (som f.eks. zoom).<\/p>\n\n\n\n
Noter fra lektionen<\/h2>\n\n\n\nUI\/Wireframes<\/h3>\n\n\n\n
UI betyder user interface. Det er alt man kan interagere med.<\/p>\n\n\n\n
\n\nUI er med til at skabe god UX. UX betyder user experience. Det er alt der p\u00e5virker bruger oplevelsen.\n\n<\/p>\n\n\n\n
Gui = grafisk gr\u00e6nseflade. Gui baserer p\u00e5 genkendelse. Det er et double medium. Det forbinder brugeren til UI og udstyr. WYSIWYG – what you see is what you get. Gui er et wysiwyg type interface.<\/p>\n\n\n\n
NUI. Natural User Interface. Baserer p\u00e5 intuition. Det er umedieret. Det er kontekstuelt.<\/p>\n\n\n\n
OUI. Organic User Interface. Findes mest i koncept. Det er ikke et flat. Det kan manipuleres ved at \u00e6ndre formen p\u00e5 interfacet.<\/p>\n\n\n\n
VUI. Voice User Interface. Ingen eller f\u00e5 visuelle elementer. Man har brug for klar vejledning til hvordan man bruger det. Der gives visuel feedback. Giver vokale breadcrumbs.<\/p>\n\n\n\n
God UI<\/h3>\n\n\n\n- Form\u00e5let er klart. <\/li>
- Man kan er ledt til at vide hvad ting g\u00f8r. <\/li>
- Det ser bekendt ud. <\/li>
- Det er responsivt. Som i responsivt til input. Men iso responsivt som i responsive design. <\/li>
- Designet er konsistent. Eller design elementerne er konsistente. <\/li>
- Det er flot eller behageligt at se p\u00e5.<\/li>
- Det er effektivt. <\/li>
- Det er tilgivende. <\/li><\/ul>\n\n\n\n
Ui objects. Mere om dette p\u00e5 andet semester.<\/p>\n\n\n\n
Responsive design. Vi anvender mobile first approach p\u00e5 multimediedesigner.<\/p>\n\n\n\n
Wireframe<\/h3>\n\n\n\n
Wireframes is lo-fi and hi-fi. It has no or almost no graphical design. It’s a way to setup the ui. <\/p>\n\n\n\n
Adobe XD<\/h3>\n\n\n\n
Der blev givet en tutorial p\u00e5 45 min. Meningen var at give inspiration.<\/p>\n\n\n\n
Tutorialen der anvendes er den som vises p\u00e5 startup. Vi skulle f\u00f8lge guiden fra f\u00f8rste til sidste nummerering.<\/p>\n","protected":false},"excerpt":{"rendered":"
Noter om wireframes. Noter taget p\u00e5 multimediedesigner uddannelsen i sommeren 2019. Opgaver i brugertest givet af, og undervisningen blev afholdt af Andrea Cirone N\u00f8rregaard. Opgaven gik p\u00e5 selv at finde information og l\u00e6re om wireframes. Man skulle finde 3-4 kilder p\u00e5 internettet, og sammenligne informationen derfra. Man skal selv lave en definition af hvad et…<\/p>\n","protected":false},"author":1,"featured_media":285,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[18],"class_list":["post-254","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-noter","tag-mmd"],"_links":{"self":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/254","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/comments?post=254"}],"version-history":[{"count":26,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/254\/revisions"}],"predecessor-version":[{"id":938,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/254\/revisions\/938"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media\/285"}],"wp:attachment":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media?parent=254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/categories?post=254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/tags?post=254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Eksempel](\"https:\/\/www.experienceux.co.uk\/wp-content\/uploads\/2015\/06\/wireframe_example_large.jpg\")