clase 04 diseno_ui

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


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.

5


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 haceruna 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 laambigü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


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 general-purpose systems

Form fill-in 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

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


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


Identificar lanecesidad de diseñar la IHC

Identificar lanecesidad 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 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


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”


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

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:



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


63Como lo ve una persona con deuteranopia

transformación cortesía de http://www.vischeck.com/


64Como lo ve una persona con protanopia



65Como 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 deRefrigerante

Temperaturadel 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 deRefrigerante

PELIGRO NORMAL

Temperaturadel 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!


http://en.wikipedia.org/wiki/Three_Mile_Island_accident

73

La galería del Horror de la Interfaz de Usuario

74


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?

http://www.movilnet.com.ve/

80


¿Este dialogo se entiende?

¿Donde está el botón de cancelar?

http://www.movilnet.com.ve/

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)

87

Gracias

¡Gracias!

clase 04 diseno_ui

Technology