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.
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»
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.
