Mejores prácticas y principios para el diseño de GUI [cerrado]

Question

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

Envíe aquellas prácticas que considere que realmente hacen que las cosas sean realmente útiles, pase lo que pase. Si funcionan para sus usuarios, ¡compártalas!

---

Resumen/cotejo

Principios

1. BESO.
2. Sea claro y específico sobre lo que logrará una opción:por ejemplo, utilice verbos que indiquen la acción que seguirá a una elección (ver:implícito.1).
3. Utilice acciones predeterminadas obvias y apropiadas para lo que el usuario necesita/quiere lograr.
4. Adaptar 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. Reducir la curva de aprendizaje de un nuevo usuario.
6. En lugar de deshabilitar u ocultar opciones, considere enviar un mensaje útil donde el usuario pueda tener alternativas, pero solo donde esas alternativas existan.Si no hay alternativas disponibles, es mejor deshabilitar la opción, que visualmente indica que la opción no está disponible; no oculte las opciones no disponibles, en lugar de eso, explique en una ventana emergente al pasar el mouse por qué está deshabilitada.
7. Mantenga la coherencia y cumpla con las prácticas y la ubicación de los controles, tal como se implementa en aplicaciones exitosas de uso generalizado.
8. Lidera las expectativas del usuario y deja que tu programa se comporte de acuerdo con esas expectativas.
9. Cíñete al vocabulario y conocimiento del usuario y no utilices 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 (agrupación).

Implementación

1. (Ver respuesta de paiNie) "Intenta utilizar verbos en tus cuadros de diálogo".
2. Permitir/implementar deshacer y rehacer.

Referencias

1. Pautas de 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. Sea poderoso y simple [http://msdn.microsoft.com/en-us/library/aa511332.aspx]
7. Leyes de diseño Gestalt [http://www.squidoo.com/gestaltlaws]

Answer 1

Intente utilizar verbos en sus cuadros de diálogo.

significa usar

en lugar de

Answer 2

Pruebo mi GUI con la de mi abuela.

Answer 3

Siga los principios básicos de diseño.

• CContraste: hacer cosas que sean diferentes. mirar diferente
• Repetition: repite el mismo estilo en una pantalla y para otras pantallas.
• Aalineación - ¡Alinee los elementos de la pantalla hacia arriba!Sí, eso incluye texto, imágenes, controles y etiquetas.
• PAGroximidad: agrupa elementos relacionados.Un conjunto de campos de entrada para ingresar una dirección debe agruparse y ser distinto del grupo de campos de entrada para ingresar información de tarjeta de crédito.esto es basico Leyes de diseño Gestalt.

Answer 4

Nunca pregunte "¿Estás seguro?".Simplemente permita deshacer/rehacer de forma ilimitada y confiable.

Answer 5

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

El usuario ingresará a su sistema y lo utilizará para lograr un objetivo.Cuando abres Calc, necesitas hacer un cálculo rápido y sencillo el 90% del tiempo, por eso, de forma predeterminada, está configurado en modo simple.

Así que no pienses en lo que debe hacer la aplicación, sino piensa en el usuario que lo hará, probablemente aburrido, y trata de diseñar en función de sus intenciones, intenta hacerle la vida más fácil.

Answer 6

Si estás haciendo algo para la web, o cualquier aplicación de software frontal, realmente te debes a ti mismo leer...

No me hagas pensar - Steve Krug

Answer 7

Migas de pan en aplicaciones web:
Dile -> El -> Usuario -> Dónde -> Ella -> esta 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 por el sistema.

Answer 8

Intento adaptarme al entorno.

Cuando desarrollo para una aplicación de Windows, utilizo el Pautas de experiencia del usuario de Windows Vista pero cuando desarrollo una aplicación web utilizo las pautas adecuadas, porque desarrollo sitios web holandeses utilizo la Directrices "Drempelvrij" que se basan en la Pautas de accesibilidad al contenido web (WCAG 1.0) por el Consorcio World Wide Web (W3C).

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

Answer 9

Recomendaría obtener una buena comprensión del diseño de GUI leyendo el libro. El diseño de las cosas cotidianas.Aunque el imprimible principal 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 su interfaz gráfica de usuario.

El mejor ejemplo es, cuando alguien intercambia la información DE ACUERDO y Cancelar botón en algunos sitios web.El usuario espera la DE ACUERDO el botón esté a la izquierda y el Cancelar botón para estar 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.

Sin embargo, el mejor consejo, sin importar qué diseño o patrón de diseño siga, es mantener el diseño y las convenciones consistentes en toda la aplicación.

Answer 10

Evite pedirle al usuario que tome decisiones siempre que pueda (es decir,¡No crees una bifurcación con un diálogo de configuración!)

Para cada opción y cada cuadro de mensaje, pregúntese:¿Puedo, en cambio, idear algún comportamiento predeterminado razonable que

• ¿tiene sentido?
• ¿No interfiere con el usuario?
• ¿Es bastante fácil aprender que al usuario le cuesta poco que le imponga esto?

Puedo usar mi computadora de mano Palm como ejemplo:Los escenarios son realmente minimalistas y estoy bastante contento con eso.Las aplicaciones básicas están lo suficientemente bien diseñadas como para poder 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 se puede configurar nada y, aun así, lo encuentro realmente agradable de usar.

Los valores predeterminados razonables pueden ser difíciles de determinar y las pruebas de usabilidad simples pueden proporcionar muchas pistas que lo ayudarán con eso.

Answer 11

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

Answer 12

El diseño de las cosas cotidianas - Donald Norman

Un canon de la tradición del diseño y la base de muchos cursos de HCI en universidades de todo el mundo.No diseñarás una gran GUI en cinco minutos con unos pocos comentarios de un foro web, pero algunos principios te ayudarán a orientar tu pensamiento de la manera correcta.

--

MC

Answer 13

Al construir mensajes de error, haga que el mensaje de error sea las respuestas a estas 3 preguntas (en ese orden):

1. ¿Qué pasó?

2. ¿Por qué sucedió?

3. ¿Qué se puede hacer al respecto?

Esto es de "Pautas de interfaz humana:La interfaz de escritorio Apple "(1987, ISBN 0-201-17753-6), pero se puede usar para cualquier mensaje de error en cualquier lugar.Hay un Versión actualizada para MacOS X.La página de MicrosoftMensajes de la interfaz de usuariodice 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 ".

También incluya cualquier información conocida por el programa, no solo una cadena fija.P.ej.Para el "por qué sucedió" parte del mensaje de error Use "archivo de espectro sin procesar l: refdataformasCotParser tripleencoding Q1LCMS190203_01DOUB Learg.wiff no existe" en lugar de solo "el archivo no existe".

Compare esto con el infame mensaje de error:"Un error sucedió".

Answer 14

(Robado de Joel :o) )

No deshabilite/elimine opciones; más bien, envíe un mensaje útil cuando el usuario haga clic en él/seleccione.

Answer 15

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

Answer 16

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

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

3. Utilice el zoom semántico siempre que 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 navegas entre diferentes secciones y horizontal cuando navegas dentro del contenido de la sección o subsección.

5. Mantén siempre visibles los principales nodos de opciones de tu estructura (donde el tamaño de la pantalla y el tipo de dispositivo lo permita).

6. Cuando profundices en la estructura, mantén siempre una pista visible (es decir,como en forma de camino) indicando dónde se encuentra.

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

Answer 17

Sea poderoso y simple

Ah, y contrata a un diseñador/aprende habilidades de diseño.:)

Answer 18

Con las GUI, los estándares son específicos de la plataforma.P.ej.Mientras desarrollaba GUI en Eclipse, esto enlace proporciona una guía decente.

Answer 19

He leído la mayor parte de lo anterior y hay una cosa que no veo mencionada:

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

Si el mismo usuario va a utilizar la interfaz de usuario repetidamente, pero tal vez no muy a menudo, deshabilitar los controles es mejor que ocultarlos:los cambios en la interfaz de usuario y las características ocultas que no son obvias (o recordadas) por un usuario ocasional son frustrantes para el usuario.

Si el mismo usuario va a utilizar la interfaz de usuario MUY REGULARMENTE (y no hay mucha rotación en el trabajo, es decir,no hay muchos usuarios nuevos que se conectan todo el tiempo) deshabilitar los controles es absolutamente útil y el usuario se acostumbrará a las razones por las que suceden las cosas, pero se aprecia evitar que usen los controles accidentalmente en contextos inadecuados y evita errores.

Es solo mi opinión, pero todo se reduce a comprender su perfil de usuario, no solo lo que podría implicar una única sesión de usuario.