¿Problemas comunes de usabilidad de aplicaciones web?

Menús desplegables CSS/Javascript que no tienen un retraso especificado para que experimente el "problema diagonal" (a través de Jakob Nielsen )

No poner etiquetas seleccionables en casillas de verificación y otros campos de formulario.

Es muy fácil de hacer. Vea la etiqueta HTML <label> .

Diseño de validación de formulario deficiente.

I lo odio cuando envío un formulario que falla la validación y la aplicación hace algo de lo siguiente:

• Los campos están EN BLANCO cuando el formulario se recarga. Esto me sucedió al registrarme en una aplicación web en mi iPhone. Estaba realmente enojado porque había más de 8 campos.
• Muestra solo un error de validación por envío de formulario.
• No presenta un resumen de errores en la parte superior del formulario.
• No resalta visualmente las entradas de campo no válidas.

Diseño deficiente cuando se trata de botones de acción Primarios vs Secundarios en formularios.

http://www.lukew.com/resources/articles/psactions.asp

Los usuarios usan los botones de retroceso y avance en su navegador (o en su mouse). Y también usan el botón Actualizar. Así que tenga cuidado con las publicaciones de formulario en su sitio web.

A nadie le gusta esto ...

Este cuadro de diálogo aparece cuando actualiza la página en la que se publican los datos. Afortunadamente, se puede evitar usando method = "get" cuando sea posible, o method = "post" seguido inmediatamente por una redirección cuando sea necesario. Si debe utilizar una publicación por razones de duración o seguridad, la redirección debe ir a una URL diferente a la acción del formulario para evitar este mensaje.

Enlaces de JavaScript. No puede hacer clic con el botón central para abrir una nueva pestaña para javascript:loadPage(34576).

Solicitar información personal obligatoria en los formularios de registro cuando no sean necesarios.

Ejemplos:

• pedir una dirección en un sitio web donde esta información es inútil
• Obligar a ingresar un nombre "real"
• ...

Hacer que esta información sea obligatoria es la mejor manera de obtener una base de datos realmente contaminada llena de "dummy", "[email protected]", etc., porque a la mayoría de las personas no les gusta dar ese tipo de información cuando no es realmente necesario.

Además, no poder modificar ninguna de esta información es un diseño realmente malo.

target = "_ blank" en las anclas es uno de los más comunes, y el que más odio. Sin embargo, hay algunos casos que tienen sentido, en mi opinión.

Aquí hay una lista bastante conocida de los 10 errores principales en el diseño web: http://www.useit.com/alertbox/9605.html

Cuando la funcionalidad de botón de retroceso está deshabilitada o cambia de lo que el usuario esperaría. Lo veo mucho en aplicaciones que usan cuadros de diálogo personalizados/lightboxes/iframes.

Haciéndome buscar el "¿olvidó su contraseña?" enlace, y luego una vez que hago clic en él, me envía mi contraseña en el claro ¹ Una vez que lo encuentre. Nuestro querido Jeff Atwood lo cubrió bastante bien en " Probablemente esté almacenando contraseñas incorrectamente "

_{¹ Es cierto que esta parte es más un problema de programación , pero también lo considero un problema de usabilidad.}

Usar casillas de verificación como botones de radio y viceversa.

No hay ningún lugar para cerrar su cuenta o hacer que sea realmente difícil encontrar dónde cerrar su cuenta.

Idealmente, desea una sección "Cuenta" o algo redactado de manera similar, y en esa página, aparte de todas las demás cosas que desea allí, un enlace o botón claramente etiquetado que dice "cerrar mi cuenta". Puede seguir eso con una página que pregunta a los usuarios por qué se van o los invita a dar su opinión, pero todas esas cosas deben ser priorizadas en comparación con la llamada real a la acción "cerrar mi cuenta" (o eliminar, eliminar, etc.) .

• Campos con validación súper estricta. Por ejemplo, si escribió un código postal y "V5X4O4" funciona pero "V5X 4O4" no.

• Iconos sin etiqueta o título textual (al pasar el mouse o no).

• Si un título se está truncando, creo que debería poder ver una información sobre herramientas con el título completo al pasar el ratón.

• Cuando se ofuscan botones importantes de los usuarios finales a favor de anuncios o material promocional. Piense en el botón "Continuar sin una cuenta" de Paypal.

  • AUDIO QUE JUEGA SIN PERMISO! Lol - Además, no hay botón de silencio.

No hacer que su sitio se degrade con gracia cuando JavaScript está deshabilitado.

La pregunta es un poco demasiado general y en realidad es más una discusión.

Puedo aportar una cosa que he visto repetidamente:

Formularios que tienen un botón "borrar todo"

• Algunos de ellos incluso diseñan los botones "enviar" y "borrar todo" de la misma manera, dándoles el mismo peso.
• Sin mencionar que he visto ejemplos (no tengo un enlace específico en mente en este momento ...) donde el "clear" está a la izquierda y el "submit" a la derecha, haciendo que algunos usuarios presionen el primero botón más cercano a su cursor al salir del último campo.

No veo ninguna razón para un botón "borrar", pero si insiste absolutamente, utilice un enlace muy sutil, que permita una acción simple y obvia para el usuario.

Tener que registrarse para realizar algunas operaciones básicas que realmente no necesitan registro. O permita un método de registro de "un clic".
El usuario debe tener derecho a decidir. ¡Termino con muchas cuentas de "uso único" en tantos sitios web!

Algunos ejemplos donde no debería ser necesario:

• descarga de archivos (¿cuántos sitios web de "código" le piden que se registre para permitirle descargar un archivo de muestra?)
• búsqueda (sí, algunos foros deshabilitan la búsqueda de usuarios no registrados)
• acceder a un artículo (cuando su acceso es gratuito)
• ...

Sitios con barras de estado flotantes

Tales como Meebo Bar . Estos son desagradables y rara vez proporcionan una funcionalidad útil. Ocupan espacio innecesario y aparecen globos que distraen.

Ser "creativo" y colocar la barra de búsqueda detrás de una pestaña/enlace/etc. Si ofrece búsqueda, simplemente ponga un cuadro disponible, ¡en lugar de tener que buscarlo!

Mi mayor motivo favorito son los sitios que, por una razón o muchas no admiten correctamente los signos más en las direcciones de correo electrónico . Muchas veces, los sitios web no validarán una dirección de correo electrónico con un '+' antes de la '@'. Sin embargo, lo peor es cuando un sitio acepta la dirección, pero luego no escapa y/o escapa de los datos correctamente e intenta enviar un correo electrónico a una dirección con un espacio o con los dos lados del '+' unidos. .

Este validador gratuito escrito en PHP supuestamente sigue todos los RFC y sus erratas asociadas.

Muchos sitios no usan colores diferentes para enlaces visitados .

Jakob Nielsen: Cambiar el color de los enlaces visitados

Aplicaciones web que se ejecutan en una conexión HTTPS segura, pero cargan contenido desde una conexión HTTP. Por un lado, esto está totalmente bien, pero para IE usuarios en particular (no yo normalmente) la advertencia de seguridad es incómoda y confusa para los usuarios ...

No solo es muy molesto descartar en cada página, sino que la redacción es incómoda y las acciones de los botones son diferentes para IE (6 y 7) frente a IE8 +

Antiguo IE diálogo:

Nuevo IE diálogo:

Entonces, si como usuario "solo quiere cargar la página completa" (por ejemplo, está buscando el botón "desaparecer") ... es el valor predeterminado Yes en IE6 y IE7, pero el no predeterminado No en IE8 +.

Nota: Soy plenamente consciente como desarrollador de cuál es el propósito del diálogo e incluso por qué Microsoft lo cambió, pero para los usuarios finales simplemente los confunde, especialmente en IE8. Los usuarios finales ven aparecer un cuadro de diálogo pidiendo "permiso", "confirmación", etc. y esperan hacer clic en la opción "ok" o "yes" porque no leen el cuadro de diálogo. Se puede argumentar que los usuarios deberían leerlo, pero es más fácil si los desarrolladores se aseguran de que no tengan contenido mixto si se puede evitar.

Tener que buscar el enlace de cierre de sesión. Me conecto a una página, y en algunos, cuando termino, tengo que buscar el botón o el enlace para cerrar sesión.

Recientemente noté algo que nunca consideré un problema de usabilidad:

Desplácese para hacer que las acciones estén disponibles. Como, por ejemplo, en Twitter.com donde al pasar el cursor sobre un Tweet se muestran los comandos retweet y responder.

Esto simplemente no funciona en dispositivos táctiles en absoluto. ¡No hay vuelo estacionario!

Otro motivo favorito mío son los sitios web que no abren enlaces externos en una nueva pestaña. Mira, estoy navegando en un árbol. Espero que cada dominio en el que estoy represente una rama, cuando termine, cerraré la pestaña. Ciertamente no quiero hacer clic 'atrás' diez veces para subir por la rama.

Ocultar lo que los usuarios quieren y, en cambio, darles lo que TÚ quieres que quieran.

Un ejemplo es la atención al cliente. En lugar de enumerar una caja grande y gruesa con número de teléfono/correo, etc., algunas empresas muestran un FAQ como un medio para obtener ayuda y no tienen ninguna información de contacto en esa página.

Sitios que tienen estructuras de menú que "flotan" hacia arriba y hacia abajo a ambos lados de la pantalla a medida que se desplaza. Puedo ver por qué lo han hecho, pero a menudo es muy molesto y, con mayor frecuencia, no es tan "hábil" como el diseñador obviamente esperaba.

Puede ver un ejemplo al que me refiero aquí: http://www.deluxe-menu.com/floatable-menu-sample.html

Sitios de control de calidad que muestran la respuesta aceptada dos veces.

A List Apart tiene un artículo de Aza Raskin: "Nunca use una advertencia cuando quiera decir deshacer".

http://www.alistapart.com/articles/neveruseawarning/

Los usuarios tienden a ignorar o rechazar las ventanas emergentes de "advertencia", pero ofrecerle al usuario la oportunidad de "deshacer" es mucho más fácil de usar.

Captchas

aunque son bastante populares en estos días, también se consideran un problema de accesibilidad, especialmente para las personas que no reconocen las palabras que no conocen (o que ni siquiera tienen caracteres especiales como ýáěíč en su teclado)

personalmente, prefiero usar preguntas racionales simples para servir esta funcionalidad

ejemplo: por favor escriba el siguiente número entero que viene después del número once

Sitios que usan mucha CPU y memoria

Por lo general, tengo un montón de pestañas abiertas con preguntas/respuestas de programación de varias listas de correo y muchos de estos sitios tienen algunos javascript pesados ​​(la instalación de adblock ayudó, pero todavía hay sitios pesados). Con Chrome finalmente puedo ver qué pestañas lo están causando.

La nueva búsqueda mejorada de imágenes de Google pone mi CPU en un trabajo pesado y ocupa varios cientos de megabytes. Gran cantidad de recursos hambrientos.

Tener elementos estáticos en su página que cambian de color si coloca el cursor del mouse sobre ellos, pero no hace nada si hace clic en ellos. En la misma liga: hipervínculos o botones donde la región en la que se puede hacer clic está limitada al texto.

Redirigir desde el URI raíz a un subdirectorio o subdominio (no eliminar/agregar el www).