Movilidad y modernización

aplicaciones

EXPERIENCIA DE USO

COMO FACTOR CRÍTICO

DE ÉXITO DE UNA

APLICACIÓN

USER EXPERIENCE

FACILIDAD DE…

. comprender la aplicación

. deducir dónde está la información

. cómo llegar a ella 25%

35%INTERACCIÓN

diseño de mecanismos para que el

usuario disponga de lo que necesita

cuando lo necesita

20%DISEÑO VISUALpresentar la información de modo que se

interprete rápida y eficazmente

20%DISEÑO VISUALes uno de los factores más importantes

de percepción del usuario

20%PERSONALIZACIÓN

la capacidad que tiene el usuario de

convertir la aplicación en su aplicación

10%ACCESORIOStoda herramienta adicional que el

usuario no echaría de menos, pero que

definitivamente le encantará

SIMPLICIDAD E INTERACCIÓN

DÓNDE ESTÁ LA INFORMACIÓNMapa de navegación. Diseño de espacios.

COMO LLEGA EL USUARIO A ELLAQué tengo que hacer para acceder a la información

VÍAS ALTERNATIVAS¿Y hay otros modos de llegar ahí mismo?

ARQUITECTURA DE

INTERFAZ

INTERACCIÓN

INTERACCIÓN NATURALDiseñar pensando en cuál sería la interacción más

natural para ese elemento en ese entorno

MINIMIZAR INTERACCIÓNSin perder en interacción natural

RESPUESTA Y DISEÑO VISUALQue el feedback de la interacción sea tan natural como

la interacción misma

MODELO DE ACCIÓN

CÓMO SE REALIZAN ACCIONESQué tiene que hacer el usuario para hacer algo

general, o algo sobre un elemento concreto

DESDE DÓNDE SE PUEDEN HACERDefinir los contextos en qué se pueden ejecutar

VÍAS ALTERNATIVAS¿Y hay otros modos de ejecutar la misma acción?

APLICACIONES

TABLET

APLICACIONES

MÓVIL

ENTORNOS

DESKTOP

APLICACIONES

TABLET

APLICACIONES

MÓVIL

ENTORNOS

DESKTOP

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

navigation

pane

APLICACIONES

TABLET

APLICACIONES

MÓVIL

ENTORNOS

DESKTOP

DIFERENTES ARQUITECTURASTodas se basan en modelos jerárquicos, pero con matices

DIFERENTES MODELOS DE NAVEGACIÓNLas características del dispositivo condicionan

INTERACCIÓN DISTINTALos mismos gestos sirven para cosas distintas

hay varias guías de estilo…

ARQUITECTURA

ANDROID E iOS PRESENTAN UN MODELO

JERÁRQUICO SIMPLE. WINDOWS PHONE PERMITE

PRESENTAR ELEMENTOS A UN MISMO NIVEL.

algunas diferencias…

ARQUITECTURA

ANDROID E IOS USAN NAVEGACIÓN IN-APP,

MIENTRAS QUE WINDOWS PHONE NO.

algunas diferencias…

WINDOWS PHONE BASA SU NAVEGACIÓN EN EL

BOTÓN BACK. iOS EN LA PROPIA INTERFAZ.

ANDROID LOS USA AMBOS.

algunas diferencias…

INTERACCIÓN

Android y WP lo utilizan para mostrar acciones contextuales

INTERACCIÓN

SWIPE/DESLIZARAndroid 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

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

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

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

APLICACIONES E INTERFACES DEDICADAS PARA

CADA ESCENARIO Y DISPOSITIVO

la recomendación desde UX es…

APLICACIONES

TABLET

APLICACIONES

MÓVIL

ENTORNOS

DESKTOP

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

DISEÑO VISUAL

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

. 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

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

Modern UI

. 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íascalidad de la deuda Indicadores (momento

actual y evolución)

PERSONALIZACIÓN

. 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

so… any questions?