Interfacets format

I gamle dage (læs: tiden før 2007, hvor den første iPhone blev lanceret) var jobbet som interfacedesigner på mange måder nemmere, end det er i dag. Dengang var websites noget, man tændte for sin laptop- eller desktop-computer for at se på, og selvom der også dengang var forskel på computernes skærmstørrelser, var de reelle forskelle til at overse – og der var kun ganske få brugere, der foretrak små håndholdte enheder til deres “browsing”.

På grund af de forholdsvis homogene skærmstørrelser arbejdede man med “standardstørrelser”, når man designede interfaces. “Du skal bare holde dig inden for 800x600 pixels – så passer det til alle skærme!” var en klassisk kommentar i begyndelsen af 00’erne. Kun ganske få havde en skærm, der ikke kunne vise dette format, og havde brugeren en skærm med højere opløsning, ville de blot få vist websitet med white space på begge sider af de 800 pixels, som interfacet fyldte i bredden.

Udbredelsen af “standardstørrelserne” blev sandsynligvis hjulpet på vej af, at mange webdesignere havde en fortid inden for grafisk design til print, hvor det er helt naturligt at tale om faste formater, da det papir, designet skal printes på, i sagens natur har en målbar størrelse (for eksempel standardformaterne A1, A2 og A3). Standardformater giver designeren fuld kontrol over, hvordan produktet bliver præsenteret for brugeren – en kon­trol, der giver fuldt overblik over begrænsninger og muligheder i forhold til den information, der skal præsenteres. Men print og web er to vidt forskellige ting, og med webinterfaces opnår vi aldrig 100 procent kontrol over, hvordan vores design præsenteres for brugeren. John Allsopp påpegede allerede i 2000 problematikken:

Den kontrol, som designere kender fra printmediet og ofte ønsker i webmediet, er simpelthen en funktion af begrænsningerne ved den printede side. Vi bør omfavne det faktum, at internettet ikke har de samme begrænsninger, og designe til denne fleksibilitet.

John Allsopp

Dimensioner versus opløsning

Når man taler om “skærmstørrelser” er det vigtigt at sondre mellem skærmens fysiske dimensioner og skærmens opløsning. De fysiske dimensioner måles oftest i tommer diagonalt fra hjørne til hjørne af skærmen – en typisk laptop-computers skærm ligger ofte et sted mellem 12 og 15 tommer. Skærmens opløsning er et udtryk for, hvor mange pixels skærmen består af, for eksempel 1366 pixels i bredden og 768 pixels i højden. To 13-tommer-skærme, hvor den ene består af 1366x768 pixels og den anden af 1920x1080 pixels, har således de samme dimensioner, men forskellig opløsning. Man siger også, at den ene skærm har højere PPI (“pixels per inch”) end den anden – den har ganske enkelt flere pixels på det samme areal.

Men det stopper ikke her, for der er også forskel på, hvordan en skærm “bruger” sine pixels. Nogle skærme, blandt andet Apples populære retinaskærme, har så høj PPI, at de kan bruge flere pixels til at vise den samme grafik, som andre skærme må nøjes med en enkelt pixel til at vise. For eksempel har iPhone 3 og iPhone 4 begge en skærmstørrelse på 3,5 tommer, men iPhone 4, der var den første af sin slags med retinaskærm, har fire gange så mange pixels til rådighed på det samme areal (Kearney 2015). Så selvom en iPhone 4 har en opløsning på 640x960 pixels, og en iPhone 3 kun har 320x480 pixels, bruges de ekstra pixels ikke til at vise mere information på skærmen, men derimod til at øge detaljeringsgraden på de elementer, der vises.

Som interfacedesigner skal man være varsom med at bruge opløsning som rettesnor for interfacets layout. Det er langt bedre at forholde sig til det format, som brugeren oplever. Selvom retinaskærme indeholder flere pixels and “almindelige” skærme på det samme areal, ændres formatet sjældent ret meget. Eksempelvis ganger iPhone 6+, 7+ og 8+ sine pixels med faktor 3, hvilket betyder, at de kan vise billeder på helt op til 1242x2208 pixels – men over for brugeren bevarer de tre telefoner et format, der svarer til 414x736 pixels (Larson 2017). I praksis betyder det, at vores layout ikke “opfører” sig meget anderledes på en iPhone 8+ end på smartphones med langt lavere opløsning.

Over/under folden

Når aviserne ligger i en stak hos købmanden, er de som regel foldet på midten, så det kun er den øverste halvdel af forsiden, der kan ses. Begrebet “over folden” refererer således til den øverste synlige halvdel, og “under folden” refererer til den halvdel, der vender nedad og derfor ikke kan ses. Avisredaktører vælger oftest at placere den vigtigste nyhedshistorie og den mest fængende overskrift over folden ud fra den betragtning, at det sandsynligvis får flere til at købe avisen. Folden er også afgørende for, hvor dyrt det er at annoncere i avisen – pladsen under folden er billigere end over folden.

I forhold til webdesign refererer over folden til den del af interfacet, som brugeren umiddelbart kan se uden at skulle scrolle (de Soto 2014: 69). Området over folden er den mest værdifulde, da det her er muligt at kommunikere med brugeren, uden at han eller hun skal foretage sig noget. Værdien af området over folden underbygges af såkaldte eyetracking-studier (undersøgelser af, hvor på skærmen brugernes øjne fokuserer), der viser, at de 100 pixels lige over folden bliver set over dobbelt så mange gange som de 100 pixels lige under folden (Schade 2015). Brugerne vil gerne scrolle, men kun hvis det, de ser over folden, ser tilpas lovende ud.

Men når brugerne anvender vidt forskellige enheder og skærmstørrelser – hvor er folden så? Der er ikke noget entydigt svar. Store skærme med høj opløsning vil i sagens natur have mere plads over folden end små skærme med lav opløsning. Som interfacedesigner skal du derfor gå efter laveste fællesnævner, hvis du vil være sikker på, at budskabet når frem til alle brugere, uden de behøver at scrolle. Mens dette skrives, har kun ganske få brugere skærme, der er mindre end 640 pixels i højden, hvilket er det format, som mange smartphones opererer med. Fratrækker man den plads, som browseren bruger til at vise webadressen i toppen af skærmen, hvilket ofte drejer sig om 40-60 pixels på en smartphone, får vi en “minimumsfold” ved ca. 600 pixels. Så selvom man skal være forsigtig med at definere “standardstørrelser”, kan man godt bruge 600 pixels som en nedre grænse for, hvor interfacets vigtigste budskab bør placeres. Men for mange brugere vil formatet have flere pixels i højden og folden være placeret væsentligt længere nede i interfacet. Det er derfor afgørende, at du tester, hvordan interfacet ser ud i forskellige formater, så du er sikker på, at hovedpointen fremstår klart, inden brugeren begynder at scrolle.

Responsivt design

Responsivt design er en webudviklingsmetode, hvor der skabes dynamiske ændringer i udseendet af et interface afhængigt af skærmens størrelse (Schade 2014). Formålet er at få indholdet til automatisk at tilpasse sig den skærmstørrelse, som brugeren benytter, i erkendelse af at forskellige brugere vil tilgå det samme interface fra mange forskellige enheder – fra små telefoner til store desktopskærme. I praksis vil man ofte have en øvre grænse for bredden af interfacet, hvor man stopper med at ændre layoutet, eksempelvis ved at “låse” det midt på skærmen og tilføje fleksible margener uden indhold i begge sider. Avisen The Boston Globe har et interface, hvor layoutet på elegant vis anvender responsivt design, så indholdet præsenteres i henholdsvis én, to eller tre kolonner afhængigt af skærmbredden.

Et eksempel på et interface, der ikke anvender et responsivt design, kan ses på Risskov Møbelsnedkeris website. Ses interfacet på en laptop (1366x768 pixels), fungerer det nogenlunde fornuftigt. På en telefon får brugeren dog problemer – layoutet er uændret i forhold til på en laptop, men da mobilformatet er langt smallere, bliver resultatet en slags “miniatureinterface”, hvor alt bliver vist så småt, at indholdet ikke kan ses ordentligt, og hvor det bliver nærmest umuligt for brugeren at interagere med interfacet. Brugeren er nødsaget til at zoome ind for at se indholdet, men nu vises kun et lille hjørne af interfacet, hvorfor man er nødsaget til at scrolle vandret frem og tilbage for at få det hele med. Konsekvensen er muligvis, at brugeren opgiver og begynder at lede efter et andet snedkerfirma.

Betegnelsen responsive web design blev introduceret i 2010 i en artikel af Ethan Marcotte (Marcotte 2010), hvori han også definerede, hvilke kriterier der er forudsætningen for, hvornår et interface kan betragtes som responsivt. Marcotte har en teknisk baggrund inden for frontendudvikling, så hans kriterier for responsivt design har et forholdsvis teknisk perspektiv med afsæt i CSS-kode. Marcotte uddybede efterfølgende konceptet i sin bog med titlen Responsive Web Design, hvori han igen specificerer de tre kriterier, der ifølge ham er en forudsætning for responsivt design (Marcotte 2011: 9):

• Layoutet skal baseres på et fleksibelt grid
• Billederne skal være dynamiske i størrelsen, så de tilpasser sig formatet
• Der skal anvendes media queries i CSS-koden

Selvom ovenstående retningslinjer giver rigtig god mening, når interfacets frontendkode skal implementeres, kan man med fordel indarbejde principperne for responsivt design allerede i starten af designprocessen – længe før den første linje kode skrives. For når alt kommer til alt, er det grundlæggende formål med responsivt design ikke blot at lave fornuftig kode – det starter ud fra et ønske om at løse en konkret formidlingsopgave på bedste vis. Vi skal derfor “tænke responsivt”, allerede når vi brainstormer og skitserer, i erkendelse af at vi designer en visuel løsning, der skal fungere på et dynamisk lærred.

Breakpoints

Når man designer responsivt, bruger man såkaldte breakpoints til at bestemme, hvornår layoutet skal ændre sig, så det passer bedst muligt til et givent format (Schade 2014). Breakpoints defineres normalt ud fra browserens bredde. Man kan betragte et breakpoint som en visuel grænse, der specificerer, hvornår et givent layout skal bruges, og hvornår det skal erstattes af et andet, der passer bedre i forhold til formatet. Stephen Hay peger på tre faktorer som de mest oplagte årsager til, at et layout har behov for at ændre karakter (Hay 2013: 92):

• Faktorer i forhold til interfacets visuelle design og layout: For eksempel hvis der er behov for at ændre farve, størrelse eller placering af elementer i interfacet.
• Faktorer i forhold til interfacets funktion: For eksempel hvis der er behov for, at navigationen fungerer anderledes på håndholdte enheder i forhold til stationære.
• Faktorer i forhold til interfacets indhold: For eksempel hvis visse indholdselementer udelades på mindre skærme på grund af begrænset plads.

Der er i princippet ikke nogen grænse for antallet af breakpoints, men i praksis er det de færreste interfaces, der har behov for mere end tre-fire forskellige layouts, hvor der er væsentlige visuelle forskelle. En udbredt praksis er at tage udgangspunkt i tre primære layouts, der i grove træk dækker hele bredden fra telefon til desktop:

• Et lille håndholdt format til eksempelvis smartphones
• Et mellemformat til eksempelvis tablets
• Et stort format til eksempelvis laptop- og desktop-computere

Ofte er der kun behov for forholdsvis små justeringer i layoutet. Et eksempel på dette er B&O Play, der i det mindste format, hvor pladsen er trang, fokuserer på kerneforretningen ved at præsentere produkter og guide brugeren til køb. I mellemformatet er der mere plads, så billedet skiftes ud med en mere stemnings- og følelsesbetonet udgave, og samtidig er der blevet plads til hovedmenuen øverst. I det brede format er der plads til mere luft i billedet, hvilket giver mulighed for bedre at understøtte det enkle og eksklusive udtryk, der kendetegner produkterne. Uanset formatet bevarer B&O Play sit kommunikative fokus – i dette eksempel promovering af Beoplay H9i-hovedtelefoner.

Breakpoint-diagrammer

Tidligt i layoutfasen, hvor vi ikke har alle detaljerne om det visuelle udtryk på plads, kan det være en stor hjælp at visualisere layoutets breakpoints ved hjælp af et breakpoint-diagram. Et breakpointdiagram fungerer som et kvalificeret gæt på, hvor vi forestiller os, at det giver mening at have breakpoints i layoutet (Hay 2013: 92). Senere, når vi er længere fremme i designprocessen, er vi i stand til at placere layoutets breakpoints mere nøjagtigt. Et breakpoint-diagram er således et dynamisk dokument, der udvikler sig sammen med designet – i starten af processen fungerer diagrammet som en visualisering af layoutet på et konceptuelt niveau, og senere kan diagrammet fungere som egentlig dokumentation, der præciserer, ved hvilke pixel-bredder der skal anvendes media queries i koden.

Referencer

• de Soto, D. (2014). Know Your Onions: Web Design. Amsterdam: BIS Publishers.
• Hay, S. (2013). Responsive Design Workflow. Berkeley: New Riders.
• Kearney, D. (2015). Mobile design 101: pixels, points and resolutions. Tilgået 02.05.2018 fra blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions
• Larson, K. (2017). iPhone 6 Screen Size and Web Design Tips. Tilgået 02.05.2018 fra kylejlarson.com/blog/iphone-6-screen-size-web-design-tips
• Marcotte, E. (2010). Responsive Web Design. Tilgået 07.05.2018 fra alistapart.com/article/responsive-web-design
• Marcotte, E. (2011). Responsive Web Design. New York: A Book Apart.
• Schade, A. (2014). Responsive Web Design (RWD) and User Experience. Tilgået 07.05.2018 fra nngroup.com/articles/responsive-web-design-definition

Vil du have mere?

Bogen kan købes hos alle landets boghandlere, studieboglader og internetboghandlere. Er du underviser på en videregående uddannelse, kan du bestille et gratis pensumeksemplar hos Samfundslitteratur.