¿cómo diseñar una buena aplicación para dispositivos móviles?
DESCRIPTION
En este documento exploramos los consejos prácticos que se deben tener en cuenta al momento de diseñar una buena aplicación para dispositivos móviles.TRANSCRIPT
![Page 2: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/2.jpg)
Consejos para haceruna buena App
![Page 3: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/3.jpg)
First launch experience
1
![Page 4: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/4.jpg)
Las buenas web y apps de mobile tiene
bastantes similitudes. Ambas necesitan
enganchar al usuario o al visitante
instantáneamente.
Si fallan, se van a la competencia con
un par de clicks. La mayoria de los
usuarios NO pierden tiempo
averiguando como utilizar tu app o leer
un manual complicado.
![Page 5: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/5.jpg)
Las 3 preguntas claveen la primera pantalla de toda App
Donde estoy?
Qué puedo hacer?
Qué más puedo hacer?
![Page 6: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/6.jpg)
Gowalla
Gowalla tiene un primera pantalla atractiva. Un pasaporte que se abre lentamente, dando acceso instantaneo a tu información personal, sugerencias instantaneas y más acciones y notificaciones..
Competidor de Foursquare. Ahora propiedad de Facebbok
![Page 7: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/7.jpg)
Cada entrada es valiosa
2
![Page 8: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/8.jpg)
Piensa por un momento sobre cómo realmente
utilizas tu dispositivo móvil: el teléfono de un
programador esta seguro sentado en su dock en
la mesa, conectado a un PC con un gran teclado.
Ahora piensa sobre como el resto del mundo está
utilizando el smartphone: caminando con él por
una calle llena de gente con un café en una mano
y el móvil en la otra, intentando averiguar cuál es
el resultado de su equipo, entre la ultima reunión
y la siguiente.
![Page 9: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/9.jpg)
La mayor parte del tiempo la gente sólo tiene el
dedo gordo para navegar por tu app. Olvida el
multitouch y métodos de entrada complejos
similares – scroll , flip y touch son tus amigos.
Deja que la gente navegue de pantalla a pantalla y
de información a información rápidamente , sin
necesidad de remangarse los brazos. Y permiteles
hacerlo rápido. Cada entrada (input) cuenta.
![Page 10: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/10.jpg)
Taskos
Puedes añadir una nueva tarea a Taskos con solo un touch (y tecleando algo, obviamente).
Justo después se pueden configurar muchos settings , pero es una opción.
App para creación de tareas
![Page 11: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/11.jpg)
Contraste
3
![Page 12: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/12.jpg)
Mientras tu entorno de programación puede ser
una pantalla bien grande en una habitación con
suficiente sombra, el lugar dónde tus usuarios
utilizaran tu app puede no serlo.
Necesitamos utilizar nuestros móviles muy
frecuentemente en dias soleados. Esto tiene una
gran influencia en cómo vemos la pantalla y cómo
la interfaz debe ser diseñada. Los detalles se
pierden , los colores no pueden ser distinguidos
uno del otro.
![Page 13: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/13.jpg)
Algunos elementos completamente desaparecen
debido a los reflejos. Los elementos importantes
deben tener suficiente contraste para ser
reconocidos en condiciones de luminosidad alta.
Da a tu interfaz una jerarquia clara mostrando las
características más útiles bien grandes y
brillantes. Borra todo lo que no sea importante
completamente de tu app.
![Page 14: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/14.jpg)
SoundHound
Aunque hay muchas opciones presentes en la pantalla de SoundHound, la función principal se muestra claramente en la parte de arriba de la interfaz.
App para detección de canciones
![Page 15: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/15.jpg)
No Wait
4
![Page 16: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/16.jpg)
Nadie quiere esperar, especificamente en el
mundo móvil. Llevamos nuestros dispositivos en el
metro, responder un email rápido en el bus, o
vemos el tiempo mientras caminamos por la calle.
Hacemos estas pequeñas cosas según
caminamos a otros sitios, para ganar un poco más
de tiempo libre para las cosas que realmente nos
gustan hacer. No permitas que la gente de tu app
espere por hacer una determinada cosa. Mejora el
rendimiento de tu app para conseguir resultados
lo más rápido posible.
![Page 17: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/17.jpg)
Landscape(orientación wide)
5
![Page 18: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/18.jpg)
Google Reader
La app de Google Reader muestra un pequeño spinner arriba ala derecha cada vez que se esta haciendo loading en el background, asi sabes que debes esperar unos segundos para obtener resultados.
![Page 19: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/19.jpg)
A veces olvidamos algunas cosas que diferencian
estos celulares de los antiguos. Mientras muchos
están conformes con las Apps de una forma,
existen otros que las prefieren en formato
horizontal para aprovechar el teclado QWERTY.
No cometas el error de pensar que la orientación
Wide es sólo para ensanchar la vista. Debe ser
una experiencia totalmente diferente para el
usuario, tanto en la diagramación como en la
interacción de los objetos.
![Page 20: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/20.jpg)
YouTubeComienza creando una pantalla bien estructurada según su orientación. Luego crea la segunda. Debes considerar los pro y contras de ambas, usa sus beneficios sabiamente.
Youtube usa ambas orientaciones logrando una perfecta adaptación según orientamos nuestro equipo.
![Page 21: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/21.jpg)
Ecosistema Apps
6
![Page 22: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/22.jpg)
No trates de inventar la rueda. El teléfono ya hace
muchas cosas fuera de la caja y los usuarios están
familiarizados con muchas de las Apps de uso
genérico.
Considera que el usuario no utilizará solamente tu
app sino que podrá combinarla con las funciones
propias de cada teléfono. Si la aplicación es de
uso indispensable, será parte de la rutina diaria
convirtiéndose en un “basic” y logrará integrarse
también con otras aplicaciones.
![Page 23: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/23.jpg)
Compartir
Muchas Apps se enganchan directamente con el mecanismo de compartir. Debemos usar esto como ventaja.
![Page 24: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/24.jpg)
Tu App: Única
7
![Page 25: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/25.jpg)
Existen más de 200.000 apps en el mercado.
No asumas que no hay espacio para otra gran
app. La gente siempre busca y prefiere cosas
diferentes.
Cada app debe tener un carácter propio que se
ajusta con los intereses de los perfiles a los cuales
se orienta. Toma un problema que ya tiene una
excelente solución. Ahora piensa qué cambio
necesita para que su perspectiva sea
completamente novedosa y cambie la app original.
![Page 26: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/26.jpg)
FeedlyFeedly es otro lector de noticias con integración Google Reader, pero usa un estilo de presentación de revista muy pulcro que se distancia de otras apps similares.
![Page 27: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/27.jpg)
Test Lab
8
![Page 28: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/28.jpg)
Las grandes empresas gastan mucho dinero en
profesionales expertos en usabilidad que realizan
prueban en laboratorios para probar la
funcionalidad de la app.
No es un excusa para los pequeños empresarios.
Podemos hacer mucho a través de las versiones
“beta” que incorporan campos para que los
usuarios comenten a cerca de la app. Usar los
círculos de amigos y contactos es también una
buena idea para probar el uso de la app.
![Page 29: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/29.jpg)
App Market
9
![Page 30: ¿Cómo diseñar una buena Aplicación para dispositivos móviles?](https://reader036.vdocumento.com/reader036/viewer/2022062319/557bbe79d8b42aac088b4dd5/html5/thumbnails/30.jpg)
Una descripción de la aplicación.
Icono en SD o HD.
Banner promocional para el Market.
Una descripción más detallada de la app con
capturas de pantalla para las versiones web.