-
Notifications
You must be signed in to change notification settings - Fork 0
/
visualvocab-slides.htm
272 lines (235 loc) · 15.5 KB
/
visualvocab-slides.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<title>Vocabulario visual para arquitectura de información y diseño de interacción</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet" href="reveal.js/css/theme/simple.css" id="theme">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'reveal.js/css/print/pdf.css' : 'reveal.js/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="reveal.js/lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1 class="title">Vocabulario visual para arquitectura de información y diseño de interacción</h1>
</section>
<section><section id="consideraciones-iniciales" class="titleslide slide level1"><h1>Consideraciones iniciales</h1></section><section class="slide level3">
<p>Un vocabulario visual es <strong>un conjunto de símbolos usado para describir algo</strong> (usualmente un sistema, estructura o proceso; en nuestro caso, un sitio web).</p>
</section><section id="debería-ser" class="slide level3">
<h3>Debería ser:</h3>
<ul>
<li class="fragment">Compatible con pizarra blanca. Tan simple que los diagramas puedan ser dibujados rápidamente a mano.</li>
<li class="fragment">Independiente de herramientas. No requerir de software especializado.</li>
<li class="fragment">Pequeño y auto-contenido. El total de los elementos debe ser mantneido al mínimo posible, manteniendo una estricta relación uno a uno entre conceptos y símbolos, para que el vocabulario pueda ser aprendido y aplicado de forma rápida.</li>
</ul>
</section></section>
<section><section id="elementos-simples" class="titleslide slide level1"><h1>Elementos simples</h1></section><section id="páginas-documentos-y-pilas" class="slide level3">
<h3>Páginas, documentos y pilas</h3>
<p>La <strong>página</strong> es la unidad básica<br />
de la experiencia de usuario en la web.</p>
<p>Además de páginas, también podemos tener archivos o <strong>documentos</strong>, o <em>parcelas de datos sin propiedades de navegación</em>. Estos archivos son entregados al usuario para su uso fuera de un navegador web.</p>
</section><section class="slide level3">
<figure>
<img src="images/pag-doc.png" alt="Páginas y documentos" /><figcaption>Páginas y documentos</figcaption>
</figure>
</section><section class="slide level3">
<p>Las pilas de páginas o documentos se utilizan para indicar un grupo de elementos con las mismas funcionalidades y con el mismo acceso a través de la navegación, que pueden ser clasificadas como una entidad única (una colección de manuales de instrucciones en PDF, por ejemplo).</p>
</section><section class="slide level3">
<figure>
<img src="images/pilas.png" alt="Pilas de páginas y de documentos" /><figcaption>Pilas de páginas y de documentos</figcaption>
</figure>
</section><section class="slide level3">
<p>Usamos <strong>etiquetas</strong> en páginas y archivos para identificarlos. No hace falta que se correspondan exactamente con los títulos finales, pero sí es importante que sean un identificador único.</p>
</section><section id="relaciones-conectores-y-flechas" class="slide level3">
<h3>Relaciones: conectores y flechas</h3>
<p>Las relaciones entre elementos se indican mediante líneas simples o conectores (con flechas). Es importante recordar que, aunque todas estas relaciones se traducirán en relaciones de navegación, <strong>no todas las relaciones de navegación aparecerán en el diagrama</strong>.</p>
<p>relación ≠ navegación</p>
</section><section class="slide level3">
<figure>
<img src="images/2a.png" alt="Estructura simple de árbol" /><figcaption>Estructura simple de árbol</figcaption>
</figure>
</section><section class="slide level3">
<figure>
<img src="images/2b.png" alt="La misma estructura diagramada de forma diferente" /><figcaption>La misma estructura diagramada de forma diferente</figcaption>
</figure>
</section><section class="slide level3">
<p>Cuando diagramamos diseño de la interacción, las líneas también deben indicar dirección para especificar cómo se moverá el usuario a través del sistema para una tarea específica.</p>
<div class="fragment">
<p>Esto puede hacerse utilizando flechas, sin que la direccionalidad impida al usuario moverse en el sentido opuesto.</p>
</div>
</section><section class="slide level3">
<figure>
<img src="images/3a.png" alt="La flecha indica un movimiento corriente hacia abajo hacia el fin de la tarea" /><figcaption>La flecha indica un movimiento corriente hacia abajo hacia el fin de la tarea</figcaption>
</figure>
<div class="fragment">
<figure>
<img src="images/3b.png" alt="La barra cruzada indica que el movimiento corriente hacia arriba no está permitido" /><figcaption>La barra cruzada indica que el movimiento corriente hacia arriba no está permitido</figcaption>
</figure>
</div>
</section><section class="slide level3">
<figure>
<img src="images/3c.png" alt="Las flechas múltiples clarifican la dirección" /><figcaption>Las flechas múltiples clarifican la dirección</figcaption>
</figure>
</section><section class="slide level3">
<p>Los conectores y flechas también se pueden etiquetar, pero sólo en el caso de que sea imprescindible. Si las etiquetas son largas, son muchas y/o comienzan a sobrecargar el diagrama, se puede apuntar al lector hacia una nota al pie o una referencia en un anexo.</p>
</section><section class="slide level3">
<figure>
<img src="images/4a.png" alt="Una etiqueta superflua" /><figcaption>Una etiqueta superflua</figcaption>
</figure>
</section><section class="slide level3">
<figure>
<img src="images/4b.png" alt="Una etiqueta útil" /><figcaption>Una etiqueta útil</figcaption>
</figure>
</section><section class="slide level3">
<figure>
<img src="images/4c.png" alt="Una referencia al pie o anexo" /><figcaption>Una referencia al pie o anexo</figcaption>
</figure>
</section><section id="conjuntos-concurrentes" class="slide level3">
<h3>Conjuntos concurrentes</h3>
<p>Se usan cuando una acción del usuario genera resultados múltiples simultáneamente, como abrir una ventana pop-up mientras se carga otra ventana en la página principal, o mostrar una página mientras se descarga un documento.</p>
</section><section class="slide level3">
<figure>
<img src="images/5.png" alt="Un conjunto concurrente" /><figcaption>Un conjunto concurrente</figcaption>
</figure>
</section><section id="puntos-de-continuación" class="slide level3">
<h3>Puntos de continuación</h3>
<p>Permiten separar el diagrama en conjuntos que sean fáciles de comprender y asimilar.</p>
</section><section class="slide level3">
<figure>
<img src="images/6a.png" alt="Un punto "continúa hacia" referencia al lector hacia otro diagrama" /><figcaption>Un punto "continúa hacia" referencia al lector hacia otro diagrama</figcaption>
</figure>
<div class="fragment">
<figure>
<img src="images/6b.png" alt="Un punto "continúa desde" retomando desde donde lo dejamos en el diagrama anterior" /><figcaption>Un punto "continúa desde" retomando desde donde lo dejamos en el diagrama anterior</figcaption>
</figure>
</div>
</section><section id="areas" class="slide level3">
<h3>Elementos comunes: áreas y áreas iterativas</h3>
<p>Las áreas identifican un grupo de páginas que comparten uno o varios elementos comunes (que deberían ser identificados por etiquetas).</p>
</section><section class="slide level3">
<figure>
<img src="images/7.png" alt="Un ejemplo de uso de un área para representar una ventana pop-up" /><figcaption>Un ejemplo de uso de un área para representar una ventana pop-up</figcaption>
</figure>
</section><section class="slide level3">
<p>También puede ocurrir que queramos repetir la misma estructura básica porque se aplica a una serie de elementos funcionalmente idénticos (como un catálogo de productos con varias páginas asociadas a cada uno).</p>
</section><section class="slide level3">
<figure>
<img src="images/8.png" alt="Un ejemplo de uso de un área iterativa para representar una estructura repetida en un catálogo de productos" /><figcaption>Un ejemplo de uso de un área iterativa para representar una estructura repetida en un catálogo de productos</figcaption>
</figure>
</section><section class="slide level3">
<p>Los conectores y flechas no apuntan al área, que sirve solamente para encerrar una serie de páginas.</p>
</section><section id="componentes-reutilizables-áreas-de-flujo-y-referencias" class="slide level3">
<h3>Componentes reutilizables: áreas de flujo y referencias</h3>
<p>Algunos diseños de interacción requieren una secuencia de pasos que se repita en diferentes contextos (como un procedimiento de login, por ejemplo). Estas tareas reutilizables se denominan flujos (<em>flow</em>), y se representa en el diagrama mediante dos elementos:</p>
<ul>
<li>el área de flujo, que encierra el flujo mismo, y</li>
<li>la referencia de flujo, que sirve para identificarlo.</li>
</ul>
</section><section class="slide level3">
<figure>
<img src="images/9a.png" alt="Una referencia de flujo sirve tanto como punto "continúa hasta", como punto "continúa desde"" /><figcaption>Una referencia de flujo sirve tanto como punto "continúa hasta", como punto "continúa desde"</figcaption>
</figure>
</section><section class="slide level3">
<figure>
<img src="images/9b.png" alt="El área de flujo referida en el diagrama anterior" /><figcaption>El área de flujo referida en el diagrama anterior</figcaption>
</figure>
</section><section class="slide level3">
<p>Las áreas de flujo funcionan de manera muy similar a los puntos de continuación. La diferencia es que una referencia de flujo puede utilizarse como <em>continúa desde</em> y <em>continúa hacia</em>, mientras que un punto de continuación sólo puede ser una cosa o la otra.</p>
</section></section>
<section><section id="elementos-condicionales" class="titleslide slide level1"><h1>Elementos condicionales</h1></section><section class="slide level3">
<p>En una estructura dinámica, el sistema decide qué opciones y resultados se le presentan al usuario en función de una o más condiciones (relativas al usuario, a la sesión, el contenido mismo, o de otro tipo).</p>
<p>Generalmente, para simplificar la visión de los diagramas, las condiciones se describen en notas al pie o anexos.</p>
</section><section id="pdec" class="slide level3">
<h3>Puntos de decisión</h3>
<p>Cuando una acción del usuario puede generar uno de varios resultados (como por ejemplo, un error tras el envío de un formulario), el sistema debe <em>decidir</em> qué resultado presentar.</p>
</section><section class="slide level3">
<figure>
<img src="images/10.png" alt="Un ejemplo de uso de un punto de decisión en una secuencia de login" /><figcaption>Un ejemplo de uso de un punto de decisión en una secuencia de login</figcaption>
</figure>
</section><section id="conectores-y-flechas-condicionales" class="slide level3">
<h3>Conectores y flechas condicionales</h3>
<p>Cuando existen caminos que se presentan al usuario dependiendo de si se cumplen una o más condiciones. Por ejemplo, información visible sólo para usuarios logueados.</p>
</section><section class="slide level3">
<figure>
<img src="images/11a.png" alt="Un conector condicional" /><figcaption>Un conector condicional</figcaption>
</figure>
<figure>
<img src="images/11b.png" alt="Una flecha condicional" /><figcaption>Una flecha condicional</figcaption>
</figure>
</section><section id="rcond" class="slide level3">
<h3>Ramas condicionales</h3>
<p>Cuando se debe seleccionar una serie de opciones mutuamente excluyentes.</p>
<p>Es parecido a los <a href="#/pdec">puntos de decisión</a> pero se diferencia en que en este caso el sistema decide la opción que se mostrará al usuario antes de que éste realice ninguna acción.</p>
<p>No es fácil encontrar ejemplos de este tipo de elemento.</p>
</section><section class="slide level3">
<figure>
<img src="images/12.png" alt="Una rama condicional" /><figcaption>Una rama condicional</figcaption>
</figure>
</section><section id="selectores-condicionales" class="slide level3">
<h3>Selectores condicionales</h3>
<p>Es parecido a las <a href="#/rcond">rama condicionales</a> salvo que en este caso las opciones <strong>no</strong> son mutuamente excluyentes; se le presentan al usuario todas las opciones que respondan a las condiciones establecidas.</p>
<div class="fragment">
<p>La aplicación más común son los resultados de búsqueda.</p>
</div>
</section><section class="slide level3">
<figure>
<img src="images/13.png" alt="Un selector condicional" /><figcaption>Un selector condicional</figcaption>
</figure>
</section><section id="racimos" class="slide level3">
<h3>Racimos</h3>
<p>Los racimos (más de un camino basado en ciertas condiciones) aparecen después de una <a href="#/rcond">rama condicional</a> o un <a href="#/scond">selector condicional</a>.</p>
<p>También resulta difícil encontrar ejemplos en la vida real.</p>
</section><section class="slide level3">
<figure>
<img src="images/14.png" alt="Un racimo corriente abajo desde una rama" /><figcaption>Un racimo corriente abajo desde una rama</figcaption>
</figure>
</section><section id="áreas-condicionales" class="slide level3">
<h3>Áreas condicionales</h3>
<p>Cuando se aplican una o más condiciones a un grupo de páginas, se encierran en un área condicional.</p>
<p>Se usan generalmente para situaciones que requieren permisos de acceso (como un login o conexiones seguras).</p>
<p>A diferencia de <a href="#/areas">otros tipos de áreas</a>, se asocian con un resultado que se generará en el caso de que no se cumplan las condiciones para el acceso a ese área.</p>
</section><section class="slide level3">
<figure>
<img src="images/15.png" alt="Un ejemplo de uso de un área condicional donde se requiere una conexión segura" /><figcaption>Un ejemplo de uso de un área condicional donde se requiere una conexión segura</figcaption>
</figure>
</section></section>
<section><section id="para-terminar" class="titleslide slide level1"><h1>Para terminar</h1></section><section class="slide level3">
<ul>
<li>Guías de referencia rápida: <a href="docs/garrett_ia_cheatsheet.pdf">cheatsheet</a> y <a href="docs/garrett_ia_quickref.pdf">quickref</a></li>
<li>Ejemplo <a href="http://www.metafilter.com/">MetaFilter</a>, <a href="docs/metafilter_ia.pdf">IA de ejemplo</a></li>
<li>Aplicaciones online: <a href="http://www.gliffy.com">Gliffy</a>, <a href="http://draw.io">draw.io</a></li>
</ul>
</section></section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
// Optional reveal.js plugins
dependencies: [
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true },
{ src: 'reveal.js/plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>