usuario software señalizacion principios para normas interfaz interfaces graficas diseño desarrollo considerar colores basadas user-interface principles

user interface - software - Mejores prácticas y principios para el diseño de GUI



principios para el desarrollo de interfaces (19)

Seguir los principios básicos de diseño

  • C ontrast: hacer que las cosas que son diferentes se vean diferentes
  • R epetición: repite el mismo estilo en una pantalla y para otras pantallas
  • Una alineación - Elementos de la pantalla de línea hacia arriba! Sí, eso incluye texto, imágenes, controles y etiquetas.
  • P roximidad - Agrupe los elementos relacionados. Un conjunto de campos de entrada para ingresar una dirección se debe agrupar y ser distinto del grupo de campos de entrada para ingresar la información de la tarjeta de crédito. Estas son las leyes básicas de diseño de Gestalt .

¿Cuál es su mejor diseño o principio práctico de interfaz de usuario fácil de usar?

Envíe las prácticas que considere que realmente hacen que las cosas sean realmente útiles, sin importar qué, si funcionan para sus usuarios, ¡compártalo!

Resumen / colación

Principios

  1. BESO.
  2. Sea claro y específico en cuanto a lo que logrará una opción: por ejemplo, use verbos que indiquen la acción que seguirá en una elección (vea: Impl. 1).
  3. Use acciones predeterminadas obvias apropiadas a lo que el usuario necesita / quiere lograr.
  4. Ajuste la apariencia y el comportamiento de la interfaz de usuario al entorno / proceso / audiencia: aplicación independiente, página web, portátil, análisis científico, juego flash, profesionales / niños, ...
  5. Reduce la curva de aprendizaje de un nuevo usuario.
  6. En lugar de deshabilitar u ocultar opciones, considere brindar un mensaje útil donde el usuario pueda tener alternativas, pero solo donde existan esas alternativas. Si no hay alternativas disponibles, es mejor deshabilitar la opción, que luego indica que la opción no está disponible, no oculta las opciones no disponibles, más bien explica en una ventana emergente por qué está deshabilitada.
  7. Manténgase constante y respete las prácticas y la ubicación de los controles, tal como se implementa en las aplicaciones exitosas ampliamente utilizadas.
  8. Lleve las expectativas del usuario y permita que su programa se comporte de acuerdo con esas expectativas.
  9. Cumpla con el vocabulario y el conocimiento del usuario y no use terminología de programador / implementación.
  10. Siga los principios básicos de diseño: contraste (obviedad), repetición (consistencia), alineación (apariencia) y proximidad (agrupamiento).

Implementación

  1. (Ver respuesta por paiNie) "Trate de usar verbos en sus cuadros de diálogo".
  2. Permitir / implementar deshacer y rehacer

Referencias

  1. Pautas de la experiencia del usuario de Windows Vista [ http://msdn.microsoft.com/en-us/library/aa511258.aspx]
  2. Sitios web holandeses: directrices "Drempelvrij" [ http://www.drempelvrij.nl/richtlijnen]
  3. Pautas de accesibilidad al contenido web (WCAG 1.0) [ http://www.w3.org/TR/WCAG10/]
  4. Consistencia [ http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0385267746]
  5. No me hagas pensar [ http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pdbbssr_1?ie=UTF8&s=books&qid=1221726383&sr=8-1]
  6. Sé poderoso y simple [ http://msdn.microsoft.com/en-us/library/aa511332.aspx]
  7. Leyes de diseño de Gestalt [ http://www.squidoo.com/gestaltlaws]

  1. Use funciones animadas discretas / simples para crear transiciones sin interrupciones de una sección a la otra. Esto ayuda al usuario a crear un mapa mental de navegación / estructura.

  2. Use títulos cortos (una palabra si es posible) en los botones que describen claramente la esencia de la acción.

  3. Utilice el zoom semántico donde sea posible (un buen ejemplo es cómo funciona el zoom en los mapas de Google / Bing, donde se ve más información cuando se enfoca en un área).

  4. Cree al menos dos formas de navegar: vertical y horizontal. Vertical cuando navega entre diferentes secciones y horizontales cuando navega dentro de los contenidos de la sección o subsección.

  5. Mantenga siempre visibles los nodos de opciones principales de su estructura (donde el tamaño de la pantalla y el tipo de dispositivo lo permitan).

  6. Cuando profundice en la estructura, siempre mantenga una pista visible (es decir, en forma de un camino) que indique dónde se encuentra.

  7. Oculte los elementos cuando desee que el usuario se concentre en los datos (como leer un artículo o ver un proyecto). Sin embargo, tenga cuidado con los puntos 5 y 4.

(Robado de Joel: o))

No deshabilite / elimine opciones; en su lugar, brinde un mensaje útil cuando el usuario haga clic / lo seleccione.

Como mi profesor de estructura de datos señaló hoy: da instrucciones sobre cómo funciona tu programa para el usuario promedio. Los programadores a menudo pensamos que somos bastante lógicos con nuestros programas, pero el usuario promedio probablemente no sepa qué hacer.

Con las GUI, los estándares son específicos de la plataforma. Por ejemplo, al desarrollar la GUI en Eclipse, este link proporciona una guía decente.

Cuando construya mensajes de error, haga que el mensaje de error sea la respuesta a estas 3 preguntas (en ese orden):

  1. ¿Que pasó?

  2. ¿Por qué sucedió?

  3. ¿Qué se puede hacer al respecto?

Esto es de "Pautas de interfaz humana: la interfaz de escritorio de Apple" (1987, ISBN 0-201-17753-6), pero se puede utilizar para cualquier mensaje de error en cualquier lugar. Hay una versión actualizada para Mac OS X. Los mensajes de la interfaz de usuario de la página de Microsoft dicen lo mismo: "... en el caso de un mensaje de error, debe incluir el problema, la causa y la acción del usuario para corregir el problema "

Incluya también cualquier información que el programa conozca, no solo una cadena fija. Por ejemplo, para la parte "Por qué sucedió" del mensaje de error, utilice "Archivo de espectro sin formato L: / refDataForMascotParser / TripleEncoding / Q1LCMS190203_01Doub leArg.wiff no existe" en lugar de simplemente "El archivo no existe".

Contraste esto con el infame mensaje de error: "Ha ocurrido un error".

El diseño de las cosas cotidianas - Donald Norman

Un canon de conocimiento de diseño y la base de muchos cursos de HCI en universidades de todo el mundo. No diseñará una gran GUI en cinco minutos con algunos comentarios de un foro web, pero algunos principios harán que su pensamiento apunte correctamente.

-

MC

Evite pedirle al usuario que tome decisiones siempre que pueda (es decir, ¡no cree un tenedor con un diálogo de configuración!)

Para cada opción y cada cuadro de mensaje, pregúntese: ¿puedo presentar algún comportamiento predeterminado razonable que

  • ¿tiene sentido?
  • no se pone en la forma del usuario?
  • es bastante fácil de aprender que cuesta poco al usuario que le imponga esto?

Puedo usar mi computadora de mano Palm como ejemplo: la configuración es realmente minimalista, y estoy bastante contento con eso. Las aplicaciones básicas están lo suficientemente diseñadas como para que pueda usarlas sin sentir la necesidad de modificarlas. Ok, hay algunas cosas que no puedo hacer, y de hecho tuve que adaptarme a la herramienta (en lugar de lo contrario), pero al final esto realmente me hace la vida más fácil.

Este sitio web es otro ejemplo: no puedes configurar nada y, sin embargo, me parece muy agradable de usar.

Los incumplimientos razonables pueden ser difíciles de descubrir, y las sencillas pruebas de usabilidad pueden proporcionar muchas pistas para ayudarlo con eso.

He leído la mayoría de las anteriores y una cosa que no veo mencionada:

Si los usuarios deben usar la interfaz UNA VEZ, es excelente mostrar solo lo que necesitan usar si es posible.

Si la interfaz de usuario va a ser utilizada repetidamente por el mismo usuario, pero quizás no muy a menudo, es mejor deshabilitar los controles que ocultarlos: la interfaz de usuario cambia y las características ocultas no son obvias (o recordadas) por un usuario ocasional. el usuario.

Si la interfaz de usuario va a ser utilizada MUY REGULARMENTE por el mismo usuario (y no hay mucha rotación en el trabajo, es decir, no muchos nuevos usuarios estarán en línea todo el tiempo), la desactivación de controles es absolutamente útil y el usuario se volverá acostumbrados a las razones por las que suceden las cosas, pero impidiéndoles usar controles accidentalmente en contextos impropios apreciados y evita errores.

Solo mi opinión, pero todo se reduce a la comprensión de su perfil de usuario, no solo lo que una sola sesión de usuario podría implicar.

Intenta usar verbos en tus cuadros de diálogo.

Significa uso

en lugar de

Intente pensar en lo que su usuario desea lograr en lugar de en cuáles son los requisitos.

El usuario ingresará a su sistema y lo usará para lograr un objetivo. Cuando abre calc, necesita hacer un cálculo simple rápido el 90% del tiempo, por eso es que por defecto está configurado en modo simple.

Así que no piense en lo que debe hacer la aplicación, piense en el usuario que lo hará, probablemente aburrido, y trate de diseñar en función de sus intenciones, intente facilitarle la vida.

Intento adaptarme al medio ambiente

Cuando desarrollo para una aplicación de Windows, utilizo las Pautas de experiencia de usuario de Windows Vista, pero cuando estoy desarrollando una aplicación web utilizo las pautas apropiadas, porque desarrollo sitios web holandeses. Utilizo las directrices "Drempelvrij" que se basan en la Accesibilidad del contenido web. Pautas (WCAG 1.0) del World Wide Web Consortium (W3C).

La razón por la que hago esto es para reducir la curva de aprendizaje de un nuevo usuario.

Muestra la interfaz a una muestra de usuarios. Pídales que realicen una tarea típica. Esté atento a sus errores. Escucha sus comentarios. Haz cambios y repite.

Pan rallado en webapps:
Indica -> El -> Usuario -> Dónde -> Ella -> Está en el sistema

Esto es bastante difícil de hacer en sistemas "dinámicos" con múltiples rutas a los mismos datos, pero a menudo ayuda a navegar el sistema.

Pruebo mi GUI contra mi abuela.

Yo recomendaría obtener una buena comprensión sólida del diseño de GUI leyendo el libro http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0385267746] . Aunque el principal imprimible es un comentario de Joel Spolsky : cuando el comportamiento de la aplicación difiere de lo que el usuario espera que suceda, entonces tiene un problema con la interfaz gráfica de usuario.

El mejor ejemplo es cuando alguien intercambia el botón Aceptar y Cancelar en algunos sitios web. El usuario espera que el botón Aceptar esté a la izquierda y que el botón Cancelar esté a la derecha. En resumen, cuando el comportamiento de la aplicación difiere de lo que el usuario espera que suceda, entonces tiene un problema de diseño de la interfaz de usuario.

Aunque el mejor consejo, independientemente del diseño o patrón de diseño que siga, es mantener el diseño y las convenciones consistentes en toda la aplicación.

Nunca preguntes "¿Estás seguro?". Simplemente permita deshacer / rehacer ilimitados y confiables.