Metodología de Sistemas I UTN FRA

1. Interfaz Gráfica
de Usuario

2. En el ámbito de la informática, la relación humano computadora se realiza por medio de una interfaz, que se
podría definir como un “mediador” ente ambos. Cuando
existen dos sistemas que se deben comunicar entre
ellos, la interfaz será el mecanismo, el entorno o la
herramienta que hará posible dicha comunicación.
Con la GUI (Graphic User Interface), el usuario interactúa
con la información digital, a través de un entorno gráfico
simulado.
Desde el punto de vista del desarrollo de software, la interfaz
gráfica de usuario (GUI, sus siglas en Ingles) juega un papel muy
importante en la puesta en marcha de todo sistema.
Es la carta de presentación del mismo y en ocasiones resulta
determinante
“Puede haberse invertido mucho en el desarrollo de una
aplicación o programa, pero se estaría fallando si los usuarios
finales no encuentran un entorno fácil, rápido e intuitivo con el
cual operar para conseguir sus metas.”

3. En el proceso de diseño de una interfaz de usuario se pueden
distinguir cuatro fases o pasos fundamentales:
Reunir
Concretar a través de
técnicas de entrevista, qué
clase de usuarios van a utilizar
el software, qué tareas van a
realizar y cómo las van a
realizar, qué pretenden los
usuarios del programa, y en
qué entorno se desenvuelven
(físico, social, cultural)
Diseñar
En esta fase se definen los
objetivos relacionados con la
utilidad del programa, las
tareas de los usuario, los
objetos multimedia y acciones
de la interfaz, iconos, vistas y
las representaciones visuales
de los objetos, los menús y
ventanas del software. Todos
los elementos visuales se
pueden hacer primero a mano
(recomendado) y luego refinar
con las herramientas
adecuadas
Construir
Es importante realizar un
prototipo, es decir una primera
versión del software que se
realice sin mayor profundidad
programática y permita
visualizar el producto, para
poderlo probar con alguno de
los usuarios finales antes de
codificarlo definitivamente
Se deben realizar pruebas de uso del software, de ser posible
con los propios usuarios finales del mismo, quienes pueden
brindar un feedback significativo

4. Técnicas de diseño

5. Presentación de información
Como se mencionó anteriormente, la GUI debe proveer un entorno fácil, rápido e intuitivo. No se deben colocar
demasiados objetos en la pantalla, y los que existen deben estar bien distribuidos. Cada elemento visual influye en el
usuario no sólo por sí mismo, sino también por su combinación con el resto de elementos presentes en la pantalla.
Este entorno “intuitivo” puede
lograrse si dotamos a nuestra
interfaz de las siguientes
características :
Sencilla
Los elementos deben guiar al usuario, no
confundirlo. Se debe “evitar la saturación”.
Clara
La información debe ser fácilmente localizable.
Se deberá optar por algún modo de
jerarquización.
Predecible
“A acciones iguales, mismas respuestas”. El
usuario debería poder entender como va a
funcionar la interfaz luego de cierto tiempo.

6. Flexible
La interfaz debería poder adaptarse a varios sistemas
y especificaciones, algo fundamental teniendo en
cuenta la diversidad de dispositivos existentes.
Consistente
Se busca la coherencia entre módulos o secciones.
Color
Probablemente sea el elemento de la interfaz que con mayor
frecuencia se utiliza de manera errónea. El color es información y no
solo un elemento decorativo (un ejemplo podría ser reforzar la
criticidad de un mensaje de error). Deben utilizarse combinaciones
acertadas. El color debe atraer la atención, pero no cansar después de
un rato de trabajo. Es primordial mantener una coherencia entre las
líneas de diseño existentes. De gran ayuda puede resultar diseñar
primero en blanco y negro, y luego añadir el color.

7. Audio
Es importante determinar en qué casos es bienvenido y cuál es
el sonido adecuado. Más importante aún es permitir la
personalización (volumen y desactivación). Hay que tener en
cuenta que puede resultar incómodo para algunas personas y
ser un motivo de distanciamiento con la interfaz. El sonido,
como el color, debe utilizarse para informar; no es útil sino
aporta nada nuevo. (Ejemplos de uso acertados podrían ser, un
mensaje de aviso de llegada de un correo electrónico o al
iniciar una sesión de trabajo)
Animación
Se define según el diccionario como un “cambio en el tiempo
de la apariencia visual de un elemento gráfico”. La animación
puede ayudar a por ejemplo, destacar íconos
importantes, mostrar el estado de un objeto en particular o
explicar su comportamiento. Ejemplos satisfactorios de uso de
animaciones pueden ser: progreso de acciones (“pantallas de
carga”) o acciones posibles (cambios en el cursor al pasar sobre
cierto objeto de la interfaz gráfica)

8. Conclusiones
Interfaz Gráfica de
Usuario
Mecanismos
estándar de
control
Simplifican la
operación de
un sistema
Permiten
realizar
múltiples
tareas
Potencia y
flexibilidad
en la forma
de operar el
equipo
“Pequeños toques hacen grandes rasgos”

9. Metodología de Sistemas I
Universidad Tecnológica Nacional FRA
Diseño de Interfaz Gráfica de Usuario
Bockor Lucas – Carratelli Andres
13 de Noviembre del 2013
Bibliografía
http://www.manualdeestilo.com [Consulta : 3/11/2013]
http://bdigital.uncu.edu.ar
[Consulta : 3/11/2013]
http://www.palermo.edu
[Consulta : 10/11/2013]
http://www.itesm.mx/
[Consulta : 10/11/2013]
Muchas Gracias …