Thoughts on Interaction Design

Un recurso interesante sobre Diseño de interacción, disponible en: http://www.thoughtsoninteraction.com/contents.php

Menús desplegables

Los menús desplegables definitivamente ahorran espacio. Desafortunadamente, sufren de algunos problemas:

• Tiene que buscarlos.
• Son difíciles de consultar.
• Resultan incómodos.

Los desplegables son más eficaces para listas de elementos conocidos ordenados alfabéticamente.

La solución…

¿Supone este desplegable con estos elementos y estos términos dentro de este contexto particular una buena experiencia para la mayoría de las personas que probablemente utilicen este sitio? 

Navegación

Creo que hablamos de navegación Web porque…

averiguar dónde estamos es un problema bastante más predominante en la Web que en los espacios físicos. En la Web estamos intrínsecamente perdidos, no podemos asomarnos por los pasillos para ver dónde estamos. La navegación Web compensa la ausencia del sentido del lugar incorporando la jerarquía del sitio, creando ina sensación del tipo ‘allí’.

• La navegación no sólo es una característica de los sitios Web.
• Sin navegación no hay un ‘allí’ más allá.
• La navegación web tiene que ser buena.

Propósitos de la navegación

• Nos ayuda a encontrar lo que estamos buscando.
• Nos dice también el lugar donde nos encontramos.
• Nos ofrece un lugar donde no nos perdamos.
• Nos dice lo que hay en cada lugar.
• Nos enseña a usar el sitio.
• Nos permite confiar en las personas que la han creado.

Convenciones de la navegación

• Especifican, de una forma aproximada, la apariencia y la ubicación de los elementos de navegación, de manera que nos permiten saber en todo momento lo que buscamos y dónde encontrarlo cuando lo necesitamos.

Navegación coherente

La navegación coherente o global describe el conjunto de los elementos de navegación que aparecen en todas las páginas del sitio.

Debería de incluír:

1. Identificación del sitio [encabezado del sitio].
2. Camino hacia la página principal ['Home', 'Inicio'].
3. Una forma de buscar.
4. Utilidades [vínculos a los elementos importantes del sitio].
5. Secciones [vínculos a las secciones principales del sitio].

La página principal no es como las otras páginas

• Tiene que soportar un peso diferente y también ha de cumplir unos cometidos diferentes.

 

En la Web, el principal modo de movimiento es la teletransportación…

Steve Krug

 

Proyecto final: Prototipo final

 

 Interfaz “Inicio”

Interfaz “Introducción”

Interfaz “Objetos de aprendizaje”

 

Interfaz “Resumen”

 

Interfaz “Glosario”

 

Interfaz “Lecturas complementarias”

 

Interfaz “Ayuda”

Interfaz “Modelo prescriptivo”

Interfaz “Fase 1: Comunicación”

 

Interfaz “Análisis institucional”

Interfaz “Formulación”

Interfaz “Fase 2: Planeación”

Interfaz “Plan de desarrollo”

Interfaz “Equipo de trabajo”

Interfaz “Fase 3: Modelado”

Interfaz “Modelado de análisis”

Interfaz “Modelado de diseño”

Interfaz “Fase 4: Construcción”

Interfaz “Codificación”

Interfaz “Pruebas rápidas”

Interfaz “Fase 5: Implantación”

Interfaz “Entrega”

Interfaz “Pruebas de usabilidad”

Interfaz “Retroalimentación”

Interfaz final del objeto de aprendizaje

Proyecto final: Mejoras al prototipo

Interfaz de inicio

Se cambió el elemento gráfico decorativo y el nombre del objeto de aprendizaje, obteniendo las siguientes propuestas para la interfaz de inicio:

 

Menús

• Menú lateral. En éste, se presenta el tema central del objeto de aprendizaje: el modelo prescriptivo de proceso evolutivo de los objetos de aprendizaje. Además, se eliminó el tercel nivel, logrando un menú corto con cada una de las fases del modelo y sus respectivas actividades.
• Menú superior. Con este menú los usuarios puedne consultar otros contenidos.

Indicadores

Presenta un indicador que le permite al usuario saber en qué contenido del objeto de aprendizaje se encuentra.

Proyecto final: Prototipo

Prototipo de baja fidelidad

Para la elaboración de este prototipo de baja fidelidad se consideró las opiniones de los usuarios que evaluaron los prototipos previos: 

• Menú lateral que facilite la navegación.
• Botones de navegación anterior/siguiente.
• Indicador que le permita al usuario saber en dónde se encuentra.
• Distribución de la información.
• Interacción.

 

 

 

 Se diseñó una retícula para una mejor distribución en pantalla:

 

Algunas observaciones por parte del Mtro. Brizuela a la retícula fueron las siguientes:

Prototipo de alta fidelidad

Metáforas promovidas

Lo que se trató de lograr en este prototipo fue combinar la forma tradicional de hacer una navegación en una página Web en el objeto de aprendizaje, de esta forma el usuario entenderá fácilmente la forma de utilizar el recurso.

Estilos de interacción

Los estilos de interacción empleados son:

• Menús. Con el fin de ahorrarle al usuario tiempo en la navegación entre los contenidos del objeto de aprendizaje.
• Manipulación directa. Se utilizaron algunas formas de manipulación directa [botones de navegación, hipervínculos, entre otros] permitiendo recordar fácilmente las funcionalidades con las que cuenta el objeto de aprendizaje.

El prototipo que se generó para el objeto de abrendizaje cuenta con botones, ligas e instrucciones textuales que instruyen al usuario, además de que permiten la navegación eficaz y eficiente a través del recurso.

 

 

 

 Retroalimentación del prototipo

•  Eliminar tercer nivel del menú lateral.

• Incuir pleca que separe al menú.
• Eliminar ríos tipográficos de las cajas de texto.
• Puntaje de la fuente tipográfica: 11 - 12 puntos.

 

Proyecto final: Prototipos previos

Antes del desarrollo de este proyecto se contaba con dos prototipos. En ambos, se propone un objeto de aprendizaje donde el usuario podrá navegar y consultar la información contenida en el objeto de aprendizaje.

Prototipo previo A

• Herramienta de autoría: Flash

• Prototipo de baja fidelidad

Prototipo previo B 

• Herramienta de autoría: Flash
• Prototipo de baja fidelidad

Proyecto final: Contenido

El objeto de aprendizaje presentará el siguiente contenido temático:

• Introducción:
  • ¿Qué son los objetos de aprendizaje?
  • Niveles de objetos de aprendizaje
  • Características de los objetos de aprendizaje
  • Elementos de un objeto de aprendizaje
• Modelo prescriptivo de proceso evolutivo de los objetos de aprendizaje:
  • Fase de Comunicación
    • Análisis institucional
    • Formulación
  • Fase de Planeación
    • Plan de desarrollo
    • Equipo de trabajo
  • Fase de Modelado
    • Modelado de análisis
      • Análisis de contenido
      • Análisis de interacción
      • Análisis de funciones
      • Análisis de configuración
    • Modelado de diseño
      • Diseño de contenido
      • Diseño arquitectónico
      • Diseño de navegación
      • Diseño estético
      • Diseño de la interfaz
  • Fase de Construcción
    • Codificación
    • Pruebas rápidas
  • Fase de Implantación
    • Entrega
    • Pruebas de usabilidad
    • Retroalimentación

El contenido del objeto de aprendizaje será dividido a nivel micro por temas.

11 operaciones cognitivas del diseño de información

¿Para qué sirve diseñar la información?

Para Brizuela, en su documento electrónico Las 11 operaciones cognitivas del Diseño de Información, el diseñar la información lleva consigo operaciones significativas (categorías cognitivas).

Estas categorías se encuentran ordenadas de acuerdo a la complejidad cognitiva:

1. Organización/Jerarquización. Organización básica de la información.
2. Configuración. Organización coherente de los elementos que integran la información.
3. Identificación. Primer nivel de representación de un objeto o concepto por medio de una imagen.
4. Descripción. Proporciona información a primera instancia de la estructura y del estado general de las cosas.
5. Relato. Presenta información en una dimensión temporal.
6. Instrucción. Indicaciones de cómo solucionar especificamente un problema mediante acciones secuenciales.
7. Orientación. Determina el entendimiento de un espacio y su representación.
8. Explicación. Permite entender situaciones un tanto complejas.
9. Operación. Interfaz que tiene una retroalimentación directa, permitiendo la operación de un artefacto por medio de otras interfaces interactivas.
10. Procesamiento de datos. Interfaz que permite comparar escenarios y posibilidades en la toma de decisiones.
11. Argumentación. Se refiere al espacio socio-cognitivo que se fundamenta en juicios de valor y procura convencer y defender una cierta posición.

Envisioning information

Algunas de las ides más interesantes presentadas por Edward Tufte en Envisioning Information.

El mundo es complejo, dinámico, multidimensional; el papel es estático, plano. ¿Cómo representar el mundo visual de la experiencia y las mediciones en una mera planicie?

A través de los capítulos del libro, Tufte dá respuesta a esta interrogante.

Escapando de la planicie

• Diariamente navegamos en un mundo tridimensional. 
• El diseño debe estar al servicio de la información.

La excelencia en la presentación de información requiere dominar el arte y desdeñar las ideologías.

Micro/Macro lecturas

Para clarificar, aumenta el detalle.

El detalle se irá acumulando en estructuras más grandes pero coherentes, con capas múltiples y jerárquicas, permitiendo organizar la complejidad.

Las lecturas micro/macro permiten:

• Libertad de contrartar, comparar y elegir.
• Construir microelementos personales.
• Narrar y personalizar los datos.

Capas

Cuando observemos desorden y confusión en una visualización, se debe a fallos del diseño, no a las características de la información. En lugar de descalificar el conjunto de datos por su escesiva complicación, o peor todavía, a los espectadores por falta de entendimiento, el objetivo es encontrar estrategias de diseño que revelen el detalle y la complejidad.

¿Qué hacer para reducir el ruido en las visualizaciones y enriquecer su contenido?

• capas
• separar

Los diversos elementos recopilados en una superficie plana siempre interactúan entre sí, creando pautas de no información y texturas, simplemente a través de su mera presencia simultánea:

En diseño 1 + 1 = 3 o más.

Josef Albert