Hvordan brukere navigerer i en berøringsskjerm verden - dummies

Måten nettstedet besøkende bruker til å kommunisere med sidene dine, og navigere koblingene dine, er dramatisk forskjellig på en iPhone eller iPad enn en stasjonær eller bærbar datamaskin. Besøkende bruker en iPhone eller iPad bruker fingrene - ikke en mus, et tastatur eller en pekepenn. Det betyr at koblinger skal være enkle å identifisere og store nok til at brukerne ikke ved et uhell klikker på for mange om gangen med en fingertupp.

Vær også oppmerksom på at rollover-effekter ikke fungerer på samme måte på en iPhone eller iPad som de gjør på en nettleser. Rollover-effekter og lignende sveveeffekter som forårsaker noe som skjer når en bruker ruller en markør over et bilde eller et annet element på en nettside, konverteres automatisk til "på klikk" -hendelser i en iPhone eller iPad.

I denne figuren ser du en felles designteknikk på nettet - en rekke miniatyrbilder som er knyttet til større versjoner. På datamaskinen din vil du rulle markøren over hvert bilde for å vise den større versjonen; På en iPad vil disse overgangshendelsene bli konvertert til koblinger, utløst av en finger.

Design koblingene dine til arbeid på berøringsskjermen, og sørg for å teste om overføringseffekter og rullegardinmenyer kan aktiveres med en finger, så vel som en mus.

For å gjøre navigering enkelt for iPhone og iPad-besøkende, må du

• Gjør koblinger enkelt å klikke: Separate koblinger med nok plass mellom dem for å gjøre det lettere å trykke dem med bare en fingertupp. (Som en veiledning anbefaler Apple at koblinger skal innstille minst 44 piksler med 44 piksler mellomrom.)

  Denne anbefalingen er den samme for både iPhone og iPad fordi den er basert på en finger, ikke på oppløsningen til enheten eller på skjermens størrelse. (Selv om noen fingre er fetere enn andre, er 44 piksler en god retningslinje.)

• Gjør linkene enkle å se: Stilkoblinger slik at de er enkle å skille fra annen tekst og elementer på en side. Husk at dine besøkende kan være distrahert eller ha det travelt og kan være i svakt lys eller verre, sterkt lys når du bruker en av disse svært bærbare enhetene. Distribuer lenker ved å bruke tekst og bilder som kontraster sterkt med bakgrunnen.

• Organiser koblinger: Gruppelinker til relaterte elementer sammen, og hvis du har en undernavigasjonsmeny på et nettsted, organisere disse linkene i sine egne, lett gjenkjente seksjoner.

• På den mindre iPhone-skjermen, plasser navigasjonsmenyer nederst på skjermen, ikke øverst: Navigasjonslenkene kan ta opp mye plass på en mobil skjerm.

  I stedet for å rote toppen av designet med linker, ta en enkelt menyknapp øverst på hver side, som vist i dette designet, og opprett en lenke som hopper ned til bunnen av siden, der du kan inkludere flere lenker uten å begrave innholdet.

  

Designet vist i denne figuren ble laget for Microsoft av den talentfulle designeren Sia Ea, som jobber hos Ansible Mobile.