Diseño y Usabilidad Web
1. ¿Qué es la Usabilidad Web?
La usabilidad es la medida de qué tan fácil, intuitivo y eficiente es para un usuario navegar por un sitio web y lograr su objetivo (comprar, leer una noticia, registrarse) sin frustrarse.
Regla de Oro: Si el usuario tiene que pensar demasiado dónde hacer clic, el diseño ha fallado.
Los 3 pilares de la usabilidad:
Facilidad de aprendizaje: ¿Qué tan rápido entiende el usuario cómo funciona el sitio la primera vez?
Eficiencia: Una vez que lo conoce, ¿qué tan rápido realiza las tareas?
Satisfacción: ¿Es agradable la experiencia visual y funcional?
2. Jerarquía Visual y Posición
No todos los elementos de una página tienen la misma importancia. La jerarquía visual le dice al ojo del usuario qué mirar primero.
Zonas de Calor: Los usuarios suelen leer en "F" o en "Z".
Patrón en F: Común en páginas con mucho texto (blogs).
Patrón en Z: Común en páginas de aterrizaje (landing pages) o con muchas imágenes.
Posición Proporcional: Los elementos más importantes (logotipo, botones de acción, títulos) deben estar en la parte superior (Above the fold), es decir, lo que se ve sin necesidad de bajar con el ratón (scroll).
3. Márgenes y Espacio en Blanco (Negativo)
En diseño web, el espacio vacío es tan importante como el contenido.
Márgenes (Margins): Es el espacio que rodea a un elemento por fuera, separándolo de otros objetos. Evitan que la página se sienta "apretada".
Relleno (Padding): Es el espacio interno entre el contenido (como un texto) y el borde de su contenedor.
Espacio en Blanco: No necesariamente es color blanco; es el espacio "aire" entre secciones.
Función: Mejora la legibilidad y permite que el ojo descanse.
Efecto: Da una apariencia profesional, elegante y limpia.
4. Estructura de Rejilla (Grid System)
La mayoría de las herramientas (como Google Sites) utilizan una rejilla de 12 columnas.
Los elementos se "encajan" en estas columnas para que todo esté alineado.
Alineación: Un sitio profesional nunca tiene elementos "flotando" al azar; todo sigue una línea imaginaria vertical u horizontal.
5. Tips de Diseño en Google Sites
Para que tu sitio pase de "escolar" a "profesional", aplica estos conceptos:
Usa Espaciadores: Agrega bloques vacíos a los lados de tus textos para que no ocupen todo el ancho de la pantalla (mejora la lectura).
Contraste: Asegúrate de que el color de la letra resalte sobre el fondo.
Consistencia: Si usas un estilo de botón en la página de inicio, usa el mismo en todas las secciones.
Dinámica de Apunte: "El Checklist de mi Web"
(Pide a los alumnos que dibujen este pequeño cuadro al final de sus apuntes para evaluar su práctica)