Este documento presenta los principios básicos para el diseño de interfaces gráficas de usuario, incluyendo la organización de la información, el uso efectivo del color, la selección de iconos, la consistencia en la interfaz, y principios generales de usabilidad como el uso del teclado y la prevención de errores. El objetivo final es crear interfaces intuitivas y amigables para el usuario.

1. DISEÑO DE INTERFACES
GRÁFICAS DE USUARIO
Marcos Pytel
Nicolas Mancuso
12 de Junio 2014
Metodología de Sistemas I
4°B

2. ¿Qué es una interfaz gráfica?
Es el medio con el 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. Normalmente
suelen ser fáciles de entender y fáciles de accionar
(aunque en el ámbito de la informática es preferible
referirse a que suelen ser «amigables e intuitivas»
porque es muy complejo y subjetivo decir que algo
es «fácil»).

3. Para construir una interfaz de usuario efectiva, todo diseño debe comenzar
por conocer los usuario de destino. Quien conoce al usuario, conoce las
tareas.
Los objetos que voy a manipular.
La percepción del Sistema es la imagen del sistema que el usuario final
tiene en su mente.
La imagen del sistema es una combinación de la apariencia del sistema y la
información de soporte
CUANDO LA IMAGEN DEL SISTEMA Y LA PERCEPCION DEL SISTEMA
COINCIDEN, EL USUARIO PUEDE UTILIZAR LA APLICACIÓN DE FORMA
EFECTIVA.
Antes de realizar el diseño de una interfaz de usuario, se
debe considerar lo siguiente

4. Las siguientes recomendaciones que procederemos a detallar permiten
comprender fácilmente que aspectos debemos tener en cuenta, para
garantizar niveles aceptables de usabilidad e intuitividad en los diseños de
interfaces gráficas de usuario:
•Presentación de la información1
•Características del color2
• Iconos3
• Consistencia4
• Personalización5
• Principios generales de usabilidad6
• Teclas de acceso7
• Prevención de errores8
• Accesibilidad9
• Uso amigable10

5. •Presentación de la información1
Organización y distribución:
Tener en cuenta la forma de ordenar y organizar los elementos de la imagen en el
espacio que nos ofrece el formato.
Establecer un orden determinado donde todos los componentes participen en el
diseño equilibradamente.
Debe delimitarse claramente el centro de interés
Agrupación de la información Relacionada:
Los recursos visuales para agrupar información son variados, se pueden realacionar
por:
• Funcionalidad
• Cercanía espacial
• Similitud
Diseño substractivo:
• Se debe eliminar cualquier elemento que no ayude a la comunicación.
• La sobrecarga de información distrae y dificulta al usuario.
• Evitar el uso de botones para acciones potencialmente destructivas.
• Botones sólo para funciones cuyo resultado es visualmente obvio

6. •Presentación de la información1
Suele suceder que al aumentar la información
que pueda procesar el sistema, en lugar de
aumentar las interfaces, aumentemos la
información a mostrar quedando de una forma
todo junto y casi incomprensible.
A la izquierda vemos un sistema con demasiada
información.
A la derecha vemos otro donde la
información está mejor organizada
y es más amigable a la vista del
usuario.
Separados por marcos, sería mejor
incluso si son cuadros desplegables
o que remarquen en donde está
ubicado la información que estamos
editando.

7. •Características de color2
El color debe usarse funcionalmente:
La principal utilidad que tiene el color en las pantallas de las interfaces gráficas es la
de resaltar las informaciones más importantes en detrimento del resto, para así
poder identificar rápidamente los datos más relevantes.
Utilizar al color de acuerdo a connotaciones culturales y estereotipos:
Deben evitarse las combinaciones que puedan provocar connotaciones culturales
negativas, que puedan herir susceptibilidades.
El contraste figura – fondo permite legibilidad y evita cansancio visual:
En general se recomienda tener un color de figura oscuro sobre fondo claro que al
revés, porque se gana en legibilidad.

8. •Iconos3
Seleccionar una metáfora y representarla adecuadamente:
Los usuarios deben determinar de una forma intuitiva el uso de un objeto al
relacionarlo con otro del mundo real.
Utilizar la redundancia verbal adecuadamente:
Si los iconos son relativamente nuevos o desconocidos para el operador, se puede
reforzar o complementar su significado con palabras.
Utilizar íconos ya difundidos anteriormente:
Siempre debe contemplarse y aprovecharse el conocimiento previo del usuario.

9. •Consistencia4
Dado que la mayoría de usuarios han utilizado otras aplicaciones, se sugiere aplicar:
Conocimientos adquiridos.
Estándares de uso.
Preservar el contexto de trabajo de los usuarios.
Mantener la consistencia interna, con la plataforma y con otras aplicaciones.
Conservar los resultados para las mismas interacciones.

10. •Personalización5
La personalización es uno de los métodos más simples y efectivos para hacer que los
usuarios se sientan más cómodos con la interfaz.
La personalización de la interfaz puede darse en dos aspectos:
El visual se refiere principalmente al manejo del color y de las fuentes
tipográficas.
Permitir que cada usuario realice cambios que considere necesarios para optimizar
su tarea.
Ejemplo: Gmail ha logrado
una excelente opción de
personalización en su
aplicación de correo
electrónico, donde puedes
escoger entre varios
motivos o incluso diseñar
el tuyo:

11. •Principios generales de usabilidad6
Proporcionar acciones inmediatas, reversibles y realimentación:
El operador espera que cada acción que ejerza sobre la interfaz sea acompañada
por una respuesta de la máquina.
Respecto a la reversibilidad de las acciones se traduce en la posibilidad por parte
del usuario de deshacer una operación.
Esfundamental el empleo de las señales de retroalimentación para evitar
incertidumbre, stress e impaciencia en el operador.
Ser redundante:
Flexibilidad para acomodar las diferentes preferencias del usuario, configuraciones
del sistema, o habilidades del usuario. Se debe proveer de más de una manera de
ingresar datos, de interactuar con la aplicación y de visualizar la información.
Se debe reducir la carga de memoria de los usuarios:
Simplificar las tareas
Proporcionar opciones por defecto
Evitar que el desarrollo de la tarea dependa de la memoria del operador
Delegar carga de trabajo al sistema.
Proporcionar atajos.

12. • Teclas de acceso.7
Se encuentran indicadas visualmente y no requieren ser aprendidas
 Deben ser fáciles de visualizar
 Deben ser de base ancha. Ej: M, W, S
 Preferentemente deben estar en el inicio de la palabra
• Prevención de errores8
Los sistemas deben ser capaces de brindarle información al usuario, alertándolos de
lo que sucederá en el caso de continuar con determinada acción.
Prevenir los errores antes de que ocurran. Ej.: Solicitar confirmación antes de
cerrar la aplicación o confirmar la operación de “guardar”, en el caso de estar
sobrescribiendo otro archivo.
Utilizar redundancia de canales comunicativos: utilizar alarmas sonoras, destello
de la barra de menú, Icono de alerta.

13. •Accesibilidad9
Utilizar únicamente el teclado para manejar el interfaz:
Comprobar que esto es posible y que además las diferentes funciones de acceso
están bien documentadas e indicadas. También, hay que comprobar si alguna de las
operaciones resulta excesivamente complicada de ejecutar con una sola mano o con
un dedo.
Comprobar el funcionamiento de las herramientas de ampliación:
Muchos sistemas operativos ofrecen herramientas básicas de accesibilidad y que
pueden de alguna manera compensar problemas de agudeza visual. Comprobar si
las herramientas básicas de ampliación de la pantalla disponibles en Windows
funcionan correctamente con la aplicación.
»Los controles que se puedan editar y/o “clickeables” se puedan acceder por
teclado. Ejemplo por la tecla TAB
 Su orden de tabulación (TabIndex) debe seguir un flujo.
Para navegar entre distintas pantallas principales es recomendable asignarles
botones F (Funciones)

14. •Uso amigable10
 Se debe minimizar el numero de pasos a seguir para completar una determinada
tarea. (Limitar los pasos para solucionar problemas a 3 o menos. )
 El usuario debe distinguir con claridad todos los objetos que le brinda la aplicación
 Proporcionar al operador diferentes tipos de ayuda, automática o a petición
del mismo.
 Asociar la ayuda según los estándares. Ej.: Tecla F1
Funciones utilizadas recientemente

15. BIBLIOGRAFÍA
• Raúl Arellano. (12/06/2014). "Consejos sobre diseño de Interfaces de usuario", [On-
line]. Direeción URL: http://www.vb-mundo.com/interfaz-de-usuario-consejos/
• Juan Pablo Bustos Thames. (12/06/2014). "El Proceso de Diseño de interfaces de
usuario. Roger Pressman", [On-line]. Direeción URL:
http://www.slideshare.net/jpbthames/el-proceso-de-diseo-de-interfaz-del-usuario-
pressman
• El Webmaster, http://www.elwebmaster.com/articulos/usabilidad-12-tecnicas-para-
un-buen-diseno-de-interfaces [Consulta 12/06/2014]
• Biblioteca Difital/Uncuyo,
http://bdigital.uncu.edu.ar/objetos_digitales/1505/rodriguezinterfaces.pdf
[Consulta 12/06/2014]
• Albert Viñas. (12/06/2014). "Consejos para hacer un buen diseño de interfaz (I)",
[On-line]. Direeción URL: http://www.interactius.com/es/user-experience-
es/consejos-para-hacer-un-buen-diseno-de-interfaz/