En este artículo verás elementos que se repiten en la mayoría de páginas web para que los usuarios puedan identificar rápidamente que pueden esperar de ellos. Esto se debe a una serie de reglas no escritas y ampliamente aceptadas por la repetición y familiaridad que tenemos al usarlas en la mayoría de sitios web.
Las páginas web se diseñan pensando en las personas que van a hacer uso de ellas. Poner las cosas fáciles a los usuarios que llegan a una web, es una de las funciones importantes que tienes al diseñar una web. En este artículo verás cuáles son las reglas comúnmente aceptadas en el diseño web más importantes.
Antes recuerda que puedes suscribirte al newsletter de este blog.
Si te suscribes, tienes acceso a soporte técnico para resolver dudas de tu web, puedes proponer temas para el blog y escribiré un artículo detallado sobre el tema que has propuesto. También te envío un email semanal con todas las novedades publicadas en el blog para que las apliques y mejores tu proyecto web.
Contenido importante
Convenciones comunes del diseño web.
Las convenciones de diseño web tratan de aplicar unas prácticas estándar que se han establecido para crear páginas con la finalidad de hacerlas coherentes, intuitivas y fáciles de usar.
Aquí tienes una lista con ejemplos comunes y habituales que encontramos en la gran mayoría de sitios web.
- Logotipo:
El logotipo de las páginas web lo encontramos habitualmente en la parte superior izquierda de las páginas web y sabemos que al clicar en él volvemos a la página inicial, a la home. - Menú superior:
Ubicado en la parte superior de la web, en el extremo derecho de la pantalla. En él sabemos que encontraremos enlaces a otras páginas importantes del sitio web. - Footer:
Está ubicado siempre en la parte inferior de una web, al final de las páginas. Sabemos que solemos encontrar ahí enlaces a las políticas de privacidad, a las redes sociales y a otras páginas de la web como puede ser un blog, preguntas frecuentes, contacto, etc. - Bonotes:
Los botones suelen diseñarse como un rectángulo de un color que llame la atención del usuario. Va acompañado de un texto con el contraste suficiente de color para ser leído sin dificultad y con un texto claro y descriptivo de qué puede esperar el usuario al hacer clic sobre él. - Página con desplazamiento vertical:
Desplazamiento vertical, o scroll vertical, para ver todo el contenido de una página web. Es poco habitual encontrar una página con scroll horizontal. - Link:
Cambio de color en los textos interactivos, con el suficiente contraste con el resto de texto para identificarlo sin dificultad. Se puede acompañar de subrayado para facilitar su identificación a las personas que tienen dificultad visual. - Iconos:
Existen ciertas representaciones gráficas en las páginas web que ayudan al usuario a identificar que acción van a realizar al pulsar sobre ellos. Pueden ser los bullets points, flechas, el menú hamburguesa responsive, entre otros. - Color:
Hacer un uso apropiado del color según el contexto, por ejemplo. Uso de color rojo para avisos de error, advertencias de campo obligatorio, etc. Uso del color verde para mensajes de tareas realizadas con éxito, de disponibilidad, etc.
Existen más ejemplos de estándares de diseño web, como es la página de error 404 para informar a un usuario que ha escrito mal una dirección URL o que la página no existe; pulsa en el link para ver un ejemplo.
Te recomiendo leer el artículo relacionado, Buenas prácticas de usabilidad web y visitar la página web de material design para profundizar más.
Estas son sólo algunas de las convenciones que ayudan a tener una experiencia de usuario consistente y familiar, pero siempre es aconsejable equilibrarlas con un diseño creativo y único que diferencie a tu sitio web de los demás.
Albert Gimeno, diseñador y consultor web.
Si estás suscrito al blog…
- Podrás proponer temas para el blog.
- Recibirás un email semanal con el contenido publicado durante la semana.