PAUTAS DESARROLLO DE INTERFACES

PAUTAS DESARROLLO DE INTERFACES

1. ESTRUCTURA

   • JERARQUÍA
     • Identificar elementos principales y transmitir idea del orden de ejecución.
   • FOCO
     • Establecer ubicación de elementos principales mediante una serie de técnicas.
       • Tener en cuenta factor cultural (leer izq-der)
       • Agrupación de elementos
       • Espaciado entre elementos
       • Aislar zonas con mas predominancia
   • HOMOGENEIDAD
     • La estructura de organización debe ser constante.
   • RELACIONES ENTRE ELEMENTOS
     • Ubicar elementos cuya funcionalidad afecta a otro o tienen dependencia, la ubicación determina la relación entre estos.
     • Se debe evitar una interfaz sobrecargada o con elementos apelotonados.
     • Existen reglas a la hora de alinear los elementos:
       • Alinear textbox a la derecha si son del mismo tamaño.
       • Etiquetas de diferente tamaño han de tener una alineación izquierda.
       • La distancia entre la etiqueta y el elemento no debe de ser grande. El texto de la etiqueta no debe ser ambiguo.
       • Utilizar agrupación de elementos mediante el uso de encabezados en lugar de marcos con bordes
       • Evitar que el usuario deba acceder a diferentes zonas de la aplicación.
   • ACCESO RÁPIDO
     • Usar en lo posible combinaciones de teclas para acceder a las opciones mas habituales, estas se llaman atajos o shortcut, ctrl +z etc.

2. CUADRO DE DIALOGO

   • Debe ser lo mas sencillo posible, debe simplificar la resolución de una tarea dentro de la i.principal, e indicar un problema si existiese.

3. DESPLEGABLES

   • Deben existir listas desplegables dedicadas a la seleccion de elementos frente a otras opciones como checkbottons, cuando hay multitud de opciones a escoger, 8-10 elementos.
     • Flujo de ejecución:
       • Conducir al usuario hacia el flujo de ejecución
     • Integración:
       • Creacción de elementos gráficos , deben usarse estos elementos complementando a menús.

4. FUENTES

   • Semántica clara para dividri
   • No usar la misma etiquerta repetidas veces
   • Evitar todo a mayúscula, ya que es para un mayor énfasis
   • Lenguaje apropiado para el público objetivo usando conceptos clave y
   • En caso de errores es mejor centrarse en accionesque debe hacer el usuario para solucionar el problema-

5. COLORES

   • nO DEBEN USARSEMÁS DE 4 COLORES EN UNA MISMA VENTANA, NI MAS DE 7 EN LA APLICACIÓN, ESTO DIFICULTARÍA LA COMPRENSIÓN DE LA INTERFAZ
   • dEBEN USARSE COLORES DE FORMA UNIFORME, PONER EL MISMO COLOR EN ZONAS SIMILARES
   • USAR CAMBIOS DE COLORES PARA TRANSMITIR UN CAMBIO DE ESTADO, VERDE OPERACIONES DE FORMA CORRECTA Y ROJO INCORRECTA
   • EVITAR CIERTAS COMBINACIONES DE COLORES QUE DIFICULTEN LA LECTURA O SEAN VISUALMENTE MOLESTOS

6. GRÁFICOS

   • Permite leer rapidamente la información, pero añade sobrecarga
   • Se puede usar para dar dinamismo a la web o a la app
   • Los iconos son muy usados en entornos moviles, si se diseñan de manera correcta ayudan mucho: