✎ ada:howto:sicoferp:factory:uxdesign:uxwriting [Wiki]

ada:howto:sicoferp:factory:uxdesign:uxwriting

Has cargado una revisión vieja del documento! Si la guardas crearás una versión nueva con estos datos.

====== Estándares de UX Writing para SICOF ERP ======

===== Introducción =====

Este documento establece los estándares y buenas prácticas para el contenido textual en las interfaces del sistema SICOF ERP. Su propósito es garantizar consistencia, claridad y eficiencia en la comunicación con los usuarios. Básicamente define cómo debemos comunicarnos con nuestros usuarios finales a través de la interfaz.

===== 1. Principios fundamentales =====

==== 1.1. Claridad ====

La claridad debe primar sobre cualquier otro aspecto. Los usuarios no deben tener que descifrar el significado de los textos.

✅ **Correcto:** - "Ingrese el monto a pagar" - "Seleccione el rubro presupuestal"

❌ **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.
''
==== 1.2. Concisión ====

Usar el mínimo de palabras necesarias para transmitir el mensaje, eliminando redundancias.

✅ **Correcto:** - "Guardar cambios" - "Certificado creado exitosamente"

❌ **Incorrecto:** - "Proceder a guardar los cambios realizados" - "El certificado ha sido creado con éxito satisfactoriamente"

==== 1.3. Consistencia ====

Mantener uniformidad en terminología, formatos y patrones a lo largo de todo el sistema.

✅ **Correcto:** - Usar siempre "Eliminar" para la misma acción - Mantener "Rubro presupuestal" en todos los contextos

❌ **Incorrecto:** - Alternar entre "Eliminar", "Borrar" y "Suprimir" para la misma acción - Cambiar entre "Rubro presupuestal" y "Partida presupuestaria"

==== 1.4. Constructivo ====

Los mensajes deben orientar al usuario hacia la solución, no solo señalar problemas.

✅ **Correcto:** - "El monto excede el saldo disponible ($10,000,000). Reduzca el valor o seleccione otro rubro."

❌ **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.''

----

===== 2. Elementos de interfaz =====

==== 2.1. Etiquetas de campos (Labels) ====

^Tipo de Campo               ^Formato Recomendado                       ^Ejemplo Correcto        ^Ejemplo Incorrecto                             ^
|**Encabezados de secciones**|Sustantivo + complemento corto            |"Datos generales"       |"Complete los datos generales del documento"   |
|**Etapas del proceso**      |Sustantivo + complemento (4 palabras máx.)|"Rubros y montos"       |"Selección de rubros presupuestales a utilizar"|
|**Contadores**              |Formato abreviado entre paréntesis        |"Descripción (0/4000)"  |"Caracteres restantes: 4000"                   |
|**Indicadores de contexto** |"Información" + adjetivo                  |"Información contextual"|"Contexto del documento"                       |
|**Campos en dashboards**    |Sustantivo + adjetivo                     |"Disponible Actual"     |"Dinero disponible actualmente"                |
|**Campos de texto**         |Sustantivo o frase nominal                |"Descripción"           |"Ingrese una descripción"                      |
|**Fechas**                  |Sustantivo simple                         |"Fecha" o "Vence"       |"Fecha de vencimiento"                         |
|**Selectores**              |Sustantivo + complemento                  |"Tipo Documento"        |"Seleccione tipo"                              |
|**Campos numéricos**        |Nombre + unidad (paréntesis)              |"Valor ($)"             |"Ingrese el valor en pesos"                    |

=== Recomendaciones adicionales: ===

* **Usar capitalización coherente:** Primera letra mayúscula en todas las etiquetas, excepto en preposiciones y artículos internos.
  * **Jerarquía visual en etiquetas:** Diferenciar visualmente entre etiquetas principales y secundarias mediante peso tipográfico, no solo por tamaño.
  * **Mantener longitud máxima:** Para etiquetas de campos, no exceder 25 caracteres.
  * **Campos obligatorios:** Nombre + asterisco rojo (//) → "Descripción //"
  * **Campos opcionales:** Nombre + "(Opcional)" → "Código Proyecto (Opcional)"

==== 2.2. Textos de Placeholder ====

^Tipo de Campo            ^Formato Recomendado                   ^Ejemplo Correcto                               ^Ejemplo Incorrecto             ^
|**Campos de búsqueda**   |"Buscar por" + criterios específicos  |"Buscar por código o nombre"                   |"Buscar rubros"                |
|**Campos descriptivos**  |Orientación específica sobre contenido|"Detalle la finalidad, beneficiarios y período"|"Ingrese descripción detallada"|
|**Campos monetarios**    |Formato con separadores de miles      |"Ej: 1,000,000"                                |"Ingrese el valor"             |
|**Campos de selección**  |Acción concreta                       |"Seleccione tipo de documento"                 |"Tipo documento"               |
|**Campos autogenerados** |Indicación de autogeneración          |"Se asignará automáticamente"                  |"Pendiente"                    |
|**Campos de texto corto**|"Ej:" + ejemplo conciso               |"Ej: Contrato No. 2025-001"                    |"Escriba aquí"                 |
|**Fechas**               |Formato esperado si no hay selector   |"DD/MM/AAAA"                                   |"Fecha"                        |

=== Recomendaciones adicionales: ===

* **Evitar textos largos** en campos pequeños; mantener placeholders visibles sin truncamiento.
  * **Mostrar formato esperado** en campos con validaciones específicas.
  * **Usar placeholders como ayuda**, no para reemplazar etiquetas.
  * **Mantener el texto del placeholder más corto** que el campo para que sea completamente visible.

==== 2.3. Botones y acciones ====

^Tipo de Acción              ^Formato Recomendado                ^Ejemplo Correcto                          ^Ejemplo Incorrecto              ^
|**Botones de creación**     |"Crear en" + contexto              |"Crear en blanco", "Crear con plantilla"  |"Nuevo", "Plantilla"            |
|**Botones de navegación**   |"Ir a" + destino                   |"Ir al último borrador"                   |"Último borrador"               |
|**Acciones en stepper**     |Verbo en infinitivo                |"Anterior", "Siguiente", "Revisar"        |"Atrás", "Continuar", "Revisión"|
|**Acciones de documentos**  |Verbo + complemento específico     |"Enviar para aprobación"                  |"Enviar documento"              |
|**Filtros y tabs**          |Sustantivo + especificador numérico|"Mis borradores (3)", "Por aprobar (1)"   |"Borradores", "Pendientes"      |
|**Botones primarios**       |Verbo + sustantivo (si necesario)  |"Guardar", "Enviar para aprobación"       |"OK", "Listo"                   |
|**Botones secundarios**     |Acción clara                       |"Guardar como borrador", "Cancelar"       |"Volver", "Atrás"               |
|**Acciones de confirmación**|Verbo que confirma                 |"Confirmar envío"                         |"Sí"                            |
|**Acciones destructivas**   |Verbo explícito                    |"Eliminar documento", "Cancelar solicitud"|"Quitar"                        |

=== Recomendaciones adicionales: ===

* **Jerarquía visual de botones:**
    * Botones primarios: Fondo completo (#1E8D83)
    * Botones secundarios: Borde (#1E8D83) con fondo transparente
    * Botones terciarios: Texto simple sin borde
  * **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.

=== Botones específicos para módulo de Disponibilidades: ===

* Botón principal de creación: "Nueva disponibilidad"
  * Botones de navegación en stepper: "Anterior", "Siguiente"
  * Botón de finalización: "Enviar para aprobación"
  * Botón de guardado parcial: "Guardar como borrador"
  * Acción de aprobación: "Aprobar"
  * Acción de rechazo: "Rechazar"

==== 2.4. Mensajes de estado y validación ====

^Tipo de Estado               ^Formato Recomendado                   ^Ejemplo Correcto                                              ^Ejemplo Incorrecto           ^
|**Validaciones inmediatas**  |Mensaje corto + acción recomendada    |"Valor excede el saldo disponible. Ingrese un monto menor"    |"Error: el valor es muy alto"|
|**Estados de documentos**    |Sustantivo/adjetivo único             |"Aprobado", "En borrador", "Por aprobar"                      |"El documento está aprobado" |
|**Progreso de proceso**      |Indicador numérico + total            |"Paso 2 de 4"                                                 |"Está en el segundo paso"    |
|**Notificaciones de sistema**|Acción completada + detalle           |"CDP creado exitosamente. Número: 325"                        |"Operación exitosa"          |
|**Alertas contextuales**     |Impacto potencial + recomendación     |"Las solicitudes en proceso afectan el saldo disponible"      |"Advertencia sobre saldos"   |
|**Campo requerido**          |"Este campo es obligatorio"           |"Este campo es obligatorio"                                   |"Error: falta dato"          |
|**Formato inválido**         |"Formato inválido." + formato esperado|"Formato inválido. Ingrese solo números"                      |"Error de formato"           |
|**Campos relacionados**      |Explicar la relación específica       |"La fecha de vencimiento debe ser posterior a la fecha actual"|"Fechas inválidas"           |

=== Recomendaciones adicionales: ===

* **Código de colores consistente:**
    * Verde (#1E8D83) para estados positivos (Aprobado)
    * Amarillo (#FFB020) para estados en proceso (Por aprobar)
    * Rojo (#D14343) para estados negativos (Rechazado)
    * Gris (#6C737F) para estados neutrales (Borrador)
  * **Incluir iconos descriptivos** junto a los mensajes de estado para refuerzo visual.
  * **Validaciones en tiempo real** con mensajes que aparecen mientras el usuario completa el formulario.
  * **Mostrar errores cerca del campo problemático**, preferiblemente debajo.
  * **Ofrecer soluciones** cuando sea posible ("Intente con un valor menor" en lugar de solo "Valor demasiado alto").

==== 2.5. Tablas y visualización de datos ====

* **Encabezados de columna**: Sustantivos singulares, breves.
    * ✅ "Estado" / "Fecha creación" / "Valor solicitado"
    * ❌ "El estado" / "La fecha de la creación" / "El valor que se solicitó"
  * **Células vacías**: Usar guion medio en vez de dejar espacios en blanco.
    * ✅ "-"
    * ❌ "[Vacío]" o dejar en blanco
  * **Paginación**: Formato simple con números.
    * ✅ "Mostrando 1 a 10 de 20 resultados"
    * ❌ "Esta página muestra los resultados del 1 al 10 de un total de 20"

==== 2.6. Dashboard y navegación ====

^Elemento                   ^Formato Recomendado                            ^Ejemplo Correcto                                                                          ^Ejemplo Incorrecto                                                                                        ^
|**Títulos de secciones**   |Sustantivo + complemento descriptivo           |"Disponibilidades Presupuestales"                                                         |"Módulo para gestionar CDPs"                                                                              |
|**Subtítulos explicativos**|Verbo + objeto + complemento (máx. 12 palabras)|"Visualice, cree y administre todas sus solicitudes de disponibilidad presupuestal (CDPs)"|"En esta sección podrá visualizar y gestionar los certificados de disponibilidad presupuestal del sistema"|
|**Datos numéricos**        |Valor numérico con formato + etiqueta          |"$727,733,000" (con separadores de miles)                                                 |"727733000 pesos"                                                                                         |
|**Indicadores de tiempo**  |Período específico entre paréntesis            |"Solicitudes realizadas (7 días)"                                                         |"Solicitudes recientes"                                                                                   |
|**Navegación estructural** |Ruta jerárquica con separadores                |"/ Presupuesto / Disponibilidades"                                                        |"Está en: Disponibilidades"                                                                               |

=== Recomendaciones adicionales: ===

* **Formato numérico consistente:** Usar separadores de miles con coma y decimales con punto.
  * **Abreviar números grandes** en dashboards (1.2M en lugar de 1,200,000) cuando el espacio es limitado.
  * **Incluir unidades** siempre que se muestren valores numéricos (%, $, etc.).
  * **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) ====

^Elemento                   ^Formato Recomendado                       ^Ejemplo Correcto                                                                  ^Ejemplo Incorrecto                         ^
|**Título del proceso**     |"Crear" + objeto                          |"Crear disponibilidad"                                                            |"Nuevo CDP"                                |
|**Descripción del proceso**|"Complete" + objeto + "para" + beneficio  |"Complete los campos en cada paso para generar su CDP"                            |"Llene el formulario"                      |
|**Títulos de pasos**       |Sustantivo + complemento (máx. 3 palabras)|"Datos generales", "Revisión final"                                               |"Paso 1: Información general del documento"|
|**Instrucciones de paso**  |Verbo imperativo + objeto + complemento   |"Seleccione los rubros y asigne los montos correspondientes"                      |"En esta sección debe seleccionar rubros"  |
|**Avisos contextuales**    |"Nota importante:" + información clave    |"Nota importante: Las solicitudes en proceso afectan el saldo disponible mostrado"|"Tenga en cuenta el saldo"                 |

=== Recomendaciones adicionales: ===

* **Limitar a 4-5 pasos** en el stepper para no sobrecargar al usuario.
  * **Usar números** para identificar cada paso (1, 2, 3, 4).
  * **Mostrar progreso** de forma visual, con pasos completados, actual y pendientes claramente diferenciados.
  * **Proporcionar contexto** sobre dónde se encuentra el usuario dentro del proceso completo.

=== Pasos recomendados para el stepper de Disponibilidades: ===

- "Datos generales"
  - "Rubros y montos"
  - "Documentos soporte"
  - "Revisión final"

===== 3. Terminología y convenciones =====

==== 3.1. Terminología específica del sistema ====

^Término                        ^Uso Recomendado                                                               ^Términos a Evitar              ^
|**Disponibilidad Presupuestal**|Usar como término principal en títulos y encabezados                          |"DP", "Disponibilidad"         |
|**CDP**                        |Aceptable como abreviatura secundaria, siempre entre paréntesis la primera vez|"Certificado", "Disponibilidad"|
|**Rubros**                     |Usar "Rubros y montos" como sección, "Rubro presupuestal" en detalles         |"Partidas", "Cuentas"          |
|**En borrador**                |Estado para documentos guardados sin enviar                                   |"Borrador", "Guardado"         |
|**Por aprobar**                |Estado para documentos enviados pendientes de revisión                        |"Pendiente", "En revisión"     |
|**Solicitud**                  |Referirse a una disponibilidad en proceso como "solicitud"                    |"Trámite", "Gestión"           |
|**Vigencia**                   |Usar para referirse al año fiscal                                             |"Año", "Período"               |
|**Saldo**                      |Usar con calificador: "Saldo disponible", "Saldo comprometido"                |"Dinero", "Fondos"             |
|**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: ===

* **Panel de ejecución:** Sección del dashboard que muestra porcentajes y montos de ejecución presupuestal.
  * **Disponible actual:** Monto presupuestal disponible considerando solicitudes en proceso.
  * **Actividad reciente:** Sección que muestra las últimas acciones realizadas en el sistema.
  * **Crear con plantilla:** Opción para iniciar una disponibilidad basada en una plantilla existente.

=== Terminología adicional relevante: ===

* **Ruta de aprobación**: Secuencia de revisores que deben autorizar la disponibilidad.
  * **Aprobador**: Usuario con permisos para autorizar disponibilidades.
  * **Solicitante/Elaborador**: Usuario que crea la disponibilidad.
  * **Solicitudes en proceso**: Disponibilidades que aún no han sido aprobadas o rechazadas definitivamente.

==== 3.2. Estados específicos de documentos ====

^Estado         ^Color                ^Descripción                                         ^
|**Borrador**   |Gris (#6C737F)       |Documento guardado pero no enviado para aprobación  |
|**Por aprobar**|Amarillo (#FFB020)   |Documento enviado y pendiente de revisión           |
|**Aprobado**   |Verde (#1E8D83)      |Documento aprobado con número definitivo asignado   |
|**Rechazado**  |Rojo (#D14343)       |Documento devuelto con observaciones para corrección|
|**Anulado**    |Gris oscuro (#4B5563)|Documento cancelado después de haber sido aprobado  |

=== Recomendaciones para visualización de estados: ===

* Usar etiquetas de color con el texto del estado
  * Incluir iconos representativos junto al texto
  * Mantener consistencia en la ubicación de indicadores de estado
  * Proporcionar detalles adicionales al hacer hover sobre el estado

==== 3.3. Formatos y convenciones ====

=== Fechas ===

* Formato: dd/mm/aaaa
  * Mostrar nombres de meses solo cuando el espacio lo permita
  * ✅ **Correcto:** "25/03/2025", "25 de marzo de 2025" (cuando hay espacio)
  * ❌ **Incorrecto:** "2025-03-25", "03/25/2025", "25/03/25"

=== Valores monetarios ===

* Usar símbolo $ seguido del valor
  * Incluir separador de miles (,)
  * Mostrar decimales solo cuando sean relevantes
  * ✅ **Correcto:** "$1,250,000", "$1,250,000.50" (cuando los decimales son relevantes)
  * ❌ **Incorrecto:** "1250000", "$1.250.000", "$ 1,250,000.00" (decimales innecesarios)

=== Porcentajes ===

* Usar el símbolo % junto al número sin espacio
  * Mostrar un decimal solo cuando sea necesario
  * ✅ **Correcto:** "80%", "33.5%" (cuando el decimal es relevante)
  * ❌ **Incorrecto:** "80 %", "80 por ciento", "80.00%"

===== 4. Mensajes y comunicación =====

==== 4.1. Mensajes de error ====

* **Problema específico**: Identificar claramente qué está mal
  * **Causa**: Explicar por qué ocurrió (cuando sea relevante)
  * **Solución**: Indicar cómo resolverlo
  * **Tono**: Neutral, nunca culpar al usuario

✅ **Correcto:** - "El monto excede el saldo disponible ($10,000,000). Reduzca el valor o seleccione otro rubro." - "No se pudo conectar al servidor. Verifique su conexión y vuelva a intentarlo."

❌ **Incorrecto:** - "Error: Monto inválido" - "Fallo de conexión. Contacte al administrador."

Recuerdo que en nuestras pruebas de usabilidad iniciales, los mensajes de error genéricos causaban muchísima frustración en los usuarios. Con mensajes específicos y orientados a la solución, la experiencia mejoró notablemente.

==== 4.2. Confirmaciones ====

* **Pregunta clara**: Verificar qué se confirmará
  * **Consecuencias**: Mencionar efectos importantes, especialmente en acciones destructivas
  * **Opciones**: Etiquetar botones con acciones específicas, no solo "Sí/No"

✅ **Correcto:** - "¿Está seguro de eliminar permanentemente el documento Solicitud_Recursos.pdf?" - Botones: "Eliminar" / "Cancelar"

❌ **Incorrecto:** - "¿Confirmar eliminación?" - Botones: "Sí" / "No"

==== 4.3. Mensajes de éxito ====

* **Confirmar acción**: Indicar claramente qué se completó
  * **Detalles relevantes**: Incluir información útil (números de referencia, etc.)
  * **Próximos pasos**: Sugerir acciones siguientes cuando sea pertinente

✅ **Correcto:** - "Disponibilidad #325 creada exitosamente. Ha sido enviada para aprobación." - "Rubro agregado correctamente. Saldo disponible actualizado."

❌ **Incorrecto:** - "Operación exitosa." - "Creación completada."

==== 4.4. Información contextual ====

* **Propósito**: Explicar para qué sirve la sección/función
  * **Instrucciones**: Proporcionar guía concisa sobre cómo proceder
  * **Ubicación**: Colocar donde sea más relevante para el contexto de uso

✅ **Correcto:** - "Las solicitudes en proceso afectan el saldo disponible mostrado. Esto garantiza que no se comprometan recursos ya solicitados por otros usuarios." - "Seleccione una ruta de aprobación para visualizar el flujo de aprobadores."

❌ **Incorrecto:** - "El saldo se ve afectado por solicitudes en proceso." - "Debe seleccionar una ruta."

===== 5. Accesibilidad en UX Writing =====

==== 5.1. Consideraciones básicas ====

* **No depender solo del color**: Complementar con texto o iconos para transmitir información
  * **Textos alternativos**: Proporcionar para imágenes funcionales
  * **Instrucciones claras**: No depender de características visuales ("botón verde")
  * **Terminología consistente**: Usar los mismos términos para las mismas funciones

✅ **Correcto:** - "Estado: Aprobado ✓" (en color verde) - "Seleccione el botón 'Continuar' para avanzar"

❌ **Incorrecto:** - Solo usar color verde sin texto ni ícono para indicar aprobación - "Haga clic en el botón verde"

==== 5.2. Legibilidad y compresión ====

* **Lenguaje sencillo**: Evitar términos complejos o técnicos innecesarios
  * **Oraciones cortas**: Facilitar la lectura y comprensión
  * **Abreviaturas**: Explicar la primera vez que aparecen
  * **Jerga**: Minimizar el uso de jerga técnica

----

//Documento actualizado: 17/03/2025//\\
//Elaborado por: Jesús Mejía - Diseñador UX//

Resumen de la edición

ada/howto/sicoferp/factory/uxdesign/uxwriting.1742221889.txt.gz · Última modificación: 2025/03/17 14:31 por 10.1.52.50