Hvorfor din app føles indeklemmet på mobil
Problemet
Du designer og bygger på en desktop. Dit produkt ser rummeligt og rent ud ved 1440px. Du tjekker det på mobil, det renderes uden at bryde, og du shipper det.
Seks måneder senere er dit mobilengagement 40% lavere end desktop. Produktet "virker" på mobil — det føles bare forkert. Indeklemmet. Svært at bruge.
Hvorfor desktop-afstandssætning ikke oversættes til mobil
På desktop skaber generøs udfyldning åndedrætsrum. Den samme udfyldning på mobil æder ind i indholdsområdet.
Et kort med 32px udfyldning på desktop bruger 64px af den samlede bredde til tomt rum. Ved 375px viewport-bredde er det 17% af hele skærmen brugt på udfyldning alene.
Typografi skalerer ned, men linjelængder justerer sig ikke proportionelt. Tekst der læses godt ved 600px kolonnebredde bliver udmattende ved 300px.
Berøringsmål der er fine med en musmarkør — 32px knapper, tætte ikonlinks — bliver ubrugelige med en tommelfinger.
De specifikke problemer at lede efter
1. Størrelse af berøringsmål — Apples HIG anbefaler minimum 44x44px berøringsmål. Google anbefaler 48x48px. Alt mindre skaber fejlklik.
2. Bredde på tekstcontainer — På mobil bør tekst aldrig løbe hele viewport-bredden. 16px udfyldning på hver side (32px total) er et absolut minimum. 20px er bedre.
3. Lodret rytme på små skærme — Sektioner med 80px lodret udfyldning på desktop bør have 48px på mobil. Rytmen bør stramme til, ikke forblive fast.
4. Ikon-kun navigation — Bundnavigationslinjer med små ikoner og bittesmå etiketter er almindelige. Brugere over 40 identificerer dem konsekvent forkert eller rammer ved siden af.
Løsningen
Definer mobilspecifikke afstandstokens — Reducer ikke blot desktopværdier. Design mobiloplevelsen bevidst.
Revidér berøringsmål — Brug Chrome DevTools mobilemulering og klik igennem hvert interaktivt element.
Test med din faktiske tommelfinger — Tag telefonen i din ikke-dominerende hånd. Brug din tommelfinger. Hvis du ikke kan nå et mål, kan brugerne heller ikke.
Øg linjehøjden på mobil — 1,6–1,7 linjehøjde forbedrer læsbarheden på små skærme betydeligt.
Belønningen
En velafstandssat mobiloplevelse ser ikke bare bedre ud — den kommunikerer omsorg. Brugerne føler sig respekteret, når produktet er designet til, hvordan de faktisk bruger det.
Kan du genkende dette på dit eget site? Vi kigger gerne på det.
Kontakt os