eg. · Eduardo González Abreu
Eduardo González AbreuDiseño y estrategia digital
Cuaderno de trabajo · Web y comunicación

Cuaderno para revisar tu web y preparar una mejora

Pasa de «hay que cambiar la web» a una decisión concreta, apoyada en lo que puedes observar hoy.

Elige una página, aclara a quién ayuda y recorre el paso que quieres facilitar. Al terminar tendrás una lista breve de cambios y preguntas, con una forma de comprobar cada uno.

Puedes escribir directamente. El guardado local se comprobará al iniciar.

Antes de empezar

Una página. Un paso que quieres facilitar.

Reúne lo que ya tienes

  • Una página concreta de tu web, o su texto si aún no existe.
  • La oferta que presenta y el siguiente paso que propones.
  • Pruebas y preguntas reales que puedas consultar con permiso.

Termina con algo que puedas hacer

  • Una frase clara de oferta y público.
  • Un recorrido con preguntas localizadas.
  • Hasta tres prioridades con responsable y comprobación.
Observación
Qué has visto o leído, dónde y en qué condiciones. Describe el material, sin explicar aún la causa.
Hipótesis
Una explicación posible que todavía hay que comprobar. Escribe «podría» cuando no lo sepas.
Decisión
El próximo cambio o prueba, con una razón y una señal que te ayude a revisarlo.

No necesitas rellenar los huecos con certezas. Si no conoces una respuesta, escribe qué falta y cómo podrías averiguarlo. «Por revisar» ayuda a decidir el siguiente paso.

  1. Acota. Escribe la página y el objetivo en la ficha 1.
  2. Recorre. Usa las cinco etapas como preguntas; adapta las que no encajen en tu negocio.
  3. Mira. Revisa la página con la ficha 3 y guarda ejemplos concretos.
  4. Elige. Prioriza un cambio pequeño o una prueba que despeje una duda relevante.

Guardar, compartir e imprimir

Escribe en los campos. Si tu navegador lo permite, se conservarán en este dispositivo. Descarga tus respuestas para tener una copia transportable: guardar el HTML desde el navegador no garantiza guardar los campos. Puedes abrir el archivo de respuestas después en este mismo cuaderno.

Para trabajar con datos sensibles, usa descripciones generales y omite datos personales o documentos de clientes. Antes de compartir la copia o el CSV, revisa lo que contienen.

Al imprimir, cada ficha empieza en una hoja nueva; las respuestas largas pueden ocupar más páginas. Los campos vacíos dejan espacio para escribir a mano. Para una sesión guiada de una hora, utiliza el guion y la ficha de formación incluidos en la carpeta.

Ficha 01 · Oferta y público

Explica qué haces y para quién tiene sentido.

Completa primero las ideas con tus palabras. Después compáralas con lo que la página dice de verdad.

Ficha 02 · Recorrido de cinco etapas

Responde a las dudas de cada paso.

Este recorrido es una herramienta de trabajo, no una secuencia obligatoria. Una persona puede volver atrás, saltar una etapa o llegar con información previa. Si una etapa no encaja, anota por qué.

1. Encontrar

¿Cómo llega una persona a esta página y qué espera ver?

2. Entender

¿Puede explicar qué ofreces, para quién y en qué situación ayuda?

3. Comparar

¿Encuentra alcance, entregables y pruebas para valorar el encaje?

4. Consultar

¿Sabe qué enviar, por qué vía y cuál es el siguiente paso?

5. Preparar el trabajo

¿Qué información necesita después de decidir avanzar?

Ficha 03 · Diseño y contenido de una página

Mira la página con una pregunta cada vez.

Sí: lo has comprobado en el material disponible. Parcial: existe, pero queda algo por resolver. No: has observado que falta o falla. Por revisar: todavía no hay evidencia suficiente. No aplica: explica por qué.

Esta lista ayuda a localizar problemas de diseño y contenido. Los puntos de teclado, imágenes y formularios son comprobaciones iniciales; la lista no constituye una auditoría completa de accesibilidad, seguridad, rendimiento o cumplimiento normativo.

01 · Oferta y título

El inicio nombra el servicio y permite reconocer para quién es.

02 · Acción principal

La llamada principal describe lo que sucede al pulsarla.

03 · Jerarquía

Los títulos y bloques permiten recorrer la página y encontrar lo esencial.

04 · Alcance

Se entiende qué incluye la oferta y qué necesita aclararse antes de empezar.

05 · Entregables

Los resultados del trabajo se describen como entregables concretos, sin prometer efectos no demostrados.

06 · Pruebas

Los ejemplos, testimonios y datos que aparecen son reales, atribuibles y pertinentes.

07 · Texto y enlaces

Los textos son comprensibles y los enlaces tienen sentido fuera del párrafo.

08 · Pantalla pequeña

El contenido puede leerse y usarse en una pantalla pequeña, sin perder pasos o controles.

09 · Teclado y foco

Se pueden recorrer los controles con teclado y reconocer dónde está el foco.

10 · Imágenes

La información relevante de las imágenes también está disponible como texto.

11 · Formulario

Cada campo tiene nombre, se distingue lo necesario y la ayuda permite corregir errores.

12 · Continuidad

Se explica qué ocurre después del contacto y cómo pedir ayuda.

Ficha 04 · Prioridades y herramientas

Elige qué hacer primero y cómo revisarlo.

Ordena con una razón

Ahora: hay una barrera observada y un cambio acotado que puedes realizar. Después: aporta valor, pero depende de otro paso. Investigar: falta evidencia para decidir. No tocar: no hay una razón suficiente para cambiarlo ahora.

Hazlo verificable

Elige hasta tres prioridades. Define una señal de comprensión o de uso antes de cambiar la página. No conviertas una impresión positiva en ventas, satisfacción o mejora demostrada.

Prioridad 1
Prioridad 2
Prioridad 3

Primero la pregunta; después la herramienta.

Revisa lo que ya tienes. Un documento, el editor de tu web o un recorrido con teclado pueden resolver una pregunta concreta. Si necesitas una herramienta nueva, anota antes qué permite comprobar, quién tendrá acceso y qué coste o dependencia exige confirmar.

Herramienta al servicio de una pregunta 1
Herramienta al servicio de una pregunta 2
Ejercicio del estudio

Del servicio a una consulta preparada.

EJERCICIO DEL ESTUDIO - Revisión del contacto de eg. Las observaciones proceden de su interfaz; las hipótesis de comprensión se distinguen de lo comprobable en pantalla.

Abre el contacto desde UX/UI. Observa el servicio, las tres preguntas de ayuda, los campos y la revisión del mensaje. Usa datos de prueba; el ejercicio no requiere enviar el correo.

Material de partida

Servicio: Diseño UX/UI y prototipos.

Datos necesarios: nombre, correo y consulta.

Acción: Preparar mi mensaje.

Continuidad: revisar, abrir el correo o copiar el texto.

Las cinco etapas aplicadas al contacto de eg.
Etapa y preguntaObservaciónHipótesisDecisión y comprobación
Encontrar

Llegar al contacto desde un servicio.

El botón de UX/UI abre /contacto/?servicio=diseno-ux-ui.Hay que comprobar que el contexto se conserve en cada entrada.

Mantener un enlace específico por servicio.

Abrir desde UX/UI y desde ecommerce; comprobar el área y el servicio visibles.

Entender

Saber qué explicar en la consulta.

La ayuda del contacto muestra tres preguntas específicas según el servicio.La utilidad de esas preguntas para cada negocio requiere observar consultas reales.

Orientar el texto sin añadir tres campos obligatorios.

Cambiar de área y leer las preguntas nuevas.

Comparar

Relacionar la consulta con el trabajo que se solicita.

Cada página de servicio incluye método, entregas, materiales y alcance.La claridad percibida por posibles clientes no se deduce de la presencia de esos bloques.

Conservar un servicio concreto en el primer mensaje.

Preparar el borrador y comprobar que nombra el servicio elegido.

Consultar

Describir una necesidad con los datos mínimos.

Solo nombre, correo y consulta son obligatorios; web, fecha y presupuesto son opcionales.Puede haber dudas sobre qué escribir cuando el proyecto todavía empieza.

Permitir empezar sin web y explicar que no hace falta tener la solución decidida.

Preparar un mensaje con los tres campos mínimos.

Preparar el trabajo

Entender cómo continúa la conversación.

«Preparar mi mensaje» muestra un borrador; después se puede abrir el correo o copiar el texto.Hay que estudiar si se distingue bien preparar de enviar.

Nombrar cada acción y explicar el envío desde la aplicación de correo.

Editar un dato, comprobar que el borrador anterior desaparece y preparar el actualizado.

Revisión completa del contacto de eg.
CriterioEstado y observaciónHipótesisDecisión
01 · Oferta y títuloSí. El área y el servicio aparecen antes de escribir la consulta.Su comprensión por parte de otra persona puede estudiarse por separado.Conservar el contexto al preparar el mensaje.
02 · Acción principalSí. El botón dice «Preparar mi mensaje» y abre un borrador.Una persona podría confundir la preparación con el envío si no lee el siguiente paso.Mantener la explicación de revisión y envío desde el correo.
03 · JerarquíaSí. La consulta separa ayuda, campos y revisión del mensaje.La lectura percibida requiere observación de personas.Comprobar títulos y orden con una tarea de consulta.
04 · AlcanceSí. Las páginas de servicio distinguen entregas y alcance.No se ha medido qué parte necesita más explicación.Ajustar contenido a partir de las consultas que se reciban.
05 · EntregablesSí. Las entregas se describen como documentos, pantallas, piezas y archivos.La presencia de una lista no demuestra por sí sola comprensión.Relacionar cada entrega con su función.
06 · PruebasSí. El trabajo visible corresponde a la identidad, web y recursos propios del estudio.No se deducen resultados comerciales de una pieza diseñada.Mantener una atribución clara de los proyectos propios.
07 · Texto y enlacesSí. Los enlaces describen servicios, documentos o acciones de consulta.La comprensión del destino se puede contrastar.Revisar etiqueta y destino juntos.
08 · Pantalla pequeñaSí. A 390 px los campos aparecen en una columna y se conservan los controles.La revisión de una anchura no cubre todos los dispositivos.Comprobar las pantallas utilizadas al entregar.
09 · Teclado y focoSí. Los campos y botones son controles nativos con etiquetas y foco visible.Una revisión de teclado no equivale a una auditoría completa de accesibilidad.Recorrer los controles y corregir cualquier barrera observada.
10 · ImágenesNo aplica. La consulta no utiliza imágenes informativas para explicar los campos.Mantener las instrucciones como texto.
11 · FormularioSí. El correo tiene formato requerido y los tres campos necesarios están identificados.El navegador puede mostrar la ayuda de validación de forma distinta.Probar campos vacíos y correo incorrecto.
12 · ContinuidadSí. La página explica lectura de consulta, aclaración del objetivo y propuesta con importe y calendario.La expectativa de respuesta debe contrastarse con la operación real del estudio.Conservar una explicación fiel a cómo se atiende la consulta.

P1 · Conservar el servicio elegido Ahora

Observación. El enlace de UX/UI llega al contacto con su servicio y área.

Hipótesis. Hay que comprobar que todos los enlaces mantienen esa relación.

Decisión. Revisar las entradas de consulta al modificar el catálogo.

Por qué. Evita pedir de nuevo información ya elegida.

Esfuerzo. Revisión de enlaces, selección y borrador.
Responsable. Eduardo, responsable de la web.
Señal. Área, servicio y mensaje coinciden.
Revisión. Al cambiar servicios o contacto.

P2 · Mantener vigente el borrador Ahora

Observación. Editar un campo oculta el borrador anterior.

Hipótesis. Un borrador anterior podría crear confusión si continuara visible.

Decisión. Conservar el aviso de actualización y la nueva preparación.

Por qué. Relaciona el mensaje con los datos actuales.

Esfuerzo. Recorrido de formulario con datos de prueba.
Responsable. Eduardo, responsable de la web.
Señal. Cambiar el área retira el servicio anterior.
Revisión. Al modificar el formulario.

P3 · Estudiar la comprensión del siguiente paso Investigar

Observación. La interfaz distingue preparar, abrir correo y copiar.

Hipótesis. No sabemos cómo interpreta esos pasos una persona que no conoce el estudio.

Decisión. Plantear una prueba de comprensión y registrar respuestas.

Por qué. La inspección de la interfaz no sustituye observar a una persona.

Esfuerzo. Una tarea y preguntas de revisión, sin registrar datos innecesarios.
Responsable. Eduardo; participantes y sesión a acordar.
Señal. La persona puede explicar cómo se enviaría el mensaje.
Revisión. Cuando se organice una sesión con participantes.

Herramientas para revisar el contacto de eg.
Pregunta y materialHerramienta y accesoDecisión y comprobación
¿El contexto coincide?

Página de servicio, enlace y consulta.

Navegador y páginas del estudio.

Eduardo revisa la web propia.

No requiere una aplicación adicional.

Recorrer servicio, selección y borrador.

El mismo servicio aparece en los tres pasos.

¿El borrador recoge los cambios?

Formulario y texto preparado.

Navegador y texto del mensaje.

Datos de prueba sin información personal.

No se necesita enviar un correo.

Editar la consulta y preparar otro borrador.

El mensaje anterior desaparece y el nuevo incluye el cambio.

¿Se entiende cómo continuar?

Consulta y botones de correo/copia.

Una tarea de comprensión con participantes.

Acordar sesión y datos que se observarán.

Las respuestas solo existirán después de la sesión.

Planificar la tarea sin atribuir respuestas anticipadas.

Registrar lo que dice y hace cada participante.

El CSV reúne estas observaciones, decisiones y comprobaciones para poder revisarlas con la versión de la web que estés utilizando.

Para seguir trabajando

Llévate las fichas a tu forma de trabajar.

Los cinco CSV de plantilla contienen encabezados, etapas o criterios, pero no datos de una empresa. El sexto recoge el ejercicio del contacto de eg. Puedes abrirlos en una hoja de cálculo, completar una copia y conservar la fuente de cada observación.

Un método original y adaptable

Las fichas, las cinco etapas y las reglas de prioridad son propuestas prácticas originales de este recurso. No se presentan como un modelo universal ni como conclusiones de una investigación. El ejemplo se ha escrito para enseñar a distinguir materiales, interpretaciones y decisiones.

El cuaderno no utiliza estadísticas, entrevistas, resultados de clientes ni datos de terceros. Cuando añadas hechos de tu empresa, indica su origen, el momento y las condiciones de observación. Si necesitas aplicar un requisito técnico o normativo, consulta su fuente primaria vigente y una revisión especializada cuando corresponda.

Uso y atribución

Puedes completar, adaptar e imprimir el material para tu empresa y utilizarlo en proyectos o sesiones de formación con clientes. Al repartir una adaptación, conserva una atribución discreta: «Adaptado del Cuaderno para revisar tu web y preparar una mejora, de Eduardo González Abreu». La licencia incluida explica el uso y distingue las fuentes tipográficas.