Noter om wireframes. Noter taget på multimediedesigner uddannelsen i sommeren 2019. Opgaver i brugertest givet af, og undervisningen blev afholdt af Andrea Cirone Nørregaard.
Opgaven gik på selv at finde information og lære om wireframes. Man skulle finde 3-4 kilder på internettet, og sammenligne informationen derfra. Man skal selv lave en definition af hvad et wireframe er. Derudover skal Lektion 57-70 læses i “UX for Beginners”.
Følgende er beskrevet som hjælpespørgsmål og ting man skal forsøge at besvare:
1. What is a wireframe in web design? What is its purpose?
2. How does a wireframe look like? What elements does it contain?
3. How do you make a wireframe?
4. What is the difference between lo-fi and hi-fi wireframes?
5. Are wireframes and mock-up the same?
6. Who uses wireframes and why?
Kilderne man finder skal bogmærkes og anvendes under lektionen.
Som jeg har forstået opgaven skal vi danne en viden om wireframes ud fra selvvalgte kilder. Jeg har allerede flere års erfaring med wireframes. Jeg har derfor nogle holdninger, men jeg prøver at løse opgaven med så lidt holdning som muligt. Jeg har derfor også valgt ikke at læse teksten fra “UX for Beginners”, indtil efter jeg havde besvaret alle spørgsmål og skrevet min forklaring om hvad wireframes er.
Kilder
Jeg giver kilderne et nummer. Nummeret vil anvendes i besvarelsen af spørgsmålene og vil referere til kilderne med samme nummer.
- https://redweb.dk/aktuelt/hvad-er-en-wireframe-og-hvorfor-skal-du-bruge-det
- https://www.experienceux.co.uk/faqs/what-is-wireframing/
- https://www.toolmaster.dk/ordbog/44-wireframe
- https://www.invisionapp.com/inside-design/how-to-wireframe/
Hvad er wireframes jf. kilderne
Wireframes er en metode, måde eller del af designprocessen, hvor man simpelt kan illustrere løsninger. De har ingen farver og få detaljer, og har kun nok information til at forklare hvad en side handler om, i forhold til design, layout og opsætning. De kan laves som tegninger, på tavle, med papirklip, i grafiske editorer og i wireframe programmer. Wireframes har flere detaljer end en skitse, men fæere end en mockup eller prototype. Alle produktioner der anvender design kan anvende wireframes, heriblandt UX-designere.
Besvarelsen af spørgsmålene
Hvad er wireframes i web design? Hvad er formålet? – “What is a wireframe in web design? What is its purpose?”
- Et værktøj til at visualisere foreslåede funktioner, struktur og indhold til hjemmesider eller undersider.
- Et layout af en hjemmeside der demonstrerer hvilke interface elementer kommer til at eksistere på siden. En kritisk del af interaktionsdesign.
- Et værktøj uden farver der beskriver den perfekte hjemmeside.
- En repræsentation af hvad en side vil indeholde, outline af strukturen på en side. En overordnet beskrivelse af retningen og outline for siden.
Overordnet set er kilderne enige, det er et værktøj til at designe hjemmesider. De varierer dog i detaljegraden.
Hvordan ser et wireframe ud? Hvilke elementer indeholder det? – “How does a wireframe look like? What elements does it contain?”
- Det er simple illustrationer og komponenter der findes på en hjemmeside.
- Se billedet forneden.
- Kasser og indhold uden farver.
- Et simpelt design uden farver, højst 2 fonter og en minimal mængde af grafik.
De forklarer det forskelligt, og sætter forskellige mængder af restriktioner. 3 især er meget striks.
Hvordan laver du et wireframe? – “How do you make a wireframe?”
- Der er mange fremgange. Man kan tegne eller sketche, bruge tavle med white eller blackboard, bruge papirskabeloner, bruge grafiske design redskaber eller anvende wireframing software.
- Ikke beskrevet.
- Ikke beskrevet.
- Der er flere værktøjer. Wifry er et af dem.
Kilde 1 forklarer godt hvordan man kan lave mange typer wireframes. Kilde 2 og 3 beskriver det ikke. Kilde 3 linker dog til en artikel hvor det behandles. Kilde 4 forklarer det ikke godt, og linker til et værktøj man kan anvende, men forklarer aldrig det grundlæggende om hvordan man gør.
Hvad er forskellen mellem lo-fi og hi-fi wireframes? – “What is the difference between lo-fi and hi-fi wireframes?”
- Udtrykket anvendes, men beskrives ikke.
- Beskrives ikke.
- Beskrives ikke.
- Wireframe er et low-fidelity mockup, hvorimod en mockup eller prototype er high-fidelity. Forskellen ligger i detaljegraden man anvender i sit design.
Der er ikke meget forskelle at vurdere på disse, da kun kilde 4 beskriver hvad det er. Jeg er overordnet enig i forklaringen der leveres, men jeg mener, baseret på egen erfaring og viden, at kilde 4’s beskrivelse ikke rammer spot-on.
Er wireframes det samme som et mock-up? – “Are wireframes and mock-up the same?”
- Nej – vi skelner mellem wireframes, mockups og prototyper
- Det beskrives ikke, men materialet antyder at det ikke er det.
- Det beskrives ikke, men materialet antyder at det ikke er det.
- Nej – der skelnes mellem wireframes, mockups og prototyper
Kilde 1 og 4 beskriver det lidt forskelligt, men har samme pointe. Kilde 2 og 3 behandler det ikke direkte, men beskriver begge at wireframes er en del af design processen.
Hvem anvender wireframes, og hvorfor? – “Who uses wireframes and why?”
- Alle projekter der anvender et design kan anvende wireframes. Det giver en god tilgang til et kundeprojekt. redWEB anvender wireframes.
- Beskrives ikke.
- Det er en del af designprocessen (antyder at det anvendes i design).
- Du/UX-designere kan anvende det i din designprocess, som en mulighed for at skabe et udgangspunkt. Du skal gøre det nemmere for dine brugere, og wireframes er et værktøj du kan opnå det med.
Kilde 1 beskriver det egentlig godt, men er ikke ubais. De har en agenda for at sælge designløsninger, 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.
Ingen af kilderne forklarer hvem der bruger wireframes særligt godt. Kilde 1 er for generisk, og kilde 4 laver antydninger der ikke nødvendigvis er sande.
Noter fra UX design for beginners
Wireframes er et teknisk dokument. De indeholder linjer, kasser, labels og højst 2 farver. Det kan sammenlignes med blueprints.
Et wireframe er først et wireframe når klienter og kolleger kan anvende det. Indtil da, er det en skitse.
Wireframes tager væsentligt længere tid at planlægge end at tegne. Ca. 90% af arbejdet er planlægning. De resterende 10% af arbejdet er at tegne.
Det er vigtigt at tage wireframes alvorligt, hver del kan repræsentere en vigtig del. Man bør dokumentere sine valg så godt, at en udvikler ikke behøver spørge hvad et element skal gøre.
Det er ikke meningen at et wireframe skal ligne det endelige produkt.
Wireframes bør designes i det simpleste værktøj der kan klare opgaven. Man skal dog ikke lade sig begrænse af programmet, og støder man på en begrænsning bør man finde en anden metode eller et andet værktøj.
Brugergenereret indhold skal være tænkt ind i designet, nogen folk skriver ikke meget indhold, måske endda bare et enkelt tegn. Dette bør man tage højde for i designet og i specifikationerne. Blankt indhold skal også designes. Slettet indhold eller nærmere håndteringen deraf, bør tænkes ind.
Nogle designelementer er dovne og dårlige, så som menü knappen man kender fra facebook på mobile enheder, der viser indhold som ikke kunne være på skærmen. Ofte brugt til meüer.
Brugere læsser i Z-mønster. Din side skannes kun. Tænk designet ind i strukturen. Andre læser i et F-mønster, hvor de starter med at et Z mønster, og derefter følger venstre side og læser ned, og læser interessante sektioner, hvorefter de fortsætter med at skanne ned. Mønstre er vigtige til at prioritere indhold. For at løse problemet kan man skabe et visuelt hierarki. Det kan give fokuspunkter i ens design, og det er mere behageligt at scanne efter.
Det er en god idé at starte med at designe de gængse sektioner først, så som footer, navigation og header. Design ikke en side ad gangen, men design delelementerne først.
Det første en bruger ser er det vigtigste. Tænk scrolling points ind i designet. Undgå derfor store billeder og grafiske elementer der fylder meget på alle sider.
Billeder kan bruges til at lede brugerens opmærksomhed.
Elementer man skal interagere med bør ligge steder hvor man skanner med øjnene, og dermed ligge hvor vi opfatter der er en (måske usynlig) kant.
Form data skal føles simpelt. Brug inputs der passer til indholdet. Labels og instruktioner bør være kortfattede. Data der kan valideres bør valideres, med bl.a. inline validering, og nogle inputs bør formatere, f.eks. telefonnumre. Start med nemme spørgsmål, og slut med hvad der er svært. Hvis man slutter med noget svært, må godkend knappen gerne side til højre, da man måske trykke den inden man er færdig, da man skanner den hurtigere til venstre.
Der er 2 typer knapper, primære og sekundære knapper. Dette skal være repræsenteret i designet. Primære knapper hjælper med at nå i mål. Sekundære knapper gør ikke.
Adaptive design er når man laver et design til flere skærmstørrelser. Responsivt design er et design der virker på alle skærmstørrelser. Til responsivt design skal man identificere break points, og løsninger til disse.
Når man skal redesigne ved hvad der er galt, så skal man løse det. Men når man ikke ved det, skal man lave mindst mulige ændringer indtil man finder det.
Mus og touch håndteres forskelligt, og dette skal tænkes ind i design. Musen kan udføre handlinger, anvende hover bedre og skifte ikon baseret på handlinger. Men de fleste har 10 fingre, og har linket bestemte bevægelser sammen med bestemte handlinger (som f.eks. zoom).
Noter fra lektionen
UI/Wireframes
UI betyder user interface. Det er alt man kan interagere med.
UI er med til at skabe god UX. UX betyder user experience. Det er alt der påvirker bruger oplevelsen.
Gui = grafisk grænseflade. Gui baserer på 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.
NUI. Natural User Interface. Baserer på intuition. Det er umedieret. Det er kontekstuelt.
OUI. Organic User Interface. Findes mest i koncept. Det er ikke et flat. Det kan manipuleres ved at ændre formen på interfacet.
VUI. Voice User Interface. Ingen eller få visuelle elementer. Man har brug for klar vejledning til hvordan man bruger det. Der gives visuel feedback. Giver vokale breadcrumbs.
God UI
- Formålet er klart.
- Man kan er ledt til at vide hvad ting gør.
- Det ser bekendt ud.
- Det er responsivt. Som i responsivt til input. Men iso responsivt som i responsive design.
- Designet er konsistent. Eller design elementerne er konsistente.
- Det er flot eller behageligt at se på.
- Det er effektivt.
- Det er tilgivende.
Ui objects. Mere om dette på andet semester.
Responsive design. Vi anvender mobile first approach på multimediedesigner.
Wireframe
Wireframes is lo-fi and hi-fi. It has no or almost no graphical design. It’s a way to setup the ui.
Adobe XD
Der blev givet en tutorial på 45 min. Meningen var at give inspiration.
Tutorialen der anvendes er den som vises på startup. Vi skulle følge guiden fra første til sidste nummerering.