====== 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. ==== 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 5-6 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" | === 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//