Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y...
Transcript of Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y...
![Page 1: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/1.jpg)
1
Ingeniería del SoftwareDiseñó de Interfaz de Usuario
Universidad de los AndesDemián GutierrezSeptiembre 2009
![Page 2: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/5.jpg)
5
¿Interfaz de Usuario?
![Page 6: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/11.jpg)
11
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Será que hay muchos “tabs”?
![Page 12: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/12.jpg)
12
¿Por que es necesario haceruna buena Interfaz de Usuario?
¡La misma funcionalidad anterior, pero mejorada!
![Page 13: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/14.jpg)
14
¿Por que es necesario haceruna buena Interfaz de Usuario?
¿Cómo dice?
![Page 15: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/17.jpg)
17
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Lea todo el mensaje de error...
![Page 18: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/25.jpg)
25
¿Por que es necesario haceruna buena Interfaz de Usuario?
![Page 26: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/27.jpg)
27
Factores Humanos
4 factores humanos fundamentales...
![Page 28: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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?
![Page 36: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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 generalpurpose systems
Form fillin Simple data entryEasy to learnCheckable
Takes up a lot of screen space.Causes problems where useroptions do not match the formfields.
Stock control,Personal loanprocessing
Commandlanguage
Powerful and flexible Hard to learn.Poor error management.
Operating systems,Command andcontrol systems
Naturallanguage
Accessible to casualusersEasily extended
Requires more typing.Natural language understandingsystems are unreliable.
Informationretrieval systems
![Page 40: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/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: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/42.jpg)
42
Un poco de Arquitectura y UI . . .
TODO:¿UI y patrones de diseño?
¿UI y arquitecturas orientadas a eventos?¿Código?
No, esto es mejor ponerlo en la parte de codificación de
software
![Page 43: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/43.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 44: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/44.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 45: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/45.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 46: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/46.jpg)
46
Procesos de Diseño de UI(Ejemplos)
![Page 47: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/47.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 48: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/48.jpg)
48
Procesos de Diseño de UI(Ejemplos)
Identificar lanecesidad de diseñar la IHC
El producto de software satisface los requisitos
especificados
Precisar el contexto de uso
Especificar los requisitos
Crear perfiles de usuarios
Estudiar elambiente de trabajo
Determinar elementosde hardware y software
Determinar la funcionalidad delsistema
Evaluar el diseño
Modelo para el Diseño de laInteracción Humano-
Computadora (MODIHC)
(Flor Narciso1998)
![Page 49: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/49.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 50: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/50.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 51: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/51.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 52: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/52.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 53: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/53.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 54: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/54.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 55: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/55.jpg)
55
Ejemplo de una mala navegación:
Visual Paradigm for UML, edición de los valores de los
atributos de un objeto...
Navegación de la IU
![Page 56: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/56.jpg)
56
Mostrar algunos problemas de navegación del libro
GUI Bloopers
Navegación de la IU
![Page 57: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/57.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 58: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/58.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 59: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/59.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 60: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/60.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 61: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/61.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 62: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/62.jpg)
62Foto Original
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
![Page 63: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/63.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 64: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/64.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 65: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/65.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 66: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/66.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 67: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/67.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 68: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/68.jpg)
68
Pautas de Diseño de IU(Color, Matiz, Contraste y Resplandor)
Deuteranopia(Rojo/Verde)
Protanopia(Rojo/Verde)
Tritanopia(Azul/Amarillo)
![Page 69: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/69.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 70: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/70.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 71: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/71.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 72: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/72.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 73: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/73.jpg)
73
La galería del Horror de la Interfaz de Usuario
![Page 74: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/74.jpg)
74
La galería del Horror de la Interfaz de Usuario
Un problema de navegación, al exportar(ver siguiente transparencia)
![Page 75: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/75.jpg)
75
La galería del Horror de la Interfaz de Usuario
Un problema de navegación, al exportar(recordar valores por defecto)
![Page 76: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/76.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 77: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/77.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 78: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/78.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 79: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/79.jpg)
79
La galería del Horror de la Interfaz de Usuario
¿Uh?
![Page 80: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/80.jpg)
80
La galería del Horror de la Interfaz de Usuario
¿Este dialogo se entiende?
¿Donde está el botón de cancelar?
![Page 81: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/81.jpg)
81
La galería del Horror de la Interfaz de Usuario
Cuidado con el texto utilizado... puede ser confuso o ambiguo...
![Page 82: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/82.jpg)
82
La galería del Horror de la Interfaz de Usuario
¿Se entiende? (checkboxes de arriba y checks de abajo)
![Page 83: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/83.jpg)
83
La galería del Horror de la Interfaz de Usuario
Do not logout...
![Page 84: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/84.jpg)
84
La galería del Horror de la Interfaz de Usuario
Escriba bien...
![Page 85: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/85.jpg)
85
Lecturas Recomendadas
Jeff Johnson
GUI Bloopers 2.0(Common User Interface Design Don'ts and Dos
Morgan Kaufmann
2nd Edition
![Page 86: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/86.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 87: Ingeniería del Software - codecompiling.net · diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. 8 ¿Interfaz de Usuario? El diseño](https://reader033.fdocuments.mx/reader033/viewer/2022041721/5e4e837ca7075940397bf180/html5/thumbnails/87.jpg)
87
Gracias
¡Gracias!