Trabajo metodología de sistemas I

1. Diseño de interfaz de
usuario
Principios, interacción del usuario, presentación
de la información, composición de elementos en
el diseño, tips para un buen layout.

2. Principios de diseño de la interfaz
de usuario
•
•
•
•
•
El usuario debe explicar cuáles son los términos y conceptos que más se
utilizan en el sistema.
Depende básicamente de las habilidades humanas de quien la desarrolla.
Debe contener la misma lógica planteada por el usuario en las
operaciones que la conforman.
No puede presentar elementos que no fueron definidos por el usuario.
Las interfaces tienen que proveer asistencia al usuario o características
de ayuda.

3. Interacción del usuario (1)
•
•
•
1.
2.
3.
4.
5.
¿Como el usuario ingresará la información en el sistema?
¿Como se mostrará la información?
Principios de interacción:
Manipulación directa.
Selección de menús.
Llenado de formularios.
Lenguaje de comandos (el usuario emite comandos y parámetros para
indicar al sistema qué hacer).
Lenguaje natural (el usuario emite un comando para borrar un archivo).

4. Interacción del usuario (2)
Analizar y
comprender las
actividades del
usuario
Producir un
prototipo de diseño
en borrador
Diseñar el prototipo
Evaluar el diseño
con los usuarios
finales
Producir un
prototipo de diseño
dinámico
Evaluar el diseño
con los usuarios
finales
Prototipo ejecutable
Implementar la
Interfaz del
usuario final

5. Composición de elementos en el
diseño de la interfaz (1)
●
Estructura de la información y las tareas del usuario en la aplicación:
○ posición y jerarquía de los elementos visuales: facilitará la comprensión del
usuario acerca del orden en que ejecutará sus tareas.
○
centro de calor de la interfaz gráfica: nuestra cultura occidental que lee de
arriba para abajo y de izquierda a derecha, busca la info más importante en la
parte superior izquierda de la pantalla.
○
patrones de diseño estandarizados: facilitan la lectura y asimilación del
usuario acerca de las pantallas que componen el sistema
○
relación entre elementos: proximidad espacial entre elementos que
conforman un nexo informativo-comunicativo (una etiqueta y una caja de texto)

6. Composición de elementos en el
diseño de la interfaz (2)
●
Color
○
No es considerado una herramienta básica, sino una adicional.
○
Es un medio de información secundaria.
○
Colores apagados, sutiles y complementarios suelen utilizarse en el plano
empresarial y académico.
○
Utilizar paletas de colores, ayuda a combinar a éstos de manera de crear
apariencia de unificación, consistencia y formalidad, evitando la distracción.

7. Composición de elementos en el
diseño de la interfaz (3)
●
●
Disposición de la ventana o formulario
○
Lograr un buen layout (posición asignada a los componentes en una ventana,
logrando una relación entre cada uno)
○
Con un buen layout se crea un flujo visual de información para el usuario

8. Tips para lograr un buen layout
●
Disposición de la ventana o formulario
○
Dejar un mínimo de 12- píxel ó 120 Twips entre el borde de la
ventana y el control más cercano.
○
Dejar 12- píxel ó 120 Twips horizontales entre el control y su etiqueta
○
Las etiquetas deben ser concisas y tener sentido
○
Asignar teclas de acceso a todos los controles editables
○
Asegúrese de tener un orden adecuado de TAB ORDER de
manera que, si se accede por teclado, el orden de los controles
sea el correspondiente

9. Conclusiones
●
● La interfaz gráfica es la “cara de la aplicación” que interactúa con el
usuario, y debe ser:
○ intuitiva
○ fácil de utilizar
○ fácil de aprender
○ fácil de recordar
● Considerar en las etapas de análisis de diseño:
○ al usuario y a sus tareas a realizar
○ al diseñador de interfaces y sus aptitudes
○ la usabilidad del software