Optimización del Diseño Web para una Experiencia de Usuario Superior

Diseño Web: Usabilidad y Rendimiento

Tamaño de Pantalla

Diseño adaptable (líquido): Se adapta al tamaño de la pantalla. Diseño más complejo, el tamaño de los elementos se basa en porcentajes. Tamaños grandes pueden dificultar la legibilidad.

Diseño de tamaño fijo: Diseño más sencillo. El tamaño de los elementos se define en píxeles. Puede generar mucho espacio en blanco.

Diseño adaptable (responsive): Diferentes versiones adaptadas para distintas resoluciones.

Tiempo de Respuesta

1/10 seg = instantáneo, 1 segundo = usuario detecta una interrupción, 10 segundos = se pierde la atención del usuario.

Depende de elementos:

• Internos: Tamaño de recursos, fraccionamiento (descargas en paralelo) y reutilización (uso de CSS y JS enlazado).
• Externos: Velocidad de conexión, de respuesta del servidor y del cliente (equipo, navegador, sistema operativo...).

Vinculación

Fundamento de la web:

• Deben ser visibles y reconocibles.
• Usar enlaces auto-descriptivos.
• Poner títulos a los vínculos.
• Evitar enlaces rotos.

Diseño de Contenido

• Brevedad: Texto más fácil de leer que en papel.
• Lenguaje claro.
• Facilidad de lectura: Estructuración, encabezados, elementos de diseño (sangrías, enumeración, uso de resaltados y énfasis, parte principal más visible).

Títulos

Deben describir el contenido de la página. Páginas diferentes = títulos diferentes.

Legibilidad

• Colores contrastados.
• No usar fondos con imágenes con texto.
• No aplicar movimiento al texto.
• No usar fuentes pequeñas.
• Alinear bloques de texto grande a la izquierda.

Animaciones

Evitar las animaciones innecesarias que dificulten la atención.

Usarlas para:

• Mostrar cambios de estado.
• Indicar dimensionalidad en las transiciones (efecto zoom).
• Ilustrar cambios en el tiempo (ruta de tiempo).
• Multiplicar la pantalla (muestra información en el espacio de un único objeto).

Identificación

Es importante situar al usuario:

• Global: Usar un logo común a todas las páginas (zona visible), usar enlace a inicio...
• Local: Ubicación relativa dentro de la página (títulos y zonas de la estructura web).

Estructuras jerárquicas (mostrársela al usuario con un menú).

Métricas

Permiten obtener valores sobre distintos aspectos de la web.

• Directa: Asociación directa de un valor a un atributo (ej: longitud de la web).
• Indirecta: Relación entre varios atributos (ej: porcentaje de publicidad).
• Interna: Valor independiente del entorno (ej: peso de la web).
• Externa: Valor dependiente del entorno (ej: tiempo de carga de la web).
• Objetiva: Independiente de un juicio o subjetividad humana (ej: número de enlaces).
• Subjetiva: Valor dependiente de un juicio o subjetividad humana (ej: legibilidad del texto).

Búsqueda

• Restringida: Solo permite buscar algunos elementos (personas, productos).
• Global: Busca cualquier cosa en la web.
• Personalizada.