El documento describe tres puntos de vista en el diseño de interfaces de usuario: el usuario, el programador y el diseñador. Explica que el diseñador debe equilibrar las necesidades del usuario y los recursos del programador. También destaca que la calidad de la interfaz determina el éxito o fracaso de un producto y que un diseño bien hecho proporciona comodidad al usuario.

1. fac eS
In ter
David Ramos Valcárcel david@uvigo.es

2. Diseño
Grafico
de
Interfaces
de
Usuario
Tres
puntos
de
vista:
§ Usuario:
visión
personal
del
sistema,
diferente
y
compleja
de
gestionar
§ Programador:
necesidad
de
encajar
“piezas”
§ Diseñador:
mezcla
necesidades
à
Deseos
del
usuario
&
Recursos
del
programador
Intermediario
entre
usuario
y
programador

3. Diseño
Grafico
de
Interfaces
de
Usuario
usuario
se
siente
responsable!!!
Se
diseña
para
los
capacidad
de
seducir
usuarios
al
usuario
UI
mal
diseñada
Calidad
de
UI
bien
interfaz
à
éxito
diseñada:
no
se
o
fracaso
encuentra
información
comodidad
usuario
en
la
compleja
en
incómoda
encuentra
navegación
el
uso
a
la
vista
lo
que
busca

4. El
diseñador
se
encarga
de
§ Presentación:
captar
la
atención
inicial
del
usuario
prevalece
la
interacción
(facilidad
de
uso)
del
producto
abuso
de
presentación
(colores,
tipografías)
contraproducente
§ Interacción:
necesidad
de
conocer
dispositivos
y
características
enorme
diferencia
entre
dispositivos
(PC,
tablet,
móviles…)
§ Metáfora:
que
significa
cada
elemento
y
sus
implicaciones
ejemplo:
escritorios,
agendas…

5. Modelo
del
diseñador
:
look-­‐and-­‐fell
–
IBM
1992
El porcentaje es
acorde a la
realidad del
mercado???

6.
in cip ios
pr

7. Principios
para
el
diseño
de
UI
Anticipación:
a
las
necesidades
del
usuario
cómo
va
a
buscar
la
información
cómo
invoca
las
funciones
Estructurar la información
cómo
interactúa
con
el
sistema
Percepción
del
color:
el
color
comunica
cuidado
con
el
abuso
problemas
con
el
contraste
Pruebas preliminares
diferencias
entre
monitores
y
dispositivos
máximo
3
a
5
colores
+
5
colores
à
distracción,
poco
profesional

8. Principios
para
el
diseño
de
UI
Valores
por
defecto
usar
convenciones
estándares
en
función
del
dispositivo
Distintas versiones
formularios,
ventanas,
ayudas…
Consistencia
gráfica
usuario
se
familiariza
rápidamente
interpretación
rápida
del
significado
de
los
elementos
inconsistencia
à
pérdida
de
referencias
visuales

9. Principios
para
el
diseño
de
UI
Productividad
del
usuario
delante
de
productividad
maquina
más
importante
facilidad
de
uso
que
“eficiencia
implementación”
usuario
desubicado
à
pérdida
de
tiempo
inestimable
Ley
de
Fitt
“modelo
del
movimiento
humano
que
predice
el
tiempo
necesario
para
moverse
rápidamente
desde
una
posición
inicial
hasta
una
zona
destino
final
como
una
función
de
la
distancia
hasta
el
objetivo
y
el
tamaño
de
éste”
elementos
grandes
para
funciones
importantes

10. Principios
para
el
diseño
de
UI
Interfaces
explorables
seguimiento
fácil
de
interfaz
breadcrumbs
à
migas
de
pan
Uso
de
metáforas
constituyen
figuras
mentales
fáciles
de
recordar
asociaciones
modelo
mental
a
concepto
visual

11. Colores
en
el
diseño
Es
un
elementos
subjetivo

13. Colores
en
el
diseño
Son
del
mismo
color
las
celdas
A
y
B?

14. Colores
en
el
diseño
Son
del
mismo
color
las
celdas
A
y
B?

15. Colores
en
el
diseño
Difícil
de
representar
§ En
papel,
según
tipo:
brillo,
mate,
mantel…
§ En
pantalla:
CRT,
Marcas,
Configuración
§ Luz
externa
Como
representas
el
color
fluorescente???

16. Colores
en
el
diseño
Modelos
de
color
§ RGB
(Red,
Green,
Blue)
0.0.0: Negro
255.255.255: Blanco
255.0.0: Rojo
0.255.0: Verde
0.0.255: Azul
§ CMYK
(Cyan,
Magenta,
Yellow,
Key)

17. Colores
en
el
diseño
RGB
&
CMYK
blue
red green

18. Colores
en
el
diseño
Logotipos
e
imagen
de
marca
como
referencia
Las
marcas
registran
colores
à
hacer
uso
de
RGB,
CMYK.
Elegir
el
color
adecuado
à
aumenta
el
reconocimiento
de
marca
Hacer
uso
del
significado
à
en
función
de
lo
que
se
desee
vender
Hacer
uso
de
combinaciones
adecuadas
1. Definir
la
gama
de
colores
2. Escoger
color
de
fondo
à
ante
la
duda
blanco
3. Seleccionar
colores
texto
à
contraste
con
fondo
4. Logotipo
y
títulos
debe
contrastar
con
el
resto
del
contenido

24. Uso
de
tipografías
conbinaciones
serif
y
sans
serif
para
obtener
contraste
textos largos: serif
textos
cortos,
títulos:
sans
serif
(más
margen
de
uso)
no
más
3
tipos
diferentes
Tendencia
a
tipografias
grandes

25. Legibilidad
no
es
una
opción,
es
una
NECESIDAD

26. Posibles
combinaciones
Helvetica
/
Garamond
Caslon
/
Univers
Frutiger
/
Minion
Futura
/
Bodoni
Garamond
/
Futura
Gill
Sans
/
Caslon
Minion
/
Gill
Sans
Univers
/
Caslon
Bodoni
/
Futura
Myriad
/
Minion
Avenir
/
Warnock
Caslon
/
Franklin
Gothic
FF
Din
/
Baskerville
Trade
Gothic
/
Clarendon
Baskerville
/
Univers
Akzidenz
Grotesk
/
Garamond
Clarendon
/
Trade
Gothic
Franklin
Gothic
/
Baskerville
Warnock
/
Univers

27. Formatos
gráficos
Vectoriales
SVG,
EPS,
PSD,
AI,
CDR,
FH11,
TIFF,
WMF,
PNG…
Mapas
de
bits
BMP,
JPG,
GIF,
PNG…
JPG
con
perdida
(60%):
22
KB
Sin
pérdida:
JPG:
133
KB
PNG:
162
KB
BMP:
549
KB

28. Formatos

29.
p roc eso

30. Proceso

31.
tas
rram ien
he

32. Wireframe
and
Mockup
Gliffy
Pidoco
ProtoShare
HotGloo

33. Wireframe
and
Mockup
ProtoShare
Tour
-­‐
http://www.protoshare.com/tour/
(video)

34. Diseño
gráfico

35.
vo luc ión
e

44. Evolución
diseño
web

50. Evolución
diseño
web
Donde
ha
quedado
flash
???

51. Evolución
diseño
web