Ingeniería del Software - · Desde este punto de vista, es posible apoyarse en el ... visual...
Transcript of Ingeniería del Software - · Desde este punto de vista, es posible apoyarse en el ... visual...
1
Ingeniería del SoftwareDiseñó de Interfaz de Usuario
Universidad de los AndesDemián GutierrezSeptiembre 2009
2
¿Interfaz de Usuario?
Desde el punto de vista de la Ingeniería de Software, la interfaz de usuario juega un papel en extremo
importante en el desarrollo y puesta en marcha de todo sistema
Es la carta de presentación del sistema y en ocasiones resulta determinante para la aceptación
o rechazo de todo un proyecto
En promedio, se estima que del 35% al 45% de los gastos destinados a un proyecto son direccionados
al diseño e implementación de la interfaz
3
¿Interfaz de Usuario?
La interfaz de usuario es el medio con que el usuario puede comunicarse con una máquina, un equipo o una computadora, y
comprende todos los puntos de
contacto entre el usuario y el equipo
Wikipedia
4
¿Interfaz de Usuario?
Involucra cualquier medio de interacción usuario computador: Todas las pantallas, menús, iconos, atajos de teclado, lenguajes de comando y ayuda en línea, así como
los dispositivos físicos tales como botones, diales, palancas, ratones, teclados, pantallas táctiles, controles
remotos, joysticks, game pads, guantes de datos, etcétera.
5
¿Interfaz de Usuario?
6
¿Interfaz de Usuario?
En algunos casos, la interfaz de usuario puede ser un instrumento muy poderoso para ayudar en la
captura y especificación de requerimientos
Es muy sencillo diseñar algunas pantallas, enseñárselas al usuario para que las evalúe y de esta manera aclarar dudas o confusiones en los
requerimientos
Desde este punto de vista, es posible apoyarse en el desarrollo de “prototipos” de IU para resolver problemas de requerimientos e inclusive
especificar parte del sistema
7
¿Interfaz de Usuario?
La idea fundamental en el concepto de interfaz es el de mediación, entre hombre y máquina. La interfaz es lo que "media", lo que facilita la comunicación, la
interacción, entre dos sistemas de diferente naturaleza, típicamente el ser humano y una
máquina como el computador.
Esto implica, además, que se trata de un sistema de traducción, ya que los dos "hablan" lenguajes
diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico.
8
¿Interfaz de Usuario?
El diseño de la interfaz de usuario es el proceso de determinar los distintos componentes, tanto de hardware
como de software, sus características y su disposición, que se utilizarán para interactuar con una serie de usuarios
determinados en un medio ambiente determinado
9
¿Por que es necesario haceruna buena Interfaz de Usuario?
A continuación se muestran algunos errores comunes de
interfaz de usuario...
10
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Son las etiquetas de los botones lo suficientemente
claras?
¿El botón de “detener” no está demasiado cerca del de “encendido”? ¿Es adecuado
un arreglo de botones en matriz?
11
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Será que hay muchos “tabs”?
12
¿Por que es necesario haceruna buena Interfaz de Usuario?
¡La misma funcionalidad anterior, pero mejorada!
13
¿Por que es necesario haceruna buena Interfaz de Usuario?
A)
B)
Tanto para A como para B, ¿Qué interfaz es mejor, la de la derecha o la de la izquierda?
14
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Cómo dice?
15
¿Por que es necesario haceruna buena Interfaz de Usuario?
La claridad en los mensajes de error y en la comunicación con el usuario es fundamental
Presione alguna tecla
para continuar
¡Evite laambigüedad!
16
¿Por que es necesario haceruna buena Interfaz de Usuario?
Provea al usuario con suficiente información...
...pero hable en un lenguaje que el usuario pueda comprender
Poca información
¿Qué? ¿Cómo?Escriba usando un lenguaje que el usuario pueda
entender
17
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Lea todo el mensaje de error...
18
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Dónde tengo que hacer click para descargar el archivo?
19
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Dónde tengo que hacer click para descargar el archivo?
20
¿Por que es necesario haceruna buena Interfaz de Usuario?
El uso de iconos excesivos puede impactar considerablemente la legibilidad
El programa no tiene la posibilidad de desactivar los emoticons
21
¿Por que es necesario haceruna buena Interfaz de Usuario?
¡Use los colores adecuados, dependiendo del caso!Este ejemplo en particular no usa colores adecuados para la
lectura
22
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Por qué es necesario paginar los resultados en una lista?
23
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Son estas transparencias lo suficientemente legibles?
¿Se puede leer el texto, se pueden ver bien las imágenes?
24
¿Por que es necesario haceruna buena Interfaz de Usuario?
Algunos afirman que el éxito comercial del iPod se ha debido en buena medida a un excelente diseño (y
evolución) de su Interfaz de usuario...
25
¿Por que es necesario haceruna buena Interfaz de Usuario?
26
Look & Feel (ver y sentir) versus funcionalidad...La interfaz de usuario es importante pero no lo es todo
¿Por que es necesario haceruna buena Interfaz de Usuario?
27
Factores Humanos
4 factores humanos fundamentales...
28
Factores Humanos
Memoria a corto plazo limitada: Las personas recuerdan usualmente a corto plazo 7 elementos de información. Si es necesario que memoricen más,
entonces se vuelven mas propensas a cometer errores
Las personas se equivocan: Esto es un hecho. Una respuesta adecuada (alarmas, confirmaciones,
colores, etcétera) puede hacer la diferencia entre una buena o una mala interfaz de usuario
...recordar que...
29
Factores Humanos
Recordar que un error mal manejado puede llevar a otro error...
y este puede llevar a otro y a otro, y así hasta llegar a un error
catastrófico
30
Factores Humanos
Las personas tienen preferencias diferentes: Algunas personas preferirán utilizar interfaces gráficas, otras usarán interfaces de linea de
comandos, etcétera
Las personas son diferentes: No todas las personas tienen las mismas capacidades o usaran el
sistema de la misma forma (Recordar caricatura anterior)
¿Factores ambientales o del entorno?
31
Principios de Diseño de IU
Familiaridad: La interfaz debe usar términos y conceptos familiares al usuario y al dominio de la
aplicación
Uniformidad: La interfaz debe ser uniforme, operaciones comparables deben funcionar de la
misma manera
Mínima Sorpresa: El comportamiento del sistema no debe provocar sorpresa al usuario. El sistema
debería comportarse de la forma más predecible posible
32
Principios de Diseño de IU
Guía de Usuario: Retroalimentación significativa y coherente al ocurrir errores y características de
ayuda sensibles al contexto
Diversidad de Usuarios: La interfaz debe estar orientada a todos los tipos de usuarios del sistema
(Novatos, expertos, daltónicos, discapacitados, etcétera)
Recuperabilidad: La interfaz debe permitir al usuario recuperarse de errores, o al menos, ayudarle
a evitarlos
33
Recomendaciones
Use el sentido común.Nada de lo que se dice en esta presentación es
“Rocket Science”.
Use software (No desarrollado por usted) y medite (sea consciente) de la forma en
que está hecha la Interfaz de usuario.
34
Recomendaciones
Use el software que desarrolle y haga críticas sobre la interfaz de usuario y
estudie la forma en que puede mejorarla para lograr un sistema más usable.
¡Debata sobre la IU! Con el programador de la oficina de al lado, con el jefe, con el
vecino, con sus usuarios, clientes, etcétera.
35
¡Debate!
¿Debe ser igual la interfaz de usuario de un cajero, la del
gerente y la del contador de un supermercado?
¿En que se diferencian?
36
Interacción del Usuario
Manipulación Directa: El usuario interactúa directamente con los objetos en la pantalla
Selección de Menús: El usuario selecciona un comando de una lista de posibilidades (menú).
Rellenado de Formularios: El usuario rellena campos de un formulario (Similar a cuando se rellena
una planilla en papel)
37
Interacción del Usuario
Lenguaje Natural: El usuario escribe / habla en lenguaje natural (emite un comando) y el sistema interpreta la solicitud, la analiza y la traduce a
comandos del sistema (¿Ha visto usted Star Trek (Viaje a las Estrellas) u Odisea del Espacio 2001? ¿Sabe usted quién o
qué es HAL 9000?)
Lenguajes de Comandos: Similar al Shell de linux o de MS-DOS, el usuario escribe comandos y el
sistema los ejecuta
38
Interacción del Usuario
Es importante escoger el estilo de interacción adecuado según las necesidades y el contexto.
¿Se imaginan un “Counter Strike” con una interfaz de “consola de comandos”?
¿Y un procesador de texto con una interfaz puramente de arrastrar y soltar?
39
Interacción del Usuario
Interactionstyle
Main advantages Main disadvantages Applicationexamples
Directmanipulation
Fast and intuitiveinteractionEasy to learn
May be hard to implement.Only suitable where there is avisual metaphor for tasks andobjects.
Video gamesCAD systems
Menuselection
Avoids user errorLittle typing required
Slow for experienced users.Can become complex if manymenu options.
Most generalpurpose systems
Form fillin Simple data entryEasy to learnCheckable
Takes up a lot of screen space.Causes problems where useroptions do not match the formfields.
Stock control,Personal loanprocessing
Commandlanguage
Powerful and flexible Hard to learn.Poor error management.
Operating systems,Command andcontrol systems
Naturallanguage
Accessible to casualusersEasily extended
Requires more typing.Natural language understandingsystems are unreliable.
Informationretrieval systems
40
Un poco de Arquitectura y UI . . .
Arquitectura a 3 capas
Presentación(IU)
(HTML)
Capa de Proceso / Negocio
(Lógica / Reglas de Negocio)
(Universal /Independiente
de la IU)
Capa de Persistencia
BD
Presentación(IU)
(QT / GTK)
Presentación(IU)
(Excel)
Cajero
Gerente
Contador
Internet / WAN / LANu otro medio
41
Un poco de Arquitectura y UI . . .
Sistema Operativo Linux
ComandosDel Sistema Operativo
Gestor de VentanasX-Windows
Ambiente deEscritorio
(Gnome / KDE / Otro)
Intérprete de Comandos
(sh / bash / csh / ksh)
Usuario Ocasional Usuario Avanzado
42
Un poco de Arquitectura y UI . . .
TODO:¿UI y patrones de diseño?
¿UI y arquitecturas orientadas a eventos?¿Código?
No, esto es mejor ponerlo en la parte de codificación de
software
43
Procesos de Diseño de UI(Pasos elementales para diseñar UI)
Reunir y analizar la información del usuario: Análisis de tareas, estudios etnográficos, entrevistas,
observaciones, o un conjunto de todas estas técnicas.
Diseñar la interfaz de usuario: Herramientas de desarrollo rápidas (Editores de GUI), HTML, en papel.
Validar la interfaz de usuario: Entrevistas, observaciones, prototipos, etcétera. Repetir los tres
pasos anteriores en caso de ser necesario
Construir la interfaz de usuario: En base al diseño, o desarrollando prototipos evolutivos, desechables.
44
Procesos de Diseño de UI(Pasos elementales para diseñar UI)
Es posible diseñar interfaz de usuario
simplemente usando lápiz y
papel y haciendo un bosquejo.
O se pueden utilizar
herramientas mas sofisticadas:
Editores de IU, HTML, etcétera
45
Ejemplo.. .
Se puede usar una herramienta de dibujo para diseñar IU
(Ej: sdraw de OpenOffice, MS Visio u otra similar)
¿Qué errores puede usted encontrar en esta pantalla?
46
Procesos de Diseño de UI(Ejemplos)
47
Procesos de Diseño de UI(Ejemplos)
Analizar ycomprender
las actividadesdel usuario
Realizar el Diseñodel prototipo
en papel
Evaluar el diseñocon los usuarios
finales
Realizar diseñodinámico del
prototipo
Evaluar el diseñocon los usuarios
finales
Implementarla interfaz de
usuario definitiva
Diseño delprototipo
Prototipoejecutable
Modelo Basado en Prototipos(Sommerville)
48
Procesos de Diseño de UI(Ejemplos)
Identificar lanecesidad de diseñar la IHC
El producto de software satisface los requisitos
especificados
Precisar el contexto de uso
Especificar los requisitos
Crear perfiles de usuarios
Estudiar elambiente de trabajo
Determinar elementosde hardware y software
Determinar la funcionalidad delsistema
Evaluar el diseño
Modelo para el Diseño de laInteracción Humano-
Computadora (MODIHC)
(Flor Narciso1998)
49
Navegación de la IU
Hasta ahora, la gran mayoría de los problemas de interfaz de usuario resaltados corresponden
generalmente de forma aislada sólo a una pantalla o interfaz de la aplicación
¿Qué hay sobre la manera en que interactúan las distintas pantallas de la aplicación entre si?
La navegación es tan importante como el diseño individual de las pantallas
50
Grafo de Navegación
Grafo (Mapa) de Navegación: Permite ver la secuencia lógica de pantallas y acciones por las que
tiene que pasar el usuario para realizar una tarea determinada
Entrar alSistema
ListarBancos
RegistrarInversión
ConfirmarDatosImprimir
Plantilla
PantallaPrincipal
CrearBanco Editar
Banco
EliminarBanco
51
Grafo de Navegación
Entrar alSistema(login)
ListarBancos
RegistrarInversión
ConfirmarDatos
ImprimirPlantilla
PantallaPrincipal
CrearBanco
EditarBanco
EliminarBanco
listarbancos
registrar inversión
cancelar
regresarregresarcancelar
sigu
ient
e
eliminar
editar
crear
sigu
ient
e
Aquí si puede expresar
secuencia(a diferencia de en los casos de
uso)
52
Grafo de Navegación(Por ejemplo un CRUD / Opción A)
ListarBancos
PantallaPrincipal
CrearBanco
EditarBanco
EliminarBanco
MENU:listar
bancos
regresar
MENU:crearbanco
MENU:editarbanco
MENU:eliminarbanco
regresarMENU:Crear BancoEditar BancoEliminar BancoListar Bancos...Otras Opciones
MENU:Banco >>...Otras Opciones
CrearEditarEliminarListar
¿Cómo serían las pantallas de la
derecha?
53
Grafo de Navegación(Por ejemplo un CRUD / Opción B)
cancelarListarBancos
PantallaPrincipal
CrearBanco
EditarBanco
EliminarBanco
MENU:listar
bancos eliminar
editar
regresar
MENU:crearbanco
MENU:Crear BancoListar Bancos...Otras Opciones
MENU:Banco >>...Otras Opciones
CrearListar
¿Cómo serían las pantallas de la
derecha?
54
Grafo de Navegación(Por ejemplo un CRUD / Opción C)
ListarBancos
PantallaPrincipal
CrearBanco
EditarBanco
EliminarBanco
MENU:listar
bancos
cancelar
eliminar
editar
crear
regresar
MENU:Bancos...Otras Opciones
O bien “Listar Bancos” o
“Administrar Bancos”
¿Cómo serían las pantallas de la
derecha?
55
Ejemplo de una mala navegación:
Visual Paradigm for UML, edición de los valores de los
atributos de un objeto...
Navegación de la IU
56
Mostrar algunos problemas de navegación del libro
GUI Bloopers
Navegación de la IU
57
En resumen: Piense bien y defina como va a ser la
navegación entre las distintas pantallas de la
aplicación
Navegación de la IU
58
Pautas de Diseño de IU(Diseño Visual)
La intención del Diseño Visual no es que las aplicaciones se vean “bonitas”. Un buen Diseño Visual
esta centrado en la comunicación.
La información visual es, específicamente, un complemento del diseño estructural de una aplicación
Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez
Es buena idea buscar expertos en el área de diseño gráfico para diseñar adecuadamente las pantallas,
seleccionar colores, matices, contrastes, paletas, etcétera
59
Aplique un conjunto limitado de colores:
Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Los colores apagados, sutiles y complementarios suelen ser los más apropiados en el diseño de interfaces en
aplicaciones de corte empresarial y académicas (andragogía)
Los colores primarios, cálidos sin tender a “carnavalizar” la interfaz se recomiendan generalmente en caso de que la
audiencia sean niños
En general debe diseñarse la interfaz en función de los intereses de la audiencia: edad, cultura, conocimientos y
conductas previas, etcétera
60
Los usuarios con desordenes visuales (ceguera nocturna, o baja visión nocturna, daltonismo,
deuteranopia, protanopia, tritanopia) requieren alternativas para la asignación de colores por defecto
de una aplicación
Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Una buena Interfaz de Usuario se anticipa a estas necesidades, proporcionando una opción para la personalización de las preferencias del color
Aun mejor si la aplicación ya esta configurada con una cuidadosa selección de color y contraste por
defecto
61
Se estima que un 11% de la población mundial tiene algún desorden de ceguera nocturna, o baja visión
nocturna, daltonismo, deuteranopia, protanopia, tritanopia, etcétera...
Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
...es muy probable que alguien en este curso tenga algún problema de visión de este tipo...
62Foto Original
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
63Como lo ve una persona con deuteranopia
transformación cortesía de http://www.vischeck.com/
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
64Como lo ve una persona con protanopia
transformación cortesía de http://www.vischeck.com/
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
65Como lo ve una persona con tritanopia
transformación cortesía de http://www.vischeck.com/
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
66
El color debe ser considerado como una herramienta adicional en el diseño, no una necesidad básica
Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernández
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
No dependa de colores para mostrar información importante, recuerde que si los colores no son
correctamente percibidos (en casos de que el usuario tenga sistemas de poca resolución o posea algún
impedimento visual leve), su aplicación debe continuar siendo usable
67
El color es una forma de información secundaria: Evite confiar en el color como único medio de informar
una condición o valor
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Presión deRefrigerante
Temperaturadel Núcleo
Imagine usted un panel de control de una central nuclear con los siguientes indicadores:
68
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Deuteranopia(Rojo/Verde)
Protanopia(Rojo/Verde)
Tritanopia(Azul/Amarillo)
69
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
The mechanical failures were compounded by the initial failure of plant operators to recognize the situation as a loss of coolant accident due to inadequate training and human
factors industrial design errors relating to ambiguous control room indicators in the power plant's user interface.
The Three Mile Island accident was a partial core meltdown in Unit 2 (a pressurized water reactor manufactured by Babcock & Wilcox) of the Three Mile Island Nuclear
Generating Station in Dauphin County, Pennsylvania near Harrisburg. It was the most significant accident in the history of the American commercial nuclear power generating industry, resulting in the release of up to 481 PBq (13 million curies) of radioactive gases, but less than 740 GBq (20 curies) of the particularly dangerous
iodine-131.
Fuente: http://en.wikipedia.org/wiki/Three_Mile_Island_accident
70
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Mucho mejor de la siguiente forma:
Presión deRefrigerante
PELIGRO NORMAL
Temperaturadel Núcleo
NORMAL PELIGRO
¡PELIGRO!
71
Utilice un contraste adecuado entre el color del texto y el color de fondo
Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Esto casi no se puede leer... (Poco contraste)
Esto cansa la vista...
Esto también cansa la vista...
Hay usuarios que NECESITAN alto contraste
Hay usuarios que NECESITAN alto contraste
72
!No torture a sus usuarios con combinaciones de
colores tortuosas o poco adecuadas!
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
73
La galería del Horror de la Interfaz de Usuario
74
La galería del Horror de la Interfaz de Usuario
Un problema de navegación, al exportar(ver siguiente transparencia)
75
La galería del Horror de la Interfaz de Usuario
Un problema de navegación, al exportar(recordar valores por defecto)
76
La galería del Horror de la Interfaz de Usuario
Por tratar de introducir publicidad o mejorar el “caramelo visual” se entorpece la labor del usuario
http://www.movilnet.com.ve
No es un formulario, es una imagen, que cuando le hacen click...
77
La galería del Horror de la Interfaz de Usuario
Por tratar de introducir publicidad o mejorar el “caramelo visual” se entorpece la labor del usuario
http://www.movilnet.com.ve
No es un formulario, es una imagen, que cuando le hacen click...
78
La galería del Horror de la Interfaz de Usuario
El texto lo dice todo...
¿Dónde está el botón para cancelar?
79
La galería del Horror de la Interfaz de Usuario
¿Uh?
80
La galería del Horror de la Interfaz de Usuario
¿Este dialogo se entiende?
¿Donde está el botón de cancelar?
81
La galería del Horror de la Interfaz de Usuario
Cuidado con el texto utilizado... puede ser confuso o ambiguo...
82
La galería del Horror de la Interfaz de Usuario
¿Se entiende? (checkboxes de arriba y checks de abajo)
83
La galería del Horror de la Interfaz de Usuario
Do not logout...
84
La galería del Horror de la Interfaz de Usuario
Escriba bien...
85
Lecturas Recomendadas
Jeff Johnson
GUI Bloopers 2.0(Common User Interface Design Don'ts and Dos
Morgan Kaufmann
2nd Edition
86
Diseño Arquitectónico
http://interfacemindbraincomputer.wetpaint.com/page/2.A.1.0.-+Ejemplos+de+Interacci%C3%B3n+Humano+Maquina
Ian Sommerville,Ingeniería de Software Addison-Wesley 6da.
Edición
(Capítulo 16 Diseño de Interfaces de Usuario)
87
Gracias
¡Gracias!