UI lost in translation

UI lost in translation

Nogle designere er på udebane, når de arbejder med apps. De kommer især til kort, når de skal overlevere deres arbejde og beskrive alle for app-udviklingen relevante dele. Andre designere har helt styr på apps, men budgetter og deadlines afholder dem fra at komme i mål med specifikation og overlevering. Desværre er designspecifikationen noget af det første, der bliver droppet, når projektet er under pres. Sikkert fordi det ikke er noget kunden umiddelbart kan se værdien i.

I begge situationer opstår en forståelseskløft mellem design og udvikling. Udviklere kan ikke gætte sig til, hvad designere tænker – men måske kan designere heller ikke gætte sig til, hvad udviklere har brug for?

Det sidste han vi fikse. Designer: Sådan briefer du din app-udvikler.

Pixel-perfekte screens

Hvor mange screens? Nok! Som minimum det antal, der repræsenterer dine forskellige sidetyper. Om du arbejder i Adobe-programmer eller er blevet glad for Sketch er lige meget. Bare du arbejder struktureret. Hvis du afleverer et rod, skal nogen rydde op efter dig (hvem betaler for det?).

Dine planer for små skærme

Du kommer ikke udenom dem, de små skærme. Du designer jo apps og ikke plakater. Det er fint at brugeroplevelsen er optimeret til noget andet og større, men du og jeg er nødt til at tage stilling til, hvordan UI skal opføre sig under mindre end (efter vores mening) ideelle forhold. Det er den virkelighed appen skal overleve i.

States for interaktive elementer

Hvis du ikke angiver nogen, så sker der een af to ting:
1) Din app har ingen umiddelbar feedback ved interaktion (det er skidt)
2) Du får en kombination af platform-standard states, ingenting og det, din udvikler synes er flot (det er bedre, men stadig skidt)

Dine planer for Android

Kære designer, dette punkt er vigtigt! Hvis du ikke siger til os, hvordan din app skal se ud og opføre sig på en Android-telefon, så sker der potentielt det samme, som når du undlader at angive states: En masse som brugerne ikke bliver glade for.

Udklippede ikoner og grafiske elementer

I skrivende stund (og det ændrer sig hurigt) er det @2x og @3x PNG for iOS og en kombination af SVG og PNG (fra MDPI til XXXHDPI) til Android. Du skal rentegne dine ikoner først og sørge for at dem, der skal have samme størrelse faktisk har samme størrelse. Du skal også sørge for, at bestemte typer ikoner har helt bestemte størrelser (fx app- og produktikoner).

Transitions og animation

Video/prototype-format er mindre vigtigt, så længe du tydeligt formidler ambitionen. Værktøjer som InVision, Proto.io, Framer og After Effects kan gøre forskellige ting for dig. Hvilket værktøj, der passer bedst, afhænger af det, du vil kommunikere. Du skal klæde udviklerne godt nok på, så de forstår, hvornår din statusbar forsvinder eller skifter farve. De skal forstå, hvilken region af en side, der scroller og hvad der i øvrigt flytter på sig. De skal også forstå, hvordan en side opfører sig, når den overtager og forlader skærmen. Hvis andet skal animere (dit hamburger-ikon morpher måske til en pil?) så skal du også guide udvikleren her.

Overordnet grid, globale marginer og afstande i øvrigt

Du kan hente inspiration i Googles Material Design keylines, med fare for at blive overvældet – og kaste dig over opgaven manuelt. Du kan også bruge et program/plugin som Zeplin, der både fungerer med Photoshop og Sketch og som gør det en lille smule nemmere for udviklere at se, hvad meningen er. InVision har også sat Inspect (i beta-version) i søen, der forsøger at bygge bro over føromtalte kløft. Mulighederne er mange, hovedsagen er at du formidler og dokumenterer.

Farver og skriftsnit

Du har selvfølgelig styr på dit typografiske hierarki. Derfor er det også nemt at dokumentere det. Du bruger ret sikkert kun een font og en begrænset palette af snit, farver osv. Zeplin kan igen hjælpe dig med at dokumentere og skabe en enkel, dynamisk oversigt, som kan deles med udviklerne. Samme gælder for din farvepalette. Konsekvens betyder mindre dokumentation og i sidste ende en mere sammenhængende app.

Gennemtestet fontvalg

Meget af det man som font-nørdet designer drømte om for bare få år siden – det kan i dag lade sig gøre. Også i apps. Din iPhone og dit Apple Watch kan vise andet end San Francisco og Android kan vise andet end Roboto. Men vi har efterhånden en del gange oplevet problemer med “custom” font-filer. Det gælder både de fonte, som kunden har fået specialtegnet, men også mere alment tilgængelige fonte. Synderen er oftest filernes ascender- og descender-værdier. Det betyder i praksis, at dine linjeafstande forskydes og at cirklen i bogstavet Å bliver klippet af. Det hjælper at vælge skrifter, der er tegnet af profesionelle (til skærme) og at få dine udviklere til at testkøre dem inden implementering. Det er vigtigt at se, hvordan dit hierarki ser ud på devices og hvordan de udfordrende karakterer ser ud for alle relevante sprog. På dansk er lille g og store Å gode eksempler.

Vi kommer længst med samarbejde

Hvis designprocessen foregår som sin egen helt selvstændige fase (med få eller ingen udviklerinput) og du samtidig sidder langt fra din udvikler, så skal du dokumentere ret meget. Sidder du tæt på din udvikler hindrer det naturligt en del misforståelser – I kan tale sammen om designet hver dag, pege og alle kan stille spørgsmål.

Når design og udvikling foregår agilt er behovet for dokumentation stadig til stede, men nu minimalt. Det kræver dog en anden slags disciplin af de involverede.

Snak med dine udviklere om, hvad der giver bedst mening for det fælles projekt. Vi får det bedste resultat med et tæt samarbejde. Det gælder i øvrigt ikke bare overlevering af design. De bedste udviklere kan give dig uvurderlig sparring i designprocessen, for de kender mulighederne bedre end nogen andre. Undervurdér ikke hvor kreative de kan være, hvis de får lov :-)

P.S. Kast også et blik på siderne hér – dit liv bliver pludselig meget nemmere:

PNG Express
Apply Pixels
Sketch
Material Design
Android device metrics
Apple developer guides
InVision
Principle

 
Af Louise Spanget-Larsen
louise@greenerpastures.dk
+45 70 26 00 69