“Hall of Shame” de UI

Las tres pantallas pertenecen a la misma aplicación. Hacen lo mismo: guardar datos.

1. 1La misma acción tiene tres nombres: Guardar, Submit, OK.Un verbo por acción en toda la aplicación.
2. 2El botón principal cambia de forma, color y posición en cada pantalla.Un solo componente de botón primario, siempre en el mismo lugar.
3. 3Tres formatos de fecha: 28/10/2004, 10-28-26, 28 de oct.Un formato (DD/MM/AAAA en Colombia) o un selector de fecha.
4. 4Una papelera significa "guardar". Viola una convención universal.Usar los íconos con su significado estándar, con etiqueta de texto.
5. 5Texto azul subrayado que no es un enlace.El estilo de enlace se reserva para enlaces.
6. 6Asignatura, Curso y Materia nombran lo mismo.Un glosario del dominio y un solo término.
7. 7Mezcla de idiomas, mayúsculas y trato (tú / usted).Una guía de estilo de contenido: idioma, tono y capitalización.
8. 8La navegación está arriba, a la izquierda o abajo según la pantalla.Un layout común con la navegación fija.

El estudiante entró para una sola cosa: inscribir materias. Encuéntrenla.

1. 1La tarea principal está en letra de 9 px, gris, al final de la columna.La acción que el 80% de los usuarios busca va arriba y es la más visible.
2. 2Texto en movimiento y contadores rojos en todo: la atención se fragmenta.Sin animación decorativa. Notificaciones agregadas en un solo lugar.
3. 3Un modal, un chat y un banner de cookies tapan el contenido a la vez.Como máximo una interrupción, y solo si es necesaria.
4. 418 enlaces sin orden, con duplicados ("Formatos" y "Formatos (nuevo)").Agrupar por tarea, eliminar duplicados, usar el buscador.
5. 5Todo dice ¡NUEVO! o ¡IMPORTANTE!. Si todo se resalta, nada se resalta.Una jerarquía visual con un solo elemento dominante por pantalla.
6. 6Sin espacio en blanco. Clima, cumpleaños e indicadores compiten con trámites.Quitar lo que no sirve a la tarea. El espacio vacío también es diseño.

Un aviso oficial sobre la fecha límite de retiro de materias.

1. 1Seis tipografías en un solo aviso.Una o dos familias. La jerarquía se hace con tamaño y peso.
2. 2Degradado arcoíris y fondo con patrón. La forma compite con el contenido.Fondo plano. Un color de acento con significado.
3. 3El dato más importante (la fecha) está en amarillo sobre blanco: ilegible.Contraste mínimo 4.5:1 y la fecha como elemento principal.
4. 4Subrayado ondulado: parece error ortográfico o enlace.Énfasis con negrita. El subrayado es para enlaces.
5. 5Gris claro, 12 px, justificado y en máquina de escribir.Texto de lectura ≥ 16 px, alineado a la izquierda, contraste alto.
6. 6Rojo para "puede" y verde para "no puede". Además, el color solo no basta para daltónicos.Respetar convenciones de color y acompañarlo de texto o ícono.

Este formulario funciona. Llénenlo y envíenlo un par de veces. Prueben también eliminar la inscripción.

1. 1Cancelar es enorme y rojo. Enviar es un enlace gris diminuto.La acción principal es la más visible. Cancelar es secundaria.
2. 2No se sabe qué campos son obligatorios.Marcar los obligatorios (o los opcionales) antes de que el usuario falle.
3. 3"Fecha" sin formato ni ejemplo. "Código" ¿de qué?Etiquetas precisas y formato visible: "Código estudiantil (9 dígitos)".
4. 4El error aparece arriba, lejos del campo, y no dice cuál falló.Mensaje junto al campo, en el momento, con el campo marcado.
5. 5Tras el error el formulario se borra completo.Conservar todo lo que el usuario escribió.
6. 6"Procesando..." infinito: sin progreso, sin tiempo estimado, sin forma de cancelar.Indicar avance, tiempo esperado y permitir cancelar. Si falla, decirlo.
7. 7Doble negación con botones genéricos. Nadie sabe qué hace Aceptar."¿Eliminar tu inscripción a ISIS1221?" con botones "Eliminar" y "Conservar".
8. 8Detalle técnico interno expuesto al usuario."No pudimos guardar la inscripción. Intenta de nuevo en unos minutos." El detalle va al log.
9. 9No dice qué entrada ni por qué es inválida."El correo debe terminar en @upa.edu.co."
10. 10Tono gracioso y disculpa, pero ninguna salida.Qué pasó y qué hacer ahora. La disculpa no reemplaza la solución.
11. 11Culpa al usuario y grita en mayúsculas."La contraseña no coincide. Te quedan 2 intentos. ¿Olvidaste tu contraseña?"
12. 12Éxito en rojo, error en verde. El color contradice el texto.Verde para éxito, rojo para error, siempre con ícono y texto.