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:30] 10.1.52.50 [1.1. Claridad] |
ada:howto:sicoferp:factory:uxdesign:uxwriting [2025/03/17 15:28] (actual) 10.1.52.50 [3.3. Formatos y convenciones] |
||
---|---|---|---|
Línea 69: | 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 85: | 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 112: | 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 175: | 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 189: | 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 200: | 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 215: | 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 271: | 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 ===== |