Embed Size (px)
Citation preview
Desarrollo de proyectos WEB
DiseñoDiseño de de
InInteteracraccioncion
Diseño WEBDiseño WEB
Extraído de: Ray, K y Amy, S. (1998). Diseño interactivo. España, Anaya Multimedia.
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.
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ñoInteracción
DiseñoInformación
DiseñoPresentación
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.
DiseñoInteracción
DiseñoInformación
DiseñoPresentació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á?
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.
Desarrollo de proyectos WEB
Tareas del Diseño de Interacción
Crear un sistema Crear un sistema de guía para de guía para
orientar orientar al usuario.al usuario.
Diseñar la nave-Diseñar la nave-gación y las rutas gación y las rutas de acceso a los de acceso a los
contenidos.contenidos.
Definir lo que Definir lo que sucede en cada sucede en cada
pantalla.pantalla.Diseñar controles Diseñar controles
para la para la interacción.interacción.Crear un guión.Crear un guión.
Diseño de InteraccionDiseño WEB
Desarrollo de proyectos WEB
Diseño WEB Diseño
de Interaccion
Tareas del Diseño de Interacción
En 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).
Desarrollo de proyectos WEB
Diseño WEB Diseño
de Interaccion
Tareas del Diseño de Interacción
Motivar 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.
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.
Desarrollo de proyectos WEB
Diseño WEB Diseño
de Interaccion
Un buen diseño de Un buen diseño de interaccióninteracció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).
Desarrollo de proyectos WEB
Diseño WEB Diseño
de Interaccion
Un buen diseño de Un buen diseño de interaccióninteracció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).
Sáquele provecho a los comportamientos de su editor <HTML>, 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
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.
Desarrollo de proyectos WEB
DiseñoDiseño de de
InInteteracraccioncion
Diseño WEBDiseño WEB
Extraído de: Ray, K y Amy, S. (1998). Diseño interactivo. España, Anaya Multimedia.
