Design til berøring

Fantastiske mobile designs gør mere end at skore sig selv i små skærme: de giver plads til fingre og tommelfingre, der rummer de afslappede vandhaner på vores klodsede cifre. Håndholdte grænseflades fysikalitet fører designere ud over konventionerne inden for visuelt design og informationsdesign og ind i området for industrielt design. Med berøringsskærme er der ægte ergonomi på spil. Det er ikke kun, hvordan dine pixels ser ud, men hvordan de føles i hånden.

01. Tommelfingerregel

Touchscreen-design kræver tankevækkende opmærksomhed om, hvor fingrene tilfældigt kommer til at hvile på enheden. Tag for eksempel en telefon i den ene hånd, og medmindre du anvender et skør-klo-telefongreb, banker du altid væk med tommelfingeren. For telefoner betyder design til berøring design for tommelfingeren.

Tommelfingre er fantastiske. Det er vores tommelfingre sammen med vores hengivenhed for berømtheds sladder, der adskiller os fra dyrene, men de har begrænset rækkevidde og fleksibilitet. Mens en tommelfinger kan klare at feje hele skærmen af ​​alle undtagen de mest store telefoner, er kun omkring en tredjedel af skærmen i virkelig ubesværet område - i bunden af ​​skærmen på siden overfor tommelfingeren.

Placer primære trykmål i denne tommelfingerende varme zone. Når du f.eks. Holder en telefon i højre hånd, falder tommelfingeren naturligt i en bue i nederste venstre hjørne af skærmen:





Det er en vigtig grund til, at værktøjslinjer og navigation typisk lander i nederste kant af telefongrænseflader - det modsatte af, hvad vi er vant til til traditionelle skærmgrænseflader. Desktop-softwarekonventioner placerer menuer øverst på skærmen eller vinduet, og websteder placerer typisk primær navigation øverst på siderne. Vores begrænsede tommelfinger springer dog konventionen rundt, og navigations- og primære trykmål synker til bunden.

Tommelfingerens skærmbundsforstyrrelse er vigtigere end venstre mod højre. Det viser sig, at de fleste af os let kan vende mellem venstre og højre hånd, når vi bruger vores telefoner. Højrehåndede brugere favoriserer ofte eller skifter til deres venstre hænder (for eksempel når de skriver), og venstreorienterede går ofte også med deres højre. Mens et beskedent flertal af brugerne går med deres højre hånd lidt oftere end venstre, er det ikke en stærk nok tendens til, at designere bekymrer sig.

Skærmens nederste tommelfingerregel gælder dog uanset hvilken hånd du bruger, og det giver dig tip om, hvordan du organiserer det visuelle hierarki af trykmål. Ofte anvendte knapper skal indtage bunden af ​​skærmen for let at trykke, mens andre kontroller skal skubbes ud af skade. Det er for eksempel en konvention i iOS at placere redigeringsknapper øverst til højre, inden for nem visning, men lige nok uden for rækkevidde til at gøre utilsigtede ændringer mindre sandsynlige.



billogo, der ligner en trident

At synke primære kontroller til skærmbunden er ikke kun et spørgsmål om tommelfingerkomfort, men også det enkle faktum, at fingre tilslører skærmen. Nederst er det, hvor svævende hænder mindst sandsynligvis dækker indhold. For at holde indholdet i klar visning skal du placere det over din apps kontrol. Dette er et velkendt, sundt fornuftigt layout, der gælder for de fleste fysiske enheder: iPods, lommeregnere, mobiltelefoner, badeværelsesvægte, du hedder det. Indhold øverst, kontrol nederst.

02. Jeg, robot

Denne enkle top / bundregel er kompliceret af Android's 'gotta be me'-systemknapper, der krammer bunden af ​​Android-gadgets. (Før udgivelsen af ​​Android 3 'Honeycomb' var disse altid fysiske knapper; startende med Android 4 'Ice Cream Sandwich' er de nu virtuelle knapper.) Disse systemdækkende knapper hører til nederst på skærmen af ​​alle de årsager, der er beskrevet indtil videre, men de indfører også en fingerforvirrende konkurrence om app-specifikke kontroller. Tilføjelse af kontrolelementer nederst på skærmen betyder stabling af værktøjslinjer oven på hinanden; ak, trykfejl er især almindelige for stablede kontroller i bunden af ​​skærmen. I den højtrafikzone, hvor tommelfingeren har tendens til at svæve og tilslører udsigten, er knapkollisioner uundgåelige. Dette Android-startskærmlayout inviterer for eksempel fejltagelser:



Stabling af kontroller i en berøringsgrænseflade bør altid undgås, især nederst på skærmen. Desværre betyder det, at Android-apps skal have deres kontrol øverst på skærmen for at undgå at trænge systemknapperne sammen. Det er ikke ideelt: dette placerer navigation uden for tommelfingerzonen, og når du trykker på en knap, dækker hånden hele skærmen. Men det er bedre end alternativet, som inviterer fedtfingerfejl.

Til Android skal appnavigation og kontrol svæve til toppen. Dette er det modsatte af konventionen til iPhone, hvor Home-knappen ikke skaber den samme slags konkurrence som Androids knapper. Sammenlign Foursquare-appen til Android, venstre og til iPhone for at se den resulterende forskel:

Internettet: en app inde i en app

Anti-stacking-retningslinjen skaber lignende problemer for websteder på mobile enheder. Websteder og webapps fungerer naturligvis inden for rammerne af en anden app, browseren. På mange mobile platforme har browseren sine egne knapper og kontroller, der ligeledes kan skabe UI-konflikter til webnavigation. Det betyder, at du bør undgå at 'fastgøre' navigation til skærmbunden for websteder, da det ville stable websteds værktøjslinje oven på browserens. (Denne retningslinje forstærkes bekvemt af, at position: fast ikke understøttes jævnt i CSS på tværs af mobilbrowsere, hvilket gør det besværligt at holde en værktøjslinje i bunden.)

I modsætning til Android flytter løsningen ikke webnavigation til toppen, men i stedet til bunden af ​​hele siden. Fordi browserkrom allerede spiser fast ejendom i nogle mobile browsere, er det sidste, du skal gøre, at fortrænge indholdet yderligere ved at kvæle toppen af ​​websiden med navigationsindstillinger.

I hans fremragende bog Mobil først , Luke Wroblewski skriver: 'For mange mobile weboplevelser ... start samtalen med en liste over navigationsindstillinger i stedet for indhold. Tid er ofte dyrebar på mobil, og downloads kan koste penge, så få folk til det, de kom til, så snart du kan. '

Weboplevelser skal føre med indhold og begrænse primærnavigation til skærmbunden. Wroblewski mester et nyttigt designmønster til dette, som du kan se på arbejde i Ad Age mobilwebsite hvor al navigation er gemt bag en Menu-knap i en værktøjslinje øverst på skærmen. Tryk på knappen, og hele skærmen udfyldes med det samme med navigationsindstillinger. Menuens udseende er øjeblikkelig og føles som et overlay er dukket op, men i virkeligheden er det faktisk et ankerlink til navigation nederst på siden.

Denne tilgang har flere fordele, skriver Wroblewski:

'Dette design bruger en minimal mængde navigationselementer (kun et enkelt link øverst), giver folk mulighed for at dreje og udforske, når de kommer til slutningen af ​​indholdet, ikke duplikerer indholdet i en anden menu og (bedst af alle) kræver kun et simpelt ankerlink for at fungere. Det er rigtigt: ingen fancy JavaScript, overlays eller separate navigationssider at vedligeholde - bare et anker, der linker til bunden af ​​siden. Det er som HTML 0. '

'Indhold øverst, kontroller i bunden' virker som en simpel regel, men som du har set, har det forskellige resultater for appdesignere, når operativsystemet eller browseren hævder denne premium-ejendom. I sidste ende fungerer det sådan:

  • På iPhone skal du placere appkontroller nederst på skærmen
  • På Android skal du placere appkontroller øverst på skærmen
  • På nettet skal du placere navigationen nederst på siden (i modsætning til skærmbunden)

Men disse retningslinjer er specifikke for telefoner; hvad sker der med større berøringsskærme? Med iPad ændres reglerne igen.

03. Tabletter, tag hjørnerne

Tommelfingerreglen gælder stadig for iPad, bortset fra at tommelfingerzonen er forskellig, fordi vi holder den forskelligt. IPad-grebet afhænger af din holdning. Når du står op, skal du bruge to hænder til at banke væk. Når du sidder ved et bord, vil du sandsynligvis støtte den med den ene hånd og trykke med den anden. Når du sidder i en stol, har du en tendens til at hvile den i skødet og trykke med den anden hånd. Liggende eller tilbagelænet hviler du tingene på din mave og støtter den med den ene hånd og banker med den anden.

I alle disse greb falder fingrene forskellige steder på enheden, og hver holdning resulterer i, at enheden holdes i forskellige afstande. Vi har tendens til at holde iPad nærmest, mens du står, for eksempel og længst, mens du ligger eller læner dig.

Så varieret som disse iPad-hold er, gælder to ting for dem alle. For det første har vi en tendens til at holde iPads i den øverste halvdel af enheden for at få den bedste gearing, og det betyder, at tommelfingre har tendens til at slå sig ned på den øverste tredjedel af skærmen nær hjørnerne. For det andet gør iPadens større skærm det svært at tage det hele med et øjeblik, som du kan med en telefon. Som med printdesign fokuserer publikums visuelle opmærksomhed naturligvis på toppen af ​​tabletten, og designens informationshierarki skal afspejle det. Med andre ord optager øjnene og fingrene naturligvis toppen af ​​enheden på iPad. (Undertiden er bunden ikke engang synlig overhovedet. I den lateste og måske mest almindelige position - liggende eller liggende - har bundrammen en tendens til at forsvinde i tæpper, trøjer og bløde maver.)

I modsætning til telefoner skal primære kontroller og knapper typisk gå øverst på iPad-apps. Specifikt skal de placere de øverste hjørner, hvor tommelfingre typisk svæver, når du holder iPad. Instapaper og Twitter til iPad viser god placering:

bedste 4k skærm til videoredigering

Undgå at placere kontrollerne øverst i midten Men da det betyder, at din hånd vil dække indholdet, når du bruger disse knapper. Kontroller bør aldrig gå umiddelbart over det indhold, de sigter mod at påvirke, så det er et nyttigt mønster at skubbe dem til hjørnerne. Daily for iPad tilbyder for eksempel en skrubber øverst i midten for at scanne gennem emnets sider, men når du gør det, dækker hånden miniaturebillederne, hvilket gør det svært at bruge.

04. Bundlinjen

Daily's fejltræk afslører en undtagelse fra retningslinjerne i øverste hjørne og afslører en kategori af tilfælde, hvor kontrol i stedet skal gå i bunden. Når kontroller viser eller påvirker indhold, skal de altid vises under eller til siden af ​​dette indhold, aldrig over. Sydney Morning Heralds iPad-app har for eksempel en ny måde at hurtigt scanne alle artiklerne i dagens udgave ved at trække fingeren langs et indeks over sideindikatorer nederst på skærmen. Fordi denne kontrol afslører en høj liste med overskrifter, er det hensigtsmæssigt at placere disse kontroller nederst på skærmen; placere dem øverst ville betyde, at din hånd ville dække listen, når du rørte ved betjeningsknapperne.

Så er det top eller bund? Her er forskellen:

  • IPadens øverste hjørner er ideelle til navigationsknapper og værktøjer med et enkelt tryk til handlinger som deling, favorit eller sletning.
  • Bunden af ​​iPad-apps er bedst til kontroller, der gennemser eller får vist indhold i lærredet ovenfor.

Dette er grunden til sideminiaturebilleder til bøger eller blade er bedst placeret i bunden. Tilsvarende, hvis du designede en app til oprettelse af kort, der indeholdt en palet af vartegn, der skulle trækkes ind på kortet, skulle denne palet gå i bunden, så du kan interagere med dit kort uden konstant at dække det med hele din arm.

05. For stor til at mislykkes

Hvis den måde, du holder enheden på, dikterer placeringen af ​​kontroller, er det din fingerstørrelse, der bestemmer, hvor stor disse kontroller skal være. Touch-designere er nødt til at gøre trykmål for store til at mislykkes, klumpede mål, som folk kan trykke på uden et iøjnefaldende fokusniveau.

Hvor stort er stort nok, når det kommer til trykmål? Nå, hvad er størrelsen på en fingerspids? Alle platforme tilbyder vejledning her, men som sædvanlig er Apple den mest meningsfulde og insisterer på, hvad jeg anser for den bedste retningslinje for alle mobile platforme: Foretag trykmål mindst 44 punkter eller ca. 1/4 'eller 7 mm. På Internettet fungerer et minimum på 44 pixel også godt .

Til designere, der er vant til skrivebordet, styrer denne store følelse både enorm og toylike, men bare rull med den. Humongous knapper og gigantiske trykmål er ikke kun lette at ramme, men de er også lette at se for den lejlighedsvis distraherede mobilbruger.

I en perfekt verden ville alle trykmål være mindst 44x44. Som i de fleste ting er det dog undertiden nødvendigt med kompromis. Selv iPhones standardkontroller fudger 44-pixel-reglen fra tid til anden. På tastaturet er tasterne for eksempel 44 punkter høje, men kun 30 punkter brede - ligeledes i landskabsvisning er knapperne 44 punkter brede, men 38 punkter høje. Apple har ikke meget valg her; det er afgørende at inkludere det fulde QWERTY-tastatur i denne visning, men alle tasterne passer bare ikke til 44 x 44 knapper. Noget skal give.

Når begrænset plads sætter presset på trykmål, her er den regel, jeg har fundet, fungerer bedst: så længe et trykmål er mindst 44 point højt eller bredt, kan du presse den anden dimension så lille som 30 point, hvis du virkelig skal . Det betyder: den praktiske minimumsstørrelse for ethvert trykmål er 44 x 30.

06. Træng ikke sammen

Din trofaste forfatter tilbragte mange år af sin misbrugte ungdom med et smukt Casio-lommeregner fastgjort til hans håndled, inden han endelig trak det tilbage i 1985. Problemet var ikke kun dets små kontroller eller dets dæmpende effekt på mine prom-king-udsigter. Knapperne var for tæt på hinanden . Du ville sigte mod en fem, men kom med en to eller en otte, hvem ved - det var mere lykkehjul end lommeregner. Knappestørrelse er med andre ord ikke den eneste afgørende faktor for tryknøjagtighed. du skal også overveje afstand.

Foto af Jon Rawlinson

Foto af Jon Rawlinson

Når du designer til små skærme, vil du uundgåeligt blive fristet til at tackle den udfordring ved at trænge grænsefladen sammen. 'Jeg skubber dem bare lidt nærmere. Jeg tilføjer bare endnu en knap til denne værktøjslinje. ' For at citere en populær sætning af regnemaskine-urets storhedstid: 'Bare sig nej.'

Jo tættere du klemmer knapperne sammen, jo større skal disse knapper være. Overvej et par VoIP-opkaldsapps til iPhone, Skype og Call Global App. Begge bærer deres tastaturknapper tæt på hinanden, men de kompenserer ved at gøre dem meget større end minimum 44x44. På trods af deres tætte nærhed er knapperne let at ramme.

Hvor de to apps er forskellige, er det dog nederst på skærmen. Begge apps stakker knapper lige oven på navigationsfeltlinjen, som som beskrevet ovenfor aldrig er ideel. Men fordi disse knapper er så store i Skype (til venstre), mindskes problemet. I Call Global App er knapperne, der krammer toppen af ​​fanebladet, for tynde, og deres nærhed betyder, at der sandsynligvis er fejltagelser. Selvom de teknisk set er større end minimum 44x30, byder manglen på afstand og den fejlbehæftede stabling i bunden af ​​skærmen på problemer. Layoutet kræver større knapper eller mere generøs afstand.

Det er nøgle lektionen: Selvom det kan virke kontraintuitivt, afhænger succesen med grænseflader på lille skærm på store elementer, klumpede knapper og luftig afstand. Skærmene kan være små, men vores fingre (og ofte vores opmærksomhed spænder) ikke. Design med tykke fingre i tankerne.

ved hjælp af indesign til at lave en bog

Josh Clark er en interaktionsdesigner med speciale i mobil designstrategi og brugeroplevelse. Han er forfatter af Tapworthy: Designing Great iPhone Apps. Joshs outfit Global Moxie tilbyder konsulenttjenester og træning for at hjælpe medievirksomheder, designbureauer og kreative organisationer med at bygge tapbare mobile apps.

Kan du lide dette? Læs disse!