Herramientas de usuario
ada:howto:sicoferp:factory:uxdesign:uxwriting
Diferencias
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:16] 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 3: | Línea 3: | ||
| ===== Introducción ===== | ===== 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. | + | 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. Principios fundamentales ===== | ||
| Línea 11: | Línea 11: | ||
| La claridad debe primar sobre cualquier otro aspecto. Los usuarios no deben tener que descifrar el significado de los textos. | 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” | + | ✅ **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” | + | ❌ **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 ==== | ==== 1.2. Concisión ==== | ||
| Usar el mínimo de palabras necesarias para transmitir el mensaje, eliminando redundancias. | Usar el mínimo de palabras necesarias para transmitir el mensaje, eliminando redundancias. | ||
| - | ✅ **Correcto:** - “Guardar cambios” - “Certificado creado exitosamente” | + | ✅ **Correcto:** - "Guardar cambios" - "Certificado creado exitosamente" |
| - | ❌ **Incorrecto:** - “Proceder a guardar los cambios realizados” - “El certificado ha sido creado con éxito satisfactoriamente” | + | ❌ **Incorrecto:** - "Proceder a guardar los cambios realizados" - "El certificado ha sido creado con éxito satisfactoriamente" |
| ==== 1.3. Consistencia ==== | ==== 1.3. Consistencia ==== | ||
| Línea 27: | Línea 29: | ||
| Mantener uniformidad en terminología, formatos y patrones a lo largo de todo el sistema. | 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 | + | ✅ **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” | + | ❌ **Incorrecto:** - Alternar entre "Eliminar", "Borrar" y "Suprimir" para la misma acción - Cambiar entre "Rubro presupuestal" y "Partida presupuestaria" |
| ==== 1.4. Constructivo ==== | ==== 1.4. Constructivo ==== | ||
| Línea 35: | Línea 37: | ||
| Los mensajes deben orientar al usuario hacia la solución, no solo señalar problemas. | 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.” | + | ✅ **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.'' | ||
| + | |||
| + | |||
| + | ---- | ||
| - | ❌ **Incorrecto:** - “Error: Monto inválido. El saldo es insuficiente.” | ||
| ===== 2. Elementos de interfaz ===== | ===== 2. Elementos de interfaz ===== | ||
| Línea 44: | Línea 52: | ||
| ^Tipo de Campo ^Formato Recomendado ^Ejemplo Correcto ^Ejemplo Incorrecto ^ | ^Tipo de Campo ^Formato Recomendado ^Ejemplo Correcto ^Ejemplo Incorrecto ^ | ||
| - | |**Encabezados de secciones**|Sustantivo + complemento corto |“Datos generales” |“Complete los datos generales del documento” | | + | |**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”| | + | |**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” | | + | |**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” | | + | |**Indicadores de contexto** |"Información" + adjetivo |"Información contextual"|"Contexto del documento" | |
| - | |**Campos en dashboards** |Sustantivo + adjetivo |“Disponible Actual” |“Dinero disponible actualmente” | | + | |**Campos en dashboards** |Sustantivo + adjetivo |"Disponible Actual" |"Dinero disponible actualmente" | |
| - | |**Campos de texto** |Sustantivo o frase nominal |“Descripción” |“Ingrese una descripción” | | + | |**Campos de texto** |Sustantivo o frase nominal |"Descripción" |"Ingrese una descripción" | |
| - | |**Fechas** |Sustantivo simple |“Fecha” o “Vence” |“Fecha de vencimiento” | | + | |**Fechas** |Sustantivo simple |"Fecha" o "Vence" |"Fecha de vencimiento" | |
| - | |**Selectores** |Sustantivo + complemento |“Tipo Documento” |“Seleccione tipo” | | + | |**Selectores** |Sustantivo + complemento |"Tipo Documento" |"Seleccione tipo" | |
| - | |**Campos numéricos** |Nombre + unidad (paréntesis) |“Valor ($)” |“Ingrese el valor en pesos” | | + | |**Campos numéricos** |Nombre + unidad (paréntesis) |"Valor ($)" |"Ingrese el valor en pesos" | |
| === Recomendaciones adicionales: === | === Recomendaciones adicionales: === | ||
| Línea 59: | Línea 67: | ||
| * **Jerarquía visual en etiquetas:** Diferenciar visualmente entre etiquetas principales y secundarias mediante peso tipográfico, no solo por tamaño. | * **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. | * **Mantener longitud máxima:** Para etiquetas de campos, no exceder 25 caracteres. | ||
| - | * **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)" |
| ==== 2.2. Textos de Placeholder ==== | ==== 2.2. Textos de Placeholder ==== | ||
| ^Tipo de Campo ^Formato Recomendado ^Ejemplo Correcto ^Ejemplo Incorrecto ^ | ^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 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 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 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 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 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í” | | + | |**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” | | + | |**Fechas** |Formato esperado si no hay selector |"DD/MM/AAAA" |"Fecha" | |
| === 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 84: | Línea 91: | ||
| ^Tipo de Acción ^Formato Recomendado ^Ejemplo Correcto ^Ejemplo Incorrecto ^ | ^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 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” | | + | |**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 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” | | + | |**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” | | + | |**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 primarios** |Verbo + sustantivo (si necesario) |"Guardar", "Enviar para aprobación" |"OK", "Listo" | |
| - | |**Botones secundarios** |Acción clara |“Guardar como borrador”, “Cancelar” |“Volver”, “Atrás” | | + | |**Botones secundarios** |Acción clara |"Guardar como borrador", "Cancelar" |"Volver", "Atrás" | |
| - | |**Acciones de confirmación**|Verbo que confirma |“Confirmar envío” |“Sí” | | + | |**Acciones de confirmación**|Verbo que confirma |"Confirmar envío" |"Sí" | |
| - | |**Acciones destructivas** |Verbo explícito |“Eliminar documento”, “Cancelar solicitud”|“Quitar” | | + | |**Acciones destructivas** |Verbo explícito |"Eliminar documento", "Cancelar solicitud"|"Quitar" | |
| === Recomendaciones adicionales: === | === Recomendaciones adicionales: === | ||
| Línea 105: | Línea 112: | ||
| === Botones específicos para módulo de Disponibilidades: === | === Botones específicos para módulo de Disponibilidades: === | ||
| - | * Botón principal de creación: “Nueva disponibilidad” | + | * Botón principal de creación: "Nueva disponibilidad" |
| - | * Botones de navegación en stepper: “Anterior”, “Siguiente” | + | * Botones de navegación en stepper: "Anterior", "Siguiente" |
| - | * Botón de finalización: “Enviar para aprobación” | + | * Botón de finalización: "Enviar para aprobación" |
| - | * Botón de guardado parcial: “Guardar como borrador” | + | * Botón de guardado parcial: "Guardar como borrador" |
| - | * Acción de aprobación: “Aprobar” | + | * Acción de aprobación: "Aprobar" |
| - | * Acción de rechazo: “Rechazar” | + | * Acción de rechazo: "Rechazar" |
| ==== 2.4. Mensajes de estado y validación ==== | ==== 2.4. Mensajes de estado y validación ==== | ||
| ^Tipo de Estado ^Formato Recomendado ^Ejemplo Correcto ^Ejemplo Incorrecto ^ | ^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”| | + | |**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” | | + | |**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” | | + | |**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” | | + | |**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” | | + | |**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” | | + | |**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” | | + | |**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” | | + | |**Campos relacionados** |Explicar la relación específica |"La fecha de vencimiento debe ser posterior a la fecha actual"|"Fechas inválidas" | |
| === Recomendaciones adicionales: === | === Recomendaciones adicionales: === | ||
| Línea 134: | Línea 141: | ||
| * **Validaciones en tiempo real** con mensajes que aparecen mientras el usuario completa el formulario. | * **Validaciones en tiempo real** con mensajes que aparecen mientras el usuario completa el formulario. | ||
| * **Mostrar errores cerca del campo problemático**, preferiblemente debajo. | * **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”). | + | * **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 ==== | ==== 2.5. Tablas y visualización de datos ==== | ||
| * **Encabezados de columna**: Sustantivos singulares, breves. | * **Encabezados de columna**: Sustantivos singulares, breves. | ||
| - | * ✅ “Estado” / “Fecha creación” / “Valor solicitado” | + | * ✅ "Estado" / "Fecha creación" / "Valor solicitado" |
| - | * ❌ “El estado” / “La fecha de la creación” / “El valor que se solicitó” | + | * ❌ "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. | * **Células vacías**: Usar guion medio en vez de dejar espacios en blanco. | ||
| - | * ✅ “-” | + | * ✅ "-" |
| - | * ❌ “[Vacío]” o dejar en blanco | + | * ❌ "[Vacío]" o dejar en blanco |
| * **Paginación**: Formato simple con números. | * **Paginación**: Formato simple con números. | ||
| - | * ✅ “Mostrando 1 a 10 de 20 resultados” | + | * ✅ "Mostrando 1 a 10 de 20 resultados" |
| - | * ❌ “Esta página muestra los resultados del 1 al 10 de un total de 20” | + | * ❌ "Esta página muestra los resultados del 1 al 10 de un total de 20" |
| ==== 2.6. Dashboard y navegación ==== | ==== 2.6. Dashboard y navegación ==== | ||
| ^Elemento ^Formato Recomendado ^Ejemplo Correcto ^Ejemplo Incorrecto ^ | ^Elemento ^Formato Recomendado ^Ejemplo Correcto ^Ejemplo Incorrecto ^ | ||
| - | |**Títulos de secciones** |Sustantivo + complemento descriptivo |“Disponibilidades Presupuestales” |“Módulo para gestionar CDPs” | | + | |**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”| | + | |**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” | | + | |**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” | | + | |**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” | | + | |**Navegación estructural** |Ruta jerárquica con separadores |"/ Presupuesto / Disponibilidades" |"Está en: Disponibilidades" | |
| === Recomendaciones adicionales: === | === Recomendaciones adicionales: === | ||
| Línea 167: | Línea 174: | ||
| ^Elemento ^Formato Recomendado ^Ejemplo Correcto ^Ejemplo Incorrecto ^ | ^Elemento ^Formato Recomendado ^Ejemplo Correcto ^Ejemplo Incorrecto ^ | ||
| - | |**Título del proceso** |“Crear” + objeto |“Crear disponibilidad” |“Nuevo CDP” | | + | |**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” | | + | |**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”| | + | |**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” | | + | |**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” | | + | |**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: === | === 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 182: | Línea 189: | ||
| === Pasos recomendados para el stepper de Disponibilidades: === | === Pasos recomendados para el stepper de Disponibilidades: === | ||
| - | - “Datos generales” | + | - "Datos generales" |
| - | - “Rubros y montos” | + | - "Rubros y montos" |
| - | - “Documentos soporte” | + | - "Documentos soporte" |
| - | - “Revisión final” | + | - "Revisión final" |
| + | |||
| + | |||
| + | ---- | ||
| ===== 3. Terminología y convenciones ===== | ===== 3. Terminología y convenciones ===== | ||
| Línea 192: | Línea 203: | ||
| ^Término ^Uso Recomendado ^Términos a Evitar ^ | ^Término ^Uso Recomendado ^Términos a Evitar ^ | ||
| - | |**Disponibilidad Presupuestal**|Usar como término principal en títulos y encabezados |“DP”, “Disponibilidad” | | + | |**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”| | + | |**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” | | + | |**Rubros** |Usar "Rubros y montos" como sección, "Rubro presupuestal" en detalles |"Partidas", "Cuentas" | |
| - | |**En borrador** |Estado para documentos guardados sin enviar |“Borrador”, “Guardado” | | + | |**En borrador** |Estado para documentos guardados sin enviar |"Borrador", "Guardado" | |
| - | |**Por aprobar** |Estado para documentos enviados pendientes de revisión |“Pendiente”, “En revisión” | | + | |**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” | | + | |**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” | | + | |**Vigencia** |Usar para referirse al año fiscal |"Año", "Período" | |
| - | |**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" | |
| === Nuevos términos específicos: === | === Nuevos términos específicos: === | ||
| Línea 238: | Línea 249: | ||
| * Formato: dd/mm/aaaa | * Formato: dd/mm/aaaa | ||
| * Mostrar nombres de meses solo cuando el espacio lo permita | * Mostrar nombres de meses solo cuando el espacio lo permita | ||
| - | * ✅ **Correcto:** “25/03/2025”, “25 de marzo de 2025” (cuando hay espacio) | + | * ✅ **Correcto:** "25/03/2025", "25 de marzo de 2025" (cuando hay espacio) |
| - | * ❌ **Incorrecto:** “2025-03-25”, “03/25/2025”, “25/03/25” | + | * ❌ **Incorrecto:** "2025-03-25", "03/25/2025", "25/03/25" |
| === Valores monetarios === | === Valores monetarios === | ||
| Línea 246: | Línea 257: | ||
| * Incluir separador de miles (,) | * Incluir separador de miles (,) | ||
| * Mostrar decimales solo cuando sean relevantes | * Mostrar decimales solo cuando sean relevantes | ||
| - | * ✅ **Correcto:** “$1,250,000”, “$1,250,000.50” (cuando los decimales son 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) | + | * ❌ **Incorrecto:** "1250000", "$1.250.000", "$ 1,250,000.00" (decimales innecesarios) |
| === Porcentajes === | === Porcentajes === | ||
| Línea 253: | Línea 264: | ||
| * Usar el símbolo % junto al número sin espacio | * Usar el símbolo % junto al número sin espacio | ||
| * Mostrar un decimal solo cuando sea necesario | * Mostrar un decimal solo cuando sea necesario | ||
| - | * ✅ **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 ===== | ||
| Línea 265: | Línea 280: | ||
| * **Tono**: Neutral, nunca culpar al usuario | * **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.” | + | ✅ **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." | ||
| - | ❌ **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 ==== | ==== 4.2. Confirmaciones ==== | ||
| Línea 273: | Línea 290: | ||
| * **Pregunta clara**: Verificar qué se confirmará | * **Pregunta clara**: Verificar qué se confirmará | ||
| * **Consecuencias**: Mencionar efectos importantes, especialmente en acciones destructivas | * **Consecuencias**: Mencionar efectos importantes, especialmente en acciones destructivas | ||
| - | * **Opciones**: Etiquetar botones con acciones específicas, no solo “Sí/No” | + | * **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” | + | ✅ **Correcto:** - "¿Está seguro de eliminar permanentemente el documento Solicitud_Recursos.pdf?" - Botones: "Eliminar" / "Cancelar" |
| - | ❌ **Incorrecto:** - “¿Confirmar eliminación?” - Botones: “Sí” / “No” | + | ❌ **Incorrecto:** - "¿Confirmar eliminación?" - Botones: "Sí" / "No" |
| ==== 4.3. Mensajes de éxito ==== | ==== 4.3. Mensajes de éxito ==== | ||
| Línea 285: | Línea 302: | ||
| * **Próximos pasos**: Sugerir acciones siguientes cuando sea pertinente | * **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.” | + | ✅ **Correcto:** - "Disponibilidad #325 creada exitosamente. Ha sido enviada para aprobación." - "Rubro agregado correctamente. Saldo disponible actualizado." |
| - | ❌ **Incorrecto:** - “Operación exitosa.” - “Creación completada.” | + | ❌ **Incorrecto:** - "Operación exitosa." - "Creación completada." |
| ==== 4.4. Información contextual ==== | ==== 4.4. Información contextual ==== | ||
| Línea 295: | Línea 312: | ||
| * **Ubicación**: Colocar donde sea más relevante para el contexto de uso | * **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.” | + | ✅ **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.” | + | ❌ **Incorrecto:** - "El saldo se ve afectado por solicitudes en proceso." - "Debe seleccionar una ruta." |
| ===== 5. Accesibilidad en UX Writing ===== | ===== 5. Accesibilidad en UX Writing ===== | ||
| Línea 305: | Línea 322: | ||
| * **No depender solo del color**: Complementar con texto o iconos para transmitir información | * **No depender solo del color**: Complementar con texto o iconos para transmitir información | ||
| * **Textos alternativos**: Proporcionar para imágenes funcionales | * **Textos alternativos**: Proporcionar para imágenes funcionales | ||
| - | * **Instrucciones claras**: No depender de características visuales (“botón verde”) | + | * **Instrucciones claras**: No depender de características visuales ("botón verde") |
| * **Terminología consistente**: Usar los mismos términos para las mismas funciones | * **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” | + | ✅ **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” | + | ❌ **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 ==== | ==== 5.2. Legibilidad y compresión ==== | ||
| Línea 318: | Línea 335: | ||
| * **Abreviaturas**: Explicar la primera vez que aparecen | * **Abreviaturas**: Explicar la primera vez que aparecen | ||
| * **Jerga**: Minimizar el uso de jerga técnica | * **Jerga**: Minimizar el uso de jerga técnica | ||
| - | |||
| - | ===== 6. Ejemplos integrados del prototipo final ===== | ||
| - | |||
| - | ==== 6.1. Dashboard Principal: ==== | ||
| - | |||
| - | * **Título principal:** “Disponibilidades Presupuestales” | ||
| - | * **Subtítulo descriptivo:** “Visualice, cree y administre todas sus solicitudes de disponibilidad presupuestal (CDPs)” | ||
| - | * **Acciones principales:** “Crear en blanco”, “Crear con plantilla” | ||
| - | * **Secciones informativas:** “Ejecución Disponibilidades”, “Disponible Actual”, “Actividad Reciente” | ||
| - | |||
| - | ==== 6.2. Proceso Guiado (Stepper): ==== | ||
| - | |||
| - | * **Título del proceso:** “Crear disponibilidad” | ||
| - | * **Instrucción general:** “Complete los campos en cada paso para generar su CDP” | ||
| - | * **Pasos:** | ||
| - | - “Datos generales” | ||
| - | - “Rubros y montos” | ||
| - | - “Documentos soporte” | ||
| - | - “Revisión final” | ||
| - | |||
| - | ===== 7. Checklist para revisión ===== | ||
| - | |||
| - | Al revisar el UX Writing en SICOF ERP, verifique: | ||
| - | |||
| - | * ☐ ¿Los textos son claros, concisos y propositivos? | ||
| - | * ☐ ¿Se mantiene la consistencia terminológica con el glosario específico? | ||
| - | * ☐ ¿Los botones usan verbos en infinitivo y son específicos? | ||
| - | * ☐ ¿Los mensajes de error explican claramente el problema y ofrecen solución? | ||
| - | * ☐ ¿Las etiquetas de campos siguen el formato estándar? | ||
| - | * ☐ ¿Los formatos de fechas, monedas y porcentajes son consistentes? | ||
| - | * ☐ ¿Se usa la voz activa y segunda persona para hablar al usuario? | ||
| - | * ☐ ¿Los títulos y encabezados siguen la capitalización correcta? | ||
| - | * ☐ ¿Los textos son accesibles y no dependen exclusivamente del color? | ||
| - | * ☐ ¿El tono es profesional pero accesible en todo el sistema? | ||
| - | * ☐ ¿Los placeholders proporcionan ejemplos útiles sin reemplazar etiquetas? | ||
| - | * ☐ ¿Los estados de documentos se muestran con el color y terminología correcta? | ||
| - | * ☐ ¿Las instrucciones del stepper son claras y orientadoras? | ||
| - | * ☐ ¿La información contextual explica el propósito y uso de cada sección? | ||
| - | * ☐ ¿Los textos en dashboard presentan la información de manera concisa? | ||
| - | |||
| - | ===== Referencias ===== | ||
| - | |||
| - | * Sistema de Diseño ADA - Documentación interna | ||
| - | * Contaduría General de la Nación - Terminología contable pública | ||
| - | * Nielsen Norman Group - Mejores prácticas UX Writing | ||
| - | * Ministerio de Tecnologías de la Información y Comunicaciones - Guía de lenguaje claro | ||
| - | * W3C - Pautas de Accesibilidad de Contenido Web (WCAG) 2.1 | ||
| Línea 370: | Línea 340: | ||
| //Documento actualizado: 17/03/2025//\\ | //Documento actualizado: 17/03/2025//\\ | ||
| - | //Autor: Jesús Mejía - Analista de Requerimientos UX// | + | //Elaborado por: Jesús Mejía - Diseñador UX// |
ada/howto/sicoferp/factory/uxdesign/uxwriting.1742221013.txt.gz · Última modificación: 2025/03/17 14:16 por 10.1.52.50
Herramientas de la página
