Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
-
Upload
juan-paulo-madriaza -
Category
Design
-
view
1.342 -
download
2
description
Transcript of Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
![Page 1: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/1.jpg)
Clase 02
![Page 2: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/2.jpg)
PRINCIPIOS DE INTERACCIÓNAlgo más universal
![Page 3: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/3.jpg)
Principios de Interacción
Integridad estéticaLa aplicación debe tener en sintonía su función y su diseño
![Page 4: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/4.jpg)
Principios de Interacción
Consistencia (externa e interna)La aplicación debe funcionar como funcionan otras.La aplicación debe comportarse consistentemente a nivel interno.
![Page 5: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/5.jpg)
Principios de Interacción
Manipulación directaLa aplicación debe permitir que el usuario manipule directamente el contenido.• Rotando el dispositivo• Usando gestos para manipular por ejemplo el zoom• Debe sentir que la interfaz responde inmediatamente
a sus interacciones
![Page 6: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/6.jpg)
Principios de Interacción
FeedbackLa aplicación debe entregar constante y fluido feedback de su funcionamiento para que el usuario sienta que está todo bien
![Page 7: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/7.jpg)
Principios de Interacción
Metáforas de la vida realLa aplicación puede comportarse como lo hacen los objetos cotidianos para facilitar su interacción.• Prender / apagar• Carpetas• Micrófonos• Pasar páginas• Controles rotativos
![Page 8: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/8.jpg)
Principios de Interacción
Control del usuarioLos usuarios deben ser quiénes detonen las acciones de la interfaz, no la aplicación
![Page 9: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/9.jpg)
RECOMENDACIONESLas básicas
![Page 10: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/10.jpg)
Recomendaciones
Mobile no es la web más pequeña, es diferente. Trátala como tal
![Page 11: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/11.jpg)
Recomendaciones
Enfócate en la tarea principal
![Page 12: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/12.jpg)
Recomendaciones
Jerarquiza el contenido que el usuario está buscando
![Page 13: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/13.jpg)
Recomendaciones
Piensa de arriba a abajo
![Page 14: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/14.jpg)
Recomendaciones
Si es más grande que la pantalla, que se note
![Page 15: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/15.jpg)
Recomendaciones
Dale a tus usuarios un recorrido lógico de uso
![Page 16: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/16.jpg)
Recomendaciones
Usa la terminología de tu usuario, no la de tu cliente
![Page 17: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/17.jpg)
Recomendaciones
Evita que el usuario ingrese texto
![Page 18: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/18.jpg)
Recomendaciones
Guarda el avance automáticamente (a menos que pueda ser perjudicial)
![Page 19: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/19.jpg)
Recomendaciones
Permite que el usuario se arrepienta
![Page 20: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/20.jpg)
Recomendaciones
Cuida el trabajo de tu usuario
![Page 21: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/21.jpg)
Recomendaciones
Permite y estimula la conexión entre usuarios
![Page 22: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/22.jpg)
Recomendaciones
Realiza búsquedas mediante suggestions
![Page 23: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/23.jpg)
Recomendaciones
Preocúpate de tu página en el AppStore
![Page 24: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/24.jpg)
Recomendaciones
Usa la animación para comunicar
![Page 25: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/25.jpg)
Recomendaciones
Recuerda que la aprobación en el AppStore puede demorar
![Page 26: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/26.jpg)
Recomendaciones
Usa las notificaciones sólo cuando el usuario las necesite
![Page 27: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/27.jpg)
Recomendaciones
Retrasa el proceso de registro lo más que puedas
![Page 28: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/28.jpg)
Recomendaciones
Recuerda que en cualquier momento suena el celular
![Page 29: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/29.jpg)
Recomendaciones
Los controles deben parecer «Tappables»
![Page 30: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/30.jpg)
Recomendaciones
No borres un botón sólo porque está temporalmente inactivo
![Page 31: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/31.jpg)
Recomendaciones
La creatividad es la mezcla perfecta entre originalidad y funcionalidad
![Page 32: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/32.jpg)
Recomendaciones
Está bien usar gráfica propia, pero cuidado con pasar a llevar las convenciones
![Page 33: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/33.jpg)
Recomendaciones
En lo Mobile el contexto es mucho más variado que en la web
![Page 34: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/34.jpg)
Recomendaciones
Diseña para pantallas chicas y para punteros enormes e imprecisos
![Page 35: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/35.jpg)
Recomendaciones
La interfaz es siempre a pantalla completa
![Page 36: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/36.jpg)
Recomendaciones
El usuario está por lo general pendiente de mil cosas cuando usa nuestra interfaz
![Page 37: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/37.jpg)
Recomendaciones
Diseña especialmente para móviles
![Page 38: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/38.jpg)
Recomendaciones
Céntrate en lo que un celular puede hacer bien
![Page 39: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/39.jpg)
Recomendaciones
Estudia a tu usuario
![Page 40: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/40.jpg)
Recomendaciones
Acostúmbrate a los cambios de todo tipo
![Page 41: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/41.jpg)
Recomendaciones
Las actualizaciones te mantienen en el radar
![Page 42: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/42.jpg)
Recomendaciones
Mobile es bueno en el contexto espacial y temporal
![Page 43: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/43.jpg)
Recomendaciones
Reduce la carga cognitiva
![Page 44: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/44.jpg)
Recomendaciones
Diseña para las distintas orientaciones
![Page 45: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/45.jpg)
Recomendaciones
Pásalo al dispositivo cuanto antes
![Page 46: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/46.jpg)
Recomendaciones
Simple es mejor
![Page 47: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/47.jpg)
Recomendaciones
Itera rápido
![Page 48: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/48.jpg)
Recomendaciones
Prueba con usuarios
![Page 49: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/49.jpg)
Recomendaciones
Documenta el proceso
![Page 50: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/50.jpg)
Recomendaciones
El resultado es la aplicación, no el proceso
![Page 51: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/51.jpg)
Recomendaciones
Un buen proyecto es la mejor mezcla entre:• Los objetivos de negocio• Los requerimientos técnicos• Las necesidades de los usuarios
![Page 52: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/52.jpg)
Recomendaciones
Piensa en gestos, no en clicks
![Page 53: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/53.jpg)
Recomendaciones
Estudia los patrones de uso
![Page 54: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/54.jpg)
Recomendaciones
El tamaño mínimo «tappable» es de 44x44 px.
![Page 55: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/55.jpg)
Recomendaciones
Las preferencias pueden estar dentro y/o fuera de la app
![Page 56: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/56.jpg)
Recomendaciones
Cuida la batería de tu usuario
![Page 57: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/57.jpg)
Recomendaciones
Ten en mente los gestos:• Tap• Drag• Pinch Open• Pinch Close• Double tap• Flick• Swipe• Touch and hold
![Page 58: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/58.jpg)
Recomendaciones
• Cámara• GPS• Acelerómetro• Giroscopio• Multitouch• Audio• 3G• SMS• Notificaciones
• Calendario• Contactos• Teléfono• Redes sociales• RSS• Wi-Fi• Mail• Videochat• Remote
• Cloud• QR Codes• Augmented Reality• Pago• Video• Micrófono• Gestos• Video output• Etc…
Sácale el jugo al dispositivo
![Page 59: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/59.jpg)
RECURSOSUna última cosa
![Page 60: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/60.jpg)
Ya para terminar
Recursos
iOS Human Interface Guidelines
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html
¿Para qué sirve?Tiene mucha información valiosa para el diseño de interfaces para dispositivos móviles, su contenido, en muchos aspectos, es tanto útil para el diseño de iPhone /iPad apps como para el diseño de interfaces de otros dispositivos.
![Page 61: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/61.jpg)
Ya para terminar
Recursos
Slidesharehttp://www.slideshare.net/djc1805/iphone-apps-what-how-whyhttp://www.slideshare.net/mringlein/designing-iphone-ipad-appshttp://www.slideshare.net/ribot/mobile-ux-the-intricacies-of-designing-for-mobile-devices-presentationhttp://www.slideshare.net/helgetenno/mobile-abilities-maphttp://www.slideshare.net/arivera71/guia-de-diseo-de-apps-para-iphone
¿Para qué sirve?Muchas presentaciones muy interesantes entre otras cosas, sobre el diseño de interfaces para dispositivos móviles
![Page 62: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/62.jpg)
Ya para terminar
Recursos
Axurehttp://www.axure.com/
¿Para qué sirve?Para hacer wireframes tanto estáticos como interactivos
![Page 63: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/63.jpg)
Ya para terminar
Recursos
LiveViewhttp://www.zambetti.com/projects/liveview/
¿Para qué sirve?Aplicación MAC para testear inmediatamente lo que está aún en el computador
![Page 64: Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles](https://reader035.fdocuments.ec/reader035/viewer/2022062419/557b8353d8b42aff318b545f/html5/thumbnails/64.jpg)
¿Preguntas?Gracias
Juan Paulo MadriazaDiseñador de Interfaces
www.uxd.cl