Forsvar for kunstigt læder og mahogni-paneler… næsten da

I 2013 blev iOS 7 til iPhone lanceret og udseendet blev dermed meget mere “fladt” at se på. Man kan også sige, at designet i sit udseende på mange måder blev mere skandinavisk – lyst og luftigt frem for det, der allerede nu i manges øjne så lidt tungt ud i iOS 6. Skiftet i udseendet af iOS var også resultatet af en større designbølge, der blev sat rigtigt i gang med Windows 8 – klare farver, rene flader, simple fonte. I dette indlæg vil jeg give nogle eksempler på, hvorfor vi skal passe på med ikke at lave vores designs alt for flade.

Der er stor forskel på, hvordan det ser ud, når du skal oprette en kalenderevent i iOS 6 og når du skal gøre det i iOS 7. Den nye udgave er i de flestes øjne nok smukkere, men den kan også være sværere at orientere sig i.

Der er stor forskel på, hvordan det ser ud, når du skal oprette en kalenderevent i iOS 6 og når du skal gøre det i iOS 7. Den nye udgave er i de flestes øjne nok smukkere, men den kan også være sværere at orientere sig i.

Den flade designstil fik en kickstart med Windows 8.

Den flade designstil fik en kickstart med Windows 8.

Apple blev ligefrem mobbet for deres mange forskellige interfaces, der bl.a. bestod af imiteret læder med syninger, papir, træ og andre materialer. Websitet Gizmodo sammenstillede f.eks. Apples kalenderprogram med en indianerjakke, der vist ikke er fra denne eller forrige sæsons modekatalog:

Apple blev mobbet for ikke at være stilede nok i deres apps.

Apple blev mobbet på forskellige netmedier for ikke at være stilede nok i deres apps.

Kommunikér konceptet
Det er dog værd at huske på, hvorfor Apple i første omgang indførte brugen af disse meget fysiske metaforer i deres brugergrænseflader. I design- og teknologikredse kaldes designgrebet  “skeumorfisme”, der baserer sig på troen på, at brugergrænseflader skal have en vis visuel sammenhæng med lignende objekter i den fysiske verden, så brugerne hurtigere kan forstå funktionaliteten. Igennem udviklingen af brugergrænseflader har det faktisk haft stor succes:

Apple_Macintosh_Desktop

Skrivebords-metaforen hjalp i 1980’erne folk til at forstå hvordan de kunne bruge deres computer.

I 1984 blev Macintosh lanceret, og “desktop-metaforen” blev her rigtigt udbredt. Man imiterede skrivebordet hvorpå der lå dokumenter, som man kunne flytte rundt på og lægge i hængemapper, som man kendte dem fra kontoret. Metaforen blev også brudt: På et analogt skrivebord ligger der ikke disketter og skraldespanden står heller ikke oppe på bordet – men metaforen hjalp alligevel brugerne på vej til at forstå, hvordan de kunne arbejde uhindret med computeren. Man anvendte således en metafor som var med til at tune brugerne ind på et helt nyt koncept med en helt ny verden af begreber.

Jyske Bank fik stor succes med deres næsten overdrevne metaforbrug. Og det er ikke just skandinavisk designstil der er i brug her.

Jyske Bank fik stor succes med deres næsten overdrevne metaforbrug. Og det er ikke just skandinavisk designstil, der er i brug her.

Det samme gjorde Jyske Bank, da de lancerede en af danmarks første netbanker til smartphonen. Deres netbank bestod af mørke træhylder der bærer “varerne i butikken” – helt i stil med det indretningsprincip, de fysiske banker havde indført.

I Vertica står vi bl.a. bag Føtex’ indkøbsliste-app “Indkøbshælp”. Den har i sin visuelle fremtoning referencer til den analoge indkøbsseddel – netop ud fra princippet om at signalere genkendelighed og omgående forståelse af, hvad app’en kan bruges til.

Føtex' indkøbsliste-app ligner med held en analog indkøbsliste.

Føtex’ indkøbsliste-app ligner en analog indkøbsliste.

Desktop-metaforen, Jyske Banks træhylder og Føtex’ afrevne indkøbsliste er altså eksempler på, at skeumorfisme kan styrke brugernes fornemmelse af, hvad et produkt kan bruges til. Det er også eksempler på, at applikationen bliver en mindeværdig oplevelse, og ikke bare et simpelt værktøj.

Skyggen på knappen kan være afgørende for, hvor mange kroner der kommer i kassen
Men skeumorfisme eller metaforer er også højaktuelle helt nede i detaljen, også hvor det ikke er nødvendigt at kommunikere et nyt, banebrydende koncept. Når du f.eks. designer en knap, som brugerne skal bringes til at trykke på, trækker du på virkelighedens tredimensionelle udseende – men skeumorfisme er på dette punkt blevet så almindeligt, at vi nogle designere næsten helt har glemt, hvorfor man indførte det.

Screen Shot 2013-11-04 at 13.54.09

Hvilken knap signalerer mest “tryk på mig”?

Det er rigtigt nok den venstre der signalerer mest “tryk på mig” – og årsagen er dens evne til at fremstå som en tredimensionel figur, der står lidt ud i rummet, som var det en fysisk knap. Afprøver man de to forskellige designs på samme website (f.eks. i en splittest) vil man kunne se forskel på, hvor mange brugere, der trykker på knappen. De små grafiske skyggevirkninger kan betyde en forskel på tusinder af kroner i omsætning i webshoppen eller antal tilmeldte brugere til nyhedsbrevet.

Opdager brugerne søgefeltet?
Da Facebook lancerede seres “graph search”, oplevede de på egen krop, at et for fladt design kan betyde, at brugerne slet ikke opdager en væsentlig funktion. I starten var søgefeltet helt blåt, og eneste tegn på, at man kunne sætte sin markør for at starte sin søge-indtastning var ordene “News Feed”. Håbet havde været at reducere den visuelle støj, som opstår med et hvidt felt, der har høj kontrast til den blå baggrund sammen med en iøjnefaldende søgeknap. Ideen var måske god, men realiteten blev enorm forvirring for brugerne, der ikke kunne finde den nye søgefunktion.

Screen Shot 2013-11-04 at 14.20.00

Evolutionen af et søgefelt

Facebook gennemførte en række tests med justerede designs. Man skiftede farven til hvid på søgefeltet, og det gav dobbelt så gode resultater som den næstbedste løsning, hvor man forsøgte sig med mørkeblå baggrund. Man prøvede også at tilføje et klassisk søge-ikon (luppen) og at indsætte en mere beskrivende tekst – det gav yderligere forbedringer.

Find balancen mellem smukt og funktionelt – det behøver ikke at være modsætninger
Mit budskab er, at næste gang du evaluerer et grafisk design fra din digitale designer, så er det vigtigt, at du ikke kun ser på, om det ser smukt ud, og om det er i den nyeste design-trend med klare farver og flade felter. Det skal selvfølgelig se godt ud, og det skal nok ikke få dig til at tænke på en imiteret læderjakke – men signalerer det tydeligt, hvad brugeren kan klikke på, og hvordan han kommer videre? Det er vigtigt.

Min pointe er også, at diskussionen om metaforer og skeumorfisme ikke må være sort/hvid: Den dygtige digitale designer formår at lave noget, der er smukt at se på, samtidig med at det understøtter den funktion, vi vil kommunikere til brugerne.

Skriv et svar

Udfyld dine oplysninger nedenfor eller klik på et ikon for at logge ind:

WordPress.com Logo

Du kommenterer med din WordPress.com konto. Log Out / Skift )

Twitter picture

Du kommenterer med din Twitter konto. Log Out / Skift )

Facebook photo

Du kommenterer med din Facebook konto. Log Out / Skift )

Google+ photo

Du kommenterer med din Google+ konto. Log Out / Skift )

Connecting to %s