Diseño de interfaz del usuario.

1. Metodología de Sistemas 1 4B
la interfaz
grafica de
usuario
CRISTIAN BERTUCCI
JONATHAN ESCALERA
17 DE JUNIO 2014

2. Definición
• Mediadora entre dos sistemas de diferente
naturaleza: el hombre y la máquina
• Facilita la comunicación y la interacción entre
ambos, sirve de traductor, pues estos dos
sistemas “hablan” lenguajes diferentes: verbo-
icónico en el caso del hombre y binario en el
caso de la computadora.

3. Mejores prácticas para el diseño de
una interfaz
• Todo se deriva de conocer a sus usuarios,
incluyendo la comprensión de sus objetivos,
habilidades, preferencias y tendencias.

4. Puntos a Tener en cuenta (1)
• Mantener la interfaz sencilla.
 Evitar los elementos innecesarios
 Lenguaje claro en las etiquetas y en la
mensajería.
• Crear consistencia y utilizar elementos comunes
de interfaz de usuario.
Los usuarios se sienten más cómodos y son
capaces de hacer las cosas más rápidamente.
Creación de patrones en el lenguaje y el diseño
para ayudar a facilitar la eficiencia.

5. Puntos a Tener en cuenta (2)
• Utilizar estratégicamente color y textura.
Puede dirigir la atención hacia o redirigir la
atención de elementos mediante el color, la
luz, el contraste y textura a su ventaja.
Deben evitarse las combinaciones que puedan
provocar connotaciones culturales negativas.
Los colores tienen propiedades psicológicas
que actúan sobre nuestro subconsciente

6. Puntos a Tener en cuenta (3)
• Utilizar la tipografía para crear la jerarquía y la
claridad.
Diferentes tamaños, fuentes, y la disposición del
texto ayuda a aumentar legibilidad y facilidad de
lectura.
• Asegurarse que el sistema comunica lo que está
pasando.
Siempre informar a los usuarios de la
ubicación, las acciones, cambios en el estado o
los errores.
El uso de varios elementos de la interfaz para
comunicar la situación y/o los pasos siguientes
pueden reducir la frustración.

7. Puntos a Tener en cuenta (4)
• Valores predeterminados.
Crear valores predeterminados que reduzcan la
carga sobre el usuario. Importante si se trata de
formar diseño se tenga algunos campos pre-
elegidos o rellenados.
• Permitir al usuario personalizar la interfaz.
La personalización de la interfaz puede darse al
manejo del color y de las fuentes tipográficas.

8. Puntos a Tener en cuenta (5)
• Proporcionar atajos.
Teclas o combinaciones de teclas que permiten
al usuario realizar más rápidamente las
acciones más frecuentes usando directamente
el teclado en lugar de el mouse.
Se gana también en eficiencia y flexibilidad en
el uso

9. Controles
• Son los elementos de la interfaz con los que el
usuario interactúa en la ventana principal de
la aplicación.
• Tipos:
Globos – Casillas de Verificación – Botones y
enlaces de comando – Listas desplegables –
Cuadros combinados y de lista – Barras de
progreso – Cuadros de búsqueda – Vista de árbol.

10. Globos
• Informan al usuario de problemas no críticos o
condiciones especiales en un control.

11. Casillas de verificación
• Permite al usuario tomar una decisión entre
dos o más opciones claramente diferentes.

12. Botones de comando
• Permiten a los usuarios realizar una acción
inmediata.

13. Enlaces de comando
• Permiten a los usuarios hacer una elección
entre un conjunto de opciones mutuamente
excluyentes, relacionados.

14. Listas desplegables y cuadros
combinados
• Permiten a los usuarios hacer una elección
entre una lista de valores que se excluyen
mutuamente.

15. Cuadros de listas
• Permiten seleccionar entre un conjunto de valores
que se presentan en una lista que es siempre visible.
Cuadro de lista de selección única se selecciona un
elemento de una lista de valores que se excluyen
mutuamente; elección múltiple, se seleccionan cero
o más elementos de una lista de valores.

16. Barra de Progreso
• Permiten a los usuarios a seguir el progreso de una
operación larga.

17. Cuadros de búsqueda
• Proporcionan a los usuarios una manera de localizar
objetos específicos o de texto rápidamente..

18. Vistas de árbol
• Permiten a los usuarios ver e interactuar con un
conjunto jerarquizado de los objetos, utilizando la
selección única o de selección múltiple.

19. Mensajes
• Los mensajes son cualquier tipo de mensaje
que los usuarios necesitan o quieren ver,
cuando utilizan la aplicación
• Tipos:
 Mensajes de Error – Mensajes de Advertencia –
Confirmación – Notificación.

20. Mensajes de Error
• Un mensaje de error avisa a los usuarios de un
problema que ya se ha producido.
• Pueden ser presentados mediante cuadros de
diálogo modal, mensajes in situ, las
notificaciones, o globos.

21. Mensajes de Advertencia
• Un mensaje de advertencia es un cuadro de
diálogo modal, mensaje en el lugar, la
notificación, o un globo que alerta al usuario
de una condición que podría causar un
problema en el futuro.

22. Confirmaciones
• La confirmación es un cuadro de diálogo
modal que pregunta si el usuario desea
continuar con una acción.

23. Notificaciones
• Una notificación informa a los usuarios de los
eventos que no están relacionados con la
actividad del usuario actual, mostrando
brevemente un globo desde un icono en el área
de notificación.
• Puede ser resultado de una acción del usuario o
de sucesos del sistema significativos, o podría
ofrecer información potencialmente útil a partir
de Microsoft Windows o una aplicación.

24. BIBLIOGRAFIA
• Nilda Champy (17 /06/2014). "Interfaces gráficas (GUI): Definición y evolución
“,[On Line] DIRECCION URL :
(http://nyldagalanic.wordpress.com/2012/01/15/interfaces-graficas-gui-definicion-
y-evolucion/)
• http://www.usability.gov (17/06/2014). " User Interface Design Basics" ,[On Line]
DIRECCION URL :(http://www.usability.gov/what-and-why/user-interface-
design.html)
• http://msdn.microsoft.com (17/06/2014). " Diseñar aplicaciones para el escritorio
de Windows“,[On line] DIRECCION URL: (http://msdn.microsoft.com/es-
ar/library/windows/desktop/aa511258.aspx)
• Biblioteca Digital /UNCUYO (17/06/2014).
http://bdigital.uncu.edu.ar/objetos_digitales/1505/rodriguezinterfaces.pdf