Diseño de Interfaz

79
SISTEMAS DE SISTEMAS DE INFORMACION 2 INFORMACION 2 TEMA 2.5. DISEÑO DE INTERFAZ TEMA 2.5. DISEÑO DE INTERFAZ ING. ROSA IMELDA GARCIA CHI ING. ROSA IMELDA GARCIA CHI

description

diseño de interfaz de software en el diseño o desarrollo de software

Transcript of Diseño de Interfaz

Page 1: Diseño de Interfaz

SISTEMAS DE SISTEMAS DE INFORMACION 2INFORMACION 2

TEMA 2.5. DISEÑO DE INTERFAZTEMA 2.5. DISEÑO DE INTERFAZ

ING. ROSA IMELDA GARCIA CHIING. ROSA IMELDA GARCIA CHI

Page 2: Diseño de Interfaz

¿Qué es una Interfaz de usuario?

Es la que permite establecer la comunicación entre el usuario y la computadora.

Permite la comunicación en lenguaje natural entre la tecnología y el ser humano.

Se le conoce como IU Las interfaz de usuario pueden ser

CUICUI GUIGUI NUINUI

Page 3: Diseño de Interfaz

¿Qué es el diseño de Interfaz de usuario?

El diseño de la interfaz de usuario es la categoría de diseño que crea un medio de comunicación entre el hombre y la máquina.

Con un conjunto de principios para el diseño de la interfaz, el diseño identifica y crea entonces un formato de pantalla que formará la base del prototipo de interfaz de usuario.

Page 4: Diseño de Interfaz

¿Por qué es importante el diseño de interfaz de usuario?

Como la interfazinterfaz es la que da forma a la percepción del software

por parte del usuario, tiene que estar bien diseñada.

La interfaz es lo que va a ver el usuario para entender el sistema

que va utilizar.

Page 5: Diseño de Interfaz

¿Cuáles son los pasos para el diseño de interfaz? El diseño de la interfaz de usuario comienza

con la identificación de los requisitos del usuario, de la tarea y del entorno.

Una vez identificadas las tareas, se crean y se analizan los escenarios del usuario para definir el conjunto de objetos y de acciones de la interfaz.

Page 6: Diseño de Interfaz

… pasos

Esto es lo que forma la base para la creación del formato de la pantalla que representa el diseño gráfico diseño gráfico y la colocación de iconosiconos, la definición del texto descriptivo en pantalla, la especificación y títulos de las ventanas, la especificación de los elementos principales y secundarios del menú.

Las herramientasherramientas se utilizan para generar prototipos y por último implementar el modelo modelo de diseñode diseño y evaluar la calidad del resultado.

Page 7: Diseño de Interfaz

¿Qué se obtiene en el diseño de la interfaz de usuario?

Page 8: Diseño de Interfaz

El diseño de la interfaz se centra en tres áreas de interés:

Page 9: Diseño de Interfaz

Ben Shneiderman

Es uno de los gurús del diseño de interfaces hombre máquina, denominado IHC

en inglés:

Computer Human Interface (CHI)Computer Human Interface (CHI)

Page 10: Diseño de Interfaz

Ben Shneiderman habla sobre esta categoría de diseño en el prólogo de su libro y afirma:

Page 11: Diseño de Interfaz

Los problemas a los que alude Shneiderman son reales. Es cierto que las interfaces gráficas, ventanas,

iconos y selecciones mediante ratón han eliminado muchos de los terribles problemas con la interfaz.

Pero incluso en un «mundo de ventanas» todos encontramos interfaces de usuario difíciles de aprender, difíciles de utilizar, confusas, imperdonables y en muchos casos totalmente frustrantes.

Sin embargo, hay quien dedica tiempo y energías construyendo estas interfaces, y es posible que estos problemas no los crearan a propósito.

Page 12: Diseño de Interfaz

Theo Mantel en su libro crea tres «reglas de oro» para el diseño de la interfaz:

Page 13: Diseño de Interfaz

Reglas de oroReglas de oro

Estas reglas de oro forman en realidad la base para los principios del diseño de

la interfaz de usuario que servirán de guía para esta actividad de diseño de

software tan importante.

Page 14: Diseño de Interfaz

Dar el control al usuario

Page 15: Diseño de Interfaz

La respuesta del usuario:

Page 16: Diseño de Interfaz

¿Cómo ?!!!!!

La primera reacción es mover la cabeza y sonreír, y hacer una pausa por unos instantes.

No hay nada malo en la solicitud del usuario. Lo que quería era que un sistema reaccionara ante

sus necesidades y que le ayudara a hacer las cosas. Quería controlar la computadora, y no dejar que la

computadora le controlara.

Page 17: Diseño de Interfaz

Diseño de una interfaz

Page 18: Diseño de Interfaz

Principios de diseño que permiten dar control al usuario definidas por MANDEL:

Definir los modos de interacción de manera que no obligue a que el usuario realice acciones innecesarias y no deseadas.

Tener en consideración una interacción flexible Permitir que la interacción del usuario se pueda

interrumpir y deshacer. Aligerar la interacción a medida que avanza el nivel

de conocimiento y permitir personalizar la interacción.

Diseñar la interacción directa con los objetos que aparecen en la pantalla.

Page 19: Diseño de Interfaz

Reducir la carga de memoria del usuario

Page 20: Diseño de Interfaz

…Reducir la carga de memoria del usuario

Page 21: Diseño de Interfaz

Mandel define los principios de diseño que hacen posible que una interfaz reduzca la carga de memoria del usuario:

Page 22: Diseño de Interfaz

Construcción de una interfaz consistente

Mandel [MAN97] define un conjunto de principios de diseño que ayudar a construir una interfaz consecuente:

Mantener la consistencia en toda la familia de aplicaciones.

Los modelos interactivos anteriores han esperanzado al usuario, no realicemos cambios a menos que exista alguna razón convincente para hacerlo.

Page 23: Diseño de Interfaz

La interfaz deberá adquirir y presentar la información de forma consecuente.

Page 24: Diseño de Interfaz

Modelos de diseño de la interfaz

Page 25: Diseño de Interfaz

Los modelos difieren…

Page 26: Diseño de Interfaz

Modelo de diseño

Page 27: Diseño de Interfaz

Modelo de usuario

Page 28: Diseño de Interfaz

Además de esto se pueden establecerlas siguientes categorías de usuarios:

Page 29: Diseño de Interfaz

… categorías de usuarios

Page 30: Diseño de Interfaz

… categorías de usuarios

Page 31: Diseño de Interfaz

Modelo de usuario

Page 32: Diseño de Interfaz

… Modelo de usuario

Page 33: Diseño de Interfaz

Modelo de usuario

Page 34: Diseño de Interfaz
Page 35: Diseño de Interfaz

Proceso de diseñoProceso de diseño

Page 36: Diseño de Interfaz
Page 37: Diseño de Interfaz

Modelo de diseño de interfaz

Page 38: Diseño de Interfaz

Análisis para el diseño de la interfaz

Page 39: Diseño de Interfaz

Análisis del entorno de usuarios

El análisis del entorno de usuario se centra en el entorno del trabajo físico.

Entre las preguntas que se formulan se encuentran las siguientes:

¿Dónde se ubicará físicamente la interfaz? ¿Dónde se situará el usuario? ¿Llevará a cabo tareas no relacionadas con el

interfaz? ¿Se adapta bien el hardware a las limitaciones

de luz, espacio o ruido?

Page 40: Diseño de Interfaz

Entorno del usuarioEntorno del usuario

Page 41: Diseño de Interfaz

Objetivo del diseño de la interfaz

Page 42: Diseño de Interfaz

Actividad de implementaciónActividad de implementación

Page 43: Diseño de Interfaz

La validación se centra en: La validación se centra en:

Page 44: Diseño de Interfaz

Primeros pasosPrimeros pasosdel diseño de la interfazdel diseño de la interfaz

Page 45: Diseño de Interfaz

Primeros pasosdel diseño de la interfaz

Page 46: Diseño de Interfaz

Primeros pasosdel diseño de la interfaz

Page 47: Diseño de Interfaz

Definición de objetos y accionesDefinición de objetos y acciones

Page 48: Diseño de Interfaz

… … Definición de objeto y accionesDefinición de objeto y acciones

Page 49: Diseño de Interfaz

…Definición de objetos y acciones

Page 50: Diseño de Interfaz

…Definición de objetos y acciones

Page 51: Diseño de Interfaz

Problemas del diseñoProblemas del diseño

A medida que la interfaz de usuario va evolucionando casi siempre afloran cuatro temas comunes de diseño:

el tiempo de respuesta del sistema, los servicios de ayuda al usuario, la manipulación de información de errores y el etiquetado de órdenes.

Page 52: Diseño de Interfaz

…Problemas del diseño

Page 53: Diseño de Interfaz

…Problemas del diseño

Page 54: Diseño de Interfaz

…Problemas del diseño

Page 55: Diseño de Interfaz

El tiempo de respuesta del sistema tiene dos características importantes:

Page 56: Diseño de Interfaz
Page 57: Diseño de Interfaz

La variabilidad…

Page 58: Diseño de Interfaz

Casi todos los usuarios de un sistema interactivo basado en computadora requieren ayuda, ahora y siempre.

Los dos tipos de funciones de ayuda más comunes son:

integradas y complementarias (añadibles).integradas y complementarias (añadibles).

Page 59: Diseño de Interfaz
Page 60: Diseño de Interfaz
Page 61: Diseño de Interfaz

Temas de diseño:

Cuando se va a considerar un servicio de ayuda hay una serie de

temas de diseño que deberán abordarse

Page 62: Diseño de Interfaz

Temas de diseño a considerarse

Page 63: Diseño de Interfaz

Temas de diseño a considerarse

Page 64: Diseño de Interfaz

Temas de diseño a considerarse

Page 65: Diseño de Interfaz

Temas de diseño a considerarse

Page 66: Diseño de Interfaz

Temas de diseño a considerarse

Page 67: Diseño de Interfaz

Herramientas de implementación

Page 68: Diseño de Interfaz

…Herramientas de implementación

Page 69: Diseño de Interfaz

..herramientas

Page 70: Diseño de Interfaz

…Herramientas de implementación

Page 71: Diseño de Interfaz

…Herramientas de implementación

Page 72: Diseño de Interfaz

…Herramientas de implementación

Page 73: Diseño de Interfaz

…Herramientas de implementación

Page 74: Diseño de Interfaz

Evaluación del diseño

Page 75: Diseño de Interfaz
Page 76: Diseño de Interfaz

Evaluación del diseño de interfaz

Page 77: Diseño de Interfaz

Las preguntas pueden ser

(1) del tipo de respuesta si/no;

(2) Respuesta numérica;

(3) respuesta con escala de valoración (subjetiva),

o

(4) respuesta por porcentajes (subjetiva).

A continuación se muestran unos ejemplos:

Page 78: Diseño de Interfaz

Evaluación del diseño

1. ¿Eran claros los iconos? En caso negativo, ¿Qué íconos no eran claros?

2. ¿Eran fáciles de recordar y de invocar las acciones?

3. ¿Cuántas acciones diferentes ha utilizado?

4. ¿Resultaron fáciles de aprender las operaciones básicas del sistema? (valoración de 1 a 5)

5. En comparación con otras interfaces que haya utilizado ¿cómo evaluaría esta?

el 1 % mejores, 10% mejores, 25% mejores, 50% mejores, 50% inferiores.

Page 79: Diseño de Interfaz

Gracias por su atención….