it-swarm-eu.dev

Progettare per l'iPad

Vorrei rendere il mio sito accessibile alle persone che hanno i dispositivi iPad o altri iOS .

Quali considerazioni devo prendere in considerazione quando si progetta un'interfaccia utente compatibile con l'iPad o iOS in generale?

15
George Stocker

Dai un'occhiata i pensieri di Jakon Nielsen sulla questione . video collegato in basso dura solo 3 minuti ed è interessante, se non direttamente utile.

Pensieri generali (nessun dato a sostegno di questo oltre all'esperienza personale):

  • Se è necessario ricorrere a un design per un'altra piattaforma, ricorrere a progetti per PC, NON a progetti per iPod. Se riesci a mettere le mani su un iPad (presto), prova a navigare su Amazon.com predefinito su iPad. Ritorna all'interfaccia utente predefinita di iPod Touch/iPhone, che ha pulsanti di riempimento orizzontale con testo all'estrema destra ed è praticamente inutilizzabile.
  • È più facile vedere piccole cose che fare clic su di esse. Nella mia esperienza, la maggior parte del testo leggibile non è selezionabile e spesso ho bisogno di ingrandire i collegamenti (ad esempio su Wikipedia).
  • Metti alla prova i tuoi progetti sia in verticale che in orizzontale!
  • Muovere le mani richiede un po 'più di energia fisica (ed è meno precisa) che spostare il mouse.
  • L'uso di più schede è più difficile che con il PC (sebbene probabilmente più facile che con l'iPhone). I collegamenti che allontanano l'utente dal sito probabilmente faranno proprio questo; non aspettarti che tornino presto.
  • I tocchi accidentali sono più comuni dei clic accidentali.
  • Digitare (anche per la ricerca) è più difficile che con una tastiera.
  • I video di YouTube integrati funzionano.
  • Ricorda la base di utenti che acquista iPad e progetta per loro.
  • Aggiornamento: Esistono altri browser web. Il 95% degli utenti utilizza probabilmente Mobile Safari, ma potrebbe valere la pena testarlo in un paio di altri. Ad esempio, ho appena scoperto che i siti di Stack Exchange non funzionano (non è possibile pubblicare domande) in Atomic Web Browser .

In bocca al lupo!

14
Robert Fraser

Questo vale più per la tua domanda generale sull'interfaccia utente:

Pensa "tocca, non fare clic". In che modo tu (o i tuoi potenziali clienti) usereste l'app con le loro mani? Esiste una differenza fondamentale tra indicare qualcosa con il mouse e indicare qualcosa con la mano. Forse fai i controlli più importanti sul lato in modo che le persone possano raggiungerli facilmente? Sperimenta con diversi wire frame e chiedi alle persone di valutare la facilità d'uso. I test degli utenti nelle prime fasi del processo possono aiutare notevolmente a perfezionare il progetto.

8
Scott M.

Ho scritto un blog su cose da guardare quando si progettano siti ottimizzati/pronti per l'iPad. Potresti trovarlo utile.

3
Jin

L'iPad è stato progettato per navigare sul Web. Il grande schermo consente di visualizzare l'intera larghezza della pagina Web. Quindi il design della pagina web dovrebbe andare bene su un iPad.

Per iPhone, iPod Touch, potresti prendere in considerazione l'idea di creare un design diverso, creando un'interfaccia utente simile alle app native per iPhone. Ci sono strumenti che puoi usare per renderlo possibile, ma ci vorrà molto lavoro. Dai un'occhiata a Sencha Touch , che può essere utilizzato anche per iPad.

Se non vuoi usare qualcosa come Sencha Touch, un'altra cosa che devi considerare è che l'interazione dell'utente è molto diversa con questi dispositivi. Sono basati sul tocco e non sul mouse. Un esempio è che gli effetti hover non funzioneranno con un dispositivo touch based. Anche i clic del mouse sono diversi dall'inerzia del tocco acquisita dal browser su iOS. Ciò significa che puoi migliorare l'interazione dell'utente, personalizzando il JavaScript che usi per iOS per renderlo più nativo e intuitivo.

Apple ha anche realizzato una Human Interface Guide per le sue app native su iOS. Sarebbe una buona idea esaminare questo, poiché questo è ciò che gli utenti si aspetteranno dalle app native. Avere pagine web conformi a questo, li aiuterà a capire il tuo sito.

3
googletorp

Non dimenticare le dimensioni dello schermo e i diversi layout possibili: Layout CSS iPad con modalità di orientamento orizzontale/verticale

2
Kostya

Altri due problemi che volevo aggiungere, in particolare per quanto riguarda l'adattamento di un sito o un'applicazione esistente piuttosto che la progettazione di uno nuovo - questi potrebbero sembrare banali, ma comunque:

  • Assicurati che il tuo sito o la tua applicazione non rispondano al passaggio del mouse sulle azioni (come i suggerimenti)
  • Ricorda che non esiste un clic destro (meno comune sul Web, ma a volte si trova nelle app Web)
1
Dan Barak

Gli elementi devono essere più grandi che su un'app desktop, perché il dito è meno preciso del mouse.

Avendo usato alcune app di grafica recentemente, ho visto che può essere molto difficile posizionare gli oggetti con precisione con le dita perché oscurano l'oggetto che si sta spostando. Un modo per risolvere questo problema che sembra Apple è iniziare a muoversi solo dopo aver spostato il dito, quindi non è più sopra l'oggetto che si sposta.

La selezione multipla è molto problematica al momento. Non mi piace l'approccio Apple di toccare un oggetto con un dito e toccare più oggetti con l'altro per creare una selezione multipla. Cade a pezzi quando hai bisogno di più di 4-5 oggetti. Trascina selezione potrebbe funzionare meglio. Ad esempio, prima di tutto tocca uno strumento di selezione e poi trascina seleziona più oggetti.

1
Erik Engheim