10 errores comunes en diseño web

Muchas veces quienes nos dedicamos al diseño buscamos herramientas para no cometer errores en esta cuestión, y es muy difícil encontrar este tipo de consejos de profesionales. Navegando en Noupe.com encontré un excelente artículo sobre 10 cosas que no se deben hacer en diseño web.

Como el artículo originalmente se encuentra en inglés aquí les envío una traducción con los puntos que consideré más importantes, pero como siempre les recomiendo que lean el escrito original ya que es excelente. Los ejemplos que se encuentran en el post son de sitios que utilizan estos consejos correctamente, para visualizar qué se está queriendo decir.

10 errores comunes en diseño web que deberíamos evitar

Sitios abarrotados de imágenes e información

El espacio vacío o espacio negativo, aquellos espacios que se encuentran sin contenido son una herramienta muy importante en el diseño. Afecta cómo los usuarios perciben la importancia de los distintos elementos. Suficiente espacio en blanco debe ser utilizado entre nuestras columnas, los diferentes elementos de página e incluso entre las letras individuales, líneas y párrafos. Tanto los componentes como el espacio vacío deben ser considerados como elementos de igual relevancia en el diseño completo.

No debemos poner demasiado en un solo lugar o una sola página. Muchas veces es mejor tener más espacios cortos que uno solo largo y que contenga información que no es relevante.

Contenido nuevo difícil de encontrar

Al menos que los sitios que estamos diseñando sean completamente estáticos, es relevante mostrar y dar relevancia al contenido nuevo. Aquellos usuarios que regresan estarán interesados en qué ha cambiado desde su última visita. Esto es algo que se hace automáticamente en los blogs, pero deberíamos tenerlo en cuenta para todo tipo de sitios.

Las formas de hacerlo son muchas, podemos tener una sección específica de contenido nuevo, o enlazarlo a través de textos y darles relevancia en la página principal. Lo más importante es hacer que esta información sea de fácil acceso para nuestros usuarios.

Enlaces de difícil acceso

Necesitamos que los enlaces se distingan fácilmente del resto de los elementos, ya que son uno de los elementos más importantes del sitio. Aquí deberemos tener en mente dos cosas: primero, asegurarnos de que los enlaces se diferencien del resto del texto. Podemos hacerlo con colores, subrayado o cualquier otro atributo de texto que se nos ocurra, (Broma del autor: todo menos el texto intermitente :P). Lo segundo a tener en cuenta es no hacer que el texto regular de lectura, se asemeje a los enlaces, no debemos subrayar los textos si no son hipervínculos, ya que puede prestarse a confusión.

Utilizar formatos incorrectos de imágenes

Es importante conocer las características de cada formato de imagen para saber cuál utilizar en cada caso, ya que esto puede afectar que no se vean como deseamos o bien que pesen más de lo adecuado. Los formatos para utilizar en línea son JPEG, GIF y PNG.

El caso de JPEG es excelente para visualizar millones de colores y sombras ya que reproduce el color en 24 bits. La contra de utilizar este formato es que si necesitamos que pese menos, pierde calidad. Además no se puede utilizar transparencia por lo que la imagen siempre será recta.

Si hablamos de GIF, deberemos tener en cuenta que solo reproduce color en 8 bits (256 colores en total). Esto significa que no puede utilizarse para imágenes con degradados. Pero si contamos con imágenes de colores planos podemos obtener muy buen peso de compresión casi sin perder calidad.

Finalmente el formato PNG abarca fotografías y gráficos. Permiten transparencias, siempre y cuando los exploradores lo permitan, lo que les da una ventaja frente al GIF. Y no pierden calidad de compresión por lo que le ganan al JPG. Permiten reproducir  imágenes de 8 y 24 bits por lo que pueden reemplazar los formatos anteriores. Los PNG no son tan buenos como el JPG pero si son mejores que los GIF.

Dejar el título por defecto

El título que viene por defecto en Dreamweaver es «Untitled Document». Es un error muy simple de arreglar que no debería ocurrir.

Muchos CMS utilizan el nombre del sitio y bitácora como el título por defecto de todas las páginas. Algunos agregarán el nombre específico, pero no todas. Deberíamos asegurarnos de que todos los nombres de las páginas en nuestro sitio contengan un título único individual, y que aquellas con contenido específico muestren esa especificidad antes que el título.

Menú de navegación difícil de utilizar y encontrar

La navegación debe ser visible para nuestros usuarios, tanto para localizarla como para utilizarla. Si bien hubo una moda que intentaba esconder la navegación para integrarla al diseño, artísticamente puede ser una buena práctica pero no es amigable para el usuario.

Aún utilizando menúes desplegables podemos hacer el sitio menos amigable. Necesitamos que nuestros visitantes encuentren exactamente lo que están buscando con el menor esfuerzo necesario.

Utilizar tamaños predeterminados de letra

Debemos asegurarnos de que los usuarios puedan modificar el tamaño de los textos basados en sus propias preferencias. Esto se realiza a través de la utilización de los tamaños EM en lugar de los basados en pixeles (los que vienen por defecto). Es algo relativamente simple de solucionar y mejora el uso y acceso del usuario.

Propuestas difusas del sitio

Los usuarios deben saber inmediatamente de qué se trata el sitio, no importa en qué página aterricen. Esto puede lograrse a través del uso de etiquetas o indicaciones similares a través de los títulos de página, o bien en los encabezados de las individuales. De cualquier manera, debemos asegurarnos que el objetivo sea visible al lector desde los primeros segundos en los que llega a nuestro sitio.

Utilizar colores fuertes

Los colores llamativos, en especial aquellos muy contrastantes, pueden despreciar la visual de nuestro sitio. No queremos hacer nada que provoque que el usuario deje nuestro sitio. La irritación visual algo que hará que muchos dejen nuestras páginas a raíz de los contrastes de colores. Nuestro sitio debe mostrar su contenido y evitar cualquier cosa que haga perder la atención a su meta.

Anuncios publicitarios mezclados con el contenido

Según la autora del post original, los anuncios de publicidad deben estar separados del contenido del sitio. Etiquetar nuestros avisos publicitarios tendrá completo sentido para nuestros usuarios y hará nuestro espacio más confiable. Es muy importante con anuncios de texto, es necesario que estos enlaces se encuentren diferenciados de los hipervínculos del sitio.