Is Clase 04 Diseno UI

Ingeniería del Software
Diseñó de Interfaz de Usuario
Universidad de los Andes

Demián Gutierrez
Septiembre 2009
1
¿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
2
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
3
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.
4
5
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 6
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.
7
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
8
¿Por que es necesario hacer
una buena Interfaz de Usuario?
A continuación se muestran
algunos errores comunes de
interfaz de usuario...
9
¿El botón de “detener” no

¿Son las etiquetas de los está demasiado cerca del de
botones lo suficientemente “encendido”? ¿Es adecuado
claras? un arreglo de botones en
matriz? 10
¿Será que hay muchos “tabs”? 11

¡La misma funcionalidad anterior, pero mejorada! 12

A)
B)
Tanto para A como para B, ¿Qué interfaz es mejor, la de la

13
derecha o la de la izquierda?
¿Cómo dice?
14
Presione
alguna tecla
para continuar
¡Evite la
ambigüedad!
La claridad en los mensajes de error y en la comunicación con

15
el usuario es fundamental
Poca
información
Provea al usuario con suficiente información...
¿Qué? ¿Cómo?
Escriba usando
un lenguaje que
el usuario pueda
entender
...pero hable en un lenguaje que el usuario pueda comprender 16

Pautas de Diseño de IU
(Color, Matiz, Contraste y Resplandor)
Lea todo el mensaje de error...

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

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

El uso de iconos excesivos puede impactar

considerablemente la legibilidad
El programa no tiene la posibilidad de desactivar los
emoticons 20
¡Use los colores adecuados, dependiendo del caso!

Este ejemplo en particular no usa colores adecuados para la
lectura 21
¿Por qué es necesario paginar

los resultados en una lista?
22
¿Son estas transparencias lo

suficientemente legibles?
¿Se puede leer el texto, se

pueden ver bien las imágenes?
23
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...
24
25
Look & Feel (ver y sentir) versus funcionalidad...

La interfaz de usuario es importante pero no lo es todo
26
Factores Humanos
4 factores humanos fundamentales...

27
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... 28
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 29
Factores Humanos
Las personas son diferentes: No todas las

personas tienen las mismas capacidades o usaran el
sistema de la misma forma (Recordar caricatura
anterior)
Las personas tienen preferencias diferentes:

Algunas personas preferirán utilizar interfaces
gráficas, otras usarán interfaces de linea de
comandos, etcétera
¿Factores ambientales o del entorno?

30
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
31
Principios de Diseño de IU
Recuperabilidad: La interfaz debe permitir al

usuario recuperarse de errores, o al menos, ayudarle
a evitarlos
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)
32
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.
33
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.
34
¡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?

35
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)
36
Lenguajes de Comandos: Similar al Shell de linux o

de MS-DOS, el usuario escribe comandos y el
sistema los ejecuta
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?)
37
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?
38
Interaction Main advantages Main disadvantages Application

style examples
Direct Fast and intuitive May be hard to implement. Video games
manipulation interaction Only suitable where there is a CAD systems
Easy to learn visual metaphor for tasks and
objects.
Menu Avoids user error Slow for experienced users. Most general
selection Little typing required Can become complex if many purpose systems
menu options.
Form fillin Simple data entry Takes up a lot of screen space. Stock control,
Easy to learn Causes problems where user Personal loan
Checkable options do not match the form processing
fields.
Command Powerful and flexible Hard to learn. Operating systems,
language Poor error management. Command and
control systems
Natural Accessible to casual Requires more typing. Information
language users Natural language understanding retrieval systems
Easily extended systems are unreliable.
39
Un poco de Arquitectura y UI...
Internet / WAN / LAN

u otro medio
Presentación
Cajero (IU)
(QT / GTK) Capa de
Proceso / Capa de
Negocio Persistencia
Presentación (Lógica /
Gerente (IU) Reglas de
(HTML) Negocio)
(Universal /
Independiente
Presentación de la IU)
Contador (IU) BD
(Excel)
Arquitectura a 3 capas
40
Usuario Ocasional Usuario Avanzado
Ambiente de Intérprete de
Escritorio Comandos
(Gnome / KDE / Otro) (sh / bash / csh / ksh)
Comandos
Gestor de Ventanas
Del Sistema
X-Windows
Operativo
Sistema Operativo Linux

41
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
42
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.
Construir la interfaz de usuario: En base al diseño, o

desarrollando prototipos evolutivos, desechables.
Validar la interfaz de usuario: Entrevistas,

observaciones, prototipos, etcétera. Repetir los tres
pasos anteriores en caso de ser necesario 43
(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
44
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? 45
(Ejemplos)
46
(Ejemplos)
Analizar y
Realizar el Diseño Evaluar el diseño
comprender
del prototipo con los usuarios
las actividades
en papel finales
del usuario
Diseño del
prototipo
Modelo Basado Realizar diseño Evaluar el diseño

en Prototipos dinámico del
prototipo
con los usuarios
finales
(Sommerville)
Implementar
Prototipo
la interfaz de
ejecutable
usuario definitiva
47
(Ejemplos)
Identificar la
necesidad de
Modelo para el
diseñar la IHC
Precisar el
Diseño de la
contexto de uso Interacción
Especificar los
requisitos Humano-
Crear perfiles de Computadora
usuarios
Estudiar el
(MODIHC)
ambiente de trabajo
(Flor Narciso
Determinar elementos
de hardware y software 1998)
Determinar la funcionalidad
delsistema
Evaluar el diseño
El producto de software
satisface los requisitos
especificados
48
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
49
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
Crear
Listar Banco Editar
Bancos Banco
Entrar al Pantalla Eliminar

Sistema Principal Banco
Registrar Confirmar
Inversión Imprimir Datos
Plantilla
50
Aquí si puede crear Crear

expresar Banco
secuencia
(a diferencia de Listar Editar
en los casos de Bancos editar Banco
uso) cancelar
listar
bancos Eliminar
eliminar Banco
Entrar al
Pantalla
Sistema
Principal
(login)
siguiente
siguiente
registrar
inversión
Registrar Confirmar Imprimir

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

Crear Banco
pantallas de la Listar Bancos
derecha? ...
Otras Opciones
MENU: Crear
crear Banco
banco
Pantalla Editar
Principal Banco
MENU: editar
Listar cancelar
listar
bancos Bancos
eliminar
Eliminar
Banco
regresar
MENU:
Banco >> Crear
... Listar
Otras Opciones
53
(Por ejemplo un CRUD / Opción C)
MENU: O bien “Listar

Bancos Bancos” o
...
Otras Opciones “Administrar
Bancos”
crear Crear
Banco
regresar
Pantalla Listar Editar
Principal Bancos editar Banco
MENU: cancelar
listar
bancos Eliminar
eliminar Banco
¿Cómo serían las
pantallas de la
derecha? 54
Ejemplo de una mala

navegación:
Visual Paradigm for UML,

edición de los valores de los
atributos de un objeto...
55
Mostrar algunos problemas

de navegación del libro
GUI Bloopers
56
En resumen: Piense bien y

defina como va a ser la
navegación entre las
distintas pantallas de la
aplicación
57
(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
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
Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez 58
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
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
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...
Foto Original 62
Como lo ve una persona con deuteranopia 63

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

Como lo ve una persona con tritanopia 65

El color debe ser considerado como una herramienta

adicional en el diseño, no una necesidad básica
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
Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernández 66
El color es una forma de información secundaria:

Evite confiar en el color como único medio de informar
una condición o valor
Imagine usted un panel de control de una central

nuclear con los siguientes indicadores:
Presión de
Refrigerante
Temperatura
del Núcleo
67
Deuteranopia
(Rojo/Verde)
Protanopia
(Rojo/Verde)
Tritanopia
(Azul/Amarillo)
68
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.
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.
Fuente: http://en.wikipedia.org/wiki/Three_Mile_Island_accident
69
Mucho mejor de la siguiente forma:
Presión de
Refrigerante
PELIGRO NORMAL
Temperatura
del Núcleo
NORMAL PELIGRO
¡PELIGRO!
70
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

!No torture a sus usuarios

con combinaciones de
colores tortuosas o poco
adecuadas!
72
La galería del Horror de la
Interfaz de Usuario
73
La galería del Horror de la Interfaz de Usuario
Un problema de navegación, al exportar

(ver siguiente transparencia)
74
Un problema de navegación, al exportar

(recordar valores por defecto)
75
No es un formulario, es una imagen,

que cuando le hacen click...
Por tratar de introducir publicidad o mejorar el

“caramelo visual” se entorpece la labor del usuario
http://www.movilnet.com.ve 76
No es un formulario, es una imagen,

que cuando le hacen click...
Por tratar de introducir publicidad o mejorar el

“caramelo visual” se entorpece la labor del usuario
http://www.movilnet.com.ve 77
El texto lo dice todo...

¿Dónde está el botón para cancelar?
78
¿Uh?
79
¿Este dialogo se entiende?

¿Donde está el botón de cancelar?
80
Cuidado con el texto utilizado... puede ser confuso o ambiguo...
81
¿Se entiende? (checkboxes de arriba y checks de abajo)

82
Do not logout...
83
Escriba bien...
84
Lecturas Recomendadas
Jeff Johnson
GUI Bloopers 2.0
(Common User Interface
Design Don'ts and Dos
Morgan Kaufmann
2nd Edition
85
Diseño Arquitectónico
Ian Sommerville,
Ingeniería de Software
Addison-Wesley 6da.
Edición
(Capítulo 16 Diseño de
Interfaces de Usuario)
http://interfacemindbraincomputer.wetpaint.com/page/2.A.1.0.-
+Ejemplos+de+Interacci%C3%B3n+Humano+Maquina
86
Gracias
¡Gracias!
87

Is Clase 04 Diseno UI

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Is Clase 04 Diseno UI

Cargado por

Copyright:

Formatos disponibles

Ingeniería del Software

Diseñó de Interfaz de Usuario

Universidad de los Andes

Desde el punto de vista de la Ingeniería de Software,

Es la carta de presentación del sistema y en

En promedio, se estima que del 35% al 45% de los

Involucra cualquier medio de interacción usuario

En algunos casos, la interfaz de usuario puede ser

Es muy sencillo diseñar algunas pantallas,

Desde este punto de vista, es posible apoyarse en el

La idea fundamental en el concepto de interfaz es

Esto implica, además, que se trata de un sistema de

El diseño de la interfaz de usuario es el proceso de

¿El botón de “detener” no

¿Será que hay muchos “tabs”? 11

¡La misma funcionalidad anterior, pero mejorada! 12

Tanto para A como para B, ¿Qué interfaz es mejor, la de la

La claridad en los mensajes de error y en la comunicación con

Provea al usuario con suficiente información...

...pero hable en un lenguaje que el usuario pueda comprender 16

Lea todo el mensaje de error...

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

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

El uso de iconos excesivos puede impactar

¡Use los colores adecuados, dependiendo del caso!

¿Por qué es necesario paginar

¿Son estas transparencias lo

¿Se puede leer el texto, se

Algunos afirman que el éxito comercial del iPod se ha

Look & Feel (ver y sentir) versus funcionalidad...

4 factores humanos fundamentales...

Memoria a corto plazo limitada: Las personas

Las personas se equivocan: Esto es un hecho.

Recordar que un error mal manejado puede llevar a otro error...

Las personas son diferentes: No todas las

Las personas tienen preferencias diferentes:

¿Factores ambientales o del entorno?

Familiaridad: La interfaz debe usar términos y

Recuperabilidad: La interfaz debe permitir al

Guía de Usuario: Retroalimentación significativa y

Diversidad de Usuarios: La interfaz debe estar

Use el sentido común.

Use software (No desarrollado por usted)

Use el software que desarrolle y haga

¡Debata sobre la IU! Con el programador

¿Debe ser igual la interfaz de

¿En que se diferencian?

Manipulación Directa: El usuario interactúa

Selección de Menús: El usuario selecciona un

Rellenado de Formularios: El usuario rellena

Lenguajes de Comandos: Similar al Shell de linux o

Lenguaje Natural: El usuario escribe /

Es importante escoger el estilo de interacción

Interaction Main advantages Main disadvantages Application

Internet / WAN / LAN

Usuario Ocasional Usuario Avanzado

Sistema Operativo Linux

Reunir y analizar la información del usuario: Análisis

Diseñar la interfaz de usuario: Herramientas de

Construir la interfaz de usuario: En base al diseño, o

Validar la interfaz de usuario: Entrevistas,

Se puede usar una herramienta de dibujo para diseñar IU

Modelo Basado Realizar diseño Evaluar el diseño

Hasta ahora, la gran mayoría de los problemas de