Conferencia "La importancia del diseño como factor diferenciador de nuestras aplicaciones móviles", impartida en el Centro Cultural de España en El Salvador con el objetivo de impulsar a emprendedores IT a cuidar del Diseño como un factor de valor agregado que incremente el potencial de venta de sus productos de software.

1. Como factor diferenciador de nuestras
aplicaciones móviles
LA IMPORTANCIA
DEL DISEÑO

3. CEO
ESTUDIO EXIMIUS
ERNESTO OLMEDO

4. Emprendedor, diseñador, desarrollador,
consultor, especializado en plataformas
corporativas móviles.
ERNESTO OLMEDO
Quién
@mr_olmedo
www.estudioeximius.com/blog

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

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

12. Punto 1
.La importancia
del diseño

13. El Caso
Carlos Koji John
Considera comprar a estos emprendedores
una solución móvil para tu negocio:

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

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

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

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

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

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

20. Innovación
Comunicar ROI
Eficiencia
Precio justo
Calidad

21. Frase
Design is not just what it looks
like and feels like.
Design is how it works.
-STEVE JOBS (APPLE)

22. Punto 2
.¿Qué es buen
diseño?

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

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

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

26. Apple, stop this madness.

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

28. Un buen diseño es…

30. Punto 3
.Fundamentos de
diseño UI/UX

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

32. 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!

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

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

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

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

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

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

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

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

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

42. Punto 4
.Proceso de
Diseño

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

44. Paso 1
• Decide los objetivos del producto.
• Determina las necesidades de tus usuarios.
• Entrevista a tus usuarios.
Análisis de requisitos
Objetivo
Tiempo Entorno

45. • 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

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

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

48. • 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

49. • 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

50. • 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

51. Punto 5
.Herramientas
y Recursos

52. Mockups
• Gratuito
• Fácil de usar
• Varios diseñadores pueden trabajar en un
documento al mismo tiempo
Cacoo.com
http://cacoo.com

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

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

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

56. ¡Gracias!
Contacto
1 ernesto@estudioeximius.com
2
3
@mr_olmedo
estudioeximius.com/blog