Clase 04 diseno_ui

1
Ingeniería del Software
Diseñó de Interfaz de Usuario
Universidad de los Andes
Demián Gutierrez
Septiembre 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
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
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.

6
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
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
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 hacer
una buena Interfaz de Usuario?
A continuación se muestran
algunos errores comunes de
interfaz de usuario...

10
¿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
¿Será que hay muchos “tabs”?

12
¡La misma funcionalidad anterior, pero mejorada!

13
A)
B)
Tanto para A como para B, ¿Qué interfaz es mejor, la de la
derecha o la de la izquierda?

14
¿Cómo dice?

15
La claridad en los mensajes de error y en la comunicación con
el usuario es fundamental
Presione
alguna tecla
para continuar
¡Evite la
ambigüedad!

16
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
¿Dónde tengo que hacer click para descargar el archivo?

19
¿Dónde tengo que hacer click para descargar el archivo?

20
El uso de iconos excesivos puede impactar
considerablemente la legibilidad
El programa no tiene la posibilidad de desactivar los
emoticons

21
¡Use los colores adecuados, dependiendo del caso!
Este ejemplo en particular no usa colores adecuados para la
lectura

22
¿Por qué es necesario paginar
los resultados en una lista?

23
¿Son estas transparencias lo
suficientemente legibles?
¿Se puede leer el texto, se
pueden ver bien las imágenes?

24
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

26
Look & Feel (ver y sentir) versus funcionalidad...
La interfaz de usuario es importante pero no lo es todo

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?
¿Nuevas tendencias?

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
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
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
Interaction
style
Main advantages Main disadvantages Application
examples
Direct
manipulation
Fast and intuitive
interaction
Easy to learn
May be hard to implement.
Only suitable where there is a
visual metaphor for tasks and
objects.
Video games
CAD systems
Menu
selection
Avoids user error
Little typing required
Slow for experienced users.
Can become complex if many
menu options.
Most general-
purpose systems
Form fill-in Simple data entry
Easy to learn
Checkable
Takes up a lot of screen space.
Causes problems where user
options do not match the form
fields.
Stock control,
Personal loan
processing
Command
language
Powerful and flexible Hard to learn.
Poor error management.
Operating systems,
Command and
control systems
Natural
language
Accessible to casual
users
Easily extended
Requires more typing.
Natural language understanding
systems are unreliable.
Information
retrieval 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 / LAN
u otro medio

41
Un poco de Arquitectura y UI...
Sistema Operativo Linux
Comandos
Del Sistema
Operativo
Gestor de Ventanas
X-Windows
Ambiente de
Escritorio
(Gnome / KDE / Otro)
Intérprete de
Comandos
(sh / bash / csh / ksh)
Usuario Ocasional Usuario Avanzado

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
(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
(Ejemplos)

47
(Ejemplos)
Analizar y
comprender
las actividades
del usuario
Realizar el Diseño
del prototipo
en papel
Evaluar el diseño
con los usuarios
finales
Realizar diseño
dinámico del
prototipo
Evaluar el diseño
con los usuarios
finales
Implementar
la interfaz de
usuario definitiva
Diseño del
prototipo
Prototipo
ejecutable
Modelo Basado
en Prototipos
(Sommerville)

48
(Ejemplos)
Identificar la
necesidad de
diseñar la IHC
Identificar la
necesidad de
diseñar la IHC
El producto de software
satisface los requisitos
especificados
El producto de software
satisface los requisitos
especificados
Precisar el
contexto de uso
Especificar los
requisitos
Crear perfiles de
usuarios
Estudiar el
ambiente de trabajo
Determinar elementos
de hardware y software
Determinar la funcionalidad
delsistema
Evaluar el diseño
Modelo para el
Diseño de la
Interacción
Humano-
Computadora
(MODIHC)
(Flor Narciso
1998)

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 al
Sistema
Listar
Bancos
Registrar
Inversión
Confirmar
DatosImprimir
Plantilla
Pantalla
Principal
Crear
Banco Editar
Banco
Eliminar
Banco

51
Entrar al
Sistema
(login)
Listar
Bancos
Registrar
Inversión
Confirmar
Datos
Imprimir
Plantilla
Pantalla
Principal
Crear
Banco
Editar
Banco
Eliminar
Banco
listar
bancos
registrar
inversión
cancelar
regresarregresarcancelar
siguiente
eliminar
editar
crear
siguiente
Aquí si puede
expresar
secuencia
(a diferencia de
en los casos de
uso)

52
(Por ejemplo un CRUD / Opción A)
Listar
Bancos
Pantalla
Principal
Crear
Banco
Editar
Banco
Eliminar
Banco
MENU:
listar
bancos
regresar
MENU:
crear
banco
MENU:
editar
banco
MENU:
eliminar
banco
regresarMENU:
Crear Banco
Editar Banco
Eliminar Banco
Listar Bancos
...
Otras Opciones
MENU:
Banco >>
...
Otras Opciones
Crear
Editar
Eliminar
Listar
¿Cómo serían las
pantallas de la
derecha?

53
(Por ejemplo un CRUD / Opción B)
cancelarListar
Bancos
Pantalla
Principal
Crear
Banco
Editar
Banco
Eliminar
Banco
MENU:
listar
bancos eliminar
editar
regresar
MENU:
crear
banco
MENU:
Crear Banco
Listar Bancos
...
Otras Opciones
MENU:
Banco >>
...
Otras Opciones
Crear
Listar
¿Cómo serían las
pantallas de la
derecha?

54
(Por ejemplo un CRUD / Opción C)
Listar
Bancos
Pantalla
Principal
Crear
Banco
Editar
Banco
Eliminar
Banco
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?

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
(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:
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
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...
...es muy probable que alguien en este curso tenga
algún problema de visión de este tipo...

62Foto Original

63
Como lo ve una persona con deuteranopia
transformación cortesía de http://www.vischeck.com/

64
Como lo ve una persona con protanopia

65
Como lo ve una persona con tritanopia

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
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
Presión de
Refrigerante
Temperatura
del Núcleo
Imagine usted un panel de control de una central
nuclear con los siguientes indicadores:

68
Deuteranopia
(Rojo/Verde)
Protanopia
(Rojo/Verde)
Tritanopia
(Azul/Amarillo)

69
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
Mucho mejor de la siguiente forma:
Presión de
Refrigerante
PELIGRO NORMAL
Temperatura
del Núcleo
NORMAL PELIGRO
¡PELIGRO!

71
Utilice un contraste adecuado entre el color del texto y
el color de fondo
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!

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
Un problema de navegación, al exportar
(recordar valores por defecto)

76
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
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
El texto lo dice todo...
¿Dónde está el botón para cancelar?

79
¿Uh?

80
¿Este dialogo se entiende?
¿Donde está el botón de cancelar?

81
Cuidado con el texto utilizado... puede ser confuso o ambiguo...

82
¿Se entiende? (checkboxes de arriba y checks de abajo)

83
Do not logout...

84
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)

Clase 04 diseno_ui

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Clase 04 diseno_ui

Similar a Clase 04 diseno_ui (20)

Último

Último (20)

Clase 04 diseno_ui