Diseño de Aplicaciones para iPad

  • 0
  • 26 febrero, 2012

Queremos compartir contigo algunas consideraciones, reglas básicas a la hora de construir una App para el iPad, no son cuestiones técnicas, tan solo unas reflexiones a tener en cuenta a la hora de crear un App para iPad.

El iPad puede tener la apariencia del iPhone pero en grande, con el mismo hardware y software, pero con unas capacidades de procesamiento multitarea significativamente mas potentes. Además, las proporciones de la pantalla táctil, lo convierten en una nueva concepción en cuento a experiencias al usuario, actualmente hay una App para cada necesidad y por no mas de 9,99€ por App.

El día que Steve Jobs presento el iPad, lo dejó bastante claro:

ipad entre mac el iphone

El iPad esta entre el iPhone y el Mac, es innovador en cuanto a tamaño de pantalla y velocidad de procesamiento y ademas tiene un potencial elevado en cuanto al Apple Store (Market) y el desarrollo de Apps.

El iPad se acerca mas a Apps de escritorio mas que de las móviles, con la peculiaridad de que dispone de movilidad, conectividad y geolocalizacion.

Lo que No se nos puede Escapar

Las Apps para iPhone se pueden usar en el iPad, se ven a tamaño del iPhone en el centro de la pantalla, y se puede escalar x2 su tamaño para que ocupe toda la pantalla. Es útil pero no es muy practico, se puede reutilizar todo el codigo de una app para iPhone y usarla en un iPad, pero habría que re diseñar toda la interfaz gráfica, aunque no siempre tiene por qué funcionar automáticamente una App del iPhone en el iPad.

La esencia de las nuevas oportunidades del iPad son que no solo satisfacen un publico de hogar, si no que también son muy útiles con aplicaciones de edición y creación como las que se usan en los ordenadores de trabajo. Aplicaciones de producción y entornos sofisticados de trabajo. Producción y edición de vídeo y audio. Actualmente hay un gran numero de Apps que no han tenido la atención necesaria en el iPhone que ahora con el iPad si lo esta teniendo. Ahora estamos en el proceso de convertir todas estas aplicaciones de toda la vida en formato «Pantalla Táctil».

Para ver como se consigue transformar esto de forma especifica, tenemos que entrar en mas profundidad y ver cuales son las diferencias básicas en entre el iPad y los SmartPhones. Se puede resumir en lo que vemos:

  • Una pantalla de formato mucho mayor (1024×768 píxeles), donde las aplicaciones que requieren de dicho espacio aqui lo encuentran.
  • Un teclado Virtual de mayor tamaño, con posibilidad de conexión via bluetooth y Dock de teclados externos.
  • Otra cosa a destacar es el multi-touch, el iphone ya lo es pero en el iPad se pueden emplear las dos manos. Luego daremos más detalles sobre esto.

A partir de estos principios tenemos que definir como las Apps que desarrollemos para iPada pueden ser integradas, necesitamos ahora saber un poco mas sobre las convenciones básicas en cuanto al desarrollo de las interfaces del usuario, te voy a dar algunas ideas o impresiones generales.

Maestro y Detalle

Este tipo de concepción no es nueva, aunque si para el iPhone, el Maestro se concibe como una vista donde se listan los productos, resultados, etc, al seleccionar una de estas, el contenido de dicho campo se muestra en detalle en la siguiente vista, un ejemplo claro es el Mail:

Esto nos da una serie de principios:

  • Maestro y detalle es aceptable y flexibl en el iPad.
  • En la vista Horizontal vemos las dos: Maestro y Detalle.
  • En Vertical, la vista maestro se muestra en modo de Ventana Emergente.

Concibe lo como un Visor

El mero echo de que tengamos mucho espacio no debe ser considerado como que podemos meter muchos botones, es uno de los avisos que nos dan a los desarrolladores de iOS, es dificil resistirse a no violar este principio, pero lo ideal es no pasarse con los controles que queremos incluir en la App.

  • Esconde las funciones hasta que sean necesarias.
  • Tómalo lo como un visor y úsalo como un editor.

Las páginas parecen Apps de lectura geniales:

Hasta que no inter-actuamos con algún elemento, los interfaces de usuario no se muestran:

Lo que nos lleva al siguiente punto.

Edita en el momento

En los ordenadores de oficina tenemos establecidas unas convenciones donde todo se forma a partir de menus, barras de herramientas, visores, barras de estado, etc. Esto no ocurre en el iPad, debido a que introduce un nuevo concepto de interaccion tactil, interactuamos y editamos al momento.

  • Edita la propiedades del objeto en su sitio.
  • Asocia los editores determinados con el objeto, dale movimiento, vision, ocultacion, lo que fuera necesario.

Por ejemplo, cuando trabajamos con el programa Keynote, hacemos esto mismo en el objeto que queremos modificar:

Tras dar de alta un objeto, un lista de tipos disponibles similares se asocia a mismo objeto:

Lo mismo sucede con las dispositivas:

Este es un buen principio a seguir, es inmediato y directo, intuitivo en un dispositivo donde se siente que estas trabajando el objeto con tus dedos.

Ventanas de propiedades dentro del contexto

Lo ideal en la mayoría de las circunstancias es usar los estándares establecidos en cuanto a posiciones y formas. La clave aquí esta en cuantos controles mostrar. En los programas de escritorio a veces esto es evidente que no se hace bien. Dos ejemplos muy claros son estos:

Estos dos controles (Keynote y Word en Mac) son complicados porque lo muestran todo a la vez, lo que hacen es deshabilitar el que no proceda cuando se selecciona un objeto. También resulta un un aprovechamiento del espacio y de los controles al máximo, lo que nos lleva a necesitar usar un control mas preciso de donde pulsamos.

En el iPad, cualquier ventana mostrada al usuario deberia llevar lo justo en cuanto a necesidades. No hay que cargar al usuario con cosas sin relevancia, oculta lo que no sea pertinente mostrar. Si editamos texto, mostramos solo los controles de edicion de texto:

Si por el contrario, editamos una gráfica, solo mostramos los controles de las gráficas:

Este sencillo consejo es aplicable al desarrollo de aplicaciones de escritorio.

  • Controles de usuarios deben ser contextualmente relevantes.
  • Oculta los controles que no lo sean.

Reduce las Características

Cualquier aplicacion de escritorio que tenga funciones que no sean triviales, no son explotadas por la mayoria de los usuarios, por ejemplo Office y Photoshop, millones de opciones que nunca tocamos y tampoco echaremos de menos si no estuvieran.

La mayoria de los uasuarios necesita las funciones básicas, y un programa siempre es mejor si va al grano. El efecto positivo que tiene esto para el desarrollador es que se simplifica el diseño y la comprension del mismo. El truco aquí estaria en saber cuales son las cosas que les van a interesar a nuestro usuario.

  • Ofrece las opciones mas utilizadas o necesitadas. Si no lo tienes claro, quita lo.
  • Descarta las opciones inmensas o de mucha configuración.

Esta regla también es equivalente en las aplicaciones de escritorio, tanto Mac como Windows. La diferencia es que la gente lo acepta de forma natural, es lo que nos han dado de mamar tanto tiempo, la cuestión es si van a hacer lo mismo con el iPad.
Lo primero es centrarse en la esencia de nuestro programa, siempre habrá tiempo para incluir cosas que consideremos importantes, pero nunca se recupera una primera impresión confusa.

A Dos Manos

A mucha gente le excita la idea de poder usar el iPad a dos manos, es lo suficientemente grande para ello, incluso se pueden presionar diferentes controles al mismo tiempo. Aquí el hardware no es distinto del iPhone, pero en el segundo no disponemos del mismo espacio para ello.

Una cosa que preocupa, es que hay gente que cree que puede incluir botones a la derecha y a la izquierda, por el mero hecho de que hay suficiente espacio para ello. No adoptes esta idea bajo ningún concepto. El modo de implementar las dos manos esta en un proceso de descubrimiento y ademas es opcional. Algunos ejemplos donde se aplica este concepto de las dos manos en el programa Keynote:

Durante la introducción del Keynote en el iPad, Phil Schiller mostró algunas de las funciones a dos manos. Mientras se modifica el tamaño de una foto con una mano, se puede con la otra, seleccionar otra y esta primera adoptara el tamaño de la segunda.
Parecido a que mientras arrastramos una diapositiva, podemos seleccionar con la otra mano, otras diapositivas que se unen al grupo siendo arrastrado.

Aquí lo importante es que hay infinidad de posibilidades, son útiles, ahorran tiempo, quedan muchos usos por descubrir. Piensa si tu aplicación puede beneficiarse de algún modo y si es conveniente. Las funcionalidades mas simples no las requieren, pero si fuera necesario se pueden implementar.

  • El uso a dos manos es aceptable.
  • Las funcionalidades esenciales deberían ser diseñadas para el uso con una sola mano.
  • No tengas miedo de ofrecer funciones a dos manos para ahorrar tiempo.

El echo de que un usuario puede hacer uso de sus dos manos es algo a tomar en cuenta, es un aspecto importante en el atractivo de un dispositivo como el iPad. Esta implantado en la naturaleza de la psicología humana.

Usa la Psicología del contacto

¿Nunca te has preguntado por qué los abuelos se sienten mas a gusto con un iPad que con un ordenador de escritorio? La clave es el contacto, es el factor fundamental del concepto de iPad.

El contacto es importante entre los humanos, conlleva la identidad y la realidad material de un objeto. El contacto directo atraviesa la abstracción de los objetos y conecta directamente con el objeto que se toca. Esto se hace particularmente evidente cuando el objeto desencadena una asociación mental en nuestro cerebro. Debido al tamaño, peso y pantalla de visión, el iPad desencadena fuerte asociación con:

  • Docuementos impresos.
  • Notas de papel.
  • Archivadores de carpetas.
  • Libros.

Hay algo intrínseco en el hecho de que el iPad como tecnología es el sucesor, o la versión, de estos objetos físicos. Estamos dispuestos a pensar que uno es el substituto o la mejora del otro. Esto es un potencial fuerte y novedoso para los desarrolladores de software para iPad.

Hay un predilección sobre la realidad virtualizada que envuelve las aplicaciones en el iPad que antes aviamos visto en el iPhone, aplicaciones como Numbers es un buen ejemplo:

O si lo prefieres estas librerias organizadas por estanterias como iBooks, los clips de toda la vida, impresiones a modo de papeles impresos por impresoras laser. Todo esto presentado de manera virtual:

Y que me dices de Notes, donde el color amarillento de las hojas que todos hemso usado aguna vez a alguna edad, con el margen, tipo de letra:

Una calendario, agenda, con el plan diario:

Todos hemos visto este tipo de agenda de contactos en cualquier escritorio de sobremesa, indexado por alfabeto, con el lazo rojo marca paginas:

Los usuarios se conectan automáticamente estas sensaciones de la vida real al contemplar aplicaciones como estas, tan cuidadas en cuanto a diseño y estética, sin perder un detalle. Esto son sensaciones de la vida real que asociamos con un dispositivo electrónico.

Incluso si no eres capaz de hacer que tu aplicación tenga el aspecto de algo real, puedes asociarlo a una superficie donde hacer cosas reales. Hay un nivel adicional de abstracción, pero también funciona.

  • Haz de tu aplicación un objeto real a ser posible.
  • Alternativamente, hazlo un lugar para objetos reales.

Aquí el presupuesto de diseño gráfico aumenta el desarrollo, pero el resultado final debería merecer la pena.

Las Preguntas Claves

En resumen, en cuanto a diseño de aplicaciones para iPad, hazlo en la manera en que aprovecha la peculiaridades únicas del dispositivo y la plataforma. Hazte las siguientes preguntas:

  • ¿Cuáles son las funcionalidades claves? ¿Como puedo quitar alguna?
  • ¿Cómo puedo hacer que funcione en una pantalla táctil?
  • ¿Cómo puedo crear un conexión emocional?
  • ¿Cómo puedo hacer que mi aplicación sea ideal para ser utilizada en un iPad?

Ni publiques hasta haber testeado en un dispositivo real, recuerda que la primera impresión prevalece. Tomate el tiempo necesario para hacerlo debidamente. No des por sentado que lo que funciona en iPhone tiene que funcionar en iPad, y por supuesto, no imites una aplicación de escritorio.

Hay una oportunidad única y excitante en esto, probablemente el comienzo de próximo salto al desarrollo de programas e interfaces de usuario. Estamos en los inicios de un cambio con unas perspectivas muy optimistas.

Buena suerte.

Este tipo de concepción no es nueva, aunque si para el iPhone, el Maestro se concibe como una vista donde se listan los productos, resultados, etc, al seleccionar una de estas, el contenido de dicho campo se muestra en detalle en la siguiente vista, un ejemplo claro es el Mail:

About El equipo de Sunnyface

En Sunnyface contamos con un equipo profesional de programadores expertos en los últimos sistemas y lenguajes de programación tales como React, React-native, VueJS, Laravel, Lumen, NodeJs, PHP... Trabajamos tanto lenguaje multiplataforma como nativo para programación móvil, Estamos disponible para ser contratado en su próximo proyecto,¿Quieres saber como trabajamos?

Leave a Reply

¿Tienes un proyecto en mente?
Escríbenos unas líneas