Upload
yayo-castaneda-sanchez
View
264
Download
0
Embed Size (px)
Citation preview
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