PDF de programación - Diseño Interfaces Multimedia

Diseño de
interfaces
multimedia

Tona Monjo Palau

PID_00159830

© FUOC • PID_00159830

Tona Monjo Palau

Diseño de interfaces multimedia

El encargo y la creación de este material docente han sido coordinados
por los profesores: Ferran Giménez Prado, Laia Blasco Soplon (2011)

Primera edición: febrero 2011
© Tona Monjo Palau
Todos los derechos reservados
© de esta edición, FUOC, 2011
Av. Tibidabo, 39-43, 08035 Barcelona
Diseño: Manel Andreu
Realización editorial: Eureca Media, SL
Depósito legal: B-5.180-2011
ISBN: 978-84-693-9689-6

Ninguna parte de esta publicación, incluido el diseño general y la cubierta, puede ser copiada,
reproducida, almacenada o transmitida de ninguna forma, ni por ningún medio, sea éste eléctrico,
químico, mecánico, óptico, grabación, fotocopia, o cualquier otro, sin la previa autorización escrita
de los titulares del copyright.

3

Diseño de interfaces multimedia

© FUOC • PID_00159830

Contenidos

Módulo didáctico 1
Géneros

Evolución histórica de las interfaces gráficas de usuario
Principales ámbitos de producción de aplicaciones interactivas

Portales de información

1.
2.
3. Diseño de aplicaciones y rango de edad del usuario
4.
5. Aplicaciones y portales corporativos
6. Comercio electrónico
7.
8.
9. Administración electrónica y e-government
10. Diseño de experiencias
11. Diseño adaptativo
12. Narrativa y diseño de interfaces

E-learning
Intranet

Módulo didáctico 2
Diseño centrado en el usuario

Interacción persona-ordenador
Estilos de interacción
Psicología de la interacción persona-ordenador
Fases del proceso de diseño centrado en el usuario

1.
2.
3.
4.
5. Análisis
6. Modelado del usuario
7. Diseño
8. Arquitectura de la información
9.

Prototipo

Módulo didáctico 3
Usabilidad

Principios generales de usabilidad

1.
2. Usabilidad y legibilidad de contenidos
3.
4.
5.
6. Realización de un test con usuarios

Evaluación de la usabilidad
Evaluación heurística
Paseo cognitivo

Módulo didáctico 4
Diseño

Técnicas de creatividad

1. Dirección de arte. Briefing
2.
3. Retórica visual
4. Retículas en pantalla

© FUOC • PID_00159830

4

Diseño de interfaces multimedia

Formatos gráficos
Preparación e integración de elementos gráficos

Tipografía para interactivos

5.
6. Uso y aplicación del color
7.
8.
9. Optimización de archivos
10. Representación de información
11. Representación de datos numéricos
12. Representación de conceptos
13. Narrativa visual

Módulo didáctico 5
Accesibilidad

1. Concepto de accesibilidad
2. Niveles de prioridad
3. Niveles de conformidad
4. Componentes de accesibilidad

Géneros

Tona Monjo Palau



PID_00167605

© FUOC • PID_00167605

Géneros

Ninguna parte de esta publicación, incluido el diseño general y la cubierta, puede ser copiada,
reproducida, almacenada o transmitida de ninguna forma, ni por ningún medio, sea éste eléctrico,
químico, mecánico, óptico, grabación, fotocopia, o cualquier otro, sin la previa autorización escrita
de los titulares del copyright.

© FUOC • PID_00167605

Índice

Géneros

1. Evolución histórica de las interfaces gráficas de usuario.......
1.1. Antecedentes ...............................................................................
1.2.
Evolución del hipertexto ............................................................
El hipertexto y la WWW ...............................................
1.2.1.


2. Principales ámbitos de producción de aplicaciones

interactivas..........................................................................................
2.1.
Interfaces para portales de información .....................................
2.2. Aplicaciones y portales corporativos ..........................................
2.3. Comercio electrónico ..................................................................
E-learning ....................................................................................
2.4.
2.5.
Intranet ........................................................................................
2.6. Administración electrónica y e-government..................................


3. Diseño de aplicaciones y rango de edad del usuario................
3.1. Diseño de interfaces orientadas a niños (0-13 años) ..................
3.1.1. Diferencias entre usuarios infantiles y adultos ..............
3.1.2. Usabilidad ......................................................................
3.1.3. Diferencias de género ....................................................
3.1.4. Diseño de contenidos ....................................................
3.1.5. Diseño visual .................................................................
3.1.6.
Evaluación de la usabilidad para niños .........................

3.2. Diseño de interfaces orientadas a público adolescente (13-17

años) ............................................................................................
3.2.1. Características generales ................................................
3.2.2. Diferencias entre usuarios adolescentes y adultos .........
3.2.3. Diferencias de género ....................................................

3.3. Diseño de interfaces orientadas a usuarios sénior (mayores de

65 años) .......................................................................................
3.3.1. Diseño visual .................................................................
3.3.2. Diseño de contenidos ....................................................
3.3.3. Diseño de opciones .......................................................
3.3.4. Usabilidad ......................................................................


4. Portales de información..................................................................
4.1. Características del proceso de lectura .........................................
4.2. Uso de Flash en periodismo digital ............................................


5. Aplicaciones y portales corporativos............................................
5.1.
Estructura de un portal corporativo ...........................................
5.2. Características del diseño de un portal corporativo ...................



7
7
15
15

17
17
18
19
20
21
21

23
23
23
25
27
27
28
29

30
30
30
32

32
33
35
35
37

38
39
43

44
45
46

© FUOC • PID_00167605

Géneros

6. Comercio electrónico........................................................................
6.1. Comercio electrónico y confianza ..............................................
6.2. Diseño de un sitio de comercio electrónico ...............................
6.3. Apartados de un sitio de comercio electrónico ..........................


7. E-learning.............................................................................................
7.1.
El proceso de aprendizaje ...........................................................
7.2. Aplicaciones de e-learning.............................................................
7.3. Diseño para e-learning...................................................................
7.3.1. Optimización de la memoria del usuario ......................
7.3.2. Control en manos del usuario ......................................
7.3.3. Diseño lógico y consistente ...........................................
7.3.4.
Sistemas eficientes de guía y orientación ......................
7.4. Utilización de imágenes para entornos de e-learning...................


8.

Intranet.................................................................................................
8.1. Diseño de intranet ......................................................................
8.2. Usabilidad para una intranet ......................................................
8.2.1. Navegación en una intranet ..........................................
8.2.2.
Búsqueda en una intranet .............................................
8.2.3. Consistencia en una intranet ........................................
8.3. Diseño de extranet ......................................................................


9. Administración electrónica y e-government................................
Estructura de la web de administración electrónica ...................
9.1.1. Herramientas de búsqueda ............................................
9.2. Diseño de un sitio de administración electrónica ......................

9.1.


10. Diseño de experiencias.....................................................................
10.1. ¿Hacia dónde va el diseño? ........................................................
10.2. Tipos de experiencias ..................................................................
10.3. Fases de una experiencia .............................................................
10.4. Emociones ...................................................................................
10.4.1. Diseño de emociones .....................................................
10.5. Diseño de experiencias aplicado a la imagen corporativa ..........
10.5.1. Experiencia de marca en la web ....................................
10.5.2. Experiencias de marca positivas ....................................


11. Diseño adaptativo..............................................................................
11.1. El usuario como adaptador .........................................................
11.2. Características del diseño adaptativo ..........................................


12. Narrativa y diseño de interfaces...................................................
12.1. Interactividad y narrativa ...........................................................
12.2. Narrativa e interfaz .....................................................................
Interfaz social y afectiva ................................................
12.3. Pautas para la generación de interfaces narrativas .....................

12.2.1.

48
49
51
54

61
61
62
66
67
69
70
72
73

76
78
80
80
81
82
84

85
85
86
87

89
90
91
92
93
95
96
97
97

99
100
100

102
102
104
105
105

© FUOC • PID_00167605

Géneros


Bibliografía....................