usuario software programa para online interfaz interfaces graficas ejemplos diseño diseñar caracteristicas design user-interface usability

design - software - Técnicas de diseño de GUI para mejorar la experiencia del usuario



interfaz de usuario caracteristicas (22)

¿Qué técnicas sabes / utilizar para crear una GUI fácil de usar?

Puedo nombrar las siguientes técnicas que me parecen especialmente útiles:

  • Notificaciones sin bloqueo (diálogos flotantes como Firefox3 o mensajes emergentes de Vista en el área de la bandeja)
  • Ausencia del botón "Guardar"
    MS OneNote como ejemplo.
    Los clientes de mensajería instantánea pueden guardar el historial de conversación automáticamente
  • Búsqueda integrada
    Busque no solo a través de archivos de ayuda, sino más bien haga que los elementos de la IU puedan buscarse.
    Vista dio un buen paso hacia tal GUI.
    Scout addin Microsoft Office fue una gran idea.
  • Interfaz de usuario orientada al contexto (barra de cinta en MS Office 2007)

¿Implementas algo así como las técnicas enumeradas en tu software?

Editar:
Como mencionó Ryan P , una de las mejores maneras de crear aplicaciones útiles es ponerse en el lugar del usuario. Estoy totalmente de acuerdo con eso, pero lo que quiero ver en este tema son técnicas específicas (como las que mencioné anteriormente) en lugar de recomendaciones generales.

Primeros principios: Wilfred James Hansen

  • Conoce al usuario
  • Minimiza la memorización
  • Optimizar operaciones
  • Ingeniero para errores


Expansiones subsiguientes: Dr. Theo Mandel

Coloca a los usuarios en control

  • Usa modos juiciosamente (no modal)
  • Permitir a los usuarios usar el teclado o el mouse (flexible)
  • Permitir a los usuarios cambiar el enfoque (interrumpible)
  • Mostrar mensajes descriptivos y texto (útil)
  • Proporcionar acciones inmediatas y reversibles, y comentarios (perdonar)
  • Proporcionar rutas y salidas significativas (navegables)
  • Acomodar usuarios con diferentes niveles de habilidad (accesibles)
  • Haga que la interfaz de usuario sea transparente (facilitadora)
  • Permitir a los usuarios personalizar la interfaz (preferencias)
  • Permitir a los usuarios manipular directamente objetos de interfaz (interactivos)

Reducir la carga de memoria de los usuarios

  • Alivie la memoria a corto plazo (recuerde)
  • Confíe en el reconocimiento, no en la recuperación (reconocimiento)
  • Proporcionar indicaciones visuales (informar)
  • Proporcionar valores predeterminados, deshacer y rehacer (perdonar)
  • Proporcionar atajos de interfaz (frecuencia)
  • Promover una sintaxis de acción de objeto (intuitiva)
  • Usa metáforas del mundo real (transferencia)
  • Divulgación Progresiva del Usuario (contexto)
  • Promover la claridad visual (organizar)

Haga que la interfaz sea consistente

  • Mantener el contexto de las tareas de los usuarios (continuidad)
  • Mantener la consistencia dentro y entre los productos (experiencia)
  • Mantenga los resultados de interacción lo mismo (expectativas)
  • Proporcionar atractivo estético e integridad (actitud)
  • Fomentar la exploración (predecible )

Bueno, una cosa que puede ser obvia: no cambie (ni siquiera ligeramente) la posición, el color, el tamaño de fuente, etc. de los botones, menús, enlaces, etc. entre pantallas si hacen el mismo tipo de acción.

El blog de Coding Horror regularmente da grandes ideas. Solo algunos ejemplos:

  • Aprendizaje exploratorio e incremental
  • Interfaz de usuario autodocumentada
  • Búsqueda incremental de características / Acceso inteligente al teclado
  • Diseño orientado a tareas (cinta en lugar de menús y barras de herramientas)
  • Proporcionar deshacer en lugar de confirmación constante

Otro aspecto: utilice iconos escalables para resolver el problema de las resoluciones de pantalla de múltiples usuarios sin mantener diferentes mapas de bits de resolución.

He encontrado que los patrones de interfaz de usuario son una referencia útil para este tipo de cosas. Está organizado de forma muy parecida al clásico libro GoF Design Patterns, con cada descripción de patrón que contiene:

  • El problema que resuelve el patrón
  • Un ejemplo del patrón en acción
  • Ejemplos de casos de uso para el patrón
  • La solución para implementar el patrón
  • Justificación de la solución

Intente pensar primero en los objetivos finales de su usuario antes de decidir qué tareas individuales llevarían a cabo al usar su software. El libro Acerca de Face tiene excelentes discusiones sobre este tipo de cosas y, aunque bastante largo, es muy interesante y perspicaz. Es interesante observar cuántas de sus sugerencias sobre cómo mejorar el diseño del software parecen usarse en los documentos de Google ...

Otra cosa, mantenga su interfaz de usuario lo más simple y limpia posible.

La mejor técnica que encontré es ponerte en los zapatos de los usuarios. ¿Qué le gustaría ver de la GUI y poner eso en el frente? Esto también le da la posibilidad de priorizar, ya que esas cosas deben hacerse primero y luego trabajar desde allí.

Para hacer esto, trato de encontrar "capas de utilidad" y sumar / restar de las capas hasta que parezca limpio. Básicamente para encontrar las capas hago una lista de todas las funciones que la GUI necesita tener, todas las funciones que debería tener y todas las funciones que sería bueno tener. Luego agrupo esos para que cada cosa tenga un orden lógico y las agrupaciones se conviertan en las "capas". A partir de las capas, a continuación, agrego la funcionalidad más importante (o lo que se usaría para la operación Día a día) y esa se convierte en la parte más destacada, y trabajo cosas en la función alrededor de esos elementos.

Una de las cosas más difíciles es la navegación, ya que tiene mucho que ofrecer, cómo lo hace útil y aquí es donde las capas realmente ayudan. Hace que sea fácil ver cómo los menús de diseño, cómo interactúan otras piezas, qué piezas se pueden ocultar, etc.

He descubierto que la manera más fácil de hacerlo es comenzar por ver qué y cómo funcionan los usuarios en el día a día, lo que les facilitará ponerse en sus zapatos (incluso mejor es hacer su trabajo por unos días). . Luego haga algunas demostraciones y póngalas en frente de los usuarios, incluso si son prototipos de papel (hay un libro sobre este proceso llamado Paper Prototyping, de Carolyn Snyder). Luego comience a construirlo y colóquelo frente a los usuarios, ya que está construido a menudo .

También recomendaré el libro Designing Interfaces de Jenifer Tidwell publicado por O''Reilly

La retroalimentación realmente buena es extremadamente importante. Incluso cosas simples como hacer que sea obvio lo que se puede o no hacer clic se pueden pasar por alto o son demasiado sutiles. Retroalimentación cuando algo puede pasar en el fondo es genial. En gmail, es genial que aparezca una cinta de estado en la parte superior que le indique si algo está enviando o cargando, pero es aún mejor que le avise que algo se ha enviado correctamente o aún se está cargando.

La técnica del "desvanecimiento amarillo" es otra cosa popular entre la multitud de RoR que logra algo similar. Nunca desea que el usuario haga la pregunta, "¿Qué acaba de pasar?" o "¿Qué pasará cuando haga esto?".

Otro truco que se ha vuelto más popular últimamente que he estado usando mucho es la edición en el lugar. En lugar de tener una vista de algunos datos con una pantalla de "edición" separada (u omitir la vista y solo tener una pantalla de edición), a menudo puede ser más fácil de usar tener una vista muy bien distribuida de algunos datos y simplemente hacer clic para editar partes de eso Esta técnica es realmente apropiada solo cuando la lectura de los datos ocurre con más frecuencia que la edición, y no es apropiada para la entrada de datos graves.

Le daré uno de mis favoritos personales: evite los cuadros de diálogo a toda costa. Una interfaz de usuario realmente buena casi nunca debería necesitar mostrar un cuadro de diálogo. Agrégalos a tu programa solo como un último recurso.

Para obtener más información, es posible que desee consultar sugerencias de UI fácilmente digeribles para los desarrolladores .

Los elementos de la lista que usted presenta dependen realmente de la situación: variarán de una aplicación a otra. Algunas aplicaciones necesitarán un botón para guardar, otras no. Algunas condiciones garantizarán un cuadro de diálogo modal, otras no.

Mi regla principal para diseñar una interfaz utilizable: siga las convenciones de IU existentes. Nada confunde a un usuario más que a una IU que no funciona como cualquier cosa que haya usado alguna vez. Lotus Notes tiene una de las peores interfaces de usuario que se haya creado, y es casi en su totalidad porque van en contra de las convenciones de UI comunes con casi todo lo que hicieron.

Si está cuestionando cómo debe diseñar una pieza determinada de su UI, piense en algunas aplicaciones estándar / conocidas que ofrecen funcionalidades similares y vea cómo lo hacen.

Me gusta seguir estas 3 pautas:

  1. Estándar: siga estándares / patrones conocidos, reutilice ideas de todos los productos que respete
  2. Simple: mantenga sus soluciones simples y fáciles de cambiar (si es necesario)
  3. Elegante: use menos para lograr más

Mira el gran libro . No me hagas pensar por Steve Krug.
Está enfocado en la web, pero muchos de los conect pueden aplicarse a cualquier cosa, desde mezcladores hasta tableros de automóviles.
Tópicos cubiertos:

  • Patrones de usuario
  • Diseñando para escanear
  • Uso racional de la copia
  • Diseño de navegación
  • Diseño de página de inicio
  • Prueba de usabilidad

También tiene un blog llamado Advanced Common Sense

Y algunos enlaces relacionados con UI aleatorios:
- Diseño de interfaz de usuario para programadores por Joel Spolsky
- 10 pesadillas de usabilidad de las que deberías estar consciente

Para agregar a su lista, aku, pondría la explorabilidad como una de mis más altas prioridades. Básicamente, quiero que el usuario se sienta seguro probando las funciones. Nunca deberían dejar de utilizar algo por temor a que su acción sea irreversible. Lo más común es que esto se implemente utilizando comandos de deshacer / rehacer, pero hay otras opciones disponibles, por ejemplo, copias de seguridad automáticas.

Además, para las aplicaciones que están más orientadas al proceso (en lugar de aplicaciones de entrada de datos), consideraría implementar una interfaz que guíe al usuario un poco más. Las pautas de la interfaz de usuario inductiva de Microsoft pueden ayudar aquí, aunque debe tener mucho cuidado de no exagerar, ya que puede demorar demasiado al usuario.

Finalmente, como con cualquier cosa que incluya texto, haga que la interfaz de usuario sea lo más escaneable posible. Por ejemplo, si tiene encabezados bajo los cuales aparecen comandos / opciones, considere poner la palabra de acción al comienzo, en lugar de una palabra de pregunta. El punto que hace Maudite es también un buen ejemplo de escaneo, ya que el texto del botón "No guardar" no se basa en el contexto del párrafo anterior.

Si está haciendo un software empresarial, muchos usuarios tendrán monitores pequeños a baja resolución. O si son viejos, lo tendrán a baja resolución para que puedan ver botones gigantes (he visto un 800x600 en un monitor ish de 24 "). Tengo un viejo monitor de 15" a baja resolución (800 x 600) por lo que Puedo ver cómo se verá el programa "me gusta" en menos que en modo inactivo de vez en cuando. Sé que los usuarios de las empresas prácticamente tienen que aceptar lo que se les ofrece, pero si diseñas una forma de ganar que no cabe en una pantalla de 800x600, no está ayudando a nadie.

Si implementa una búsqueda, Locate32 en una búsqueda en vivo, como lo hacen Locate32 y Google Suggest ahora. Estoy tan acostumbrado a no presionar "Enter" en el cuadro de búsqueda ahora.

Si le hace una pregunta al usuario, no la haga una pregunta sí / no. Tómese el tiempo para hacer una nueva forma y poner los verbos como opciones como en mac.

Por ejemplo:

Would you like to save? Yes No

Debiera ser:

Would you like to save? Save Don''t Save

Hay una explicación más detallada here.

Si su UI implica el ingreso de datos o la manipulación (típica de las aplicaciones comerciales), le recomiendo que les permita a sus usuarios actuar sobre conjuntos de elementos de datos tanto como sea posible. También intente diseñar de tal manera que los usuarios experimentados puedan interactuar con la interfaz de usuario de una manera muy aleatoria, en lugar de secuencial (teclas de acelerador, hipervínculos, etc.).

Una técnica útil que nunca veo que alguien use es agregar una información sobre herramientas para un control de IU deshabilitado que explique por qué el control está deshabilitado. Entonces, si hay un cuadro de lista que está deshabilitado y no está claro por qué está deshabilitado, quiero pasar el cursor sobre él y me dice por qué está deshabilitado. Quiero ver algo como "Está deshabilitado porque dos cuadros de texto en la pantalla se dejaron en blanco o porque no ingresé suficientes caracteres en algún campo o porque no hice una determinada acción".

Me meto en muchas situaciones similares y es frustrante. A veces termino publicando en el foro del software preguntando por qué un control aparece en gris cuando una información sobre herramientas me pudo haber ayudado en un segundo. La mayoría de estos programas tienen archivos de ayuda que son inútiles en este tipo de escenarios.

Intente simular que no sabe nada sobre su software y trate de usarlo. Sin embargo, esto no es práctico porque ya tienes una determinada mentalidad hacia la aplicación. Así que observa cómo los desarrolladores o amigos usan la aplicación y buscan los puntos débiles y piden comentarios.

Uno de los libros clásicos para ayudarlo a pensar sobre el diseño es "El diseño de las cosas cotidianas" de Donald Norman. Él da grandes ejemplos del mundo real. Por ejemplo, si diseñas bien una puerta, nunca deberías tener que agregar etiquetas que digan "empujar" y "tirar". Si quieres que tiren, pon un control; si quieres que empujen, pon un plato plano. No hay forma de hacerlo mal, y ni siquiera tienen que pensarlo.

Este es un buen objetivo: hacer las cosas obvias. Tan obvio que nunca se le ocurre al usuario hacer algo incorrecto . Si hay cuatro perillas en una estufa, cada una al lado de un ojo, es obvio que cada perilla controla el ojo que está al lado. Si las perillas están en línea recta, todas en el lado izquierdo, debe etiquetarlas y el usuario debe detenerse y pensar. Mal diseño. No los hagas pensar

Otro principio: si el usuario comete un error, debería ser muy fácil de deshacer . El software de imagen de Google, Picasa, es un buen ejemplo. Puedes recortar, volver a colorear y retocar tus fotos todo lo que quieras, y si alguna vez cambias de opinión, incluso un mes después, puedes deshacer los cambios. Incluso si guarda explícitamente sus cambios, Picasa realiza una copia de seguridad. Esto libera al usuario para jugar y explorar, porque no vas a lastimar nada.

Here hay un gran episodio de podcast de DotNetRocks donde Mark Miller habla sobre cómo crear una buena interfaz de usuario ; Aunque el título del programa es .NET rocks, este episodio habla de una regla general sobre cómo crear una interfaz de usuario para aumentar la productividad del usuario del programa.

Aquí hay un episodio

El buen diseño de la interfaz de usuario se puede realizar apegándose a algunas reglas y evitando errores comunes. No es necesario ser un diseñador que lleva el macbook tattoo con wearin latte-sippin para crear interfaces de usuario que funcionen.

Cuando se utiliza un menú desplegable, la altura desplegable predeterminada suele ser demasiado baja (de manera predeterminada, 8 elementos para winforms, por ejemplo).

Al aumentarlo, se ahorrará al usuario un clic si la cantidad de elementos es baja o se facilitará la búsqueda en el menú desplegable si hay muchos elementos.

De hecho, ¡no me parece muy útil no usar todo el espacio disponible!

Esto es tan obvio para mí ahora, pero, por ejemplo, parece que incluso los diseñadores de VisualStudio no lo han descubierto (por cierto, si aumenta manualmente la altura de Intellisense, se mantendrá de esta manera, pero eso es offtopic :))