Como factor diferenciador de nuestras aplicaciones móviles

LA IMPORTANCIA DEL DISEÑO

CEO ESTUDIO EXIMIUS ERNESTO OLMEDO

Emprendedor, diseñador, desarrollador, consultor, especializado en plataformas corporativas móviles.

ERNESTO OLMEDO

Quién

@mr_olmedo

www.estudioeximius.com/blog

Frase

Good design is good business. -THOMAS WATSON (IBM)

Contenido

Los contenidos de esta presentación son válidos para el diseño de apps para tablets y smartphones.

1 La importancia del diseño

2

3

¿Qué es buen diseño?

Fundamentos de UI/UX

4 Proceso de diseño

5 Herramientas & Recursos

Punto 1

.La importancia del diseño

El Caso

Carlos Koji John

Considera comprar a estos emprendedores una solución móvil para tu negocio:

Carlos

1 Diseño

2

3

Detalle

Calidad

Emprendedor salvadoreño con un equipo pequeño pero altamente profesional y capacitado. Su portafolio de proyectos es pequeño, pero variado y de alta calidad. Su proceso de diseño es consultivo y abierto.

Top skills

Carlos

El portafolio de Carlos está repleto de software bien diseñado, de fácil uso, y a un precio justo.

Koji

1 Experiencia

2

3

Eficiencia

Bajo costo

Emprendedor japonés con un amplio equipo de desarrolladores de excelente formación técnica. Su portafolio de proyectos es inmenso, pero encasillado en la mentalidad de su país.

Top skills

Koji

El portafolio de Koji es enorme, pero muestra el mismo concepto japonés de diseño en todas las aplicaciones.

John

1 Detalle

2

3

Experiencia

Calidad

Emprendedor estadounidense con un equipo pequeño pero altamente profesional y capacitado. El software que produce es de excelente calidad funcional, pero plano y “sin sabor” visual.

Top skills

John

El portafolio de John muestra software de buena calidad técnica, pero su proceso de diseño es plano y cerrado.

Innovación Comunicar ROI

Eficiencia Precio justo Calidad

Frase

Design is not just what it looks like and feels like. Design is how it works.

-STEVE JOBS (APPLE)

Punto 2

.¿Qué es buen diseño?

Desconfíe de recetas mágicas. Hay demasiados factores a tener en cuenta. Veamos 3 de los más importantes.

Sencillez

1 Un buen diseño es sencillo. Por eso es complicado. Objetivos y propósitos claros. Espacios abarcables. Pocos niveles de complejidad.

Honestidad

2 Un buen diseño es honesto. Tiene claro su objetivo y no intenta ser otra cosa. Nada está escondido. Lenguaje claro y conciso. Sin segundas intenciones.

Apple, stop this madness.

Visual

3 Un buen diseño es visual. Saber usar imágenes y texto. Navegación por contenido. Decidimos con los ojos, no con la cabeza.

Un buen diseño es…

Punto 3

.Fundamentos de diseño UI/UX

1 Fácil de aprender a usar

2

3

Eficiente

Memorable

4

5

Recuperación de errores

Simplicidad

6 Enrutamiento

7

8

Visibilidad

Feedback

9

10

Consistencia

Satisfacción

Punto 3 Los diez mandamientos del diseño UI/UX

1 TU DISEÑO DEBE SER FÁCIL DE USAR.

•  Una interfaz debería ser fácil de aprender desde la primer vez que un usuario interactúa con ella.

•  La cantidad de funciones que se presentan al usuario deberían limitarse exactamente a lo que el usuario necesita para cumplir su objetivo

¡Hazlo fácil!

2 NO HAGAS AL USUARIO TRABAJAR DE MÁS.

•  El número de pasos que le lleva al usuario para completar una tarea debe ser siempre menor a 3.

•  Las tareas más importantes deben hacerse lo más eficiente que sea posible

Sé Eficiente

3 INTENTA DEJAR SIEMPRE UNA IMPRESIÓN AL USUARIO

•  La interfaz debe ser más fácil de usar con cada uso subsecuente.

•  La frecuencia de uso es el factor más importante para lograr una interfaz memorable.

Memorable

4 RECUPÉRATE DE MANERA ELEGANTE DE UN ERROR

•  En una interfaz de usuario perfecta, nunca debería permitírsele al usuario cometer un error. Y deberás prevenirlo siendo amable y servicial.

Amigable

5 RECUERDA: MENOS ES MÁS.

•  Las tareas usuales deben ser fáciles; las tareas menos comunes deben ser razonablemente complejas.

•  SIEMPRE EVITA funciones innecesarias y mantén la retícula y diseño lo más limpio posible.

Sé Simple

6 NADA IRRITA MÁS QUE PERDERSE EN UNA APP.

•  Lo que el usuario espera que pase cuando interactúan con la interfaz es exactamente lo que debe pasar.

Enrutamiento

7 AYUDA AL USUARIO A HALLAR LO QUE BUSCA.

•  La información importante debería ser más visible y la información menos importante debería ser menos visible.

•  Entender las metas de tus usuarios es crítico para decidir qué destacarás

Visibilidad

8 ¿ESTÁ PASANDO ALGO? DÍSELO AL USUARIO.

•  El usuario siempre debe estar en control de la interfaz y no al contrario.

•  Si necesitas hacer que el usuario espere, explícale por qué.

Feedback

9 MANTÉN CONSISTENTE TU LENGUAJE DE DISEÑO.

•  Controles similares SIEMPRE deben mostrarse y actuar de la misma manera en toda la aplicación.

•  Seguir los manuales de estilo de la plataforma para la que se está diseñando

Consistencia

10 ESCUCHA LO QUE TU USUARIO TIENE QUE DECIR

•  Mantén en cuenta qué tanto disfruta el usuario tu aplicación.

•  Corrige errores o implementa mejoras con esta información.

Satisfacción

Punto 4

.Proceso de Diseño

USUARIO

U Diseño

conceptual

Diseño e implementación

Evaluación

De UX

Lanzamiento y mantenimiento

Análisis de requisitos

Diseño centrado en

Paso 1

•  Decide los objetivos del producto.

•  Determina las necesidades de tus usuarios.

•  Entrevista a tus usuarios.

Análisis de requisitos Objetivo

Tiempo Entorno

•  Boceta en alta calidad el diseño de tu producto.

•  Crea representaciones visuales (mockups) o representaciones interactivas (prototipos) del producto.

•  Evalúa la UX de estos diseños. •  Reinicia el proceso para mejorar los

resultados de tu evaluación.

Diseño Conceptual, Prototipos y Evaluación

Paso 2

La bocetería es el punto de nacimiento de tu aplicación.

Mockups o Prototipos

•  Te permiten visualizar la aplicación y presentársela a tu equipo de trabajo.

•  Probar la aplicación en esta etapa te permitirá determinar si cumples con los 10 principios de diseño UX.

•  Boceta en alta calidad el diseño de tu producto.

•  Crea representaciones visuales (mockups) o representaciones interactivas (prototipos) del producto.

•  Evalúa la UX de estos diseños. •  Reinicia el proceso para mejorar los

resultados de tu evaluación.

Diseño e Implementación

Paso 3

•  Haz evaluaciones de usabilidad al concluir el diseño final de tu aplicación.

•  Trabaja con tu equipo de desarrollo y de diseño para mejorar el producto en base a los resultados de esta evaluación.

•  Repite este proceso hasta que tu aplicación llegue al punto más alto de usabilidad en esta versión.

Evaluación de usabilidad

Paso 4

•  Recuerda documentar todo tu proceso creativo.

•  Recolecta el feedback de tus usuarios y clientes para mejorar el producto en versiones futuras

Lanzamiento y mantenimiento

Paso 5

Punto 5

.Herramientas y Recursos

Mockups

•  Gratuito •  Fácil de usar •  Varios diseñadores pueden trabajar en un

documento al mismo tiempo

Cacoo.com

http://cacoo.com

Prototipos

•  Gratuita •  Permite hacer prototipos de aplicaciones iOS

de forma fácil y rápida •  Permite ejecutar los prototipos como si de

aplicaciones se tratase. Esto facilita el análisis UX.

Blueprint App

App Store / Blueprint

Prototipos

•  Gratuita •  Provee un espacio de discusión y feedback •  Integra listas de tareas pendientes por

proyecto •  Permite el trabajo en equipo

inVISION

http://invisionapp.com

Inspiración

•  Gratuito •  Posee muestras de UI para desktop, tablets

y móviles •  Permite buscar por Estilos de diseño o por

Tipo de elemento.

Pattern TAP

http://patterntap.com

¡Gracias!

Contacto 1 ernesto@estudioeximius.com

2

3

@mr_olmedo

estudioeximius.com/blog