Go to blue arrow
back to Tech Blog
Udformning
Sandro Cantante

16. august 2022

Min Read

Designplanlægning: gør en stilfuld forskel

Lagdelt street art-vægmaleri med stencils, neonmaling og fede figurer, der gør en stilfuld forskel i designplanlægning.

De fleste samtaler om redesign starter det forkerte sted. Nogen åbner et designværktøj, en anden siger, at produktet ser træt ud, og så bliver der brugt et budget på et symptom. Designplanlægning handler om at beslutte, hvad et produkt skal signalere, og det er en forretningsmæssig beslutning længe før, det er en visuel en af slagsen.

Her er det vigtigste at huske. To brugerflader kan indeholde præcis den samme information, fungere på præcis samme måde og alligevel placere et produkt i hver sin ende af markedet. Så spørgsmålet bag et redesign er ikke "hvad er gået i stykker?" Det er "hvor stor er afstanden mellem den position, vi har, og den position, vi ønsker?" Den afstand er gabet, og det er vores opgave at finde det.

Dette er til dig, der skal godkende arbejdet. Vi ser på, hvordan stil definerer positionering, hvordan man finder gabet, hvordan man tester en retning, før nogen bygger den, og hvad ændringen reelt koster dig i tid og risiko.

blue arrow to the left
Imaginary Cloud logo

Hvad er designplanlægning?

Designplanlægning er den beslutning, der tages, før en eneste skærm tegnes, om hvilken position et produkts stil skal signalere – og om den position matcher den, virksomheden rent faktisk ønsker at indtage. De to discipliner under den er velkendte. User Experience (UX) og User Interface (UI) design er to af de mest anvendte koncepter inden for produktdesign: UX-designere fokuserer på oplevelsen og fastlægger stemningen, tonen og kommunikationsstilen, mens UI-designere materialiserer den oplevelse i en brugerflade. Begge har eksisteret i et stykke tid nu, og gennem deres fælles indsats bliver digitale produkter vakt til live.

Planlægning er det, der ligger over de to. For hvert projekt findes der flere gyldige tilgange frem for én enkelt korrekt, og at holde brugerfladen enkel og praktisk er en af de sikreste. En fungerende brugerflade, en ren oplevelse og brugere, der hurtigt når frem til deres mål.

Tag Tinker-hjemmesiden som et eksempel på et rent og funktionelt design.

Tinker-produktsøgning
Tinker-produktvisning

Produktsøgesiden består af en enkel og intuitiv søgefunktion, der lader brugeren finde det ønskede produkt ved at matche forskellige parametre. Ved hover vises både prisen og muligheden for at tilføje den ønskede vare til kurven. Ved at klikke på et produkt åbnes en ny side med en grundig beskrivelse. Alt står på en hvid baggrund, der forstærker hjemmesidens rene oplevelse.

En sådan tilbageholdenhed signalerer hastighed og pålidelighed. Hvilket er præcis det rigtige for et produkt, hvis løfte er et hurtigt køb – og kun det rigtige, så længe det er den position, virksomheden ønsker at indtage.

blue arrow to the left
Imaginary Cloud logo

Hvordan designstil forvandler den samme information til en forskellig oplevelse

Der er mange måder at omdanne et sæt informationer og krav til en positiv brugeroplevelse, og valget mellem dem er der, hvor positioneringen bliver afgjort. Lad os sammenligne to, der begge er nemme at bruge, og som begge organiserer den samme information godt.

Cloud, Tifa og Barret mod en fjende i FF VII. UI viser taktisk planlægning og stilfuldt design.

Kampinterfacet i Final Fantasy VII præsenterer alt, hvad spilleren har brug for. Ved hjælp af menuer, tekst, tal og bjælker er al vigtig information tilgængelig på en enkel og praktisk måde. Det er letlæseligt ved et hurtigt blik, og det viste sig at være holdbart: Hvert hovedspil frem til Final Fantasy XV i 2016 benyttede en variation af den samme menustruktur.

Umiddelbart virker det til, at Persona 5 tilbyder en helt anden oplevelse. Det gør det ikke. Dets interface er bygget på den samme information, blot stylet på en anden måde. De to adskiller sig ved måden, man vælger en handling på – via enkeltknap-handlinger frem for at vælge fra en menu – og udover det fungerer alt på samme måde.

Stilfuldt UI i Persona 5: Joker planlægger sit træk i et rødt rum via en markant kampmenu.

Så hvilken en er en forbedring af den anden? Ingen af dem. Der er intet galt med menuen i Final Fantasy VII, og de skrå typer og animationer i Persona 5 løser ikke et brugervenlighedsproblem. De to sælger forskellige produkter til forskellige målgrupper ved hjælp af den samme underliggende information. Hvis du vil have et mere dybdegående kig på UX- og UI-designet i Persona 5, så følg denne analyse af Ridwan Khan.

blue arrow to the left
Imaginary Cloud logo

Hvorfor designbeslutninger er strategiske, ikke kosmetiske

Stil ændrer brugeroplevelsen. Det har også konsekvenser, der rækker langt ud over skærmen, fordi UX- og UI-design definerer det billede, et produkts kommunikationsstil og markedsposition projicerer. Små ændringer på komponentniveau. Sjældent små på brandniveau.

Bloomberg-startside med aktiekurser, politiske nyheder og Microsoft Cloud-reklamer.

Bloomberg er et godt eksempel på modigt design, som vi allerede har undersøgt i en anden sammenhæng i en tidligere artikel. Eksemplet ovenfor viser hjemmesiden før redesignet i 2018, og når man ser på det i dag, virker det, som om der ikke er noget galt med det. Nogle gange er pointen ikke at se bedre ud end før. Pointen er at se anderledes ud.

Som John Micklethwait, Bloombergs chefredaktør, forklarede dengang, fulgte redesignet med lanceringen af en digital abonnementsforretning og var bygget til at gøre læserens oplevelse renere og mere fokuseret. Når man ser på begge versioner nu, er den største forskel stilen. De vendte tilbage til sort-hvid og organiserede enkelte elementer anderledes, mens selve interfacet er meget lig hinanden.

Stilfuldt Bloomberg-design med overskrift om Brexit-aftale og foto af Michel Barnier.

Intet af dette er kosmetisk. En læser kan opnå det samme i begge versioner, så forskellen ligger udelukkende i, hvad virksomheden projicerer: nøgtern og autoritær i det ene tilfælde, mere travl og konventionelt nyhedspræget i det andet. For en abonnementsvirksomhed, der sælger information, som delvist er tilgængelig andre steder, er produktets autoritære fremtoning en del af det, der bliver solgt.

Vi ser den samme mekanisme i vores arbejde med kunder. Da Moloco havde brug for, at deres side fremstod som en platform i verdensklasse frem for blot en kompetent løsning, var løsningen en Growth Audit og en restyling, der var målrettet netop den opfattelse – informationen blev knap nok flyttet; den autoritet, den projicerede, gjorde.

UX-auditreklame: fordele for brugeroplevelse og engagement med 3D-mobilapp-grafik.
blue arrow to the left
Imaginary Cloud logo

Planlægning af designændringer: de fire faser i en analyse af positioneringskløfter

Det ord, der mangler i de fleste samtaler om restyling af et produkt, er planlægning. En stilændring er en ændring af det, dine kunder genkender, så betragt det som en bygningsinspektion frem for et lag maling. Du vil vide, hvad der er bærende, før nogen tager en pensel i hånden, og du vil have det på skrift.

Hos Imaginary Cloud kører vi dette som en analyse af positioneringskløfter: fire faser, hver med et skriftligt output, der ender i en udgivelsesplan frem for blot et sæt skærmbilleder. Det er den samme disciplin, der ligger bag vores produktdesignproces: da vi genopbyggede Environmental Intellects brugerflade for at projicere et mere teknologisk og troværdigt image, forløb arbejdet gennem fire definerede faser i stedet for at springe direkte til det visuelle. Rækkefølgen betyder mindre end én detalje: evidensfasen kommer før tegningsfasen, og det er det skridt, de fleste redesigns springer over.

Fase 1: definér kløften

Før der tegnes noget som helst, skal du nedskrive den position, du har, den position, du ønsker, og beviserne for afstanden mellem dem. Salgsindsigelser, supporthenvendelser, churn-interviews, det sprog konkurrenter bruger i deres egen markedsføring: alt dette koster mindre end et redesign. Outputtet er én sætning, der navngiver kløften. Hvis du ikke kan skrive den sætning, har projektet endnu ikke et brief.

Fase 2: adskil et positioneringsproblem fra et brugervenlighedsproblem

Se på, hvordan det nuværende design fungerer for dem, der bruger det, ikke kun hvordan det ser ud. Sessionsoptagelser, gennemførelsesrater for opgaver og en håndfuld modererede interviews (essensen af en UX-audit) vil fortælle dig, hvilket af de to problemer du står med. De kræver forskelligt arbejde, og at forveksle dem er den dyreste fejl i hele denne proces. En restyling løser ikke et ødelagt flow. En forbedring af brugervenligheden ændrer ikke på, hvordan et brand opfattes. Når problemet reelt er brugervenlighed, er gevinsten direkte: et audit-ledet redesign af Learninghubz øgede antallet af aktive brugere med 20 % og mobilbrug med mere end 50 % inden for tre måneder efter lanceringen.

Outputtet er en kort konklusion, der fastslår, hvilket problem budgettet bliver brugt på at løse.

Fase 3: test stilen, ikke kun skærmbillederne

Stilbeslutninger kan testes, før de bygges, og det til en lav pris. Præsenter to retninger for et udvalg af din målgruppe og spørg, hvilken type virksomhed hver retning tilhører, hvad det ville koste, og hvem det er til. Tre metoder dækker det meste:

  • Præferencetest, hvor folk vælger mellem retninger og begrunder hvorfor, hvilket afdækker de associationer, en retning vækker.
  • First-click-test, hvor folk får en opgave, og du registrerer, hvor de klikker først, hvilket afslører, hvis en retning i al stilhed har gjort det sværere at finde hovedhandlingen.
  • En blindundersøgelse, hvor designet vises uden logo, så svarene afspejler stilen frem for det omdømme, der allerede er knyttet til jeres navn.

Resultatet er en valgt retning med tilhørende begrundelser. Denne dokumentation forhindrer, at beslutningen bliver taget op til genovervejelse, hver gang en ny interessent går forbi en skærm.

Fase 4: begræns risikoen ved lanceringen

Risikoen ved et redesign er, at genkendelighed og konvertering falder, mens brugerne skal lære et velkendt produkt at kende på ny. Fire tiltag begrænser denne risiko:

  • Lancér i etaper frem for med ét samlet skift.
  • Behold den tidligere version tilgængelig, hvis ændringen påvirker et betalingsflow.
  • Mål konvertering og supportvolumen før ændringen, så der er et baseline-grundlag at sammenligne med.
  • Aftal på forhånd, hvilket resultat der vil retfærdiggøre en annullering, og hvem der træffer den beslutning.

En gradvis lancering tager længere tid, men efter vores erfaring er der tale om uger frem for måneder. Det, du køber dig til, er muligheden for at stoppe op. Et enkelt skift fjerner den mulighed. Målt mod en korrekt baseline tjener et positioneringsdrevet redesign sig selv hjem: vores egen relancering af hjemmesiden, der blev udført på baggrund af en Growth Audit og den samme Product Design Process, øgede konverteringen med 5 % inden for tre måneder og fortsatte med at stige.

Budgettet følger omfanget, og det realistiske spænd er bredt. Et fokuseret redesign af et produkts visuelle sprog tager få uger. Et fuldt redesign, der involverer designsystemet (det fælles bibliotek af komponenter, farver og typografiske regler, som produktet er bygget op af), sammen med marketingsitet og selve produktet, strækker sig over måneder og kræver udviklingstimer. Vær ærlig omkring tid-til-værdi fra starten, for en designændring betaler sig tilbage gennem opfattelse, og opfattelse ændrer sig over kvartaler, ikke sprints.

blue arrow to the left
Imaginary Cloud logo

Sådan vurderer du, hvornår en designændring er risikoen værd

Findes der et optimalt tidspunkt for et redesign? Nej, ikke i generel forstand. Grafisk design illustrerer dette tydeligere end produktdesign. Twinings of London har benyttet stort set det samme logo i over to århundreder – et af de ældste, der stadig er i brug – mens Juventus Football Club udskiftede et klubemblem, de havde brugt i årtier, med et abstrakt "J". Det blev præsenteret i januar 2017, designet af Interbrand (og yderligere forenklet i 2020). Nogle produkter ændrer sig aldrig, mens andre ændrer sig næsten hvert år, og begge dele kan være den rigtige beslutning.

Det er netop det interessante ved alle eksemplerne i denne artikel: Ingen af dem er rettelser af fejl. Der findes ikke god eller dårlig styling, kun en stil, der er bedre eller dårligere egnet til et produkts forretningsmæssige mål. Beslutningen hører under strategisk tænkning, som i langt højere grad er en del af produktdesign end selve brugerfladen eller oplevelsen.

Google viser begge sider af beslutningsprocessen internt i samme virksomhed. Da Chrome tog Material You til sig (Googles designsprog introduceret med Android 12, hvor farver og former tilpasser sig brugerens egne indstillinger), forblev browseroplevelsen tæt på det, den erstattede. Det fremstår som en markering af, hvilken produktfamilie browseren tilhører, snarere end en reparation. Den integrerede Gmail-visning, som Google annoncerede på deres Workspace Updates-blog i starten af 2022, ændrede derimod både brugerfladen og oplevelsen markant. Begge dele var bevidste valg. Men med vidt forskellige formål.

Den praktiske test består i at finde ud af, hvilken af de to ting du reelt foreslår:

Juster det eksisterende designRebranding
Hvornår det gælderPositioneringen er rigtig, eksekveringen er forældetSelve positioneringen har ændret sig: ny målgruppe, prisklasse eller marked
Hvad der ændresVisuelt sprog, komponenter, hierarkiIdentitet, navnebehandling, tone of voice og alt afledt heraf
Typisk omfangUger, designdrevetMåneder, design og udvikling i fællesskab
Største risikoUoverensstemmelse på tværs af flader under udrulningenTab af genkendelighed blandt eksisterende kunder
Nødvendig dokumentationBrugervenlighedsundersøgelser og varemærkeauditMarkedsdokumentation for, at positionen har ændret sig

Lige gode løsninger kan repræsentere vidt forskellige positioner i en branche. Det bedste tidspunkt at ændre design på er derfor, når det billede, dit design projicerer, ikke længere stemmer overens med den position, din virksomhed ønsker at indtage. Ofte skal der ikke meget til for at ændre det indtryk. Det handler om at justere produktets stil i forhold til forretningsmålene, baseret på dokumentation for, at kløften mellem de to er reel.

blue arrow to the left
Imaginary Cloud logo

Ofte stillede spørgsmål om designplanlægning

Hvornår bør en virksomhed redesigne sin produktgrænseflade?

Når det billede, designet projicerer, ikke længere stemmer overens med den position, virksomheden ønsker at indtage, eller når undersøgelser viser, at brugerne ikke kan løse deres opgaver. Et redesign, der kun er drevet af smag, bruger budgettet uden et målbart mål, så definér det hul, du forsøger at lukke, før arbejdet går i gang.

Påvirker visuel stil brugeroplevelsen, eller kun opfattelsen?

Begge dele, og de er svære at adskille. Stilen former, hvad en bruger forventer af et produkt, før de overhovedet rører det, og disse forventninger ændrer, hvordan den samme grænseflade føles. Final Fantasy VII og Persona 5 er ekstreme eksempler: næsten identisk information, men to vidt forskellige oplevelser.

Hvordan beslutter man sig mellem at forfine et design og et rebrand?

Forfinelse er det rigtige valg, når positioneringen er korrekt, men udførelsen er forældet. Rebranding er det rigtige valg, når selve positioneringen har flyttet sig på grund af et nyt publikum, et nyt prisniveau eller et nyt marked. Sidstnævnte er dyrere og mere risikabelt, så det kræver markedsdokumentation frem for blot en præference.

Hvad er risiciene ved en designændring?

Tab af genkendelighed, et midlertidigt fald i konvertering, mens brugerne lærer produktet at kende på ny, og udviklingsomkostninger, som ingen havde budgetteret med. Alle tre kan håndteres med en faseopdelt udrulning, et målt udgangspunkt og en aftalt plan for at rulle ændringerne tilbage.

Hvor lang tid tager en designændring?

En fokuseret restyling af det visuelle sprog tager uger. Et fuldt redesign, der dækker designsystemet, marketingsitet og selve produktet, tager måneder og kræver udviklingskapacitet sideløbende med designet. Gevinsten viser sig i opfattelsen, som ændrer sig over kvartaler.

Hvad koster et redesign?

Prisen følger omfanget og antallet af berøringsflader, ikke antallet af skærmbilleder. En visuel opfriskning af ét produkt er i den billige ende. Alt, hvad der ændrer designsystemet – og dermed alt, hvad der er bygget ud fra det – medfører implementeringsomkostninger i udviklingen, som normalt overstiger designgebyret.

Er designplanlægning vigtig for B2B-produkter?

Ja, og måske endda mere. En gennemtænkt grænseflade fungerer som bevis på, at virksomheden bag er troværdig, og i et købsforløb, hvor køberen ikke kan inspicere selve teknikken, er designet et af de få signaler, de har.

blue arrow to the left
Imaginary Cloud logo

Få styr på positioneringen, før du tegner pixels

Stil er ikke bare pynt, man lægger oven på et produkt. Det er produktet, der fortæller folk, hvad det er, før de overhovedet har læst et ord af din tekst. Hvis den sætning er forkert, kan ingen mængde polering redde den.

Hos Imaginary Cloud designer vi digitale produkter ud fra den position, de skal indtage, og ikke kun ud fra de skærme, de skal vises på. Hvis du overvejer et redesign og er i tvivl om, hvorvidt du har et problem med din positionering eller din brugervenlighed, så tag en snak med vores team og vi vil gennemgå, hvad dit nuværende design fortæller om dig.

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Sandro Cantante
Sandro Cantante

Indholdsadministrator, teksteditor, og præsentator for strategiske ideer, sammen med at være en ivrig fan af filmkunst og visuel historiefortælling.

Read more posts by this author

People who read this post, also found these interesting:

Dropdown caret icon