Los errores que no debe cometer cuando diseñe una página web

Tecnoguías: El ABC de los errores del diseño web para PYMEs

from ENTER.CO on Vimeo.

Hay algunas cosas que toda persona que esté creando o vaya a crear un sitio web debe saber, al igual que varias tendencias que se deben tener en cuenta, si es quiere hacer de sus páginas un lugar agradable. En esta guía podrá conocer los errores que debe evitar a toda costa si quiere que los visitantes de su sitio web sigan volviendo.

Diseñar un sitio web que no funcione en todos los navegadores

Tenga en cuenta que sus usuarios pueden llegar de cualquier navegador y sistema operativo
Tenga en cuenta que sus usuarios pueden llegar de cualquier navegador y sistema operativo

Construir un buen sitio web no es fácil; terminar el diseño y el código es solamente la mitad de camino. Un gran número de cosas pueden salir mal si no se realizan las pruebas correspondientes desde el principio. Desde código con un mal formato, el cual algunos navegadores simplemente no pueden entender, hasta páginas cuyo diseño se rompe por completo dependiendo de si se abren en un PC o Mac. Asegurarse de que el sitio web funcione correctamente, sin importar qué usuario llegue a él y desde qué plataforma se abra, es clave para el éxito de la página.

Este es uno de los errores más comunes, si no el más común, que se comete al momento de crear un sitio. Los principales navegadores tienen protocolos y motores de renderizado completamente diferentes entre sí, y si se diseña pensando únicamente en Chrome o Firefox lo mas probable es que no se cargue correctamente para todos los usuarios.

Lastimosamente la mejor forma de arreglar esto es probando, una y otra vez, todos los cambios y novedades que se le agreguen al sitio web antes de que esté en línea. Las pruebas no son fáciles de realizar: no solamente se tiene que tener en cuenta desde qué navegador se abre el sitio, sino también la versión del mismo y el sistema operativo de la computadora. La amplia adopción de dispositivos móviles tampoco ayuda a hacer este proceso más fácil, pero saltarse esto puede tener un alto costo y generar una experiencia negativa para el usuario final.

Usar tecnología de punta sin una razón que lo justifique

Aunque suene algo contradictorio, en la creación de sitios web no es buena idea usar tecnologías o ‘scripts’ muy recientes, debido a que puede comprometer la compatibilidad del sitio a través de los diferentes navegadores, especialmente en los que no están debidamente actualizados. Además, esto hará que el proceso de revisiones y pruebas previas al lanzamiento sea más tedioso.

Debe procurar que todas las tecnologías web que se usen en el desarrollo tengan un amplio soporte y usen estándares reconocidos en la industria. Lo mejor es que busque una forma de cumplir todos los requerimientos del sitio usando lo conocido, y solo aventúrese a usar nuevos protocolos y lenguajes si es estrictamente necesario.

No poner el logo del sitio todas las páginas. Y si está, no hacer que dirija al home

El logo de la empresa ubicado en la parte superior del sitio es tradicionalmente una guía para los visitantes
El logo de la empresa ubicado en la parte superior del sitio es tradicionalmente una guía para los visitantes

Este es un error básico de estructura, pero cuando ocurre es frustrante para el usuario final y reduce las posibilidades de que el visitante entre de nuevo a la página. Todos los sitios web deben tener una forma de dirigirse al inicio y esta debe ser clara y visible para cualquier persona que esté navegando. Lo normal es que el logo del sitio esté ubicado en la parte superior de la página, y que al hacer clic en él, siempre dirija a la página principal. Solucionar este error de diseño es fácil, pero olvidarlo puede hacer que el sitio web sea casi inutilizable.

Deshabilitar la navegación con el teclado

A internet entran todo tipo de usuarios: desde novatos en tecnología, hasta usuarios técnicos con grandes conocimientos, y es importante no limitar las formas de interacción de los visitantes. Muchas páginas tienen desactivada la navegación con el teclado, y con esto me refiero a que el sitio sea completamente explorable sin necesidad de usar el ratón.

Un buen manejo de la tabulación y las flechas de dirección pueden aumentar bastante la velocidad de uso de un sitio web. Pero hay paginas que no hacen esto posible: con pequeñas decisiones u omisiones de diseño, como que la tecla Enter no ejecute ninguna acción, pueden obstruir considerablemente la experiencia de uso. Llenar un formato de inscripción y tener que mover la mano hacia al ratón para poder confirmar es algo innecesario; con presionar Enter debería bastar.

Pedir a los usuarios que se registren sin justa causa

Registrarse no es una tarea agradable, y menos si a cambio no se consigue algo valioso
Registrarse no es una tarea agradable, y menos si a cambio no se consigue algo valioso

Para los administradores siempre es importante tener un registro de los usuarios que visitan la página, y una de las formas para motivar a los visitantes es hacer que algunos de los contenidos requieran de registro para acceder. Si su sitio web ofrece un servicio específico y personalizado, los usuarios suelen entender que el registro será una de las primeras cosas que se les pedirán. Pero en sitios web de contenidos, como blogs y portales de noticias, el registro debe ser tratado de manera mucho más cuidadosa.

Limitar el acceso a la información del sitio a cambio de que los usuarios se registren puede dañar la experiencia de uso por completo y hacer que el usuario asocie al sitio web con una tediosa diligencia, algo que ni las facilidades de ‘loguearse’ con redes sociales pueden arreglar.

La mejor forma de hacerlo es ofrecer, a cambio del registro, mejoras tentadoras y personalizadas en la experiencia de uso en el sitio web. Algunas de estas pueden ser la posibilidad de suscribirse a los contenidos más importantes y atractivos, o la opción de tener y administrar un perfil donde se podrá llevar cuenta de los contenidos que le gustaron al usuario y los comentarios realizados por él.

Anular el clic derecho

Proteger los derechos de autor es importante, pero como queda claro en la mayoría de errores listados, debe hacerse sin limitar la experiencia de uso. En principio, deshabilitar la función del clic derecho puede sonar como una buena idea si quiere que los visitantes no copien su contenido y lo manipulen sin su autorización, pero al tomar una decisión de este calibre tenga en cuenta que lo más probable es que esté causando más mal que bien. El clic derecho es muy útil, y quitarle esa herramienta de navegación a sus visitantes puede ser contraproducente, no solamente desde el punto de vista técnico.

Los usuarios pueden pensar que los están tratando de ladrones cuando notan que los administradores del sitio toman medidas para reprimir y limitar su comportamiento. Además, medidas como esta ponen en evidencia problemas de confianza y una actitud prohibitiva hacia los visitantes.

Si alguien en verdad quiere copiar su contenido, bloquear el clic derecho no bastará para detenerlo. En la mayoría de casos las medidas restrictivas son inútiles, y solo causará que los usuarios no puedan sentirse a gusto mientras visitan su sitio web.

Publicidad que parezca contenido

A nadie le gusta sentirse engañado, y si no tiene cuidado, esa puede ser la sensación con la que se queden los visitantes a su sitio. Es entendible que se tomen medidas para motivar a los usuarios a hacer clic y revisar la publicidad en la página; así es como ganan dinero una gran parte de sitios web de contenidos digitales en internet. Pero no es aconsejable que se disfracen ‘banners’ publicitarios como contenido propio de la página. Cuando un usuario haga clic esperando encontrarse con un artículo y en cambio sea dirigido a una página de publicidad, es inevitable que sienta que la página le miente y se aprovecha de la confianza depositada por él.

Poner música o reproducir un video sin que el usuario lo haya pedido

No hay nada peor que no tener control sobre lo que pasa en su computadora, y cuando alguien entra a un sitio web que reproduce sonidos y videos sin la autorización del usuario, la primera reacción suele ser cerrarlo inmediatamente.

Evite de todas las maneras posibles que algo así ocurra en su página. No solamente es abusivo, porque hace uso de los recursos de la computadora –como el ancho de banda– para cargar algo que el usuario no ha pedido, sino que también aleja a las personas de su sitio. Y eso es precisamente lo que usted no quiere que ocurra.

Que aparezcan ‘pop-ups’ o ventanas emergentes

Hágase esta pregunta: ¿Qué espera el visitante encontrar en este sitio web?. De seguro la respuesta no es ‘un pop-up que ocupa toda la pantalla’. Esta es una de las peores prácticas en diseño web, y, como muchos de los errores listados en esta guía, lo que realmente logra es alejar a sus visitantes y probablemente ubicar a su página en la lista negra de muchas personas.

Esto pasa por una razón
Esto pasa por una razón

La mayoría de navegadores tienen opciones que permiten bloquear los ‘pop-ups’ y esas opciones están ahí por una razón: a la gente le molesta que se abran ventanas y se les muestre información que ellos no han pedido. Existen casos en los que un ‘pop-up’ puede facilitar bastante el uso del sitio web, pero cuando son utilizados para que los usuarios vean publicidad, se convierten inmediatamente en enemigos naturales de los internautas.

Haga todo lo posible por evitar los errores listados en esta guía y así creará una experiencia agradable para sus usuarios, quienes seguro querrán volver a su página web.

Imágenes: montajes ENTER.CO y Wix.

David Duarte

David Duarte

Soy un productor de video interesado en hacer contenidos de calidad que creen una conversación y generen conocimiento, desde siempre he tenido una pasión insaciable por la tecnología y mi vida gira en torno a ella, me gusta el cine, los videos en Internet, los Videojuegos, la ciencia ficción y la cultura pop en general. Creo que el internet ha cambiado y seguirá cambiando el mundo en formas aún más drásticas que las que hasta ahora hemos visto y aquellos que nos logremos adaptar primero y dirigir ese cambio tendremos un puesto privilegiado en el futuro.

View all posts

52 comments

  • que para el concurso de una página toque tener cuenta en facebook cuando no es una página de facebook, o peor aún, que le pida a los usuarios que le haga spam a sus propios amigos para registrarse en facebook (más aún cuando ahora, según artículo reciente, facebook o no lo permite o lo desincentiva)

  • que para el concurso de una página toque tener cuenta en facebook cuando no es una página de facebook, o peor aún, que le pida a los usuarios que le haga spam a sus propios amigos para registrarse en facebook (más aún cuando ahora, según artículo reciente, facebook o no lo permite o lo desincentiva)

  • “No poner el logo del sitio todas las páginas. Y si está, no hacer que dirija al home”, la pagina de enter tiene el logo en todas las paginas y no tiene Home a simple vista (toca hacer clic en Menu) :S ; para mi el logo debe estar en todas las paginas de forma decente y ya de por si todos los usuarios saben que para ir a la pagina principal se debe hacer clic sobre el, o tener el home dentro del menu principal, por tanto no es un error.

    • errores que NO debe cometer cuando diseñe una página web. Vamos a ver una clase de lógica avanzada:

      proposición 1: NO poner el logo del sitio en todas las páginas
      proposición 2: si el logo está, el logo NO dirige al home.
      proposición 3: no cometer el error X cuando diseñe una página web. (que parte del título del artículo)

      ahora, reemplacemos la X:
      1. no cometer el error de “NO poner el logo del sitio en todas las páginas” cuando diseñe una página web.
      2. no cometer el error de “si el logo está,el logo NO dirige al home” cuando diseñe una página web.

      Queda demostrado que el escritor NO cometió ningún error, y lo suyo, señor Colombiano87, es un problema de comprensión de lectura y de lógica.

      • La redacción me parece muy complicada, si se lee con detalle se entiende, pero esto no es un texto académico, estos artículos deben ser más claros.

  • “No poner el logo del sitio todas las páginas. Y si está, no hacer que dirija al home”, la pagina de enter tiene el logo en todas las paginas y no tiene Home a simple vista (toca hacer clic en Menu) :S ; para mi el logo debe estar en todas las paginas de forma decente y ya de por si todos los usuarios saben que para ir a la pagina principal se debe hacer clic sobre el, o tener el home visible, por tanto no es un error.

    • errores que NO debe cometer cuando diseñe una página web. Vamos a ver una clase de lógica avanzada:

      proposición 1: NO poner el logo del sitio en todas las páginas
      proposición 2: si el logo está, el logo NO dirige al home.
      proposición 3: no cometer el error X cuando diseñe una página web. (que parte del título del artículo)

      ahora, reemplacemos la X:
      1. no cometer el error de “NO poner el logo del sitio en todas las páginas” cuando diseñe una página web.
      2. no cometer el error de “si el logo está,el logo NO dirige al home” cuando diseñe una página web.

      Queda demostrado que el escritor NO cometió ningún error, y lo suyo, señor Colombiano87, es un problema de comprensión de lectura y de lógica.

      • La redacción me parece muy complicada, si se lee con detalle se entiende, pero esto no es un texto académico, estos artículos deben ser más claros.

  • “Diseñar un sitio web que no funcione en todos los navegadores”, ¿alguien dijo ENTER:CO?.

  • “Diseñar un sitio web que no funcione en todos los navegadores”, ¿alguien dijo ENTER:CO?.

  • Aquí no se cumple la de
    “Publicidad que parezca contenido” porque en la zona donde se colocan las noticias he visto publicidad que simula ser una noticia dentro de los mismos cuadros.

    “Diseñar un sitio web que no funcione en todos los navegadores” Para entrar a Enter.co siempre me toca entrar con Chrome porque en Firefox no funciona, si uno le da click a cualquier noticia no hace nada no la abre y los videos no se pueden ver ya que no se visualiza sino un cuadro negro.

  • Aquí no se cumple la de
    “Publicidad que parezca contenido” porque en la zona donde se colocan las noticias he visto publicidad que simula ser una noticia dentro de los mismos cuadros.

    “Diseñar un sitio web que no funcione en todos los navegadores” Para entrar a Enter.co siempre me toca entrar con Chrome porque en Firefox no funciona, si uno le da click a cualquier noticia no hace nada no la abre y los videos no se pueden ver ya que no se visualiza sino un cuadro negro.

  • Lo que han dicho los otros lectores es verdad #ENTER.CO no sigue algunas de estas recomendaciones, especialmente

    “Publicidad que parezca contenido”

  • Lo que han dicho los otros lectores es verdad #ENTER.CO no sigue algunas de estas recomendaciones, especialmente

    “Publicidad que parezca contenido”

  • ¿Diseñar un sitio para todos los navegadores?, que tenga entendido como programador es que el si yo escribo una pagina en HTML es un estándar y aunque cada navegador haga render de diferentes formas debe mostrar la informacion de la misma forma, para eso existe un ente llamado W3C que regula el los contenidos html, css, javascript etc y es la base que toman los desarrolladores de navegadores para funcionar (Google, Microsoft etc), es errado pensar que debo abrir todos los navegadores para probar mi código si yo realizo un código bajo los estándares si funciona en 1 funciona en otros debe pasar lo mismo, lo que coincidimos es que si utilizo código que aun no se halla aprobado como estándar puede generar errores o que se abra en versiones anteriores de navegadores,
    Y ademas esta pagina comete la mayoría de errores que qui tratan de enseñarnos
    Logo en todas las paginas,
    publicidad que parece contenido,
    Ademas buscar un contenido anterior hay que hacer un curso en el sena para encontrarlo jeje.

    • Lamentablemente la especificación no se cumple al pie de la letra para todos los usuarios, unos usan navegadores desactualizados que no soportan lo que hoy es estándar (Internet Explorer < 9.0), otros implementan mal, o con leves variaciones lo que dicta la W3C, y también hay importantes variaciones de rendimiento (por ejemplo, Firefox corre determinado script a dos veces la velocidad que el resto de navegadores, pero hay otro script con el que se queda atrás) por eso es necesario probar en tantos navegadores como se pueda.

    • David tiene toda la razón la mayoría de veces el explorador que molesta es IE y eso se tiene que arreglar poniendo condiciones en la hoja de estilo o directamente en html

  • ¿Diseñar un sitio para todos los navegadores?, que tenga entendido como programador es que el si yo escribo una pagina en HTML es un estándar y aunque cada navegador haga render de diferentes formas debe mostrar la informacion de la misma forma, para eso existe un ente llamado W3C que regula el los contenidos html, css, javascript etc y es la base que toman los desarrolladores de navegadores para funcionar (Google, Microsoft etc), es errado pensar que debo abrir todos los navegadores para probar mi código si yo realizo un código bajo los estándares si funciona en 1 funciona en otros debe pasar lo mismo, lo que coincidimos es que si utilizo código que aun no se halla aprobado como estándar puede generar errores o que se abra en versiones anteriores de navegadores,
    Y ademas esta pagina comete la mayoría de errores que qui tratan de enseñarnos
    Logo en todas las paginas,
    publicidad que parece contenido,
    Ademas buscar un contenido anterior hay que hacer un curso en el sena para encontrarlo jeje.

    • Lamentablemente la especificación no se cumple al pie de la letra para todos los usuarios, unos usan navegadores desactualizados que no soportan lo que hoy es estándar (Internet Explorer < 9.0), otros implementan mal, o con leves variaciones lo que dicta la W3C, y también hay importantes variaciones de rendimiento (por ejemplo, Firefox corre determinado script a dos veces la velocidad que el resto de navegadores, pero hay otro script con el que se queda atrás) por eso es necesario probar en tantos navegadores como se pueda.

    • David tiene toda la razón la mayoría de veces el explorador que molesta es IE y eso se tiene que arreglar poniendo condiciones en la hoja de estilo o directamente en html

  • Supongo que con sitio que no funciona en todos los navegadores es como lo que hace Google, que te obliga a usar GChrome para poder usar algunas de sus funciones como la edición de fotos.

  • Supongo que con sitio que no funciona en todos los navegadores es como lo que hace Google, que te obliga a usar GChrome para poder usar algunas de sus funciones como la edición de fotos.

  • Más respeto por favor!. El video es el manual de imágen corporativa de Enter. Por cierto: no se escribe ‘ABC’. Se escribe ‘Abecé’

  • Más respeto por favor!. El video es el manual de imágen corporativa de Enter. Por cierto: no se escribe ‘ABC’. Se escribe ‘Abecé’

  • Señores ENTER, ustedes han probado su página en móviles?, colocar este comentario desde una tablet ha sido una odisea, y el registro en disqus peor.

  • Señores ENTER, ustedes han probado su página en móviles?, colocar este comentario desde una tablet ha sido una odisea, y el registro en disqus peor.

  • Muy regular el articulo. El titulo al ser una negación, tiende a confundir cuando aparece otra más adelante, como es el caso del punto del logo. Por otro lado, hay cosas que son aceptables según la intención del sitio, por ejemplo si el sitio se monetiza con ads, entonces los ads más efectivos son los que están mezclados con el contenido. También hay que entender que es diferente diseñar un sitio a desarrollarlo. Además están las consideraciones según el publico del sitio o la ubicación geográfica; como es el caso de Colombia, donde IE8 es menos del 3% de los usuarios y este navegador no soporta ampliamente el estándar html5 y css3; no vale la pena sacrificar la experiencia de los usuarios móviles ( que son muchos más, según statcounter ) por no hacer ciertas implementaciones . Por otro lado esto también implica costos de desarrollo – que deben ser cargados a alguien – al tener que implementar alternativas para el correcto funcionamiento en navegadores no modernos o que no cumplen los estándares.

  • Muy regular el articulo. El titulo al ser una negación, tiende a confundir cuando aparece otra más adelante, como es el caso del punto del logo. Por otro lado, hay cosas que son aceptables según la intención del sitio, por ejemplo si el sitio se monetiza con ads, entonces los ads más efectivos son los que están mezclados con el contenido. También hay que entender que es diferente diseñar un sitio a desarrollarlo. Además están las consideraciones según el publico del sitio o la ubicación geográfica; como es el caso de Colombia, donde IE8 es menos del 3% de los usuarios y este navegador no soporta ampliamente el estándar html5 y css3; no vale la pena sacrificar la experiencia de los usuarios móviles ( que son muchos más, según statcounter ) por no hacer ciertas implementaciones . Por otro lado esto también implica costos de desarrollo – que deben ser cargados a alguien – al tener que implementar alternativas para el correcto funcionamiento en navegadores no modernos o que no cumplen los estándares.

  • Yo creo que tener el logo de tu empresa o de tu página web en todas las páginas y que te redirija a la página principal es muy cómodo para la navegación, eso sí, el logo debe estar en un lado o en la parte superior y no ocupar demasiado espacio, sino marea mucho. En cuanto a la publicidad que parece contenido o que se reproduce automáticamente es una cosa que odio con toda mi alma, y seguro que no soy la única. Siempre que diseñamos páginas web procuramos hacer diseños sencillos, no muy cargados y con la publicidad bien organizada para que no moleste la navegación al usuario.

  • Yo creo que tener el logo de tu empresa o de tu página web en todas las páginas y que te redirija a la página principal es muy cómodo para la navegación, eso sí, el logo debe estar en un lado o en la parte superior y no ocupar demasiado espacio, sino marea mucho. En cuanto a la publicidad que parece contenido o que se reproduce automáticamente es una cosa que odio con toda mi alma, y seguro que no soy la única. Siempre que diseñamos páginas web procuramos hacer diseños sencillos, no muy cargados y con la publicidad bien organizada para que no moleste la navegación al usuario.

  • jajaja el slideshow del home no funciona en chrome 38 … es como si tuviera un elemento transparente encima que no permite hacer click, entre otras su web tampoco funciona bien en ie 9… a veces se cuerga el contenido, y que decir de la usabilidad… terrible

  • jajaja el slideshow del home no funciona en chrome 38 … es como si tuviera un elemento transparente encima que no permite hacer click, entre otras su web tampoco funciona bien en ie 9… a veces se cuerga el contenido, y que decir de la usabilidad… terrible

  • Deberían los “Ingenieros o técnicos de desarrollo “de la pagina @ELTIEMPO leer este articulo, especialmente el punto “Pedir a los usuarios que se registren sin justa causa”, desde que me dice que en el mes ya consumí las consultas permitidas y me exige autenticarme, por lo menos a mi me molesta y simplemente leo otros diarios.

    #ENTER.CO, @ELTIEMPO y muchas paginas mas deberían invertir mas en buen talento humano “buenos ingenieros” para que puedan tener una buena experiencia nosotros los lectores.

  • Deberían los “Ingenieros o técnicos de desarrollo “de la pagina @ELTIEMPO leer este articulo, especialmente el punto “Pedir a los usuarios que se registren sin justa causa”, desde que me dice que en el mes ya consumí las consultas permitidas y me exige autenticarme, por lo menos a mi me molesta y simplemente leo otros diarios.

    #ENTER.CO, @ELTIEMPO y muchas paginas mas deberían invertir mas en buen talento humano “buenos ingenieros” para que puedan tener una buena experiencia nosotros los lectores.

  • Muy buen artículo. Los que trabajamos en diseño web debemos ser cuidadosos a la hora de diseñar las páginas web, tanto propias como de clientes, sobre todo las segundas, ya que son las que nos dan de comer.

  • Muy buen artículo. Los que trabajamos en diseño web debemos ser cuidadosos a la hora de diseñar las páginas web, tanto propias como de clientes, sobre todo las segundas, ya que son las que nos dan de comer.

Archivos