Diseño Web 8 errores y como resolverlos

¿El diseño web de tu sitio atrae a tus clientes o los asusta?

Las personas ignoran el diseño que ignora a las personas – Frank Chimero

Imagina lo decepcionado que puedes sentirte después de hacer un gran esfuerzo para promover tu sitio web y descubrir que, al visitarlo tus clientes solo consigues ahuyentarlos. Una gran campaña de promoción combinada con un diseño web pobre o desaliñado es como invitar a alguien a una fiesta solo para cerrarle la puerta en la cara.

Estos son 8 de los errores más comunes en el diseño web y una alternativa para evitarlos o resolverlos.

Error 1: uso indiscriminado de Flash

Las famosas introducciones en Flash, lejos de ser un elemento de impacto y de enriquecer la experiencia del visitante, son un ingrediente innecesario.

Si un cliente visita tu sitio es porque quiere conocer tu propuesta de negocio, tus productos o servicios, no le interesa ver una barra indicando el porcentaje de descarga, el tiempo de espera para ver una animación o en el peor de los casos una alerta para actualizar a la última versión de Flash Player.

Error de Diseño Web #1 - uso indiscriminado de Flash

Si bien es cierto, Flash tuvo su momento cumbre en el diseño web hace algunos años, pero eso fue cuando Internet comenzó a volverse un medio con mayor desempeño, entonces aparecieron páginas sorprendentes, con animaciones deslumbrantes para atraer la atención de las personas, sin embargo, los tiempos cambian.

Uno de los factores a considerar, es la poca empatía entre Flash y los motores de búsqueda, cuando un robot o araña de los buscadores entra a un sitio a rastrear la información no puede obtenerla, pues al publicar el documento de Flash se comprime y se convierte en una película (.swf), lo cual impide el acceso.

Aun cuando el robot si puede encontrar elementos como las palabras clave o la descripción del sitio, no tiene la oportunidad de compararlo con el contenido del texto o de crear una lista de las páginas internas del sitio basándose en el menú de navegación. En pocas palabras, se va con las manos vacías.

Solución: utiliza HTML y lleva a tu cliente directo a la información.

Si quieres dejar boquiabierto a tu cliente, dedica más tiempo al contenido de tu sitio. Lleva a tus visitantes directo a tu propuesta de valor, muéstrales las virtudes y beneficios de tus productos o servicios.

HTML es un lenguaje 100% compatible con los motores de búsqueda, los robots identifican todos los elementos de un sitio como cabeceras, ligas, imágenes e incluso texto, en pocas palabras, obtienen con facilidad la información de tu sitio para indexarla y mostrarla en sus hojas de resultados.

HTML te ayuda a mostrar tu contenido a los visitantes y a los buscadores. Dos pájaros de un tiro.

Error 2: música de fondo

Error de Diseño Web #2 - utilizar música

Si quieres perder la atención de tu visitante en cuanto llega a tu sitio, utiliza música de fondo. Con toda seguridad los primeros instantes los va a dedicar, en el mejor de los casos, a encontrar el reproductor de música para apagarla, y en el peor, a cerrar la ventana del navegador donde esta tu sitio web.

A una gran cantidad de personas les gusta acompañarse de su propia selección musical mientras trabaja frente a su computadora, y no les resulta agradable escuchar tus favoritas.

La música no es un elemento del diseño web que vaya a enriquecer la visita del usuario al sitio, a menos que tu sitio sea sobre música, y de ser así, debes darle la opción de utilizar los controles para activar el audio y modificar el volumen cuando él lo deseé.

Solución: no uses música de fondo.

Error 3: uso inconsistente del color

Error de Diseño Web #3 - uso inconsistente del color

No hay razón alguna para hacer creer al visitante que tu sitio web es el final del arcoiris. Una sobredosis de color resulta incomoda a la vista y confunde al usuario.

El color es un elemento clave del diseño web, influye en el comportamiento del usuario de tal manera que puede invitarlo a conocer el sitio entero o a salir.

Solución: crea una paleta de colores, es el mejor lugar para comenzar el diseño web de tu sitio.

Una fórmula sencilla es utilizar una selección de cuatro colores, tres tonos neutrales y un color para realzar los colores de la paleta.

Paleta de color

Adobe Kuler o ColourLovers, son dos magníficas herramientas en línea para crear paletas de color, puedes jugar con diferentes reglas para combinar los colores y elegir al final la más congruente con el concepto y contenido del sitio.

Si sientes curiosidad y deseas conocer más sobre el uso del color en el diseño web, consulta esta guía básica para la combinación de colores, te tomará solo unos minutos y tendrás una idea más clara para combinarlos.

Error 4: uso inconsistente de las fuentes

Error de Diseño Web #4 - uso inconsistente de las fuentes

Utilizar fuentes distintas para títulos, subtítulos, párrafos y ligas no es una buena idea, más allá de enriquecer el diseño lo desequilibra, confunde al visitante, y por último, le resta importancia a tu contenido.

Las fuentes o tipografía, son otro elemento delicado del diseño web, la letra es en buena medida el portador del mensaje e influye en el impacto del mismo. No por nada han sido el tema de una buena cantidad de libros.

Solución: define como máximo dos fuentes, lograrás hacer más consistente e interesante tu diseño web y el contenido de tu sitio.

Aquí una descripción simple y ejemplos de los tipos de fuentes.

Serif: serif o serifa es el remate en los extremos del trazo de la letra.

Sans-serif: son las que no poseen dicho acabado, y terminan sin ningún adorno en el extremo de sus trazos

Monoespaciadas: son fuentes cuyo espacio horizontal de cada letra es exactamente igual, aún cuando el tamaño y ancho es diferente.

Puedes elegir una fuente tipo serif para los títulos y una sans-serif para los párrafos y ligas.

En el diseño web existe un término para las fuentes instaladas en todas las computadoras, se les denomina fuentes seguras o de dispositivo. Usa estas fuentes en tu diseño web y se verá igual en todas las computadoras.

Estas son las fuentes de dispositivo:

  • Serif: Geogia, Palatino Linotype, Book Antiqua, Palatino, Times New Roman, Times.
  • Sans-serif: Arial, Helvetica, Arial Black, Gadget, Comic Sans, Impact, Charcoal, Lucida Sans Unicode, Lucida Grande, Tahoma, Geneva, Trebuchet MS, Verdana y Geneva.
  • Monoespaciadas: Courier, Courier New, Lucida Console, Monaco.

Tipos de fuentes

Si quieres explorar otras fuentes disponibles para utilizar en el diseño web de tu sitio, puedes consultar una lista alternativa con más de 500 familias de fuentes en Google Web Fonts.

Puedes descargar las fuentes a tu ordenador para usarlas en el documento de diseño y posteriormente insertar una línea de código, proporcionado en la misma página, directamente en tu sitio. Estas fuentes están disponibles en línea, no es necesario cargar ningún documento en tu servidor.

Error 5: menospreciar el contenido del sitio

El contenido de tu sitio no es un elemento de relleno, es lo más importante en tu sitio.

Grandes párrafos de texto sin títulos o subtítulos para desglozarlo dificultan la lectura y la vuelven tediosa.

Solución: Dale jerarquía al contenido de tu sitio web, crea segmentos, utiliza títulos y subtítulos de un tamaño diferente al de los párrafos.

Por otro lado, si quieres atraer la atención del visitante hacia un texto en particular o hacer evidente un título, evita lo siguiente.

Evita resaltar el texto

Dar jerarquía a la información en el sitio facilita al visitante su lectura, además de generar la sensación de orden.

Error 6: exceso de información en la página principal

Error de Diseño Web #6 - exceso de información en la página principal

La página principal de tu sitio no es un letrero de avisos donde puedas incrustar todos y cada uno de tus productos. El resultado de incluir toda tu información deriva en dos situaciones no deseables, confusión y pérdida de atención del usuario.

Solución: Define con claridad la propuesta de valor de tu organización, los beneficios obtenidos por el cliente al adquirir productos o contratar servicios. Has evidente la diferencia con tu competencia. La página principal de tu sitio web es el lugar ideal para hacerlo.

También es el espacio indicado para presentar los productos o servicios estrella, con ello ganarás la atención del visitante y despertarás su interés por conocer el resto.

Error 7: uso de imágenes para mostrar texto

Si dedicas tiempo valioso a elaborar el contenido clave de tu organización y de tus productos o servicios, evita a toda costa convertirlo a imagen para subirlo a tu sitio web.

El texto en imagen puede resultar atractivo para tus visitantes, pero los motores de búsqueda no tendrán información para indexar tu sitio.

Solución: utiliza las etiquetas de HTML para mostrar el contenido de tu sitio y los estilos en cascada (CSS) para modificar las propiedades del texto e incluso para aplicar algunos efectos.

Puedes consultar tutoriales para conocer más acerca del uso de HTML y como enriquecer su apariencia con las hojas de estilo en cascada (CSS), también puedes encontrar tutoriales de HTML5/CSS3 y descubrir que los hace tan atractivos.

Tip extra: si por alguna razón decides insertar imágenes para tus títulos, utiliza el título como nombre del archivo (por ejemplo, título.jpg) y en el atributo alt de la etiqueta img de HTML.

Error 8: imágenes sin optimizar

Error de Diseño Web #8 - imágenes sin optimizar

Es muy válido utilizar imágenes tomadas desde tu cámara, pero debes optimizarlas para su uso en tu sitio web.

Si tus imágenes son muy pesadas y les toma un tiempo aparecer en tu sitio web, puedes tener algunos problemas, el usuario puede pensar que no hay información que mostrar, tu sitio puede tener un desempeño lento y este es un factor considerado por los motores de búsqueda para indexar tu sitio.

Solución: Utiliza un editor de imágenes para modificar el tamaño de la imagen, la resolución y su peso.

El tamaño puede variar dependiendo del diseño de tu sitio web, ajusta el tamaño para evitar rebasar los límites, principalmente el ancho de la página.

Asegúrate de utilizar 72dpi’s para la resolución de la imagen, es suficiente para visualizarla en la pantalla.

Al reducir el tamaño y la resolución de la imagen, el peso disminuye.

Por último, si el contenido de la imagen son vectores utiliza el formato .png, en el caso de las fotografías utiliza el formato .jpg. Si utilizas estos formatos obtendrás imágenes de mejor calidad, enriquecerás el diseño de tu sitio web y su desempeño.

Conclusión

El diseño web considera siempre al usuario final, implica crear un espacio ideal para presentar los beneficios de adquirir tus productos y servicios, por lo tanto, debe de ser un lugar confortable y legible a primera vista.

Un buen diseño web orienta al usuario, lo invita a emprender acciones, lo guía a través del contenido y le ayuda a construir una experiencia positiva para generar confianza. Es una forma de invitarlo a regresar, utilizar y compartir tu sitio web.


Haz un comentario

Diálogo 2 comentarios