Clase 02

PRINCIPIOS DE INTERACCIÓNAlgo más universal

Principios de Interacción

Integridad estéticaLa aplicación debe tener en sintonía su función y su diseño

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.

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

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

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

Principios de Interacción

Control del usuarioLos usuarios deben ser quiénes detonen las acciones de la interfaz, no la aplicación

RECOMENDACIONESLas básicas

Recomendaciones

Mobile no es la web más pequeña, es diferente. Trátala como tal

Recomendaciones

Enfócate en la tarea principal

Recomendaciones

Jerarquiza el contenido que el usuario está buscando

Recomendaciones

Piensa de arriba a abajo

Recomendaciones

Si es más grande que la pantalla, que se note

Recomendaciones

Dale a tus usuarios un recorrido lógico de uso

Recomendaciones

Usa la terminología de tu usuario, no la de tu cliente

Recomendaciones

Evita que el usuario ingrese texto

Recomendaciones

Guarda el avance automáticamente (a menos que pueda ser perjudicial)

Recomendaciones

Permite que el usuario se arrepienta

Recomendaciones

Cuida el trabajo de tu usuario

Recomendaciones

Permite y estimula la conexión entre usuarios

Recomendaciones

Realiza búsquedas mediante suggestions

Recomendaciones

Preocúpate de tu página en el AppStore

Recomendaciones

Usa la animación para comunicar

Recomendaciones

Recuerda que la aprobación en el AppStore puede demorar

Recomendaciones

Usa las notificaciones sólo cuando el usuario las necesite

Recomendaciones

Retrasa el proceso de registro lo más que puedas

Recomendaciones

Recuerda que en cualquier momento suena el celular

Recomendaciones

Los controles deben parecer «Tappables»

Recomendaciones

No borres un botón sólo porque está temporalmente inactivo

Recomendaciones

La creatividad es la mezcla perfecta entre originalidad y funcionalidad

Recomendaciones

Está bien usar gráfica propia, pero cuidado con pasar a llevar las convenciones

Recomendaciones

En lo Mobile el contexto es mucho más variado que en la web

Recomendaciones

Diseña para pantallas chicas y para punteros enormes e imprecisos

Recomendaciones

La interfaz es siempre a pantalla completa

Recomendaciones

El usuario está por lo general pendiente de mil cosas cuando usa nuestra interfaz

Recomendaciones

Diseña especialmente para móviles

Recomendaciones

Céntrate en lo que un celular puede hacer bien

Recomendaciones

Estudia a tu usuario

Recomendaciones

Acostúmbrate a los cambios de todo tipo

Recomendaciones

Las actualizaciones te mantienen en el radar

Recomendaciones

Mobile es bueno en el contexto espacial y temporal

Recomendaciones

Reduce la carga cognitiva

Recomendaciones

Diseña para las distintas orientaciones

Recomendaciones

Pásalo al dispositivo cuanto antes

Recomendaciones

Simple es mejor

Recomendaciones

Itera rápido

Recomendaciones

Prueba con usuarios

Recomendaciones

Documenta el proceso

Recomendaciones

El resultado es la aplicación, no el proceso

Recomendaciones

Un buen proyecto es la mejor mezcla entre:• Los objetivos de negocio• Los requerimientos técnicos• Las necesidades de los usuarios

Recomendaciones

Piensa en gestos, no en clicks

Recomendaciones

Estudia los patrones de uso

Recomendaciones

El tamaño mínimo «tappable» es de 44x44 px.

Recomendaciones

Las preferencias pueden estar dentro y/o fuera de la app

Recomendaciones

Cuida la batería de tu usuario

Recomendaciones

Ten en mente los gestos:• Tap• Drag• Pinch Open• Pinch Close• Double tap• Flick• Swipe• Touch and hold

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

RECURSOSUna última cosa

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.

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

Ya para terminar

Recursos

Axurehttp://www.axure.com/

¿Para qué sirve?Para hacer wireframes tanto estáticos como interactivos

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

¿Preguntas?Gracias

Juan Paulo MadriazaDiseñador de Interfaces

www.uxd.cl