Este documento presenta los conceptos fundamentales del diseño de interfaces de usuario. Introduce los paradigmas de interacción como el modelo de escritorio, la realidad virtual y la computación ubicua. Explica el diseño orientado a objetos y el uso de metáforas para establecer similitudes entre conceptos del sistema y objetos del mundo real. Finalmente, analiza principios de diseño como la claridad visual y la consistencia a través del formato y la organización de la información en la interfaz.

1. Tema 4:
Estrategias de Diseño
DISEÑO DE INTERFACES DE USUARIO
edición 2015
!
!
Miguel Gea (mgea@ugr.es)
Dpt. Lenguajes y Sistemas Informáticos
Grado en Ingeniería Informática
Universidad de Granada
http://utopolis.ugr.es/diu
http://www.slideshare.net/mgea/
10 nov, 2015

2. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
El personaje: Google
2
“Céntrate en el usuario y todo lo demás
llegará”
“..Google es la única empresa abocada a desarrollar el
motor de búsqueda perfecto, algo que comprende
exactamente lo que el usuario quiere decir y le entrega
exactamente lo que está buscando"
Con ese fin en mente, Google insiste en continuar
innovando y se niega a aceptar las limitaciones de los
modelos existentes.
Crearon la empresa Google en 1998.
http://www.google.com/corporate/tenthings.html
Larry Page,
Sergey Brin
(Google)

3. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Indice
Paradigmas de interacción
Diseño orientado a objetos
Metáforas
Capa de presentación
Diseño mediante estilos
Documentación
3

4. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Paradigmas de interacción
4
Modelos de los que se deriva el sistema de interacción
y establece las características de la comunicación
1 Modelo de escritorio.
2 Realidad Virtual: Sistema (generado por
ordenador) que produce una apariencia de realidad en
la que el usuario tiene la sensación de estar presente.
3 Realidad Aumentada: Sistema que define una
visión directa o indirecta de un entorno físico del
mundo real, cuyos elementos se combinan con
elementos virtuales para la creación de una realidad
mixta a tiempo real.
4 Computación Ubicua: integración de los sistemas
informáticos en el entorno de la persona, de forma
que los ordenadores no se perciban como objetos
diferenciados. [Rekimoto95] [Lores01]
realidad virtual
realidad
comp. ubicua
R: Realidad, C: Computador
!" Persona - Computador
!" Persona - Mundo real
!" Mundo real - Computador

5. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Paradigmas de interacción
5
Referencias: [Lores01]
realidad
virtual
realidad
aumentada

6. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Paradigmas de interacción
6
Milgram-Virtuality Continuum
[Milgram94]
[Azuma01]

7. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Interacción: Modelo conceptual
7
La interacción es una actividad cognitiva
• El usuario debe recordar una serie de órdenes
• Realizar unas acciones para conseguir una finalidad
• Conocimiento mediante aprendizaje
Modelo Mental (Modelo de Usuario)
• Aprendizaje
• Predecir
Modelo Conceptual
• Asimilable
• Consistente
• Simple
[Weinch11]

8. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño Orientado a Objetos
8
Modelo basado en:
• Objetos y Acciones
• Objetos intrínsecos y de Control
Referencias: http://www.cs.umd.edu/class/fall2002/cmsc838s/tichi/oai.html
OBJETO
Acción
Acción
INTRINSECOS CONTROL
LIBRO
Mod_ISBN
Mod_TÍTULO
REGLA
Ocultar
Poner_Escala

9. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño Orientado a Objetos
9
Acciones: Lenguaje de órdenes
• Acciones de grupo (insertar, ordenar, eliminar...)
• Seleccionar, Crear/Eliminar, Mover/Copiar, Modificar
Modos: estado que habilita un conjunto de tareas de
interacción al usuario
• Acción-Objeto
• Objeto-Acción
(puede ser como ventana modal)
Borrar
Mover
Rotar
El lenguaje modal debe suministrar información de estado

10. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Ejemplo: Things
10
Objetos: Registro, Papelera, Buzón, proyectos, tareas
Objetos control: Visualización, ventana
Acciones: Editar, Guardar, (ver)hoy, Nueva (new)..

11. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño de Metáforas
11
Propósito:
• Descripción del modelo conceptual
• Establecer similitud entre dos elementos distintos
(uno de ellos comprensible por el usuario)
Partes del modelo conceptual
MODELO DEL SISTEMA
MODELO DE TAREAS
METÁFORAS

12. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño de Metáforas
12
Diseño
• Identificación tareas usuario
• Generación de la metáfora
• Evaluación de la metáfora
• expresividad
• representatividad
• adaptabilidad a usuarios
• extensibilidad

13. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño de Metáforas
13
Procesador Textos
Selección de metáforas para tipo de aplicaciones
Máquina escribir ¿?
Sistema Operativo Escritorio
Bases de Datos Tablas de Datos
Web (HTML) Navegación
Maquetación/Imprenta Corta y pegar objetos
Aplicación Metáfora
Blog Bitácora

14. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño de Metáforas: ejemplos
14
Escritorio:
Papelera
Ventana (contenedor)
Carpetas (almacén)
Discos
(dispositivos)
Apariencia visual de las metáforas

15. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño de Metáforas: ejemplos
15
Botones y Acciones:

16. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño de Metáforas: ejemplos acciones
16
Concepto
(acción):
Metáfora
(objeto real que lo realiza)
Cortar Recortar
Borrar
Borrar
Nuevo
Pág en blanco

17. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño de Metáforas: ejemplos acciones
17
Concepto
(acción):
Metáfora
(objeto real que lo realiza)
Adelante/
Atrás
Rebobinar/Adelantar
Compartir Dar/ofrecer

18. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño de Metáforas: ejemplos acciones
18
Concepto
(acción):
Metáfora
(objeto real que lo realiza)
Ampliar
Reducir
Lupa + -
Buscar Lupa/ Prismáticos

19. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño de Metáforas: ejemplos objetos
19
Concepto
(objeto):
Metáfora
(objeto)
Elementos
borrados
Papelera
(contenedor)
Dispositivo
almacenamiento
Buscar
comportamiento
similar
Disquete

20. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Metáforas y affordances
20
Diálogo con pestañas:
- Intuitivo (y fácil de usar)
Version 1 Version 2
Referencia:Joel Spolsky.Affordances and Metaphors. http://www.joelonsoftware.com/uibook/chapters/fog0000000060.html

21. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Metáforas y affordances
21
Diálogo con pestañas:
- Con sobrecarga de opciones pierde su eficacia
Referencia: http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm

22. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Metáforas y affordances
22
Diálogo con pestañas:
- Ambito de las acciones (confusion)
Referencia: http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm

23. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Metáforas y affordances
23
Vista en álbum (cover flow):
- Ver imagen del álbum que contiene “música”
Version 2

24. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 24
!
!
Diseño para dispositivos: layout

25. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 25
Mobile Device Screen Sizes Resource Guide
Diseño para dispositivos: layout

26. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Importancia:
- Percepción del usuario
- Gestión de recursos
- Representación de objetos
Layout
26
simbología, codificación
tamaño de pantalla, uso del ratón
impresión general del sistema
Objetivo:
- Organizar la información de E/S y su apariencia
[Tidwell06]

27. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Composición:
• Diseño del formato de pantalla
• Representación de la información
• Realimentación
• Comunicación (mensajes)
Layout
27
! " I

28. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Características
- jerarquía visual (Densidad, tamaño, color, posición,
regularidad)
- Flujo visual (continuidad de la narración)
Layout - diseño de páginas
28
[Tidwell06]

29. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Layout. Principios de claridad visual
29
Aspectos de diseño:
• Claridad Visual (agrupación y alineación)
# Enfatizar la organización lógica de la información
(Reglas de Gestalt)
• Codigos visuales
# Distinción visual entre elementos de distinta naturaleza
• Consistencia visual
# Organización de los elementos de distinta naturaleza
• Formato de pantalla
# Gestión y organización del espacio disponible
Similitud
Proximidad
Clausura
Continuidad

30. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Principios de Gestalt
30
http://webdesign.tutsplus.com/es/articles/the-gestalt-principle-design-theory-for-web-designers--webdesign-1756

31. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Layout: claridad visual
31
Principios de Gestalt:
- Análisis de cómo organiza el observador los estímulos visuales
➫ Clausura
➫ Continuidad
➫ Similitud
# Objetos similares se perciben como un único estímulo
# Percepción del área/forma (cierre) que engloba a los objetos
# Discriminación de objetos diferentes según continuidad natural
➫ Proximidad
# Objetos próximos se perciben como un único estímulo

32. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Layout.: claridad visual
32
[Tidwell06, Capt4]

33. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Layout: claridad visual
33
BOTONES: Agrupación Visual y similitud

34. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Layout: Formato y Consistencia visual
34
➫ Simetría
Conocido desde la antigüedad como una propiedad de los objetos en relación al
Universo
➫ Balanceado
➫ Regularidad
y acentuación
➫ Agrupamiento y
alineamiento

35. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Layout: Formato y Consistencia visual
35
➫ Simetría➫ Balanceado
➫ Regularidad
y acentuación
➫ Agrupamiento y
alineamiento

36. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Layout: Formato y Consistencia visual
36
Ubicación desestructurada
[Galitz02]

37. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 37
Ubicación estructurada (alineación)
Layout: Formato y Consistencia visual
[Galitz02]

38. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 38
[Galitz02]
Layout: Formato y Consistencia visual

39. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 39
Uso de controladores geométricos (layout manager)
Métrica Diseño :
- Densidad general/local
- Agrupaciones
- Volumen información
[Galitz02]
Layout: Formato y Consistencia visual

40. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 40
Proporción: Relación entre elementos
1:1 1:2
a
b
= =
b
a+b
1.618...
La sección Áurea
Layout: Formato y Consistencia visual

41. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 41
(-) Alineación
(-) Claridad visual: agrupar para reducir complejidad
(-) Enfatizar etiquetas de campos de edición
Ejemplos:
Layout: Formato y Consistencia visual

42. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 42
(+) Formato 1:1
(+) Agrupación
(+) Simetría
Ejemplos:
Layout: Formato y Consistencia visual

43. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 43
(+) Agrupación
(+) Balanceado
(+) Continuidad
Ejemplos:
Layout: Formato y Consistencia visual

44. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 44
2
Ejemplos: Tamaños de despliegue
(-) Tamaño submenú
frente a tamaño de
pantalla (Windows
XP)
Layout: Formato y Consistencia visual

45. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: códigos visuales
45
Diseño de la Información:
Preparación de la información para mostrarla de
forma comprensible, y que pueda ser utilizada por
los humanos de forma eficiente y efectiva,
utilizando los medios más naturales para su
adquisición.
Técnicas:
- Comunicación visual
- Representación espacial de conceptos
- Simbología y codificación

46. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: códigos visuales
46
El lenguaje icónico
Representación gráfica de un concepto
Importancia:
- Rápido Reconocimiento
- Internacionalización
- Espacio
$ % & ' ( ) *

47. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: códigos visuales
47
El lenguaje icónico: Propiedades
- Reconocimiento
- Recuerdo
- Discriminación
Elementos del lenguaje:
- Acciones
- Objetos

48. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: códigos visuales
48
Reconocimiento Discriminación

49. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: diseño de Iconos
49
Diseño iconos. Principios
1. Usar la metáfora apropiada
2. Considerar compatibilidad internacional
3. Representación abstracta simbólica
4. Consistencia visual en familia de iconos
Referencia: http://www.nerv.es/blog/10-errores-comunes-en-el-diseno-de-iconos/

50. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: diseño de Iconos
50
Diseño iconos. Principios
1. Usar la metáfora apropiada

51. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: diseño de Iconos
51
Diseño iconos. Principios
2. Considerar compatibilidad internacional
(y contexto cultural)
a b c d

52. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: diseño de Iconos
52
Diseño iconos. Principios
3. Representación abstracta simbólica
Evitar texto en iconos
Simplicidad en detalles con significado
Mac OSX
XP
OS/2
Lisa KDE

53. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: diseño de Iconos
53
Diseño iconos. Principios
3. Representación abstracta simbólica
b)
a)
c)
d)

54. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: diseño de Iconos
54
Diseño iconos. Principios
4. Consistencia visual en familia de iconos
Usar un foco de luz consistente
Optimizar la resolución
Color
2D /3D

55. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: diseño de Iconos
55

56. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: el color
56
El Color
Tono
Brillo
saturación

57. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: el color
57
Objetivos
Ameno (satisfacción del
usuario)
Refuerza la
organización lógica
_______________
Centra la
atención
____________

58. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: el color
58
El color. Principios
1 - Usar el color como técnica de codificación

59. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: el color
59
El color. Principios
2 - Uso del color conservadoramente
Referencia: http://interfacehallofshame.eu/www.iarchitect.com/color.htm

60. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: el color
60
El color. Principios
3 - Prestar atención a la combinación de colores
Referencia: http://interfacehallofshame.eu/www.iarchitect.com/color.htm

61. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Presentación: el color
61
Tema 4. Estrategias de Diseño
El color. Principios
4 - Códigos de color modificables por el usuario

62. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño mediante Estilos
62
Estilos de interacción
- Diseño Menús
- Navegación
- Formularios
- Diseño Web
- Patrones de Interacción
The Essential Guide to
User Interface Design
Second Edition
An Introduction to GUI Design
Principles and Techniques
Wilbert O. Galitz
John Wiley & Sons, Inc.
NEW YORK • CHICHESTER • WEINHEIM • BRISBANE • SINGAPORE • TORONTO
Wiley Computer Publishing

63. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Menú
63Referencia: Psycology of menu selection. http://www.lap.umd.edu/poms/
Menú con diferente apariencia

64. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Menú
64
Organización:
Simple Secuencial Arbol Red
Criterio
- Número de opciones
- Organización semántica
- Información temporal

65. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Menú
65
Componentes:

66. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Menú
66
Estandarización:
- Nombre de las opciones
- Ubicación relativa
Favorece el aprendizaje y la retención

67. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Menú
67
Interacción guiada por acciones
Interacción guiada por objetos
Archivo Mantenimiento Movimientos Informes Ayuda
Películas
Socios
Proveedores
Auxiliares
Alquilar
Devolver
Reservar
Pedidos
P. Alquiladas
Socios
Por demanda
Archivo Películas Socios Proveedores Auxiliares

68. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Menú
68
Elementos
Botones (simples, radio, check) objetos
Menús (barra principal, pulldown y anidados)
Consideraciones
No sobrecargar los menús (7± 2)
Nombre significativo de los botones
Minimizar el espacio (uso de lenguaje icónico)
Aplicar agrupamiento:
Similitud
Por importancia
Alfabético
Más frecuentes
Favorece tiempo de respuesta, aprendizaje y retención en usuario

69. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Menú
69
Técnicas: Desactivar
Evitar errores

70. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Menú
70
Aplicar técnicas de agrupación y desactivar

71. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Menú: ejemplos
71
Tema 4. Estrategias de Diseño
15 ítem /
5 bloques /
2 anidados
9 ítem
Sobrecarga de items: aplicar técnicas de agrupación y desactivar

72. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Formularios
72
Uso
Introducción masiva de datos relativos a un concepto del dominio de la
aplicación (cliente, propiedad)
Método eficaz
Técnicas
Agrupación y alineación : legibilidad
Uso adecuado de controles
Disposición de Acciones

73. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Manipulación Directa
73
Principios:
1 Virtualidad
Representación de la realidad manipulable
Representación familiar de objetos y acciones
2 Transparencia
Centrarse en la actividad en vez de la herramienta
Iconos reconocibles
3 Facilidad de uso
Representación física y espacial más fácil de recordar
Realimentación visual (selección, acciones, etc.)
4 Centrado en el Ratón (mouse)
Mecanismo de selección/arrastre

74. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Estilo Manipulación Directa
74
Manipulación tangible

75. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño Web
75
1 Objetivo
• Organizar y estructurar la información de forma adecuada
• Favorecer la navegación
• Problema de sobrecarga de información
2 Organización Web
• Dividir en contenido en fragmentos lógico
• Organizacion jerárquica (en base a importancia)
• Establecer relaciones entre fragmentos de contenido
• Balancear el diseño (p.e. dos niveles de profundidad)
3 Navegacion Web:
• Donde estoy
• De dónde vengo
• Donde puedo ir
• Como puedo llegar rápidamente

76. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Diseño Interacción: Patrones
76
Objetivo:
- Reutilización de elementos de interacción frecuente
Técnicas:
- Descripción de alto nivel de las tareas
Recursos
- User Interface design Pattern library http://ui-patterns.com/
- http://designingwebinterfaces.com
- Pattern library for Interaction design www.welie.com

77. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Documentación
77
Documentación
Usuario
Comprar
Aprender
Usar
Medio
Papel On-line
Características Versión demo
(tour guiado)
Cursos Tutorial
Manual de Usuario Ayuda en línea
• Hipertexto
• Multimedia
• Sensible al
contexto
• Consulta (buscador)
• Manual
• Plantillas
• Folletos
• Libro
• Guía rápida consulta
Herramientas:

78. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 78
Referencias
[Azuma01] Azuma, R., Baillot, Y., Behringer, R., Feiner, S., Julier, S. & MacIntyre, B. Recent advances in
augmented reality. IEEE Computer Graphics and Applications 2001, Vol. 21, No. 6, pp. 34–47
Online: http://www.cc.gatech.edu/~blair/papers/ARsurveyCGA.pdf
[Galitz02] Galitz, W.: The Essential Guide to User Interface Design, Wiley 2002
[Levin14] M. Levin: Designing Multi-Device Experiences, O’Reilly Media 2014
[LOWD13] T. Lowdermilk, User-Centered Design. O'Reilly Media, Inc. 2013 (online UGR: http://sl.ugr.es/
06NR)
[Lores01] Metáforas, estilos y paradigmas. En J. Lorés (ed.) Interacción Persona-Ordenador: libro digital.
ISBN: 84-607-2255-4, AIPO-2001 http://www.aipo.es/libro/pdf/03Metafo.pdf
[Pyle13] B. Pyle, “Mobile Device Screen Sizes Resource Guide,” Jacobs & Clevenger, May 2013,
http://bit.ly/IT06W5.
[Rekimoto95] Rekimoto, The World through the Computer: Computer Augmented Interaction with Real
World Environments. 1995 http://www.sonycsl.co.jp/person/rekimoto/uist95/uist95.html
[Tidwel06] Tidwell, J.: Designing Interfaces: Patterns for Effective Interaction Design. O'Reilly, 2006
[Weinch11] Susan M. Weinschenk. 2011. http://uxmag.com/articles/the-secret-to-designing-an-intuitive-
user-experience
Patrones de interacción. http://ui-patterns.com/