Diseño de Interfaces de Usuario: Principios y Mejores Prácticas

Productos del Diseño de la Interfaz Externa

• Panorama del sistema: una descripción escrita que orienta al lector sobre el objetivo y la función del sistema completo.
• Panorama de la aplicación: una descripción escrita para cada aplicación que está contenida dentro del sistema que define las características disponibles dentro de la aplicación.
• Diagrama de navegación de ventanas: para cada aplicación dentro del sistema, un diagrama de navegación de ventanas declara cuáles ventanas están disponibles y muestra las rutas de navegación posibles entre ellas.
• Disposición de ventanas: para cada ventana del diagrama de navegación, una disposición de ventana muestra la manera en que ésta aparecerá ante el usuario.
• Descripción de la ventana: el texto que acompaña a cada disposición de ventana define claramente la función y características de ésta.
• Miniespecificación de ventana: la especificación técnica de la ventana define el comportamiento para la apertura y cierre de la ventana.
• Especificación de campo: define los campos y ediciones asociadas para todos los datos que aparecen en la ventana.

Reglas de Schneiderman

1. Buscar siempre la coherencia.
2. Permitir el uso de “short-cuts”.
3. Dar realimentación de información.
4. Diseñar diálogos que tengan un fin.
5. Permitir manejo simple de los errores.
6. Permitir deshacer las acciones con facilidad.
7. Permitir que el centro de control sea interno.
8. Reducir la carga de la memoria inmediata.

Heurísticas de Nielsen

1. Visibilidad del estado del sistema: el sistema debe informar a los usuarios del estado del mismo.
2. Relación entre el sistema y el mundo real: el sistema debe utilizar el lenguaje de los usuarios.
3. Control y libertad para el usuario: sensación de control, guía al usuario a que se equivoque menos.
4. Consistencia y estándares: el usuario debe seguir las normas y convenciones de la plataforma sobre las que está implementado el sistema.
5. Prevención de errores: Hay que eliminar acciones predispuestas al error.
6. Reconocer antes que recordar: el sistema debe minimizar la información que el usuario debe recordar mostrándola a través de objetos, acciones u opciones.
7. Flexibilidad y eficiencia de uso: los aceleradores permiten aumentar la velocidad de interacción para el usuario experto.
8. Diseño estético y minimalista: la interfaz no debe contener información que no sea relevante o se utilice raramente.
9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores.
10. Ayuda y documentación.

Niveles de Acoplamiento y Cohesión en Diseño Orientado a Objetos

Niveles de acoplamiento ideales para un buen diseño OO, cohesión funcional y cohesión incidental:

Niveles de cohesión:

• Funcional (limita a la ventana a que maneje solo un evento a nivel negocio).
• Secuencial (eventos agrupados debido a que suceden en secuencia).
• Comunicacional (agrupan eventos que afectan al mismo objeto).
• Procedural (organiza tareas de acuerdo a la descripción de trabajo de un usuario en particular).
• Temporal (agrupan eventos que en sí no están relacionados, en una ventana simplemente porque suceden al mismo tiempo).
• Lógico (agrupan eventos para compartir el mismo código).
• Incidental (cualquier relación que se encuentre en este nivel existe solamente en la mente del programador que la creó).

Ventajas:

La cohesión de una ventana puede afectar drásticamente la habilidad del usuario para comprender y usarla, y la habilidad del programador para mantenerla.

Cohesión funcional:

Una ventana o conjunto de ventanas funcionalmente cohesivas maneja un evento a nivel negocio.

Ventajas: tienen ventanas eficientes y especializadas que son menos complejas y, por lo tanto, más fáciles de usar.

Ejemplo: cuando un cliente compra artículos en su tienda, el empleado realiza:

1. Registra/actualiza el nombre y dirección del cliente.
2. Coloca el pedido del cliente.
3. Aplica el pago efectivo/cheque al pedido o
4. Carga el pedido a la cuenta del cliente.

Usando el concepto de cohesión funcional se diseña una ventana por cada uno de los eventos.

Cohesión incidental:

Es simplemente caprichosa. Cualquier relación que aquí se encuentre entre eventos en una ventana incidentalmente cohesiva existe solamente en la mente del programador que la creó.

Ejemplo: en el blog de un hotel se incorporan botones:

• Uno para ver los datos de contacto del hotel.
• El segundo para ir a la galería de imágenes.
• El tercero nos lleva a un blog sobre los entrenamientos de la ciudad.
• Y el cuarto a un sitio de pronóstico del tiempo.

Se rompe con el principio de ser atractiva, fácil de acceder pero no debe motivar a la gente a que la abandone.