experiencia de uso como factor crítico de éxito de una aplicación
Post on 12-Jun-2015
447 Views
Preview:
TRANSCRIPT
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?
top related