Arquitectura de Información y Prototipado; categorías y etiquetas; estudio de caso Ciper Chile; definiciones de interfaz

1. Taller de Nuevos SoportesTaller de Nuevos Soportes
Prof. Marcelo dos Santos - @celooProf. Marcelo dos Santos - @celoo
Taller de Nuevos SoportesTaller de Nuevos Soportes
Prof. Marcelo dos Santos - @celooProf. Marcelo dos Santos - @celoo
Arquitectura de la Información y
prototipado para periodistas
UFT- 2016

2. 2 Prof. Marcelo Santos
¿Qué es Interfaz?
Interfaz
Dispositivo físico o lógico que hace la adaptación entre dos
sistemas.
Interfaz con el usuario
En un sistema computacional, conjunto de elementos de hardware
y software destinados a posibilitar la interacción con o usuario.
Interfaz gráfica (informática)
Tipo de interfaz con el usuario (q. v.), en el que la interacción está
basada en amplio empleo de imágenes, y no restricta sólo a textos
o caracteres, y que utiliza un conjunto de herramientas que incluye
ventanas, íconos, botones, y un medio de apuntamiento y
selección, como el mouse.
Aurélio Electrónico - 1999
UFT

3. UFT 3 Prof. Marcelo Santos
¿Qué es Interfaz?
“ Una frontera a través de la cual dos
sistemas independientes se encuentran y
se comunican o actúan uno sobre el otro.
Webopedia

4. UFT 4 Prof. Marcelo Santos
¿Qué es Interfaz?
“conjunto de elementos de la pantalla que
permiten al usuario realizar acciones
sobre el sitio web que está visitando.
Guía Web 2.0 – Gobierno de Chile

5. UFT 5 Prof. Marcelo Santos
¿Qué es Interfaz?
“En el contexto del proceso de interacción
persona - ordenador, la interfaz gráfica de
usuario es el artefacto tecnológico de un
sistema interactivo que posibilita, a través del
uso y la representación del lenguaje visual, una
interacción amigable con un sistema
informático
Wikipedia

6. UFT 6 Prof. Marcelo Santos
¿Qué es Interfaz?
“La interfaz debe permitir la inteligibilidad de la interacción
hombre-máquina operando en la traducción de los inputs y
outputs:
(1) convirtiendo cualquier clase de algoritmo en acciones pasibles
de se realizar a través de la estructura ergonómica de input de
señales del hombre hacia la máquina, como el mouse y el
teclado – botones que accionan rutinas y comandos, como un
simple "Ok" o "Enviar e-mail", "arrastrar y soltar" o "copiar y
pegar", comandos interpretables por la máquina; y
(2) Traduciendo las bases de datos en información – output de
naturaleza verbal, visual, sonora o híbrida – interpretable por el
hombre.
Marcelo Santos

7. UFT 7 Prof. Marcelo Santos
¿Qué es Interfaz?
“…softwares que dan forma a la interacción entre
usuario y computador. La interface actúa como
una especie de traductor, mediando entre las
dos partes, haciendo una sensible para la otra.
En otras palabras, la relación gobernada por la
interface es una relación semántica,
caracterizada por significado y expresión, no por
fuerza física.
Steven Johnson

8. Preguntas…
• ¿Cuáles son las interfaces de
input/entrada del computador delante de
ustedes?
¿y de output/salida?
• ¿Cuáles son las interfaces de
input/entrada de su celular?
¿y las de output/salida?
• ¿y de Play Station?
• ¿y de Kinect?
UFT 8 Prof. Marcelo Santos

9. Prototipos (wireframes)
• Esquemas para explicación de la
presentación de la información en la
interfaz de un sistema previo al diseño
visual/gráfico.
• Fundamentados en las estructuras de
clasificación y ordenamiento de la
información (Taxonomías y
etiquetas/metadatos)
9UFT Prof. Marcelo Santos

10. Prototipos (wireframes)
Incluyen
•Jerarquía de la información
•Áreas temáticas
•Cajas con contenidos
•Funcionalidades y botones
•Esquemas y flujos de
funcionamiento
•Explicaciones
NO incluyen
•Aspectos visuales
(diseño y layout)
•Colores
•Programación
UFT 10 Prof. Marcelo Santos

11. Categorías x Etiquetas
Categorías
-Predefinidas
-Jerárquicas
-Pueden presentar
submenús
Etiquetas
-Definidas al momento (ad
hoc)
-No hay jerarquía
-No hay submenús
11UFT Prof. Marcelo Santos - @celoo

12. Prototipado en papel
Images from Paper Prototyping
By Carolyn Snyder

13. Wireframes

16. CIPER Chile
Estudio de Caso
16

17. http://ciperchile.cl/2015/04/30/los-flancos-abiertos-de-pinera-en-la-investigacion-del-financiamiento-politico/

18. 18UFT Prof. Marcelo Santos - @celoo
Menu Principal:
Categoría: Géneros periodísticos
Estructura más importante de navegación,
traduce los principales objetivos y las principales
formas de encontrar información en el sitio a
partir del tipo de género periodístico

19. 19UFT Prof. Marcelo Santos - @celoo
Menu Secundario 1
Categoría: Tipos de medios
Otra estructura de pensamiento y navegación a partir de
los diferentes tipos de contenidos (medios) que poblan el
sitio

20. 20UFT Prof. Marcelo Santos - @celoo
Menu Secundario 2
Categoría: No hay (Etiquetas libres)
Estructura alternativa de navegación por temas
similares; las etiquetas no solo clasifican (organización)
sino que son un menu de navegación secundario a
través del cual accedo a todos los contenidos de dicho
tema.

21. 21UFT Prof. Marcelo Santos - @celoo
Artículos relacionados
Categoría: No hay (ad hoc)
Estructura alternativa de navegación que lista artículos
relacionados a partir de las etiquetas en común. Pueden
ser ordenados por diferentes criterios de relevancia para
apoyar la navegación más general por etiquetas

22. 22UFT Prof. Marcelo Santos - @celoo
Artículos relacionados
Categoría: No hay, listado dinámico a partir de datos
de navegación/uso del sitio
Estructura alternativa de navegación que lista etiquetas
más frecuentes. No queda claro si son las más
publicadas o más accedidas (ambos serían pertinentes
como opción de navegación)

23. 23UFT Prof. Marcelo Santos - @celoo
Institucional y Relacionamiento
Categoría: Posibilidades de interacción con ciper
Excepto por el institucional (“Acerca de Ciper”), los
demás ítems son posibilidades de mantener contacto,
seguir, recibir novedades, suscribir al contenido. El
agrupamiento de funcionalidades en una “zona”
específica facilita la comprensión de las estructuras del
sitio.

24. Actividad (referente: BBC Special reports)
• Revisar su blog del ejercicio anterior
• Mapa mental (optativo) y árbol de contenidos
• Jerarquizar:
• 1 destaque principal
• 2 destaques secundarios
• Agrupar temas/categorías: menus de navegación
• Hacer un prototipo para una interfaz de un reportaje
especial sobre el tema (papel, powerpoint, mockingbird,
moqups.com
etc.)
• Entregar para profesor o publicar en FB
24UFT Prof. Marcelo Santos

25. Tips y bonus
• Piensen “multimediáticamente”
• Piensen “sinestésicamente”
• Piensen “no linealmente”: no es libro.
• Recuerden: diferentes personas piensan
diferente => navegan diferente
• El usuario es protagonista: él debe
“conectar los puntos”
• Categorías y etiquetas
(metadatos)
UFT 25 Prof. Marcelo Santos