it-swarm-es.com

Diseñando para el iPad

Me gustaría hacer que mi sitio sea accesible para las personas que tienen dispositivos iPad u otros iOS .

¿Qué consideraciones debo tener en cuenta al diseñar una interfaz de usuario que sea compatible con el iPad o iOS en general?

15
George Stocker

Echa un vistazo a pensamientos de Jakon Nielsen sobre el tema . El video vinculado en la parte inferior dura solo 3 minutos y es interesante, si no directamente útil.

Pensamientos generales (no hay hechos que respalden esto aparte de la experiencia personal):

  • Si necesita recurrir a un diseño para otra plataforma, recurra a diseños de PC, NO a diseños de iPod. Si puede obtener un iPad (pronto), intente navegar por Amazon.com predeterminado en iPad. Se remonta a la interfaz de usuario predeterminada de iPod Touch/iPhone, que tiene botones de relleno horizontal con texto en el extremo derecho, y es básicamente inutilizable.
  • Es más fácil ver cosas pequeñas que hacer clic en ellas. En mi propia experiencia, la mayoría de los textos que se pueden leer no se pueden hacer clic, y a menudo necesito hacer zoom en los enlaces (es decir, en Wikipedia).
  • Pon a prueba tus diseños tanto en vertical como en horizontal.
  • Mover las manos requiere un poco más de energía física (y es menos preciso) que mover el mouse.
  • Usar varias pestañas es más difícil que con una PC (aunque probablemente sea más fácil que con un iPhone). Los enlaces que alejan al usuario del sitio probablemente harán exactamente eso; No esperes que vuelvan pronto.
  • Los toques accidentales son más comunes que los clics accidentales.
  • Escribir (incluso para la búsqueda) es más difícil que con un teclado.
  • Los videos incrustados de YouTube funcionan.
  • Recuerde la base de usuarios que compra iPads y diseñe para ellos.
  • Actualización: Hay otros navegadores web. El 95% de los usuarios probablemente usan Mobile Safari, pero puede valer la pena probarlo en un par de otros. Por ejemplo, acabo de descubrir que los sitios de Stack Exchange no funcionan (no pueden publicar preguntas) en Atomic Web Browser .

¡Buena suerte!

14
Robert Fraser

Esto se aplica más a su pregunta general de IU:

Piensa "toca, no hagas clic". ¿Cómo usaría la aplicación (o sus clientes potenciales) con sus manos? Hay una diferencia fundamental entre señalar algo con el mouse y señalar algo con la mano. ¿Quizás hacer los controles más importantes a un lado para que las personas puedan alcanzarlos fácilmente? Experimente con diferentes marcos de alambre y solicite a las personas que evalúen la facilidad de uso. Las pruebas de usuario al principio del proceso pueden ayudar enormemente a refinar su diseño.

8
Scott M.

Escribí un blog sobre cosas a tener en cuenta al diseñar sitios que están optimizados/listos para el iPad. Lo podrías encontrar útil.

3
Jin

El iPad fue diseñado para navegar por la web. La pantalla grande permite ver todo el ancho de la página web. Por lo tanto, el diseño de la página web debería estar bien en un iPad.

Para el iPhone, iPod Touch, podría considerar hacer un diseño diferente, creando una interfaz de usuario similar a las aplicaciones nativas de iPhone. Hay herramientas que puede utilizar para hacer esto posible, pero será mucho trabajo. Echa un vistazo a Sencha Touch , que también se puede usar para iPads.

Si no desea usar algo como Sencha Touch, otra cosa que debe tener en cuenta es que la interacción del usuario es bastante diferente con estos dispositivos. Se basan en el tacto y no en el mouse. Un ejemplo es que los efectos de desplazamiento no funcionan con un dispositivo táctil. Además, los clics del mouse son diferentes de la inacción del toque que captura el navegador en iOS. Esto significa que puede mejorar la interacción del usuario, personalizando el JavaScript que usa para iOS para hacerlo más nativo e intuitivo.

Apple también ha creado un Guía de interfaz humana para sus aplicaciones nativas en iOS. Sería una buena idea revisar esto, ya que esto es lo que los usuarios esperarán de las aplicaciones nativas. Tener páginas web que cumplan con esto, les ayudará a comprender su sitio.

3
googletorp

No olvide el tamaño de la pantalla y los diferentes diseños posibles: Diseño CSS iPad con modos de orientación horizontal/vertical

2
Kostya

Dos problemas más que quería agregar, especialmente con respecto a la adaptación de un sitio o aplicación existente en lugar de diseñar uno nuevo, estos pueden parecer triviales, pero aún así:

  • Asegúrese de que su sitio o aplicación no responda con el mouse sobre las acciones (como información sobre herramientas)
  • Recuerde que no hay clic derecho (menos común en la web, pero a veces se encuentra en las aplicaciones web)
1
Dan Barak

Los elementos deben ser más grandes que en una aplicación de escritorio, porque el dedo es menos preciso que el mouse.

Después de haber utilizado algunas aplicaciones gráficas últimamente, he visto que puede ser muy difícil colocar objetos con precisión con los dedos porque oscurecen el objeto que está moviendo. Una forma de arreglar esto, que parece ser Apple lo hizo, es comenzar a moverse solo después de haber movido un poco el dedo, por lo que ya no está encima del objeto que mueve.

La selección múltiple es muy problemática en este momento. No me gusta el enfoque Apple de tocar un objeto con un dedo y tocar varios objetos con el otro para crear una selección múltiple. Se desmorona una vez que necesita más de 4-5 objetos. Arrastrar selección podría funcionar mejor, p. Ej., Tabular primero una herramienta de selección y luego arrastrar seleccionar varios objetos.

1
Erik Engheim