Come gli utenti a navigare in un mondo Touch Screen

Il modo in cui i visitatori del sito web di interagire con le pagine e navigare i vostri link è drammaticamente diverso su un iPhone o iPad di un computer desktop o laptop. I visitatori del sito utilizzando un iPhone o iPad stanno usando le dita - non un mouse, tastiera o stilo. Ciò significa che i collegamenti dovrebbero essere facili da identificare e abbastanza grande che gli utenti non accidentalmente cliccare su troppi alla volta con un dito.

Anche tenere a mente che gli effetti di rollover non funzionano allo stesso modo su un iPhone o iPad come fanno su un browser desktop. Effetti rollover ed effetti simili al passaggio del mouse, che causano qualcosa accada come utente ottiene un cursore su un'immagine o un altro elemento in una pagina web, vengono convertiti automaticamente "a scatto" eventi in un iPhone o iPad.

In questa figura, si vede una tecnica di disegno comune sul web - una fila di immagini in miniatura che sono collegati a versioni più grandi. Sul computer, ci si tira il cursore su ogni immagine per vedere la versione più grande; su un iPad quegli eventi rollover sarebbero convertiti in collegamenti, innescato dal tocco di un dito.

Come gli utenti a navigare in un mondo Touch Screen

Progetta il tuo link per lavorare sul touch screen, e fare in modo di verificare se gli effetti rollover e menu a discesa è possibile attivare con il semplice tocco di un dito, così come un mouse.

Per rendere la navigazione facile per iPhone e iPad i visitatori, è necessario

  • Fare collegamenti facili da cliccare: collegamenti separati con spazio sufficiente tra loro per rendere più facile toccare usando solo un dito. (Come linea guida, Apple consiglia di collegamenti essere impostati per occupare almeno 44 pixel per 44 pixel di spazio.)

    Questa raccomandazione è la stessa per entrambi i iPhone e iPad perché è basato sulla dimensione di un dito, non sulla risoluzione del dispositivo o la dimensione dello schermo. (Anche se alcuni dita sono più grassi di altri, 44 pixel è una buona indicazione.)
  • Fare collegamenti facili da vedere: collegamenti Stile in modo che siano facili da distinguere dal resto del testo e gli elementi in una pagina. Ricordate che i visitatori possano essere distratti o in fretta e possono essere in condizioni di scarsa luce o, peggio ancora, una luce forte quando utilizzando uno di questi dispositivi altamente portatili. Distinguere i collegamenti utilizzando testo e immagini che contrastano nettamente con lo sfondo.
  • Organizzare link: collegamenti del Gruppo a elementi correlati insieme, e se si dispone di una barra di navigazione all'interno di un sito, organizzare questi link nelle proprie sezioni facilmente riconoscibili.
  • Sullo schermo più piccolo iPhone, menu di navigazione posto nella parte inferiore dello schermo, non al top: Link di navigazione possono occupare molto spazio sullo schermo di un cellulare.

    Invece di disordine nella parte superiore del vostro disegno con link, comprende un solo pulsante Menu nella parte superiore di ogni pagina, come mostrato in questo progetto, e di creare un collegamento che salta fino al fondo della pagina, in cui è possibile includere più collegamenti senza seppellendo il contenuto.

    Come gli utenti a navigare in un mondo Touch Screen

Il design mostrato in questa figura è stato creato per Microsoft dal talentuoso stilista Sia Ea, che lavora a Ansible Mobile.