Desarrollo de proyectos WEBDiseño de Interaccion Dise ñ o WEB Extraído de: Ray, K y Amy, S. (1998). Diseño interactivo. España, Anaya Multimedia.

Presentación del tema: "Desarrollo de proyectos WEBDiseño de Interaccion Dise ñ o WEB Extraído de: Ray, K y Amy, S. (1998). Diseño interactivo. España, Anaya Multimedia."— Transcripción de la presentación:

1 Desarrollo de proyectos WEBDiseño de Interaccion Dise ñ o WEB Extraído de: Ray, K y Amy, S. (1998). Diseño interactivo. España, Anaya Multimedia.

2 Desarrollo de proyectos WEB Dise ñ o WEB Dise ñ o de Interaccion ¿Qué veremos en esta presentación? ¿Qué es el D.Int?Tareas del D.Int El diseño de información responde a la pregunta ¿Cómo es el producto? El diseño de interacción responde a ¿Cómo deberá funcionar? La interacción de un producto informático significa que el usuario, no el diseñador, controla la secuencia, la velocidad y, lo más importante, qué ver y qué ignorar.

3 Desarrollo de proyectos WEB Dise ñ o WEB Dise ñ o de Interaccion repaso En la clase pasada estuvimos viendo una de las fases del proceso de elaborarción de sitios web. Vimos que muchos autores coinciden en que son tres los procesos involucrados. Diseño Interacción Diseño Información Diseño Presentación

4 Desarrollo de proyectos WEB Dise ñ o WEB Dise ñ o de Interaccion repaso El diseño de información responde a la pregunta ¿Cómo es el producto?El diseño de interacción responde a ¿Cómo deberá funcionar? La interacción de un producto informático significa que el usuario, no el diseñador, controla la secuencia, la velocidad y, lo más importante, qué ver y qué ignorar. El diseño de información responde a la pregunta ¿Cómo es el producto?El diseño de interacción responde a ¿Cómo deberá funcionar? La interacción de un producto informático significa que el usuario, no el diseñador, controla la secuencia, la velocidad y, lo más importante, qué ver y qué ignorar. Diseño Interacción Diseño Información Diseño Presentación El diseño de información responde a la pregunta ¿Cómo es el producto? El diseño de interacción responde a ¿Cómo deberá funcionar? El diseño de presentación responde a ¿Cómo lucirá?

5 Desarrollo de proyectos WEB Dise ñ o WEB Dise ñ o de Interaccion Introducción La interacción de un producto informático significa que el usuario, no el diseñador, controla la secuencia, la velocidad y, lo más importante, qué ver y qué ignorar. Un buen diseño de interacción da poder al usuario de indicarle al computador lo que debe hacer y no al revés. La base de todo diseño de interacción parte de comprender lo que el usuario quiere hacer en un momento dado.

6 Desarrollo de proyectos WEB Tareas del Diseño de Interacción Crear un sistema de guía para orientar al usuario. Diseñar la nave- gación y las rutas de acceso a los contenidos. Definir lo que sucede en cada pantalla. Diseñar controles para la interacción. Crear un guión. Dise ñ o de Interaccion Dise ñ o WEB

7 Desarrollo de proyectos WEB Dise ñ o WEB Dise ñ o de Interaccion Tareas del Diseño de Interacción E n el proceso del diseño de la interacción implica convertir el diagrama de flujo elaborado en el diseño de información (que sólo muestra el contenido y la estructura) en un guión (que muestre las rutas y los controles).

8 Desarrollo de proyectos WEB Dise ñ o WEB Dise ñ o de Interaccion Tareas del Diseño de Interacción M otivar a los usuarios a tener la experiencia, dándole una guía clara y opciones de navegación. Esto significa: Crear un viaje interesante, o por lo menos una ruta clara a través de la información. Proveer al usuarios de los controles necesarios que le permitan ir de un sitio a otro. Hacer la experiencia tan fácil e intuitiva como sea posible.

9 Desarrollo de proyectos WEB Dise ñ o WEB Dise ñ o de Interaccion Tareas del Diseño de Interacción Considere: Pero debe tomar en cuanta: Que mientras más controles le ofrezca al usuario más complejo será el desarrollo del producto. Que los objetivos de diseño de interacción son claridad, sencillez y facilidad de uso. Un documento interactivo simple puede sólo necesitar controles básicos de navegación y medios. Un catálogo electrónico puede necesitar búsqueda en una base de datos y posibilidades de transacción. Un curso de formación médica quizás necesite algo más que controles, que otra apliacación.

10 Desarrollo de proyectos WEB Dise ñ o WEB Dise ñ o de Interaccion Un buen diseño de interacción Orientaciones: Orientaciones: Un libro tiene un índice, números de página, para orientar al lector, un sitio web no, por ello la importancia de ser lo más claro posible. No intente crear controles vistosos y originales, es más económico utilizar los ya establecidos. Tenga piedad: Tenga piedad: hay muchas cosas que el sitio web puede hacer por ellos, por ejemplo comprobar el tipo de navegador instalado (ver si soporta el sitio o no / resolver que hacer si no soporta la página), comprobar si hay un pluing instalado (que hacer si no lo está / ir a una descarga automática NO traumática).

11 Desarrollo de proyectos WEB Dise ñ o WEB Dise ñ o de Interaccion Un buen diseño de interacción Sea compasivo: Sea compasivo: trate de reducir el número y complejidad de las acciones del usuario, por ejemplo deje que el sitio web haga cosas por sí mismo (poner un vídeo, sonidos), a menos que su objetivo sea distinto a la mera reproducción. Reduzca el viaje: cree el camino más sencillo y corto entre dos puntos cualesquiera. Evite la redundancia: Evite la redundancia: crear caminos múltiples al mismo lugar desde la misma pantalla (crea confusión en cuanto al camino a elegir).

12 Sáquele provecho a los comportamientos de su editor, programándolos para que realicen operaciones que podrían confundir al usuario. Cuando utilice opciones gráficas como controles (imágenes como botones), coloque también opciones de modo texto. Cree una buena agrupación temática de sus contenidos, así reducirá la cantidad de niveles, y por ende de acciones. Utilizar una sola fuente de información. ¿Qué no hacer? Desarrollo de proyectos WEB ¿Qué hacer? Cree una página blanca, sin mucho estilo, sólo para imprimir. Antes de crear sus controles tome en cuenta las opciones disponibles en el navegador. Dise ñ o WEB Dise ñ o de interaccion

13 Utilizar una sola fuente de información. ¿Qué no hacer? Dise ñ o WEB Dise ñ o de interaccion Recargar la pantalla de controles. Incluir controles tipo icono que sólo usted sepa la asociación con la tarea que realizan. Colocar botones de avanzar y retroceder en lo contenidos, ya el navegador tiene esas opciones. Desarrollo de proyectos WEB ¿Qué no hacer? Colocar animaciones, videos o sonidos de introducción si una opción de saltar.

14 Desarrollo de proyectos WEBDiseño de Interaccion Dise ñ o WEB Extraído de: Ray, K y Amy, S. (1998). Diseño interactivo. España, Anaya Multimedia.