Clase 04 diseno_ui
-
Upload
demian-gutierrez -
Category
Technology
-
view
407 -
download
0
Transcript of Clase 04 diseno_ui
![Page 1: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/1.jpg)
1
Ingeniería del SoftwareDiseñó de Interfaz de Usuario
Universidad de los AndesDemián GutierrezSeptiembre 2009
![Page 2: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/2.jpg)
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
![Page 3: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/3.jpg)
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
![Page 4: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/4.jpg)
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.
![Page 5: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/5.jpg)
5
¿Interfaz de Usuario?
![Page 6: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/6.jpg)
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
![Page 7: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/7.jpg)
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.
![Page 8: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/8.jpg)
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
![Page 9: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/9.jpg)
9
¿Por que es necesario haceruna buena Interfaz de Usuario?
A continuación se muestran algunos errores comunes de
interfaz de usuario...
![Page 10: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/10.jpg)
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?
![Page 11: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/11.jpg)
11
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Será que hay muchos “tabs”?
![Page 12: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/12.jpg)
12
¿Por que es necesario haceruna buena Interfaz de Usuario?
¡La misma funcionalidad anterior, pero mejorada!
![Page 13: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/13.jpg)
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?
![Page 14: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/14.jpg)
14
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Cómo dice?
![Page 15: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/15.jpg)
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!
![Page 16: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/16.jpg)
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
![Page 17: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/17.jpg)
17
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Lea todo el mensaje de error...
![Page 18: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/18.jpg)
18
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Dónde tengo que hacer click para descargar el archivo?
![Page 19: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/19.jpg)
19
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Dónde tengo que hacer click para descargar el archivo?
![Page 20: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/20.jpg)
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
![Page 21: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/21.jpg)
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
![Page 22: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/22.jpg)
22
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Por qué es necesario paginar los resultados en una lista?
![Page 23: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/23.jpg)
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?
![Page 24: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/24.jpg)
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...
![Page 25: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/25.jpg)
25
¿Por que es necesario haceruna buena Interfaz de Usuario?
![Page 26: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/26.jpg)
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?
![Page 27: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/27.jpg)
27
Factores Humanos
4 factores humanos fundamentales...
![Page 28: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/28.jpg)
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...
![Page 29: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/29.jpg)
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
![Page 30: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/30.jpg)
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?
![Page 31: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/31.jpg)
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
![Page 32: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/32.jpg)
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
![Page 33: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/33.jpg)
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.
![Page 34: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/34.jpg)
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.
![Page 35: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/35.jpg)
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?
![Page 36: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/36.jpg)
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)
![Page 37: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/37.jpg)
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
![Page 38: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/38.jpg)
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?
![Page 39: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/39.jpg)
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 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
![Page 40: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/40.jpg)
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
![Page 41: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/41.jpg)
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
![Page 42: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/42.jpg)
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.
![Page 43: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/43.jpg)
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
![Page 44: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/44.jpg)
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?
![Page 45: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/45.jpg)
46
Procesos de Diseño de UI(Ejemplos)
![Page 46: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/46.jpg)
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)
![Page 47: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/47.jpg)
48
Procesos de Diseño de UI(Ejemplos)
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)
![Page 48: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/48.jpg)
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
![Page 49: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/49.jpg)
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
![Page 50: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/50.jpg)
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)
![Page 51: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/51.jpg)
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?
![Page 52: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/52.jpg)
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?
![Page 53: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/53.jpg)
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?
![Page 54: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/54.jpg)
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
![Page 55: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/55.jpg)
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
![Page 56: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/56.jpg)
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
![Page 57: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/57.jpg)
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
![Page 58: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/58.jpg)
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...
![Page 59: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/59.jpg)
62Foto Original
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
![Page 60: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/60.jpg)
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)
![Page 61: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/61.jpg)
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)
![Page 62: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/62.jpg)
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)
![Page 63: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/63.jpg)
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
![Page 64: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/64.jpg)
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:
![Page 65: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/65.jpg)
68
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Deuteranopia(Rojo/Verde)
Protanopia(Rojo/Verde)
Tritanopia(Azul/Amarillo)
![Page 66: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/66.jpg)
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
![Page 67: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/67.jpg)
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!
![Page 68: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/68.jpg)
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
![Page 69: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/69.jpg)
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)
![Page 70: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/70.jpg)
73
La galería del Horror de la Interfaz de Usuario
![Page 71: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/71.jpg)
74
La galería del Horror de la Interfaz de Usuario
Un problema de navegación, al exportar(ver siguiente transparencia)
![Page 72: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/72.jpg)
75
La galería del Horror de la Interfaz de Usuario
Un problema de navegación, al exportar(recordar valores por defecto)
![Page 73: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/73.jpg)
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...
![Page 74: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/74.jpg)
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...
![Page 75: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/75.jpg)
78
La galería del Horror de la Interfaz de Usuario
El texto lo dice todo...
¿Dónde está el botón para cancelar?
![Page 77: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/77.jpg)
80
La galería del Horror de la Interfaz de Usuario
¿Este dialogo se entiende?
¿Donde está el botón de cancelar?
![Page 78: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/78.jpg)
81
La galería del Horror de la Interfaz de Usuario
Cuidado con el texto utilizado... puede ser confuso o ambiguo...
![Page 79: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/79.jpg)
82
La galería del Horror de la Interfaz de Usuario
¿Se entiende? (checkboxes de arriba y checks de abajo)
![Page 80: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/80.jpg)
83
La galería del Horror de la Interfaz de Usuario
Do not logout...
![Page 81: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/81.jpg)
84
La galería del Horror de la Interfaz de Usuario
Escriba bien...
![Page 82: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/82.jpg)
85
Lecturas Recomendadas
Jeff Johnson
GUI Bloopers 2.0(Common User Interface Design Don'ts and Dos
Morgan Kaufmann
2nd Edition
![Page 83: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/83.jpg)
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)
![Page 84: Clase 04 diseno_ui](https://reader034.fdocuments.mx/reader034/viewer/2022052316/558ffd031a28abc80d8b4645/html5/thumbnails/84.jpg)
87
Gracias
¡Gracias!