.
.
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
Comentarios de: Diseño de Sitios y Aplicaciones (0)
No hay comentarios