Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
ada:howto:sicoferp:factory:uxdesign:uxwriting [2025/03/17 14:29] 10.1.52.50 |
ada:howto:sicoferp:factory:uxdesign:uxwriting [2025/03/17 15:28] (actual) 10.1.52.50 [3.3. Formatos y convenciones] |
||
|---|---|---|---|
| Línea 15: | Línea 15: | ||
| ❌ **Incorrecto:** - "Ingrese el valor de la obligación monetaria a satisfacer" - "Elija el ítem categórico de la estructura presupuestaria" | ❌ **Incorrecto:** - "Ingrese el valor de la obligación monetaria a satisfacer" - "Elija el ítem categórico de la estructura presupuestaria" | ||
| - | Mi objetivo es facilitarles el trabajo mientras mantenemos la calidad de la experiencia de usuario. La claridad no es negociable - si el usuario tiene que pensar más de 2 segundos qué significa algo, estamos fallando. | + | ''Mi objetivo es facilitarles el trabajo mientras mantenemos la calidad de la experiencia de usuario. La claridad no es negociable - si el usuario tiene que pensar más de 2 segundos qué significa algo, estamos fallando. |
| + | '' | ||
| ==== 1.2. Concisión ==== | ==== 1.2. Concisión ==== | ||
| Línea 41: | Línea 41: | ||
| ❌ **Incorrecto:** - "Error: Monto inválido. El saldo es insuficiente." | ❌ **Incorrecto:** - "Error: Monto inválido. El saldo es insuficiente." | ||
| - | Estoy disponible para aclarar cualquier duda sobre estos principios. Cualquier feedback sobre esto es súper bienvenido. | + | ''Estoy disponible para aclarar cualquier duda sobre estos principios. Cualquier feedback sobre esto es súper bienvenido.'' |
| + | |||
| + | |||
| + | ---- | ||
| ===== 2. Elementos de interfaz ===== | ===== 2. Elementos de interfaz ===== | ||
| Línea 65: | Línea 69: | ||
| * **Campos obligatorios:** Nombre + asterisco rojo (//) → "Descripción //" | * **Campos obligatorios:** Nombre + asterisco rojo (//) → "Descripción //" | ||
| * **Campos opcionales:** Nombre + "(Opcional)" → "Código Proyecto (Opcional)" | * **Campos opcionales:** Nombre + "(Opcional)" → "Código Proyecto (Opcional)" | ||
| - | |||
| - | He comprobado en mis años de trabajo con SICOF que las etiquetas son el primer lugar donde los usuarios se pierden. Si cuidamos estos detalles, reducimos la fricción y los errores de interpretación. No subestimen el poder de una buena etiqueta. | ||
| ==== 2.2. Textos de Placeholder ==== | ==== 2.2. Textos de Placeholder ==== | ||
| Línea 81: | Línea 83: | ||
| === Recomendaciones adicionales: === | === Recomendaciones adicionales: === | ||
| - | * **Usar color #9AA2B1 (gris medio)** para todos los placeholders, facilitando la diferenciación del texto ingresado. | ||
| * **Evitar textos largos** en campos pequeños; mantener placeholders visibles sin truncamiento. | * **Evitar textos largos** en campos pequeños; mantener placeholders visibles sin truncamiento. | ||
| * **Mostrar formato esperado** en campos con validaciones específicas. | * **Mostrar formato esperado** en campos con validaciones específicas. | ||
| Línea 108: | Línea 109: | ||
| * **Agrupar acciones relacionadas** y separar visualmente grupos de acciones diferentes. | * **Agrupar acciones relacionadas** y separar visualmente grupos de acciones diferentes. | ||
| * **Mantener consistencia** en el uso de verbos para acciones similares en toda la aplicación. | * **Mantener consistencia** en el uso de verbos para acciones similares en toda la aplicación. | ||
| - | |||
| - | Siempre digo en las reuniones de revisión: "Si el usuario tiene que pensar dónde hacer clic, hemos fallado". Por eso soy tan exigente con la jerarquía y etiquetado de botones. | ||
| === Botones específicos para módulo de Disponibilidades: === | === Botones específicos para módulo de Disponibilidades: === | ||
| Línea 171: | Línea 170: | ||
| * **Incluir unidades** siempre que se muestren valores numéricos (%, $, etc.). | * **Incluir unidades** siempre que se muestren valores numéricos (%, $, etc.). | ||
| * **Mantener brevedad** en los textos de información general del dashboard. | * **Mantener brevedad** en los textos de información general del dashboard. | ||
| - | |||
| - | Para mí, el dashboard es como la carta de presentación de nuestro sistema. Si se ve desordenado o confuso, perdemos credibilidad desde el primer momento. | ||
| ==== 2.7. Procesos guiados (Stepper) ==== | ==== 2.7. Procesos guiados (Stepper) ==== | ||
| Línea 185: | Línea 182: | ||
| === Recomendaciones adicionales: === | === Recomendaciones adicionales: === | ||
| - | * **Limitar a 4-5 pasos** en el stepper para no sobrecargar al usuario. | + | * **Limitar a 5-6 pasos** en el stepper para no sobrecargar al usuario. |
| * **Usar números** para identificar cada paso (1, 2, 3, 4). | * **Usar números** para identificar cada paso (1, 2, 3, 4). | ||
| * **Mostrar progreso** de forma visual, con pasos completados, actual y pendientes claramente diferenciados. | * **Mostrar progreso** de forma visual, con pasos completados, actual y pendientes claramente diferenciados. | ||
| Línea 196: | Línea 193: | ||
| - "Documentos soporte" | - "Documentos soporte" | ||
| - "Revisión final" | - "Revisión final" | ||
| + | |||
| + | |||
| + | ---- | ||
| + | |||
| ===== 3. Terminología y convenciones ===== | ===== 3. Terminología y convenciones ===== | ||
| Línea 211: | Línea 212: | ||
| |**Saldo** |Usar con calificador: "Saldo disponible", "Saldo comprometido" |"Dinero", "Fondos" | | |**Saldo** |Usar con calificador: "Saldo disponible", "Saldo comprometido" |"Dinero", "Fondos" | | ||
| |**Centro de Costos** |Usar siempre con mayúscula inicial |"CC", "Costos" | | |**Centro de Costos** |Usar siempre con mayúscula inicial |"CC", "Costos" | | ||
| - | |||
| - | Esto es súper importante. Cuando escucho a alguien decir "partidas" en lugar de "rubros", me quedo con esa sensación de inconsistencia que debemos evitar a toda costa. | ||
| === Nuevos términos específicos: === | === Nuevos términos específicos: === | ||
| Línea 267: | Línea 266: | ||
| * ✅ **Correcto:** "80%", "33.5%" (cuando el decimal es relevante) | * ✅ **Correcto:** "80%", "33.5%" (cuando el decimal es relevante) | ||
| * ❌ **Incorrecto:** "80 %", "80 por ciento", "80.00%" | * ❌ **Incorrecto:** "80 %", "80 por ciento", "80.00%" | ||
| + | |||
| + | |||
| + | ---- | ||
| + | |||
| ===== 4. Mensajes y comunicación ===== | ===== 4. Mensajes y comunicación ===== | ||