El desarrollo de interfaces de usuario en aplicaciones móviles

Buenas a todos. Hoy me gustaría hablar sobre la problemática intrínseca que surge en el desarrollo de aplicaciones móviles cuando iniciamos el diseño de la interfaz de usuario. Siempre me surge la necesidad de explicarle a los promotores de las aplicaciones que es un asunto importante y relativamente complejo. Asi que, mediante este post, haré un primer acercamiento a dicho problema.

Por un lado, a medida que la tecnología avanza, los dispositivos móviles proporcionan mejores capacidades gráficas. Por otro, siempre será necesario mantener la compatibilidad hacia las versiones más antiguas de los móviles. Por esta razón, esta problematica siempre estará presente, aunque si lo tenemos en cuenta desde el inicio del desarrollo, podremos obtener estupendos resultados sin un exceso de trabajo.

Nerdy iPhone design stencils. (Also pictured: Fanny Dangler)
Creative Commons License photo credit: jasonEscapist

En primer lugar necesitamos saber sobre que dispositivos vamos a desarrollar la aplicación móvil. Los fabricantes proporcionan dicha información. Estudiemos brevemente las características que definen las prestaciones gráficas de un teléfono móvil:

  • El tamaño: Se calcula al medir la diagonal de la pantalla y se expresa en pulgadas (una pulgada equivale aproximadamente a 2,54 cm).
  • La resolución de pantalla: Determinada por el número de píxeles por unidad de superficie (expresados en pulgadas lineales). Una resolución de 300 dpi significa 300 columnas y 300 filas de píxeles por pulgada cuadrada.
  • La relación de aspecto: Es la proporción entre la altura y la anchura. Se calcula dividiendo el ancho por la altura de la imagen visible en pantalla, y se expresa normalmente como «X:Y»

Dot per inches

Una vez que sabemos el significado de estos conceptos, podemos comenzar a entender el origen del problema. Exponemos en la siguiente tabla un resumen de los principales teléfonos “smartphones” del mercado:

Movil Tamaño Píxeles / Resolución Relación de aspecto
iPhone 3GS 3,5 pulgadas 480px x 320px / 160dpi 1,5:1 (3:2)
iPhone 4 3,5 pulgadas 960px x 640px / 326dpi 1,5:1 (3:2)
Android (Small Screens I) 2 – 3,5 pulgadas 240px x 320px / 120dpi 1,33:1 (4:3)
Android (Small Screens II) 2 – 3,5 pulgadas 480px x 640px / 240dpi 1,5:1 (3:2)
Android (Normal Screens I) 3,5 – 4,5 pulgadas 240px x 400px / 120dpi 1,66:1 (5:3)
Android (Normal Screens II) 3,5 – 4,5 pulgadas 240px x 432px / 120dpi 1,8:1 (9:5)
Android (Normal Screens III) 3,5 – 4,5 pulgadas 320px x 480px / 160dpi 1,5:1 (3:2)
Android (Normal Screens IV) 3,5 – 4,5 pulgadas 480px x 800px / 240dpi 1,66:1 (5:3)
Android (Normal Screens V) 3,5 – 4,5 pulgadas 480px x 854px / 240dpi 1,77:1 (16:9)
Android (Normal Screens V) 3,5 – 4,5 pulgadas 600px x 1024px / 240dpi 1,7:1
Android (Normal Screens VI) 3,5 – 4,5 pulgadas 640px x 960px / 320dpi 1,5:1 (3:2)
Android (Large Screens I) 4,2 – 7 pulgadas 480px x 800px / 120dpi 1,66:1 (5:3)
Android (Large Screens II) 4,2 – 7 pulgadas 480px x 854px / 120dpi 1,77:1 (16:9)
Android (Large Screens III) 4,2 – 7 pulgadas 480px x 800px / 160dpi 1,66:1 (5:3)
Android (Large Screens IV) 4,2 – 7 pulgadas 480px x 854px / 160dpi 1,77:1 (16:9)
Android (Large Screens V) 4,2 – 7 pulgadas 600px x 1024px / 160dpi 1,7:1
Android (Extra Large Screens I) 7 – 11 pulgadas 600px x 1024px / 120dpi 1,7:1
Android (Extra Large Screens II) 7 – 11 pulgadas 1280px x 800px / 160dpi 1,6:1 (8:5)
Android (Extra Large Screens III) 7 – 11 pulgadas 1024px x 768px / 160dpi 1,33:1 (4:3)
Android (Extra Large Screens IV) 7 – 11 pulgadas 1280px x 768px / 160dpi 1,66:1 (5:3)
Android (Extra Large Screens V) 7 – 11 pulgadas 1536px x 1152px / 240dpi 1,33:1 (4:3)
Android (Extra Large Screens VI) 7 – 11 pulgadas 1920px x 1152px / 240dpi 1,66:1 (5:3)
Android (Extra Large Screens VII) 7 – 11 pulgadas 1920px x 1200px / 240dpi 1,6:1 (8:5)
Android (Extra Large Screens VIII) 7 – 11 pulgadas 2048px x 1536px / 320dpi 1,33:1 (4:3)
Android (Extra Large Screens IX) 7 – 11 pulgadas 2560px x 1536px / 320dpi 1,66:1 (5:3)
Android (Extra Large Screens X) 7 – 11 pulgadas 2560px x 1600px / 320dpi 1,6:1 (8:5)
Blackberry Pearl 8100 (serie) 2,5 pulgadas 240px x 260px / 157 dpi 1,08:1 (13:12)
Blackberry Pearl 8220 (serie) 2,6 pulgadas 240px x 320px / 154 dpi 3:4
Blackberry Curve 8300 (serie) 2,5 pulgadas 320px x 240px / 165 dpi 1,33:1 (4:3)
Blackberry 8700 (serie) 2,6 pulgadas 320px x 240px / 155 dpi 1,33:1 (4:3)
Blackberry 8800 (serie) 2,5 pulgadas 320px x 240px / 165 dpi 1,33:1 (4:3)
Blackberry Curve 8900 (serie) 2,4 pulgadas 480px x 360px / 245 dpi 1,33:1 (4:3)
Blackberry Bold 9000 (serie) 2,8 pulgadas 480px x 320px / 217 dpi 1,5:1 (3:2)
Blackberry Curve 9300 (serie) 2,46 pulgadas 480px x 320px / 166 dpi 1,5:1 (3:2)
Blackberry Storm 9500 (serie) 3,25 pulgadas 360px x 480px / 184 dpi 3:4
Windows Phone 7 (requisitos mínimos) 800px x 480px 1,66:1 (5:3)

 

Como podemos ver, el número de terminales móviles es grande. Esta es la razón por la cual para desarrollar una buena aplicación móvil es fundamental realizar previamenre un análisis y diseño de la misma. Es necesario conocer profundamente la guía de usabilidad de cada tecnología movil. Es muy util seguir metodologias de desarrollo basada en prototipos. Es impresicindible contar con un equipo de diseño grafico con profesionales del diseño vectorial para la correcta adaptación a las diferentes resoluciones,…

Bueno, espero que este breve resumen ayude a dimensionar el coste real de una buena aplicación movil. Y un último consejo, todo el quiera una buena aplicación movil, que se asegure de tener con un buen equipo de profesionales. Por suerte, puedo confirmar que esto no es problema real en nuestro pais, y que se existen muchas empresas apostando fuertemente por este sector.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.