05 · Wireframes
Estructura antes que estilo.
Versiones en baja fidelidad, obtenidas quitando el estilo a las pantallas finales para mostrar la estructura de cada página.
Rediseño conceptual de un portal de trámites: buscador primero, requisitos claros, formulario en pasos y seguimiento.
Muchos portales municipales organizan los trámites según el área interna que los resuelve, no según lo que la persona necesita. Quien llega con una necesidad concreta (renovar la licencia, abrir un comercio) no sabe a qué área pertenece.
Gestioná es el rediseño conceptual de un portal de trámites para un municipio ficticio: se busca por lo que se quiere hacer, se ve todo lo necesario antes de empezar y se puede seguir el estado.
Hipótesis: eso lleva a ir varias veces o a abandonar el trámite.
Plan de investigación. Lo que sigue son hipótesis de partida, no resultados.
Vecinos y comerciantes que hicieron un trámite en el último año: dónde se trabaron y qué hicieron.
Trámites más consultados y búsquedas sin resultado, para ordenar el inicio.
Cómo agrupan y nombran los trámites las personas, para definir categorías.
Jubilada. Usa el celular a diario, pero desconfía de los trámites en línea.
Necesita: saber exactamente qué llevar y adónde ir.Dueño de un local. Tiene poco tiempo y hace trámites desde el celular.
Necesita: costos y plazos claros para planificar.| Necesita | Busca | Se informa | Inicia | Espera | |
|---|---|---|---|---|---|
| Acciones | Ve que la licencia vence | Escribe “licencia” en el buscador | Lee requisitos, costo y demora | Completa el formulario en pasos | Consulta el estado con su número |
| Piensa | “Espero que sea fácil” | “¿Es este el trámite?” | “¿Tengo todo?” | “¿Lo hice bien?” | “¿Habrá avanzado?” |
| Ánimo | |||||
| Oportunidad | Aviso de vencimiento (a futuro) | Sugerencias en vivo | Datos clave arriba, lista de requisitos | Pasos cortos, errores claros | Línea de tiempo y estado |
Ánimo estimado a partir de los supuestos, para validar en entrevistas.
Decisión de arquitectura: los nombres de los trámites usan el lenguaje cotidiano (“Renovar la licencia”), no el nombre administrativo.
Versiones en baja fidelidad, obtenidas quitando el estilo a las pantallas finales para mostrar la estructura de cada página.
Una interfaz institucional que inspire confianza: azul profundo como color principal, verde solo para estados correctos y rojo solo para errores. Serif para títulos (tono de documento oficial) y sans de lectura cómoda para el resto.
Prototipo en HTML, CSS y JavaScript con el recorrido completo: buscá “lic”, abrí el trámite, iniciá, probá enviar el primer paso vacío para ver los errores y llegá hasta el seguimiento.
Abrir el prototipoContraste calculado con la fórmula de WCAG 2.1: 4,5:1 para texto y 3:1 para componentes de interfaz.
| Par | Colores | Ratio | Mínimo | Resultado |
|---|---|---|---|---|
| Aa Texto principal | #15202B sobre #F4F6F9 | 15.2:1 | 4.5:1 | Cumple |
| Aa Texto secundario | #52606D sobre #F4F6F9 | 6.0:1 | 4.5:1 | Cumple |
| Aa Botón principal | #FFFFFF sobre #124A8C | 8.8:1 | 4.5:1 | Cumple |
| Aa Azul oscuro sobre azul claro | #0C3563 sobre #E4EDF8 | 10.4:1 | 4.5:1 | Cumple |
| Aa Estado correcto | #166B3E sobre #E2F4EA | 5.7:1 | 4.5:1 | Cumple |
| Aa Mensaje de error | #B3261E sobre #FFFFFF | 6.5:1 | 4.5:1 | Cumple |
| Aa Texto del buscador (blanco sobre hero) | #FFFFFF sobre #124A8C | 8.8:1 | 4.5:1 | Cumple |
| Aa Borde de campo (no texto) | #75828F sobre #FFFFFF | 3.9:1 | 3.0:1 | Cumple |
Plan para 5 personas con distintos niveles de comodidad digital. Los resultados todavía no existen.
| Tarea | Éxito si… | Se mide |
|---|---|---|
| 1. Averiguar qué necesita para renovar la licencia | Nombra los documentos y el costo | Éxito, tiempo, clics |
| 2. Iniciar el trámite completo | Llega a la confirmación | Éxito, errores, ayuda pedida |
| 3. Saber en qué estado está su trámite | Encuentra el estado y la fecha del turno | Éxito y tiempo |