3.3 diseño de interfaz de usuario

Post on 10-Jul-2015

266 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 1/44

 

4/27/12

3.3 Diseño de interfaz deusuario

Integrantes:Castañeda Sánchez

Mariano JairRomero de Luis Anahí Rodríguez Cerda

Francisco JavierSoto Muñoz J. Carlos Teutle Teutle Francisco Javier

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 2/44

 

4/27/12

El diseño de interfaces de usuario es una tareaque ha adquirido relevancia en el desarrollo deun sistema.Éxito o fracaso.La IU conjunto Hardware y software quepresentan información al usuario y permiteninteractuar.

Documentación.

Diseño de interfaz deusuario

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 3/44

 

4/27/12

Visión personal del sistema.Entrevistas, test de usabilidad.

Modelo del usuario

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 4/44

 

4/27/12

Intermediario.Mezcla necesidades, ideas, deseos con losmateriales disponibles del programador.

Modelo del diseñador

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 5/44

 

4/27/12

Fácil de visualizarporque puede serespecificadoformalmente y está

compuesto por losobjetos que manipula elprogramador.Muchos no consideran elmodelo del usuario delprograma, y sí suspropias expectativasacerca de cómo trabajarcon la computadora.

Modelo del programador

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 6/44

 

Haga clic para modificar el estilo de subtítulo delpatrón

4/27/12

Principios para el diseño

de interfaces de usuario

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 7/444/27/12

Anticiparse a las necesidades del usuario

Anticipación

Figura 2. Ejemplo de características anticipadas

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 8/444/27/12

La computadora, la IU y el entorno de trabajodeben estar a disposición del usuario.

Autonomía…

Figura 3. Ejemplo de ambiente complejo

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 9/444/27/12

…Autonomía

Figura 4. Ejemplo de información de estado inadecuada

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 10/444/27/12

Percepción del Color…

Aunque se utilicen convenciones de color en laIU, se deberían usar otros mecanismossecundarios para proveer la información aaquellos usuarios con problemas en la

visualización de colores

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 11/444/27/12

…Percepción del color

En la Figura se representa un mecanismosecundario muy utilizado para ejecución decomandos: los comandos abreviados (shortcut-keys).

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 12/444/27/12

Valores por defecto

No se debe utilizar la palabra “Defecto” enuna aplicación o servicio. Puede serreemplazada por “Estándar” o “Definida por elUsuario”, “Restaurar Valores Iniciales” o algún

otro término especifico que describa lo queestá sucediendo.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 13/444/27/12

Eficiencia del usuario…

Se debe considerar la productividad delusuario antes que la productividad de lamáquina. Si el usuario debe esperar larespuesta del sistema por un período

prolongado, estas pérdidas de tiempo sepueden convertir en pérdidas económicas parala organización..

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 14/444/27/12

… Eficiencia del usuario…

Los mensajes de ayuda deben ser sencillos yproveer respuestas a los problemas. Losmenús y etiquetas de botones deberían tenerlas palabras claves del proceso

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 15/44

4/27/12

…Eficiencia del usuario

En la Figura se demuestra como unaincorrecta definición de las palabras clave delas etiquetas de los botones de comandopuede confundir al usuario.

Figura 7. Ejemplo de definición incorrecta de botones de acción

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 16/44

4/27/12

Interfaces explorables…

Siempre que sea posible se debe permitirque el usuario pueda salir ágilmente de la IU,dejando una marca del estado de avance desu trabajo, para que pueda continuarlo en otra

oportunidad. La IU debe poder realizar lainversa de cualquier acción que pueda llegar aser de riesgo, de esta forma se apoya alusuario a explorar el sistema sin temores.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 17/44

4/27/12

…Interfaces explorables…

Siempre se debe contar con un comando“Deshacer”. Este suprimirá la necesidad detener que contar con diálogos de confirmaciónpara cada acción que realice en sistema.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 18/44

4/27/12

…Interfaces explorables

El usuario debe sentirse seguro de poder salirdel sistema cuando lo desee. Es por ello que laIU debe tener un objeto fácil de accionar con elcual puede finalizar la aplicación.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 19/44

Haga clic para modificar el estilo de subtítulo delpatrón

4/27/12

Objetos de InterfazHumana.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 20/44

4/27/12

Estos pueden ser vistos, escuchados,tocados o percibidos de alguna forma.Además, estos objetos deberían serentendibles, consistentes y estables.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 21/44

4/27/12

Figura 9. Ejemplo de barras de controles

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 22/44

4/27/12

Protección del Trabajo

Se debe poder asegurar queel usuario nunca pierda su

trabajo, ya sea por error desu parte, problemas detransmisión de datos, de

energía, o alguna otra razóninevitable.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 23/44

4/27/12

Auditoría del SistemaEs conveniente conocer unconjunto de características propiasde sistema

◦ hora de acceso al sistema,◦ ubicación del usuario en el sistema◦ lugares a los que ha accedido,◦ entre otros

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 24/44

4/27/12

Interfaces Visibles.

La navegación en las aplicaciones debe serreducida a la mínima expresión.

El usuario debe sentir que se mantiene en unúnico lugar y que el que va variando es sutrabajo.

  

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 25/44

Haga clic para modificar el estilo de subtítulo delpatrón

4/27/12

Utilización dePrototipos en la

Implementación de IU

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 26/44

4/27/12

Prototipo

Un prototipo se puede definir como unaaplicación, creada en forma rápida yeconómica.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 27/44

4/27/12

Características

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 28/44

4/27/12

Clasificación de Prototipos

Variando su grado de complejidad, deacuerdo a las características queconsideren y a su operabilidad pararealizar simulaciones.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 29/44

4/27/12 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 30/44

4/27/12

Son aquellos que no permiten laalteración de sus componentes, pero

sirven para identificar y resolverproblemas de diseño.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 31/44

4/27/12

Permiten la evaluación de un

modelo del sistema sobre unaestación de trabajo o una terminal.Estos prototipos involucran aspectosde diseño mas detallados que los

prototipos estáticos. Como porejemplo de performance(rendimiento).

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 32/44

4/27/12

Deben ser relativamente completosen la simulación de las característicasdinámicas de la interfaz.

La simulación es la representación de un proceso de una forma simplede forma entendible 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 33/44

4/27/12

  La información recolectada durante lastareas de análisis del sistema y laespecificación de los requisitos del usuarioconstituyen los datos clave para el

proceso de prototipación.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 34/44

4/27/12  

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 35/44

Haga clic para modificar el estilo de subtítulo delpatrón

4/27/12

HEURÍSTICAS PARA LAEVALUACIÓN DE IU

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 36/44

4/27/12

HEURÍSTICA

Es la capacidad que ostenta un sistema

determinado para realizar de manerainmediata innovaciones positivas para sí mismo y sus propósitos.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 37/44

4/27/12

USABILIDAD

La usabilidad se refiere a la capacidad deun software de ser comprendido,aprendido, usado y ser atractivo para elusuario, en condiciones específicas de

uso. (ISO /IEC 9126)

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 38/44

4/27/12

EVALUACIÓN HEURÍSTICA…

Es una técnica de análisis de usabilidadrealizada por evaluadores especializados apartir de principios establecidos por ladisciplina de la IPO/HCI.

ü Eficaciaü Relativa rapidez

de utilizaciónü Facilidad de uso.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 39/44

4/27/12

…EVALUACIÓN HEURÍSTICA

Se ha detectado que una evaluaciónheurística, detecta aproximadamente el42% de los problemas graves de diseño yde usabilidad y el 32% de los problemas

menores dependiendo del numero deevaluadores especializados.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 40/44

4/27/12

TEST DE USUARIOS

Complemento a la evaluaciónheurística, el cuál no tienen ningúnsentido si antes los expertos enusabilidad no han realizado su trabajo.

 

PAUTAS PARA EVALUAR

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 41/44

4/27/12

PAUTAS PARA EVALUARUNA IU…

Estas son según JakobNielsen, las 10 reglas másimportantes para evaluar lausabilidad de una IU:

  

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 42/44

4/27/12

8. Estética y diseño minimalista.

9. Reconocimiento de errores,diagnóstico y recuperación.

10. Ayuda y documentación.

4. Consistencia y estandarización.

 

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 43/44

4/27/12

PROBLEMAS EN EL USO DEINTERFACES

Factores que determinan el grado de unproblema:

 

PROBLEMAS EN EL USO DE

5/10/2018 3.3 Diseño de interfaz de usuario - slidepdf.com

http://slidepdf.com/reader/full/33-diseno-de-interfaz-de-usuario 44/44

Medidas de severidad:

PROBLEMAS EN EL USO DEINTERFACES

top related