1. Movilidad y modernización
aplicaciones
EXPERIENCIA DE USO
COMO FACTOR CRÍTICO
DE ÉXITO DE UNA
APLICACIÓN

2. USER EXPERIENCE

3. FACILIDAD DE…
. comprender la aplicación
. deducir dónde está la información
. cómo llegar a ella
25%

4. 35%
INTERACCIÓN
diseño de mecanismos para que el
usuario disponga de lo que necesita
cuando lo necesita

5. 20%
DISEÑO VISUAL
presentar la información de modo que se
interprete rápida y eficazmente

6. 20%
DISEÑO VISUAL
es uno de los factores más importantes
de percepción del usuario

7. 20%
PERSONALIZACIÓN
la capacidad que tiene el usuario de
convertir la aplicación en su aplicación

8. 10%
ACCESORIOS
toda herramienta adicional que el
usuario no echaría de menos, pero que
definitivamente le encantará

9. SIMPLICIDAD E INTERACCIÓN

10. DÓNDE ESTÁ LA INFORMACIÓN
Mapa de navegación. Diseño de espacios.
COMO LLEGA EL USUARIO A ELLA
Qué tengo que hacer para acceder a la información
VÍAS ALTERNATIVAS
¿Y hay otros modos de llegar ahí mismo?
ARQUITECTURA DE
INTERFAZ

11. INTERACCIÓN
INTERACCIÓN NATURAL
Diseñar pensando en cuál sería la interacción más
natural para ese elemento en ese entorno
MINIMIZAR INTERACCIÓN
Sin perder en interacción natural
RESPUESTA Y DISEÑO VISUAL
Que el feedback de la interacción sea tan natural como
la interacción misma

12. MODELO DE ACCIÓN
CÓMO SE REALIZAN ACCIONES
Qué tiene que hacer el usuario para hacer algo
general, o algo sobre un elemento concreto
DESDE DÓNDE SE PUEDEN HACER
Definir los contextos en qué se pueden ejecutar
VÍAS ALTERNATIVAS
¿Y hay otros modos de ejecutar la misma acción?

13. APLICACIONES
TABLET
APLICACIONES
MÓVIL
ENTORNOS
DESKTOP

14. APLICACIONES
TABLET
APLICACIONES
MÓVIL
ENTORNOS
DESKTOP

15. VARIAS ARQUITECTURAS DE INTERFAZ
Ventanas (SDI) versus MDI, TDI, …
Single, Multiple, and Tabbed Document Interface
VARIOS MODELOS DE NAVEGACIÓN
Navegación por SO versus in-app
VARIOS MODELOS DE ACCIÓN
Menús de acciones versus acciones on-the-fly

17. navigation
pane

22. APLICACIONES
TABLET
APLICACIONES
MÓVIL
ENTORNOS
DESKTOP

23. DIFERENTES ARQUITECTURAS
Todas se basan en modelos jerárquicos, pero con matices
DIFERENTES MODELOS DE NAVEGACIÓN
Las características del dispositivo condicionan
INTERACCIÓN DISTINTA
Los mismos gestos sirven para cosas distintas
hay varias guías de estilo…

24. ARQUITECTURA
ANDROID E iOS PRESENTAN UN MODELO
JERÁRQUICO SIMPLE. WINDOWS PHONE PERMITE
PRESENTAR ELEMENTOS A UN MISMO NIVEL.
algunas diferencias…

26. ARQUITECTURA
ANDROID E IOS USAN NAVEGACIÓN IN-APP,
MIENTRAS QUE WINDOWS PHONE NO.
algunas diferencias…

28. WINDOWS PHONE BASA SU NAVEGACIÓN EN EL
BOTÓN BACK. iOS EN LA PROPIA INTERFAZ.
ANDROID LOS USA AMBOS.
algunas diferencias…
INTERACCIÓN

30. Android y WP lo utilizan para mostrar acciones contextuales
INTERACCIÓN
SWIPE/DESLIZAR
Android y WP lo utilizan para desplazarse entre pestañas
iOS lo usa para desplegar acciones sobre un determinado elemento
TAP’N’HOLD / MANTENER PULSADO
iOS lo usa para mostrar tooltips
Android también lo usa para mostrar tooltips y para seleccionar en listas
En Android e iOS se usa para desplegar un panel de navegación

32. ACCIONES
ANDROID
Menú de acciones arriba a la derecha
Si hay más acciones se despliegan en popup
Menú contextual en tap’n’hold
iOS y Windows Phone
Menú de acciones abajo
Si hay más acciones se despliegan desde abajo
Windows Phone presenta menú contextual en tap’n’hold

33. ACCIONES
ANDROID
Menú de acciones arriba a la derecha
Si hay más acciones se despliegan en popup
Menú contextual en tap’n’hold
iOS y Windows Phone
Menú de acciones abajo
Si hay más acciones se despliegan desde abajo
Windows Phone presenta menú contextual en tap’n’hold

34. ACCIONES
ANDROID
Menú de acciones arriba a la derecha
Si hay más acciones se despliegan en popup
Menú contextual en tap’n’hold
iOS y Windows Phone
Menú de acciones abajo
Si hay más acciones se despliegan desde abajo
Windows Phone presenta menú contextual en tap’n’hold

36. APLICACIONES E INTERFACES DEDICADAS PARA
CADA ESCENARIO Y DISPOSITIVO
la recomendación desde UX es…

45. APLICACIONES
TABLET
APLICACIONES
MÓVIL
ENTORNOS
DESKTOP

46. LOS PROPIOS SISTEMAS ‘MONOPOLIZAN’ CIERTAS
INTERACCIONES POR SU PROPIO FUNCIONAMIENTO
pasa +/- lo mismo que en móvil, pero además…
. NAVEGACIÓN Y SISTEMA DE ACCIONES
. COMPLEMENTOS

52. DISEÑO VISUAL

53. . MOSTRAR MÁS O MENOS INFORMACIÓN
. ADECUAR EL DISEÑO DE CADA PARTE
. CAMBIAR LA INTERACCIÓN DE LA APLICACIÓN
adaptar el diseño para el tamaño disponible…

56. . REUBICAR BLOQUES UNO DEBAJO DE OTRO
. MOVER DATOS ENTRE BLOQUES
. LOS BLOQUES SE HACEN GRANDES O PEQUEÑOS
reorganizar la información dentro del espacio

59. . QUE EL DISEÑO DE LA APLICACIÓN SEA ATRACTIVO
. ESTABLECER UNA IDENTIDAD VISUAL
. DISEÑAR LA INFORMACIÓN PARA QUE SEA FÁCIL DE ANALIZAR
el diseño visual condiciona el uso. Es clave…

60. Modern UI

62. . DISEÑAR LA INFORMACIÓN PARA QUE SEA FÁCIL DE LEER Y ANALIZAR
. ESCOGER UN DISEÑO QUE FAVOREZCA LA INTERACCIÓN
el diseño visual condiciona el uso. Es clave…
número de facturas
pagadas a N días
calidad de la deuda Indicadores (momento
actual y evolución)

63. PERSONALIZACIÓN

64. . ESCOGER QUÉ INFORMACIÓN VER EN CADA ESPACIO
. CREAR Y COMPARTIR BLOQUES NUEVOS (STORE)
. ESCOGER ASPECTO VISUAL (COLOR, ESTILO, …)
poder configurar visualmente la aplicación

69. so… any questions?