# data[].attributes.attachment_link.readable_text
Una buena relación comercial se crea a partir de las experiencias positivas que tiene un cliente con una marca. Este es un fundamento que también se aplica en el mundo virtual, por lo que es primordial que tu negocio cuente con un sitio web que satisfaga las expectativas de los visitantes.

Al aplicar los parámetros de la usabilidad web reduces la tasa de rebote y de abandono, con esto tienes la oportunidad de convertir a los internautas en compradores frecuentes. Acompáñanos a ver de qué se trata, cuáles son sus principios, claves para implementarla y algunos ejemplos.

¿Qué es la usabilidad web?

La usabilidad web se refiere a los atributos que hacen que un sitio web sea fácil de usar para los visitantes. Se enfoca en aspectos como el diseño gráfico, presentación y organización de la información, y en el funcionamiento mismo. El objetivo principal es que el usuario navegue con un esfuerzo y tiempo mínimos.

Este proceso empieza desde que el usuario entra al sitio y toma en consideración la velocidad de carga; la logística del menú y sus secciones; el diseño y la organización de los elementos gráficos; que las páginas no muestren errores; la optimización de los textos, funcionamiento de los chats, los formularios, la barra de navegación, botones y demás elementos.

Así que para que la interfaz del sitio web (y cada una de sus páginas) sea amigable, sencilla, rápida e intuitiva se requiere el trabajo de diferentes profesionales. Entre ellos diseñadores gráficos, diseñadores UX, desarrolladores web y publicistas.

Diferencias entre la usabilidad y la accesibilidad web

Ambos conceptos están pensados para el usuario web. Sin embargo, cada uno está alineado a diferentes objetivos. La usabilidad favorece la experiencia y navegación de un usuario dentro de la página, mientras que la accesibilidad busca que todos los usuarios, sin importar puedan entrar a la página y acceder a sus contenidos.

Podríamos decir que la usabilidad trabaja en aspectos generales de la página como los elementos gráficos, logística de las secciones, funcionamiento y carga de las páginas, entre otros. Por su lado, la accesibilidad va un paso más allá para lograr un acceso adecuado de los usuarios, sin importar su idioma, ubicación geográfica, nivel educativo o si tienen alguna discapacidad auditiva, motriz o mental.

3 principios de la usabilidad web

1. Eficiencia

Se refiere a que los usuarios logren cumplir sus expectativas con las que inicialmente entraron al sitio y encuentren aquello que estaban buscando: ya sea consultar cierta información, contactar a la marca o a la empresa, solicitar una cotización, ver fotos de los productos, conocer las características de los servicios o realizar una compra.

2. Eficacia

Este principio está más relacionado con la velocidad con la que la web responde a lo que el visitante realiza mientras navega en el sitio. Se encarga de que esta sea rápida y óptima. Para ello se centra en el acomodamiento intuitivo y en el correcto funcionamiento de cada una de las páginas y apartados web.

3. Satisfacción

Surge al final de la visita al sitio: el usuario determina si la experiencia dentro del sitio fue agradable o desafortunada, de esto dependerá incluso si decide volver o no. La satisfacción trata de responder a las necesidades de los visitantes al brindarles distintos recursos, como información completa, accesos fáciles e interacciones amables.

9 claves para mejorar la usabilidad web

1. Incluye contenido relevante

2. Crea un diseño congruente

3. Procura una fácil navegación

4. Revisa la velocidad de carga

5. Detecta errores de páginas

6. Facilita la interacción con los usuarios

7. Adapta el diseño a varios dispositivos

8. Incluye una barra de navegación

9. Genera confianza y seguridad

1. Incluye contenido relevante

Los textos que contienen tu sitio deben ser breves y claros. No es necesario que coloques párrafos muy largos, a menos que la naturaleza de tu negocio lo requiera; por ejemplo, al describir las especificaciones de un producto.

En este punto también entra en juego el uso de palabras claves o keywords (tanto en los encabezados del sitio y en las entradas de blog), para que aparezcan en los resultados de los motores de búsqueda de forma orgánica. Para esto te puede ayudar un sistema de gestión de contenidos gratuito.

De igual modo, procura que los títulos de las secciones sean fáciles de entender y que, a su vez, el menú tenga una estructura sencilla, para que los usuarios logren navegar intuitivamente.

2. Crea un diseño congruente

El acomodamiento espacial de cada uno de los elementos de tu sitio web también es importante para usarlo fácilmente; esto es, que cada vez que se dé un clic se encuentre lo que se indicó. Toma en consideración los colores; la tipografía de los títulos y textos; el tamaño de la fuente; la distribución de cada página; la colocación de imágenes, texto y videos. Incluso el espacio en blanco es vital para que la vista de los usuarios descanse y no se abrumen.

3. Procura una fácil navegación

La creación de un sitio web también implica la planeación lógica de sus secciones, para que los usuarios se desplacen en ellas sin perderse y encuentren lo que buscan. No combines diferentes propósitos en un mismo lugar; por ejemplo, no coloques productos dentro del apartado de atención al cliente.

También te recomendamos que el header que contiene el logo y el menú principal se mantenga fijo en todas las páginas, para que los usuarios vayan a la página principal u otra sección cuando quieran.

4. Revisa la velocidad de carga

Hoy en día los usuarios, especialmente los clientes, exigen inmediatez para acceder a cualquier contenido o respuesta. Así que te sugerimos que compruebes la velocidad de carga de todas las páginas y elementos de tu sitio web.

Existen herramientas en línea que te ayudan en esta tarea, realizan un análisis para dispositivos móviles y para ordenadores en unos cuantos minutos. Una opción es PageSpeed Insights de Google.

5. Detecta errores de páginas

No hay nada más desagradable que dar clic en un enlace que no muestre ningún contenido, y en cambio aparezca un letrero de "Error 404" u otro similar. Es por ello que debes cuidar que el contenido que ofreces esté disponible. Además es indispensable que las URL sean correctas para que redireccionen adecuadamente dentro y fuera del sitio.

Estos detalles son tan importantes que marcan una diferencia en las experiencia web de los usuarios, muchos de los cuales deciden abandonar o descartar el sitio definitivamente, sobre todo cuando se trata de la primera visita.

6. Facilita la interacción con los usuarios

Uno de los objetivos de los sitios web es que conecten a los visitantes con las marcas o negocios. Por ello procura que tu chat sea visible, sin invadir demasiado espacio, e incluye siempre el apartado de contacto y la sección de comentarios debajo de los productos o del blog.

Por otro lado, coloca en el footer de la página principal los iconos que direccionen a tus perfiles de redes sociales, para que también los usuarios interactúen contigo por medio de estas plataformas.

7. Adapta el diseño a varios dispositivos

Otro de los motivos por los cuales los usuarios no pueden navegar cómodamente una página es porque el diseño puede ser muy pequeño o incluso ilegible. Esto generalmente pasa cuando una persona ingresa desde su teléfono inteligente y la presentación está estructurada para un ordenador.

Para que este inconveniente no suceda implementa el responsive design o diseño responsivo, que se encarga de adaptar la web a diferentes dispositivos; entre ellos, smartphone, iPhone, tablet, iPad, ordenadores, laptop.

8. Incluye una barra de navegación

Algunos usuarios prefieren usar una barra de navegación para escribir allí lo que están buscando más rápido y no tener que ir al menú principal. Este recurso también es muy eficiente para sitios web que tienen una gran variedad de contenidos o cuyos apartados están en constante cambio.

Por ejemplo, la web de un periódico en línea (que alberga numerosos artículos y que constantemente publica nuevos), o un ecommerce que cuenta con un amplio catálogo de productos.

9. Genera confianza y seguridad

Probablemente tu página web será tu carta de presentación para muchos prospectos que están interesados en tu marca. Por ello debes transmitirles profesionalismo y confianza, para que sientan que están realizando una compra segura. En el momento en que te proporcionen sus datos personales y bancarios, comparte con ellos tus políticas de manejo de datos y confidencialidad.

4 ejemplos de usabilidad web

1. Con diseño responsivo

Nuxe es una marca francesa que vende productos de belleza. Veamos cómo hace su diseño responsivo. En la versión del ordenador (imagen de la izquierda, despliega el menú con las categorías de los cosméticos. Mientras que en la versión del móvil (a la derecha) compila el menú en una esquina y realiza un acomodamiento vertical, destacando los mismos elementos.
Imagen de Nuxe
2. Sin diseño responsivo

Recientemente el buscador de Google ha penalizado las páginas que no cuentan con diseño responsivo y, por lo tanto, no aparecen en los resultados. Sin embargo, para mostrarte cómo un usuario podría ver un sitio web en otro motor de búsqueda, visitamos Amazon con vista de ordenador; nos percatamos de que las letras del menú no se distinguen y es complicado hacer clic sobre ellas desde el móvil.
Imagen de Amazon
3. Formularios breves y automáticos

Cuando una persona quiere unirse o suscribirse a una página busca que sea un proceso breve. Esto es algo que la plataforma Semrush sabe muy bien, y por ello en su página de registro solo solicita a los usuarios un correo electrónico y una contraseña. Además de permitirles registrarse de forma automática con su correo de Gmail.
Imagen de Semrush
4. Tamaño de la fuente

Dentro del mundo del diseño la creatividad es libre, más cuando la temática de un sitio web lo permite. A pesar de ello, siempre hay que cuidar que las letras tengan el tamaño adecuado para que sean legibles para todos los usuarios. En este caso vemos la página de esta escuela de arte estadounidense que ha colocado varias secciones con una fuente muy diminuta, en lugar de aprovechar el espacio libre a la derecha para hacerlo más grande.

Por otro lado, también es evidente la sobrecarga de elementos y colores, lo cual puede resultar incómodo para los usuarios.

Imagen de Yale School of Art

Estos ejemplos se basan en elementos visuales, pero recuerda que también es importante vigilar el funcionamiento de tu sitio web, como la velocidad de carga o páginas 404. Hasta aquí hemos llegado con todo lo esencial de la usabilidad web. Esperamos que empieces a aplicarla en tu página para que tengas más visitantes y, por lo tanto, más oportunidades de venta.

# data[].attributes.attachment_link.title
Qué es la usabilidad web, principios y ejemplos

# data[].attributes.attachment_link.description
Descubre qué es la usabilidad web, por qué es importante y algunos ejemplos para ver el desempeño y la navegación de algunos sitios reales.

# data[].attributes.attachment_link.description
☑ Somos especialistas en maquetación web. Contáctanos 📞 972 18 33 77. Seguimos las normas y recomendaciones técnicas de los estándares marcados por el W3C para obtener una mayor compatibilidad con diferentes navegadores y dispositivos

# data[].attributes.attachment_link.readable_text
Los estilos de diseño de sitios web son básicamente la apariencia general del sitio web. A menudo, hay ocasiones en las que mi cliente me dijo que diseñara algo "nuevo".Así que comencé a diseñar de acuerdo con mi definición de "fresco". ¡Resulta que estaba equivocado! Lo que él quería decir con "fresco" era nuevo.

Pensé que "fresco" era algo así como realismo con verduras. Eso sí, estábamos construyendo una plataforma de sitio web corporativo. Entonces, el término "fresco" tiene un significado diferente para otras personas.

A continuación, se muestran algunos términos comunes que utilizan los clientes; "Simple", "moderno", "cool", "fresco", "nuevo", "divertido", "pop", "lujo", "elegancia".

Lo que realmente significa de manera diferente para otras personas.

Entonces, para eliminar la confusión en el estilo de diseño de sitios web, voy a enumerar los distintos diseños que hay:

Realismo

La mayoría de los sitios web irían con realismo. El realismo es básicamente sitios web que utilizan fotos como su enfoque principal. Ya se trate de personas, comida, render de productos o incluso moda.

Esto se utiliza principalmente para transmitir transparencia de sus ofertas, "obtienes lo que ves". Aquí hay unos ejemplos.

# data[].attributes.attachment_link.description
Los estilos de diseño de sitios web son básicamente la apariencia general del sitio web, los hay de varios tipos.

# data[].attributes.attachment_link.readable_text
Las páginas web se pueden clasificar por su forma, tecnología y funcionalidad. Se crean en formato HTML y se utilizan en blogs, foros, instituciones, medios de comunicación, buscadores, webs corporativas, tiendas online, entre muchas más opciones.

HTML, a primera vista, parece complicado y laborioso, pero saber utilizarlo te permitirá construir tu página con los elementos que necesitas sin restricciones, y realizar cambios concretos dentro de tu sitio. Aprender HTML es más fácil de lo que crees y con nuestra guía verás lo rápido que te familiarizarás con él.

¿Qué es una página web en HTML?

Una página HyperText Markup Language o HTML es un documento de texto con marcas. Forma parte del lenguaje utilizado para la elaboración de sitios web y hace referencia a los enlaces que conectan páginas web entre sí, dentro de un único sitio o varios.

Las marcas utilizadas en HTML sirven para etiquetar diferentes elementos dentro de un página web: imágenes, texto, videos, entre otros. Seguro ya has visto de qué te hablamos, pero te mostramos algunos ejemplos de etiquetas:

Otro ejemplo más claro del uso de etiquetas es el siguiente:

<h1>Cómo hacer una página web en HTML</h1>

Aquí, la etiqueta <h1> indica que se trata de un título.

Las etiquetas son vitales en la creación de páginas web en HTML, pues con ellas se aplicarán las pautas de diseño web que las conformarán, para darles un orden jerárquico. Con las etiquetas pueden realizarse diferentes indicaciones como el tipo de fuente, su tamaño y color, entre otros atributos.

¿Cómo hacer una página web en HTML?

1. Conoce los conceptos básicos de las páginas HTML.

2. Abre el editor de texto y comienza con una estructura básica.

3. Trabaja el texto en HTML.

4. Cambia el color del texto.

5. Da formato al texto.

6. Incluye un enlace a otra página.

7. Agrega contenido multimedia.

8. Cerciórate de que todas las etiquetas estén cerradas.

9. Guarda tu documento HTML.

1. Conoce los conceptos básicos de las páginas HTML

Antes de realizar tu página con códigos HTML, veamos algunos conceptos fundamentales, pues seguramente los aplicarás. No te preocupes, en este enlace encontrarás esos elementos explicados a detalle, para que los utilices durante todo tu proceso de programación.

Lo más relevante que debes conocer para comprender la estructura del HTML es lo siguiente:

Las etiquetas deben tener apertura y cierre (<h1> texto </h1>). De lo contrario, el código no será reconocido por el sitio y los cambios que realices no se visualizarán. Siempre es importante revisar este aspecto, antes de poner un nuevo código, para evitar una posterior revisión exhaustiva en busca de un error.

La estructura básica de una página web se compone por las etiquetas <html>, <head> y <body>. La primera indica el comienzo de la página; la segunda es la cabecera y contiene información descriptiva del sitio; y la tercera es la que abarca todos los elementos visibles dentro de la página.

Los niveles de títulos pueden variar desde la etiqueta h1 hasta la h6.

La etiqueta <p> corresponde a los párrafos.

La etiqueta <a> representa los enlaces.

Los metadatos contienen información sobre la página, como: estilos, buscadores, scripts, por mencionar algunos. Estos se conforman por las etiquetas <base>, <head>, <link>, <meta>, <style> y <title>.

Se calcula que hay alrededor de 142 etiquetas HTML; sin embargo, muchas de ellas ya han caído en desuso, sobre todo con la aparición de HTML5, la versión más reciente del código que incluye valiosas funciones nuevas.

2. Abre el editor de texto y comienza con una estructura básica

Si tienes una computadora Windows, podrás encontrar el editor de texto como "Bloc de notas"; en una computadora Mac puedes utilizar "TextEdit". Después de abrirlo, escribe una estructura base de HTML como la que te mostramos en la siguiente imagen:

Puedes utilizar esta estructura para personalizar el título principal de tu página, la descripción del contenido y codificar de una manera sencilla todo el sitio.

Como principiante, también puedes usar los editores WYSIWYG, del inglés "what you see is what you get", los cuales sirven para visualizar directamente cómo se muestra la página conforme se va escribiendo el código HTML. Entre algunos programas de este tipo están:

Sublime Text: este editor de texto web está habilitado tanto para código HTML como CSS personalizado. Es fácil de usar y resalta las líneas de código en la sintaxis.

Notepad ++: un programa gratuito para redactar varios lenguajes como el HTML, CSS, JavaScript o PHP. Es nativo de Microsoft y es el básico de los programadores.

Visual Studio Code: disponible para todos los sistemas operativos, ofrece una versión gratuita y funciones de desarrollo personalizado.

Atom: un editor de código abierto para HTML, JavaScript, CSS y Node.js. Cuenta con autocompletado inteligente y permite la instalación de paquetes.

Coda: exclusivo del sistema macOS, soporta múltiples lenguajes de programación; es sencillo de manejar y su sistema te permite guardar fragmentos de código.

3. Trabaja el texto en HTML

Trabajar el texto en HTML es uno de los pasos más sencillos. Aquí podrás utilizar las etiquetas de título que te mencionamos anteriormente (h1, h2, h3, h4, h5, h6). Su uso dependerá de la jerarquización que desees darle a cada título o subtítulo.

La etiqueta <p> marca los párrafos. Con ambos elementos ya puedes comenzar a codificar el texto de tu página.

4. Cambia el color del texto

Para cambiar el color del texto, escribe la etiqueta correspondiente escribiendo el color que prefieras entre comillas. Por ejemplo:

También con el código HTML puedes indicar los colores de fondo de tu sitio web; existen más de 16 millones de opciones con los sistemas RGB y HEX.

5. Da formato al texto

Para dar formato solo escribe el código como en el siguiente ejemplo:

Texto en negrita usa la etiqueta <b>texto</b>
Texto subrayado <u>texto</u>
Texto en cursivas o itálicas <i>texto</i>

6. Incluye un enlace a otra página

Si en el texto quieres incluir un enlace a otra página, debes utilizar la etiqueta:

Aquí debes añadir el URL que deseas enlazar. El atributo "blank" se utiliza para que el enlace que agregues se pueda abrir en una nueva pestaña o página. En caso de que quieras que la liga se abra en la misma página, escribe "self".

7. Agrega contenido multimedia

Imágenes

Un elemento vital en una página web son las imágenes. Para añadirlas en HTML debes usar la etiqueta <img>:

El atributo "src" es para abrir un URL para la imagen que quieres mostrar. El apartado "alt" permite visualizar un texto alterno descriptivo, en caso de que, por error de carga del sitio, la imagen no pueda verse. El texto en la imagen también sirve como posicionamiento en buscadores, como Google.

Los atributos "height" y "width" corresponden a las dimensiones que desees que tenga cada imagen, a lo alto y ancho.

Video

Hoy en día los videos son uno de los contenidos más cotizados de las páginas web. Para insertarlos en tu sitio coloca este código:

<video width="320" height=240" controls>
<source src="animación.mp4" type="video/mp4">
Tu navegador no soporta este formato de video
</video>

Donde "height" y "width" establecen el tamaño del video, "source" es la clave del video, "src" indica la URL del video o la ubicación del archivo y "type" sirve para señalar el formato de video. En caso de no poder reproducirlo, aparecerá la leyenda "Tu navegador no soporta este formato de video". También puedes insertar un video de YouTube con el código de inserción que ya te ofrece la plataforma.

Audio

Respecto a los audios o canciones, puedes agregar este código:

<audio controls>
<source src="cancion.mp3" type="audio/mp3">
Tu navegador no soporta este formato de audio
</audio>

En este caso "src" describe el nombre o ubicación del archivo y "type" sirve para indicar el formato del audio. Si no es posible reproducirlo aparecerá la frase "Tu navegador no soporta este formato de audio".

8. Cerciórate de que todas las etiquetas estén cerradas

Antes de guardar el documento y ver los resultados, es muy importante que cierres todas las etiquetas en la parte inferior del documento para que puedan visualizarse correctamente todos los códigos que utilizaste. Estos se cierran de la siguiente forma:

Verifica que las etiquetas de todos los códigos estén abiertas y cerradas y que todo esté escrito correctamente.

9. Guarda tu documento HTML

Para guardar el texto que creaste, recuerda cambiar el formato ".txt" por ".html". Para abrirlo y ver los resultados, da clic derecho sobre el archivo y selecciona el navegador de tu preferencia. Si percibes errores en el diseño de la página, deberás regresar al editor de texto o bloc de notas para revisar a detalle en dónde está el error.

¡Listo! Ahora ya sabes cómo crear una página web en HTML. Si utilizas esto, en conjunto con el código CSS, puedes optimizar la parte visual y con el lenguaje JavaScript puedes agregar elementos dinámicos para crear páginas interactivas para tus visitantes.

3 ejemplos de páginas web sencillas en HTML

1. Bedow

2. AIAIAI

3. Monograph

1. Bedow

Si el diseño de tu sitio web requiere más contenido visual que texto, este es un excelente ejemplo. Para lograrlo, tendrás que prestar más atención a las etiquetas HTML de imágenes y ajustarlas de modo que se ajusten a las dimensiones que deseas.
Imagen de Bedow
2. AIAIAI

Si quieres hacer una página web en HTML que te desafíe a agregar diferentes tipos de fuentes, tamaños y colores de texto, inspírate en el sitio web de AIAIAI. Además, puedes practicar el manejo de diversas dimensiones de imágenes.
Imagen de AIAIAI
3. Monograph

Si quieres intentar combinaciones de colores más complejas para avanzar en tu entrenamiento para crear páginas web en HTML, observa el sitio de Monograph. Su contenido se destaca por el uso de texto con un colorido fondo que atrae toda la atención.
Imagen de Monograph
Las páginas web originales se caracterizan por mostrar la personalidad de la marca de forma creativa. Para ello se compaginan diversos elementos como los fondos de colores y texturas, animaciones, efectos en el cursor, interfaz intuitiva de secciones, iconos, entre otros.

¿Puedes crear una página web sin saber el código HTML?

Para aprender y dominar el lenguaje HTML es necesario practicar mucho, sobre todo para lograr hacer una personalización de sitios web que sea realmente atractiva para los usuarios y clientes de una marca. Así que si quieres ahorrar el proceso manual de programación HTML, existe la posibilidad de usar un sistema de gestión de contenidos (CMS).

Como CMS Hub, un software que te permite desarrollar páginas con temas predeterminados, en los que podrás agregar diversos elementos interactivos con la herramienta de arrastrar y soltar, por lo que no necesitas tener conocimientos de programación para editar.

Desde nuestra plataforma podrás gestionar todo el contenido de tu página web, incluyendo la sección de blog, en conjunto con recomendaciones SEO automáticas. Es muy fácil de usar y de actualizar con su sistema de alerta de códigos erróneos. Además, cuenta con una monitorización contra ataques cibernéticos las 24 horas del día.

Programar una página web HTML requiere tiempo y dedicación, pero no es imposible. No olvides que la práctica hace al maestro. Si te surgen dudas en el proceso busca apoyo en tutoriales y foros donde hay personas que dominan este tipo de diseño. Poco a poco, aprenderás nuevas habilidades y no habrá límites para tu creatividad y talento.

Recuerda que HTML ofrece grandes ventajas por ser una herramienta verdaderamente útil para crear el sitio de tu empresa, exactamente como lo esperas.

# data[].attributes.attachment_link.title
Cómo hacer una página web en HTML paso a paso (con ejemplos)

# data[].attributes.attachment_link.description
Las páginas web se pueden clasificar por su forma, tecnología y funcionalidad. Se crean en formato HTML y se utilizan en blogs, foros, instituciones, medios de comunicación, buscadores, webs corporativas, tiendas online, entre muchas más opciones.

# data[].attributes.attachment_link.readable_text
Actualmente, el número de sitios web accesibles llega a los casi 1880 millones. ¿Impresionante, verdad?

Para que tu sitio web destaque dentro de esta inmensidad de opciones, debes asegurarte de cumplir con los estándares básicos de diseño web, pues con ellos podrás garantizarle a tus usuarios una experiencia agradable en tu página, lo que hace más probable que vuelvan a visitarte.

Si quieres mejorar la experiencia en tu sitio web, a continuación te explicamos cómo tener un diseño web óptimo y agradable para tus visitantes.

¿Qué son los estándares de diseño web?

Los estándares de diseño web son una serie de conceptos y herramientas que tienen el fin de crear un sitio fácil de usar, funcional y eficaz para que los visitantes tengan la mejor experiencia posible.

¿Para qué sirven los estándares de diseño web?

Los estándares de diseño web sirven para que los usuarios tengan una mejor experiencia dentro de un sitio web. El 88 % de las personas jamás regresarían a un sitio web en el que han tenido una mala experiencia. Por lo tanto, es de suma importancia realizar todos los esfuerzos posibles para atraerlos y retenerlos, a fin de que conozcan tus productos o servicios y, en caso de tener interés, comprar sin complicaciones.

Los 8 estándares de diseño web

Existen 8 estándares de diseño web enfocados en hacerles la vida más sencilla a los usuarios, tanto en funcionalidad como en diseño. Conócelos a continuación:

1. Simplicidad

Como lo dijo Leonardo da Vinci, "La simpleza es la mayor satisfacción". Generalmente, los usuarios buscan información concreta en tu sitio web, por lo que debes asegurarte de que esta sea fácil de encontrar y comprender.

En la simplicidad entran aspectos como los colores y la tipografía que utilizas. Por ello, procura no emplear muchos tonos; para una combinación de colores estándar puedes seleccionar entre 3 y 7 colores distintos en una única combinación o paleta. También elige letras que sean fáciles de leer y no cansen al lector.

2. Jerarquía identificable visualmente

¿Has notado cómo en los sitios web que más te gustan las cosas más importantes tienen un mayor tamaño al de las cosas que no lo son? Bueno, eso es la jerarquía visual y sirve para que los usuarios comprendan cuáles son los aspectos en tu sitio a los que deberían prestar mayor atención.

3. Navegabilidad

Cuando tienes que ir del punto A al punto B, lo ideal es que no haya obstáculos en tu camino; esto es la navegabilidad. La finalidad es que si tus usuarios quieren encontrar algo en tu sitio web puedan hacerlo de manera sencilla e intuitiva.

Para lograr una navegabilidad óptima es recomendable tener un botón de búsqueda fácilmente identificable y visible, y que tus enlaces indiquen de forma clara los sitios a los que llevarán a un usuario al hacer clic.

4. Consistencia

Procura que tu sitio web sea consistente. Es decir, que sea identificable para los usuarios, sin importar la sección o página en la que estén. En otras palabras, debes garantizar que la experiencia que ofreces en tu página principal sea la misma que en otras, incluso en tu blog.

5. Capacidad de respuesta

Tu sitio web tiene que ser óptimamente visible, tanto en computadoras como en dispositivos móviles. Es decir, que tus usuarios deben tener una buena experiencia al ver tu sitio en su computadora y en su smartphone o tableta.

El tráfico móvil representa más de la mitad de todo el tráfico de sitios web a nivel mundial, por lo que es indispensable que tu sitio pueda verse y explorarse fácilmente. Además, si también estás trabajando en tu estrategia de SEO, debes saber que Google se nutre de la capacidad de respuesta móvil. Así que vale la pena que hagas el esfuerzo para optimizarla.

6. Accesibilidad

La accesibilidad implica que todos tus visitantes puedan tener una buena experiencia en tu sitio. Es decir, un buen sitio web tiene que ser fácil de comprender y estar pensado también para aquellas personas que utilizan software de asistencia debido a alguna discapacidad visual o auditiva.

7. Convencionalidad

Al visitar un sitio web hay algunas cosas que ya esperas, debido a que, por convención, las cosas se hacen así. Por ejemplo, en la mayoría de sitios web el logo de la empresa o marca está colocado en la parte superior (generalmente a la izquierda) y en la parte inferior está el footer que contiene información adicional, la dirección y los créditos.

También, generalmente, el botón de navegación es una lupa y el botón para comprar es un carrito de supermercado con un número que indica los productos que se han depositado en él. Estas convenciones se han ido generando con el tiempo y generan certeza y comodidad a los usuarios.

8. Credibilidad

La credibilidad es qué tanta confianza siente el usuario al visitar tu sitio. Esta se logra siendo honesto con los productos o servicios que ofreces. Si proporcionas descripciones certeras, beneficios y precios, los usuarios sentirán más confianza y tendrán mayor disposición para adquirir tus productos o servicios.

Estos estándares de diseño web están enfocados en la experiencia del usuario, así que procura tomarlos en cuenta al hacer mejoras en tu sitio web.

Checklist de estándares de diseño web

Ahora que conoces qué son los estándares de diseño web y cuáles son los más importantes, ¡ponlos en práctica! Te compartimos un checklist básico que puedes usar para no olvidar lo esencial al optimizar tu sitio.

1. Simplicidad

¿Tu sitio web es sencillo de usar?

¿Tienes entre 3 y 7 colores?

¿El tipo de fuente en tu sitio web es fácil de leer y no cansa la vista?

2. Jerarquía identificable visualmente

¿Las cosas más importantes de tu sitio web destacan de aquellas no lo son?

¿La información y contenido están bien jerarquizados?

3. Navegabilidad

¿El usuario puede encontrar fácilmente aquello que está buscando?

¿El mapa de tu sitio web es sencillo e intuitivo?

4. Consistencia

¿Todas las páginas web de tu sitio son fácilmente identificables?

¿Los colores y tipografía elegidos otorgan consistencia e identificación al sitio?

5. Capacidad de respuesta

¿La experiencia es óptima y cómoda tanto en computadoras como en dispositivos móviles?

6. Accesibilidad

¿Los videos en tu sitio web tienen subtítulos?

¿Tu sitio tiene un menú claro y a la vista?

¿Los textos en tu sitio están bien redactados y pueden ser interpretados por un software asistente para personas con discapacidad visual?

7. Convencionalidad

¿Tu sitio web tiene elementos fácilmente reconocibles e intuitivos para los usuarios?

¿Sigues las convenciones tradicionales de los sitios web?

8. Credibilidad

¿Tu sitio web es honesto y transparente con lo que ofrece?

¿Los productos están bien descritos y los precios son fácilmente identificables y sin cargos extras?

Los estándares de diseño web tienen la finalidad de hacerle la vida más sencilla a todas las personas que visiten tu página. Como has visto, no son pocos, pero vale la pena considerarlos al momento de construir tu sitio web u optimizarlo, pues así garantizas que tus usuarios pasen más tiempo en él y regresen.

# data[].attributes.attachment_link.title
¿Qué son los estándares de diseño web y para qué sirven?

# data[].attributes.attachment_link.description
Actualmente, el número de sitios web accesibles llega a los casi 1880 millones. ¿Impresionante, verdad? Para que tu sitio web destaque dentro de esta inmensidad de opciones, debes asegurarte de cumplir con los estándares básicos de diseño web, pues con ellos podrás garantizarle a tus usuarios una experiencia agradable en tu página, lo que hace más probable que vuelvan a visitarte.

# data[].attributes.body
Nos permite hablar el mismo idioma que los desarrolladores y ayuda a tomar mejores decisiones de diseño.

# data[].attributes.body
Es el espacio entre el borde de la página y el contenido, juega un papel fundamental en la apariencia estética y visual de un sitio web.

# data[].attributes.body
Los menús pueden ubicarse en varios puntos de la página, aunque los más usados son debajo de la cabecera, encima de la misma, y en una columna lateral, preferentemente a la izquierda.

# data[].attributes.body
Cabecera.

Menú principal.

Menús secundarios.

Cuerpo.

Títulos y subtítulos.

Contenido principal del documento.

Contenido.

Sección del documento.

Foto y leyenda.

Pie de página.

# data[].attributes.body
Las tablas son elementos dentro del diseño web que permiten a los desarrolladores web organizar datos como texto, imágenes y enlaces en filas y columnas.

# data[].attributes.body
La maquetación web es el proceso de diseño y desarrollo de un sitio web. Se puede hacer de forma manual o utilizando una plantilla prediseñada.

# data[].attributes.body
Los colores web son aquellos colores que aparecen en una página web, se pueden basar sobre los sistemas de color RGB o HSL.

# data[].attributes.body
Es un medio de redifusión de contenido web. Se utiliza para suministrar información actualizada.

# data[].attributes.body
Es la unidad de medida en el espacio digital corresponde a pixeles, hablamos de tantos pixeles de ancho por tantos de alto.

# data[].attributes.body
El título de la página web es el texto que se muestra en la pestaña del navegador.

# data[].attributes.body
Los hipervínculos nos permiten leer de documentos de manera no secuencial e incluso, puede conducirnos a otros documentos.

# data[].attributes.body
Es cualquier formato de contenido audiovisual capaz de ser visionado a través de internet.

# data[].attributes.body
Generalmente, se utiliza para dividir los textos en secciones.

# data[].attributes.body
Las imágenes de una web pueden transmitir información de manera más efectiva que el texto en algunos casos.

# data[].attributes.body
La estructura de una página web es la forma en la que se organizan los elementos que la componen (la disposición y presentación de los elementos y contenidos).

# data[].attributes.body
un sitio web es un libro completo, que se forma con diferentes páginas web de contenido. Por lo tanto, es fácil identificar un sitio porque su URL es siempre el mismo y generalmente se estructura así: nombredesitioweb.com (o .org, .net, .co, etc.).

# data[].attributes.body
El encabezado es la parte superior de una página web.

# data[].attributes.body
El menú es el mapa del sitio que ayuda a los visitantes a encontrar lo que buscan, ya sea la tienda online de tus productos, o alguna información sobre tu empresa.

# data[].attributes.body
Usualmente, son lo primero que ve un usuario después del encabezado, por lo que son esenciales para generar una buena primera impresión.

# data[].attributes.body
Desde los párrafos que explican la misión de tu marca o negocio, hasta una sola palabra en los diferentes botones.

# data[].attributes.body
Siendo la primera impresión que tendrán los visitantes de tu sitio, tu página de inicio debe comunicar tu mensaje principal para mantener a tus visitantes interesados.

# data[].attributes.body
Normalmente contiene un mapa del sitio, que ayuda a los visitantes a encontrar lo que están buscando.

# data[].attributes.body
Ayuda a representar a tu empresa y la hace reconocible y memorable tanto para los clientes existentes como para los potenciales.

# data[].attributes.body
Un CTA es un texto breve que se formula como una llamada a la acción y tiene como objetivo alentar a los visitantes a dar el siguiente paso hacia la conversión.

# data[].attributes.body
Proceso de creación y desarrollo para producir una nueva página web.

# data[].attributes.body
Es el ordenador encargado de proporcionar al navegador del cliente los documentos y medios que éste solicita.

# data[].attributes.body
Es el programa que se utiliza para acceder a los contenidos de Internet.

# data[].attributes.body
Figura o representación de algo.

# data[].attributes.body
Grado de facilidad para acceder y navegar por una página de forma intuitiva, sencilla y rápida.

# data[].attributes.body
Conexión directa entre dos espacios virtuales en el mundo digital.

# data[].attributes.body
Programa que puede incrustarse en un documento HTML.

# data[].attributes.body
Servicio de alojamiento web que te permite publicar un sitio web o aplicación en Internet.

# data[].attributes.body
Dirección que es dada a un recurso único en la web.

# data[].attributes.body
Es un nombre fácil de recordar asociado a una dirección IP física de Internet.

# data[].attributes.body
El diseño web es la configuración visible y creativa de un sitio, teniendo en cuenta la experiencia del usuario y la imagen de marca o las características del proyecto en cuestión

Los colores, la tipografía, los componentes interactivos y las imágenes son algunos de los elementos usados en el diseño web.

# data[].attributes.body
Son una serie de conceptos y herramientas que tienen el fin de crear un sitio fácil de usar, funcional y eficaz.

# data[].attributes.body
Indica el comienzo de la página.

# data[].attributes.body
1. Institucionales o de negocio

2. Personales o portafolios

3. Micrositios

4. Blogs

5. Educativos

6. Comercio electrónico

7. Portales

8. Noticias o revista

9. Wiki o foros de comunidades

10. Redes sociales

# data[].attributes.body
El diseño web tiene sus orígenes en 1989, mientras un científico inglés, Tim Berners-Lee, trabajaba en la Organización Europea para la Investigación Nuclear (CERN).

Este científico propuso un proyecto que estaba sustentado en hipertexto para facilitar la comunicación entre investigadores. Así, él y su equipo crearon el lenguaje HTML, el protocolo HTTP y el sistema de localización de objetos en la web URL.

# data[].attributes.body
fue algo que revolucionó la tecnología de esa época: nació la World Wide Web. Así, en 1992, se empezaron a diseñar sitios web a base de tablas, lo que permitía organizar los elementos.

# data[].attributes.body
En la simplicidad entran aspectos como los colores y la tipografía que se utilizan.

# data[].attributes.body
Es la cabecera y contiene información descriptiva del sitio.

# data[].attributes.body
Sirve para que los usuarios comprendan cuáles son los aspectos en el sitio.

# data[].attributes.body
Abarca todos los elementos visibles dentro de la página.

# data[].attributes.headline
¿Cómo ha evolucionado el diseño web en los últimos años?

# data[].attributes.subject
¿Cómo ha evolucionado el diseño web en los últimos años?

# data[].attributes.body
El diseño web en 1990

Con la aparición de JavaScript en 1995 se comienzan a solucionar algunos inconvenientes de HTML, y fue ahí que el diseño web empieza a ganar dinamismo.

# data[].attributes.body
Para lograr una navegabilidad óptima es recomendable tener un botón de búsqueda fácilmente identificable y visible.

# data[].attributes.body
Es lo que hace que el sitio web sea identificable para los usuarios.

# data[].attributes.body
Debido al aumento de la velocidad de internet a principios del 2000, se puso un gran énfasis en soluciones de software y hardware nuevas e innovadoras que contribuyan con el diseño web.

El 2003 sería clave en la historia del diseño web: nacen Facebook, que revolucionaría por completo el concepto de las redes sociales, y WordPress, que pasaría a impulsar más del 35% de los sitios web en internet para el 2020.

# data[].attributes.body
Otro hito importante sucedería unos años después: la llegada de los smartphones en la década del 2000 y su popularización en 2010. Esto introdujo un nuevo concepto en el mercado: el diseño web responsive.

# data[].attributes.body
Consiste en que el sitio web debe de ser óptimamente visible en cualquier dispositivo.

# data[].attributes.body
A lo largo de los últimos años, el diseño web responsive ha cobrado total protagonismo al momento de la creación de sitios web. Esto se fundamenta en la cantidad de usuarios móviles en el mundo que utilizan un dispositivo móvil para acceder a Internet.

En este contexto toma fuerza el contexto de Mobile First: refiere a la creación de un sitio web que “se piensa y realiza primero para dispositivos mobile, y después se adapta para desktop”

# data[].attributes.body
La accesibilidad implica que todos los visitantes puedan tener una buena experiencia en el sitio.

# data[].attributes.body
Generan certeza y comodidad a los usuarios.

# data[].attributes.body
La credibilidad es qué tanta confianza siente el usuario al visitar el sitio.