Como reza el viejo dicho: "los hijos de uno nunca son feos" , y mucha gente lo aplica a todas sus creaciones - incluso cuando desarrolla - y no toma en cuenta a nuestro principal involucrado: el usuario final. En esta webinar analizaremos - de manera introductora - nuestros "hijos" desde un punto de vista funcional para saber que tan interactivos, inteligentes y usables pueden llegar a ser; y a mejorarlos en base a ciertos principios, herramientas y metricas usadas para crear un impacto mas intuitivo y transparente.

1. Diseño Interactivo
Dandole vida a nuestras aplicaciones
@ricdex

3. ¿Que entendemos por
interacción?

5. • Causa - Efecto

6. • Causa - Efecto
• Comunicación bidireccional.

7. • Causa - Efecto
• Comunicación bidireccional.
• Evento - respuesta

9. ¿Que entendemos por
diseño interactivo?

10. Emergente disciplina que explora, analiza y mejora el
comportamiento del usuario frente a un
ente externo, y que tiene como bases la
experiencia humana, la
ciencia y la creatividad.

11. El fin del DI
es mejorar la experiencia del usuario (UX)
palabras muy usadas con el auge de la denominada
Web2.0 y la creación de aplicaciones ricas en internet
(RIA)

12. Forma Contenido
Arquitectura información
Diseñadores gráficos
Animaciones y/o vídeos
Artistas Archivos
Eventos
Diseñadores
de interacción

13. ¡Esto es lo mas
importante!
Jefe de marketing
Diseñador de “Wilson”
Forma Contenido
Arquitectura información
Diseñadores gráficos
Animaciones y/o vídeos
Artistas Archivos
Eventos
Diseñadores
de interacción

14. ¡Esto es lo mas
¡No no! ¡El contenido es
importante!
el rey en una pagina!
Jefe de marketing
Diseñador de “Wilson” Periodista con mucho cafe encima
Blogero y tuitero de masas
Forma Contenido
Arquitectura información
Diseñadores gráficos
Animaciones y/o vídeos
Artistas Archivos
Eventos
Diseñadores
de interacción

15. ¡Esto es lo mas
¡No no! ¡El contenido es
importante!
el rey en una pagina!
Jefe de marketing
Diseñador de “Wilson” Periodista con mucho cafe encima
Blogero y tuitero de masas
Forma Contenido
Arquitectura información
Diseñadores gráficos
Animaciones y/o vídeos
Artistas Archivos
Eventos ¡What! ¡Que hablan! Esa
Diseñadores pagina no sirve sin
de interacción animaciones a lo 2.0
Programador fanatico de jquery
Un flashero frustrado

17. USER EXPERIENCE (UX)
no es solo gráficos, no es solo contenido ni es solo
interacción.
es la suma de todo eso + la visión del negocio

19. Para el éxito de algún producto es
necesario tener roles y tareas especificas
en un equipo a lo largo del proceso de
desarrollo.

26. Desarrollo “orientado al usuario”

27. * del libro
About Face 3
Desarrollo “orientado al usuario”

28. Para el equipo una aplicación tiene que ceñirse a las
buenas practicas y a la optimizacion de tareas.
Para el cliente, una aplicación tiene que ceñirse al
sentido común y a la facilidad de uso.

29. Para el equipo una aplicación tiene que ceñirse a las
buenas practicas y a la optimizacion de tareas.
Para el cliente, una aplicación tiene que ceñirse al
sentido común y a la facilidad de uso.

30. Para el equipo una aplicación tiene que ceñirse a las
buenas practicas y a la optimizacion de tareas.
Feedback
Para el cliente, una aplicación tiene que ceñirse al
sentido común y a la facilidad de uso.

31. Para el equipo una aplicación tiene que ceñirse a las
buenas practicas y a la optimizacion de tareas.
Feedback
Para el cliente, una aplicación tiene que ceñirse al
sentido común y a la facilidad de uso.

32. Para el equipo una aplicación tiene que ceñirse a las
buenas practicas y a la optimizacion de tareas.
Feedback Test
Para el cliente, una aplicación tiene que ceñirse al
sentido común y a la facilidad de uso.

34. Pero.. ¿que es sentido
común?

36. simplemente.. ser
humano un paradigma*

37. simplemente.. ser
humano un paradigma*

38. simplemente.. ser
humano un paradigma*

39. simplemente.. ser
humano un paradigma*
* representación
de la realidad de un contexto dado

41. Mas obvio Requiere pensar
Hmmmm Hmmmm. Puede ser trabajos.
Trabajos!!
[milisegundos pensando] Pero suena mas que eso.
Click
Trabajos!!
Click ¿Debo hacer click o seguir
mirandolo?
Trabajos Oportunidades
Emple-o-rama
de empleo

42. El sentido común es indirectamente proporcional
al tiempo tomado para realizar una acción.
Mas obvio Requiere pensar
Hmmmm Hmmmm. Puede ser trabajos.
Trabajos!!
[milisegundos pensando] Pero suena mas que eso.
Click
Trabajos!!
Click ¿Debo hacer click o seguir
mirandolo?
Trabajos Oportunidades
Emple-o-rama
de empleo

43. El sentido común es indirectamente proporcional
al tiempo tomado para realizar una acción.
Mas obvio Requiere pensar
Hmmmm Hmmmm. Puede ser trabajos.
Trabajos!!
[milisegundos pensando] Pero suena mas que eso.
Click
Trabajos!!
Click ¿Debo hacer click o seguir
mirandolo?
Trabajos Oportunidades
Emple-o-rama
de empleo
* del libro “Dont make me think”

45. No hay que diseñar y programar para nosotros;
hay que diseñar y programar para el pequeño ogro
insípido sin sentimientos y amargo
que existe en el corazón de cada usuario.*

46. No hay que diseñar y programar para nosotros;
hay que diseñar y programar para el pequeño ogro
insípido sin sentimientos y amargo
que existe en el corazón de cada usuario.*
* dedicado a todos aquellos pobres programadores que
nunca se ganaron el cariño del pueblo.

48. y bueno... ¿como hago para
mejorar mis skills de usabilidad
y de diseño interactivo?

49. aplicando patrones de diseño usados
desde tiempos inmemoriales

51. • 80/20
• Percepción de lo estético.
• Efecto de cercanía
• Color
• Confirmación (mensajes de alerta)
• La regla de Fibonacci
• Y mas (cerca de 100+).

52. • 80/20
• Percepción de lo estético.
• Efecto de cercanía
• Color
• Confirmación (mensajes de alerta)
• La regla de Fibonacci
• Y mas (cerca de 100+).
* Universal Principles of Design (2003)

53. • 80/20
• Percepción de lo estético.
• Efecto de cercanía
• Color
• Confirmación (mensajes de alerta)
• La regla de Fibonacci
• Y mas (cerca de 100+).
* Universal Principles of Design (2003)

55. 80/20

56. 80/20
El 20% de la funcionalidad es
usada el 80% del tiempo.

61. Percepción de lo
estético

62. Percepción de lo
estético
Diseños altamente estéticos son percibidos como
mas fáciles de usar y mas tolerante a errores que
diseños pobremente estéticos

65. Efecto de cercanía

66. Efecto de cercanía
Tendencia a identificar un grupo de ítems como una
sola unidad en vez de múltiples ítems independientes

68. Algo mas sobre RIA

69. Rich Internet
Applications (RIA)

70. Rich Internet
Applications (RIA)
Poder y rendimiento de
una aplicación de escritorio

71. Rich Internet
Applications (RIA)
Poder y rendimiento de
una aplicación de escritorio
iMac/3g

72. Rich Internet
Applications (RIA)
Poder y rendimiento de
una aplicación de escritorio
iMac/3g
drag&drop, explorador de archivos,
uso de camara y microfono, alertas

73. Rich Internet
Applications (RIA)
Poder y rendimiento de
una aplicación de escritorio +
iMac/3g
drag&drop, explorador de archivos,
uso de camara y microfono, alertas

74. Rich Internet
Applications (RIA)
Poder y rendimiento de
una aplicación de escritorio + características comunes
de una aplicación web
iMac/3g
drag&drop, explorador de archivos,
uso de camara y microfono, alertas

75. Rich Internet
Applications (RIA)
Poder y rendimiento de
una aplicación de escritorio + características comunes
de una aplicación web
Web Page Title
http://domain.com Google
iMac/3g
drag&drop, explorador de archivos,
uso de camara y microfono, alertas

76. Rich Internet
Applications (RIA)
Poder y rendimiento de
una aplicación de escritorio + características comunes
de una aplicación web
Web Page Title
http://domain.com Google
This is the Title of the Video
One morning, when Gregor Samsa
woke from troubled dreams, he
found himself transformed... More...
16:9 URL
Embed
0:00 / 4:59
iMac/3g
drag&drop, explorador de archivos,
uso de camara y microfono, alertas

77. Rich Internet
Applications (RIA)
Poder y rendimiento de
una aplicación de escritorio + características comunes
de una aplicación web
Web Page Title
http://domain.com Google
This is the Title of the Video
One morning, when Gregor Samsa
woke from troubled dreams, he
found himself transformed... More...
16:9 URL
Embed
0:00 / 4:59
Tab Tab Tab Tab
iMac/3g
drag&drop, explorador de archivos,
uso de camara y microfono, alertas

78. Rich Internet
Applications (RIA)
Poder y rendimiento de
una aplicación de escritorio + características comunes
de una aplicación web
Web Page Title
http://domain.com Google
This is the Title of the Video
One morning, when Gregor Samsa
woke from troubled dreams, he
found himself transformed... More...
16:9 URL
Embed
0:00 / 4:59
Tab Tab Tab Tab
iMac/3g
drag&drop, explorador de archivos, hyperlinks, navegacion, tags, popups,
uso de camara y microfono, alertas CSS, back button

80. Los 4 capas de una
aplicación interactiva
en la web

82. • Estructura o esqueleto de la aplicación.

83. • Estructura o esqueleto de la aplicación.
• Screen layouts.

84. • Estructura o esqueleto de la aplicación.
• Screen layouts.
• Controles UI.

85. • Estructura o esqueleto de la aplicación.
• Screen layouts.
• Controles UI.
• Interacciones.

86. • Estructura o esqueleto de la aplicación.
• Screen layouts.
• Controles UI.
• Interacciones.
*Todas estas capas se pueden realizar con
un buen diseño y uso de las herramientas apropiadas

88. Estructura de la
aplicación

89. Estructura de la
aplicación

91. Screen layouts

92. Screen layouts

93. Screen layouts

94. Screen layouts

95. Screen layouts

97. Controles UI

98. Controles UI

100. Interacciones

101. Interacciones

102. Interacciones
1. Hacerlo directo
2. Mantenlo simple
3. Quedate en la pagina
4. Provee una invitación
5. Usa transiciones
6. Reacciona
inmediatamente

104. Herramientas

105. Herramientas
cuales y cuando deberían usarse

107. • Prototipado : Omnigraffle,Visio

108. • Prototipado : Omnigraffle,Visio
• Frontend HTML & Flash: JQuery, Flex

109. • Prototipado : Omnigraffle,Visio
• Frontend HTML & Flash: JQuery, Flex
• Diseño: Photoshop, Illustrator, Gimp.

110. • Prototipado : Omnigraffle,Visio
• Frontend HTML & Flash: JQuery, Flex
• Diseño: Photoshop, Illustrator, Gimp.
• User Feedback: Bounce, Notable

111. • Prototipado : Omnigraffle,Visio
• Frontend HTML & Flash: JQuery, Flex
• Diseño: Photoshop, Illustrator, Gimp.
• User Feedback: Bounce, Notable

112. Prototipado
Omingraffle

113. Prototipado
Omingraffle
•Solo para Mac

114. Prototipado
Omingraffle
•Solo para Mac
•Uso de plantillas.

115. Prototipado
Omingraffle
•Solo para Mac
•Uso de plantillas.
•Exportar a múltiples formatos de
imágenes

116. RUAG S.R.L Inicio Quienes somos Proyectos Contactenos
Logo y descripcion
Quienes somos 1
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the
Semantics, a large language ocean.
A small river named Duden flows by their place and supplies it with the necessary
regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your
mouth.
2
Even the all-powerful Pointing has no control about the blind texts it is an almost
unorthographic life One day however a small line of blind text by the name of Lorem
Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to
do so, because there were thousands of bad Commas.
Servicio 1 Servicio 2 Servicio 3
Far far away, behind the word Far far away, behind the word Far far away, behind the word
mountains, far from the countries mountains, far from the countries mountains, far from the countries
Vokalia and Consonantia, there live Vokalia and Consonantia, there live Vokalia and Consonantia, there live
the blind texts. the blind texts. the blind texts.
Mas del servicio 1 Mas del servicio 2 Mas del servicio 3
3
RUAG S.R.L Telefax : (051) 446–0515
Mail : ruagsrl@ruag.pe
Paseo de la Republica Nº4956 Celular: (051) 99830-3028
Miraflores – Lima18 Perú Nextel : 830*3028

117. HTML & JS
JQuery

118. HTML & JS
JQuery
•Orientado a Eventos (callback).

119. HTML & JS
JQuery
•Orientado a Eventos (callback).
•Manejo del DOM (Document Object
Model).

120. HTML & JS
JQuery
•Orientado a Eventos (callback).
•Manejo del DOM (Document Object
Model).
•Uso de plugins (basados
especialmente en la función selector).

121. HTML & JS
JQuery
•Orientado a Eventos (callback).
•Manejo del DOM (Document Object
Model).
•Uso de plugins (basados
especialmente en la función selector).
•No modularizable.

122. <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link href="style.css" TYPE="text/css"
MEDIA=screen>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
// tu elegante codigo aqui
});
</script>
</head>
<body>
//la estructura DOM
</body>
</html>

123. Selector Resultado
Selecciona los <div>
$("body > div")
hijos de <body>
Selecciona links hacia
$("a[href$= 'pdf ']")
pdfs
Selecciona <div> que
$("body > div:has(a)")
contengan links

124. Flash
Adobe Flex & Air

125. Flash
Adobe Flex & Air
•Base en el motor de flash.

126. Flash
Adobe Flex & Air
•Base en el motor de flash.
•Lenguaje similar a html & js.

127. Flash
Adobe Flex & Air
•Base en el motor de flash.
•Lenguaje similar a html & js.
•Recibe conexiones http, servicios web
y metodos remotos.

128. Flash
Adobe Flex & Air
•Base en el motor de flash.
•Lenguaje similar a html & js.
•Recibe conexiones http, servicios web
y metodos remotos.
•Modularizable.

131. DASHBOARD

132. DASHBOARD

133. DASHBOARD MOBILES

134. DASHBOARD MOBILES

135. DASHBOARD MOBILES
DESKTOP

136. DASHBOARD MOBILES
DESKTOP

137. DASHBOARD MOBILES
MULTITOUCH
DESKTOP

139. Recomendaciones
al usar Flex

140. Recomendaciones
al usar Flex
• Evitar realizar procesamiento demasiado
cargado (logica). Dejar todo eso al servidor.

141. Recomendaciones
al usar Flex
• Evitar realizar procesamiento demasiado
cargado (logica). Dejar todo eso al servidor.
• Evitar el uso desmedido de renderers en
los componentes del tipo lista.

142. Recomendaciones
al usar Flex
• Evitar realizar procesamiento demasiado
cargado (logica). Dejar todo eso al servidor.
• Evitar el uso desmedido de renderers en
los componentes del tipo lista.
• Modularizar modularizar modularizar!!

143. Recomendaciones
al usar Flex
• Evitar realizar procesamiento demasiado
cargado (logica). Dejar todo eso al servidor.
• Evitar el uso desmedido de renderers en
los componentes del tipo lista.
• Modularizar modularizar modularizar!!
• Evitar la creación de formularios extensos
(no es una pagina html).

144. Recomendaciones
al usar Flex
• Evitar realizar procesamiento demasiado
cargado (logica). Dejar todo eso al servidor.
• Evitar el uso desmedido de renderers en
los componentes del tipo lista.
• Modularizar modularizar modularizar!!
• Evitar la creación de formularios extensos
(no es una pagina html).
• Usar Maven o Ant.

145. User Feeback
Bounce
http://www.bounceapp.com/

146. User Feeback
Bounce
http://www.bounceapp.com/
•Facil y practico de usar (notas
flotantes sobre el screenshot).

147. User Feeback
Bounce
http://www.bounceapp.com/
•Facil y practico de usar (notas
flotantes sobre el screenshot).
•Incluye “memory test”.

148. User Feeback
Bounce
http://www.bounceapp.com/
•Facil y practico de usar (notas
flotantes sobre el screenshot).
•Incluye “memory test”.
•Compartido con varios usuarios.

149. User Feeback
Bounce
http://www.bounceapp.com/
•Facil y practico de usar (notas
flotantes sobre el screenshot).
•Incluye “memory test”.
•Compartido con varios usuarios.
•No privado. (para ello existe la
versión de pago : “Notable”)

152. ¿Cual es la tendencia de la
tecnologia para RIAs?

153. ¿Cual es la tendencia de la
tecnologia para RIAs?
• Separacion total Frontend-Backend (uso de
APIs, RESTful, Node.js)

154. ¿Cual es la tendencia de la
tecnologia para RIAs?
• Separacion total Frontend-Backend (uso de
APIs, RESTful, Node.js)
• Consumir mas recurso del cliente en vez
que del servidor (aplicaciones corriendo en
cliente).

155. ¿Cual es la tendencia de la
tecnologia para RIAs?
• Separacion total Frontend-Backend (uso de
APIs, RESTful, Node.js)
• Consumir mas recurso del cliente en vez
que del servidor (aplicaciones corriendo en
cliente).
• Un nuevo puesto: UX Designer =
Diseñador + programador.

156. ¿Cual es la tendencia de la
tecnologia para RIAs?
• Separacion total Frontend-Backend (uso de
APIs, RESTful, Node.js)
• Consumir mas recurso del cliente en vez
que del servidor (aplicaciones corriendo en
cliente).
• Un nuevo puesto: UX Designer =
Diseñador + programador.
• HTML5! (mas html y mas js)

157. http://www.w3.org/html/logo/

160. • Aplicaciones offline (similar a gears)
• Tiempo real (websockets)
• Multimedia (<video>)
• Efectos 3d
• Mobiles
• Rendimiento
• Semantica
• CSS3

161. Libros
• Universal Principles of Design (2003)
• Dont make me think (2006)
• Designing web interfaces (2009)
• Measuring the user experience (2008)
• About face 3 (2007)

164. GRACIAS!

165. GRACIAS!