Este documento presenta los principios fundamentales para el diseño de interfaces de usuario, incluyendo la anticipación de las necesidades del usuario, darle autonomía y control sobre la aplicación, y asegurar una interfaz consistente, usable y accesible para todos. El diseño adecuado de la interfaz es crucial para brindar una buena experiencia de usuario y lograr que los usuarios alcancen sus objetivos de manera eficiente.

1. Principios de Diseño de
Interfaces de Usuario
Sebastián Berenguel
Federico Montenegro

2. Introducción
 El diseño de interfaz del usuario es un aspecto muy
importante en el desarrollo de un sistema de software
ya sea una aplicación web o una interfaz GUI de
escritorio , el mal diseño de este pude resultar en una
mala experiencia para el usuario.
 Es por eso que existen principios fundamentales para
el diseño e implementación de interfaces graficas , su
implementación dará como resultado una interfaz
visualmente comprensible que permitirá al usuario
alcanzar sus metas y realizar su trabajo.

3. Principios fundamentales para el
diseño de interfaces graficas :

Anticipación

Autonomía

Daltonismo

Valores por defecto

Proteger el trabajo del usuario

Legibilidad

Guardar el estado

Eficacia del usuario

Interfaces explorables

Objetos Humanos

Reducción de latencia

Aprendizaje

Uso de metáforas

Consistencia

4. Anticipación:
 Las aplicaciones deben intentar anticiparse a las necesidades del
usuario , brindándole toda las información o herramientas que este
pueda necesitar.
 Un claro ejemplo de ello es Microsoft Word que pone a disposición
del usuario todas la herramientas necesarias para el tratamiento de
un texto (guardar , copiar , cortar , etc..).

5. Autonomía:

Se le debe dar al usuario un ambiente (computadora , interfaz y entorno de trabajo) flexible y
amigable para que aprenda a usar la aplicación dándole una sanción de control sobre la
aplicación.
Daltonismo:

Se deben proveer elementos secundarios para los usuarios que posean problemas de visualización
de colores .
Valores por defecto:

Los valores por defecto deben ser opciones fáciles de modificar por el usuario , se debe evitar usar el
termino “Defecto” en la interfaz
Proteger el trabajo de usuario :

Se le debe asegurar al usuario que nunca va a perder su trabajo ante una situación imprevista.
Legibilidad:

La información exhibida en la interfaz debe ser de fácil lectura y ubicación haciendo un buen uso
del contraste de los colores y el tamaño de la fuente.
Guardar el estado:

Los usuarios deben ser capaces de desconectarse y conectarse desde cualquier lugar sin haber
perdido su trabajo , esto se lograra mediante el uso de cookies que luego será almacenado en un
servidor.

6. Objetos Humanos

Los objetos humanos de la interfaz deben poder ser vistos, escuchados , percibidos o tocados de
alguna forma, además de ser de fácil entendimiento. Deben ser controles que faciliten la
operación de un sistema .
Reducción de latencia :

Para esto se utiliza el multihilos colocando la latencia en un segundo plano (background)
posibilitando el trabajo ininterrumpido del usuario como por ejemplo pasando tareas de
computación a segundos planos
Aprendizaje :

En lo posible debe ser nula , un usuario debe ser capaz de aprender a usar la aplicación sin
esfuerzo
Uso de metáforas :

Utilice metáforas para facilitar el entendimiento del modelo conceptual de una aplicación, para
eso apóyese en recursos visuales sonoros , que sean perceptibles al usuario y así hacer fácil el uso
del sistema

7. Presentación de la información
El diseñador debe organizar los elementos en la pantalla (tipografía, color, gráficos,
ilustraciones, animaciones, sistemas de navegación, etc.)
Formas de presentar la información:
 De izquierda a derecha
 De abajo hacia arriba
Cabe aclarar que la información mas importante estará en la esquina superior izquierda, y a
medida que nos acercamos a la parte derecha estará la de menor jerarquía.
Agrupación de Información relacionada:
Hay muchas técnicas para agrupar información, la mas recomendada y utilizada es la de
agrupar los elementos que tengan funciones similares o complementarias.
Mensajes al usuario:
Esquemas usados en Occidente (de izquierda a derecha)
Se recomienda que las alertas y/o diálogos o carteles aparezcan en el centro de la pantalla,
así logramos que el usuario las vea fácil y rápidamente.
Uso del color:
Si bien el uso de colores para dar énfasis a ciertas partes de la pantalla puede ser muy
provechoso, se debe tener cuidado de no abusar de el, ya que podemos causar un efecto
de sobrecarga, confundiendo al usuario, también hay que tomar recaudos para personas
con daltonismo.

8. Usabilidad
El usuario debe sentir que tiene el control de la aplicación
Acciones inmediatas, reversibilidad y feedback:
Se debe dar una respuesta inmediata a una acción del usuario (ej: click a un botón) y en
caso de que el proceso demore mas tiempo, al menos se debe informar que el mismo ha
comenzado mostrando una barra de progreso o un tiempo estimativo de finalización.
Para darle mas confianza al usuario del sistema, se recomienda darle la posibilidad de
deshacer una acción, de esta forma perderá el miedo a cometer un error.
Permitir la personalización de la interfaz:
Atajos de sistema de aplicaciones en Windows
Hay dos tipos de personalización, una visual, que refiere a modificar los colores y las fuentes
de la aplicación (tratando siempre de tener en cuenta las recomendaciones de su uso).
El otro tipo de personalización es a nivel formación/experiencia/dominio del sistema, que le
permitirá al usuario realizar modificaciones a fin de mejorar su productividad
Opciones por defecto:
Se debe asignar un valor a los campos que rara vez se modifican, pero permitiendo que
sean modificados fácilmente.
Atajos de teclado: Una aplicación que tenga eficientes atajos será mas eficiente, ya que
el usuario puede optar por no usar el mouse. Siempre se recomienda respetar los atajos del
Sistema Operativo por la facilidad de aprendizaje. También se deben evitar
combinaciones complejas

9. Consistencia

Para lograr una mayor consistencia en la IU se requiere profundizar en diferentes aspectos que están
catalogados en niveles. Se realiza un ordenamiento de mayor a menor consistencia:

Interpretación del comportamiento del usuario: la IU debe comprender el significado que le atribuye
un usuario a cada requerimiento. Ejemplo: mantener el significado de las los comandos abreviados
(shortcut-keys) definidos por el usuario.

Estructuras invisibles: se requiere una definición clara de las mismas, ya que sino el usuario nunca
podría llegar a descubrir su uso. Ejemplo: la ampliación de ventanas mediante la extensión de sus
bordes.

Pequeñas estructuras visibles: se puede establecer un conjunto de objetos visibles capaces de ser
controlados por el usuario, que permitan ahorrar tiempo en la ejecución de tareas específicas.
Ejemplo: ícono y/o botón para impresión.

Una sola aplicación o servicio: la IU permite visualizar a la aplicación o servicio utilizado como un
componente único. Ejemplo: La IU despliega un único menú, pudiendo además acceder al mismo
mediante comandos abreviados.

Un conjunto de aplicaciones o servicios: la IU visualiza a la aplicación o servicio utilizado como un
conjunto de componentes. Ejemplo: La IU se presenta como un conjunto de barras de comandos
desplegadas en diferentes lugares de la pantalla, pudiendo ser desactivadas en forma
independiente.

Consistencia del ambiente: la IU se mantiene en concordancia con el ambiente de trabajo.
Ejemplo: La IU utiliza objetos de control como menúes, botones de comandos de manera análoga a
otras IU que se usen en el ambiente de trabajo.

Consistencia de la plataforma: La IU es concordante con la plataforma. Ejemplo: La IU tiene un
esquema basado en ventanas, el cual es acorde al manejo del sistema operativo Windows.

10. Bibliografía
• Galinus,
http://galinus.com/es/articulos/principios-diseno-de-interaccion.html
[Consulta: 10-11-2013]
• Universidad Nacional de Cuyo,
http://bdigital.uncu.edu.ar/objetos_digitales/1505/rodriguezinterfaces.pdf
[Consulta: 11-11-2013]
• Guia de la experiencia de Usuario – Windows,
http://msdn.microsoft.com/es-ar/library/windows/desktop/aa511258.aspx