PDF de programación - Diseño de Sitios y Aplicaciones

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

e-business:

Un enfoque de Negocios

Diseño de Sitios y Aplicaciones

Daniel Mordecki
[email protected]
http://www.mordecki.com

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Diseño de Sitios Usables

Daniel Mordecki
[email protected]
http://www.mordecki.com

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Yahoo! Un diseño "contra sensus"

No tiene "animaciones"
No cambia, es siempre igual
Casi no tiene gráficos
No es "interactivo"

¿Conoce algún libro o manual sobre diseño en
¿Conoce algún libro o manual sobre diseño en
Internet cuyas recomendaciones conduzcan a
Internet cuyas recomendaciones conduzcan a

un diseño como el de Yahoo! ?
un diseño como el de Yahoo! ?

Y si fuera poco, Google amenaza el poderío de Yahoo!

con un diseño aún más franciscano

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Fricción Cognositiva

Comportamiento sencillo,
intuitivo

Relacion causa-efecto lineal

Vinculación a las fuerzas
físicas

Equipamiento sin Software

Comportamiento complejo, no
intuitivo
Relación causa-efecto compleja,
dependiente del contexto
Vinculación a variables de estado,
configuracion y parámetros

Equipamiento con software

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

El software hoy lo invade todo

Resultado:

La mayoría de
La mayoría de
las funciones
las funciones

del del

equipamiento
equipamiento

no se usa
no se usa

¡¡¡La fricción cognositiva también!!!

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

El mito de las funciones (features)

Cuantas más
funciones, mejor es el
producto
La funciones son
siempre buenas, por
tanto más es mejor
Diseñar es describir
las funciones
Los usuarios adoran
las funciones

Cuantas más
funciones, más
complejidad

Hay funciones buenas
y malas, hay que elegir
las adecuadas
Describir las funciones
no alcanza para
diseñar
Los usuarios adoran
unas pocas funciones,
ignoran la mayoría y
sufren el resto

La realidad del software (y de los sitios
Web) hoy en día.
El software se olvida de nosotros
El software es avaro en información útil
El software es inflexible
El software es irresponsable y culpa al usuario

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

El software es odioso y humillante

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Los programadores son malos para
diseñar

Tiene foco en las situaciones de borde y no en
el uso habitual
Diseña para sí mismo
Adora los features
Siente placer en resolver lo complejo
No entiende al usuario (a veces ni lo conoce)
Si diseña y programa, concentra todo el poder
Se siente comodo frente a la

fricción cognositiva

¡¡¡Pero se los obliga
sistemáticamente!!!

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Tipos de Diseño

Diseño Gráfico
Diseño Artístico
Diseño Arquitectónico
Diseño Industrial
Diseño Publicitario

El Diseño Informático no coincide con
ninguno de ellos. Puede tomar ideas o
técnicas de algunos, pero es en sí una

disciplina nueva

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Definición de diseño informático

El diseño informático es el proceso
de análisis y creación tanto de la
interacción de los sistemas de

computación con los seres humanos
que los usan, como de la experiencia

de éstos al utilizarlos.

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Relación diseño/programación/interfase
Principio

Intermedio

Final

Diseño de la
Interacción

Análisis y

Programación

Decoración
de la Interfase

El orden determina la calidad del resultado y los costos,
como en la arquitectura

Diseño

Arquitectónico

Construcción

Decoración
de Interiores

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Objetivos del diseño

Definir el producto final
Minimizar y acotar los costos
Poner foco en el usuario
Sacar la presión que el
diseño implica para el equipo
de programación
Hacer creíbles y "cumplibles"
los cronogramas

El diseño es efectivo y
El diseño es efectivo y

rentable
rentable

Lo que solicitó el
usuario

Lo que entendió el
lider de proyecto

El diseño del
analista de sistemas

El enfoque del
programador

La recomendación
del consultor
externo

La documentación
del proyecto

La implantación en
producción

El presupuesto del
proyecto

El soporte operativo

Lo que el usuario
realmente
necesitaba

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Definir el producto final

Indicar con exactitud todos los atributos del
producto, no solo la funcionalidad
Definir de forma acabada la interacción del
usuario con el producto
Inidcar la importancia relativa de cada atributo
frente a los otros y frente al conjunto
Generar un cronograma real de la situación
actual al producto terminado.

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Definir el producto con un StoryBoard
En vez de una lista de features, describir el
comportamiento a través de imagenes que
muestran la evolución del usuario a lo largo
de las pantallas, complementado con
documentación descriptiva

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Ventajas y Desventajas del StoryBoard

Desventajas
Está más asociado a
la navegación lineal
que al hipertexto
No da una idea de
comportamiento
interactivo

Ventajas
Puede describir
funcionalidad,
interacción y
presentación
simultaneamente
Es muy económico
No necesita
programación
Genera una
descripción completa

Esqueleto estático del sitio
Se trata de utilizar HTML estático para
describir completamente el funcionamiento
de un sitio

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Se pueden indicar los

datos dinámicos

Anotaciones y

comentarios pueden
estar incorporados

Simular el

comportamiento de los

botones

Indicar el ambiente de
navegación y menúes

Se puede incluir parte o todo el diseño artístico de la Interfase

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Ventajas y desventajas del esqueléto estático

Está focalizado en
sitios Web
Requiere
conocimientos de
creación de HTML

Se desarrolla muy
rápido
Da una idea clara de
la interacción
Es más afín a la
idiosincracia de los
programadores
Aporta más exactitud
en la definición
Permite hacer
pruebas de
performance

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Minimizar y acotar los costos

Si no hay diseño de la interacción, no hay
producto final. Es como construír una casa sin
planos.

Es más barato invertir el 5%
Es más barato invertir el 5%
del costo total en diseño, que
del costo total en diseño, que

empantanarse habiendo
empantanarse habiendo
consumido el 130% del
consumido el 130% del
presupuesto y el 200% del
presupuesto y el 200% del

tiempo.
tiempo.

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Poner foco en el usuario

El usuario es el eslabón más débil de la cadena
Si diseño de la interacción se obliga a los
programadores a diseñar
Alta probabilidad de diseño autorreferenciado

Usuario multiuso,
multijustificación
La propia palabra usuario
es un problema: no alcanza
para describir a quien usa el
sistema

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Sacar la presión que el diseño implica
para el equipo de programación

Los diseñadores deben diseñar, y los
programadores programar
Para un programador: "usuario", "user", "cliente" y
"client" son sinónimos.
Sin diseño, el desarrollo se vuelve una
negociación permanente sobre features y plazos
"elásticos"
Los objetivos de la programación son en gran
parte opuestos a los objetivos del diseño
Los programadores tienen fuerte tendencia al
diseño autorreferenciado

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Hacer creíbles y "cumplibles" los
cronogramas
Sin diseño, la descripción del producto final se
reduce a una lista de features. El Análisis
Informático es una descripción técnica, no de
Diseño de la Interacción
Sin diseño, el resultado final jamás coincide con
las expectativas, porque todos tienen expectativas
distintas.
Sin diseño, el proyecto nunca termina, porque el
fin no es posible decir: "llegamos al final"
Sin diseño, se negocian innumerables cambios y
modificaciones.
Sin diseño, los programadores imponen su poder
al negociar los innumerables cambios y
modificacones

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Diseño de la interacción

Personajes - Objetivos - Escenarios

Daniel Mordecki
[email protected]
http://www.mordecki.com

.
.

m
m
s
s
o
o
c
c
s
s
.
.
i
i
k
k
c
c
e
e
e
e
d
d
r
r
n
n
o
o
m
m
i
i
w
w
s
s
w
w
w
w
u
u
b
b
-
-
e
e

Paso 1 - Definir los Personajes

Francisco Tejera: Auxiliar
contable, 32 años.
Odia la computadora, pero
es experto en Memory y
Excel. Todavía usa
WordStar para las pocas
notas y cartas que escribe.
Utiliza el correo electrónico
un par de veces a la
semana.
Le gusta la