43 errores que no deberías cometer cuando diseñes un sitio
Artículos, Web Design 24 Mayo, 2007
Vuelvo con otro de los post tipo “10 mandamientos” (aunque esta vez son un poco mas de diez) la verdad es que me gustan bastante ya que me permiten ordenar las ideas y tenerlas constantemente frescas. En este post podrán encontrar un listado creado a partir de un artículo publicado en dailyblogtips, me tomé la libertad de usar los títulos y comentarlos personalmente, espero les sirva y guste.
- El usuario debe saber de qué es el sitio en pocos segundos
- No tienes mas de 10 segundos para “impresionar a tu visitante” úsalos siendo lo más claro posible, con un poco de suerte, se quedará.
- Hacer el contenido “scaneable”
- “Los usuarios no leen los sitios, los scanean” (Jakob Nielsen)
- No uses tipografías difíciles de leer en textos que quieres que se lean
- No sacrificar “estética” con funcionalidad
- No uses tipografías enanas
- Recuerda que no todos tienen una vista privilegiada como la tuya
- No abras páginas nuevas
- Debo admitir que aún me resisto a esta, claro, Nielsen dice: “Si los usuarios quieren abrir el link en una página nueva, ocuparán las opciones que les da su browser” mmm, no estoy tan convencido.
- No redimensiones la ventana del navegador
- Ni menos hagas sitios FullScreen, acaso crees que lo único que quiere ver el usuario es tu sitio? recuerda que cuando trabajas en browsers con pestañas, se redimensionan todas las pestañas (incluso las que no tienen nada que ver con tu sitio)
- No solicites regitrarse al usuario a no ser que sea necesario
- Regístrese aquí!! para qué? porque si? no obtengo nada a cambio? un screensaver? JA, NICA me registro
- Nunca suscribas al usuario a menos que él lo acepte
- Y que cuando acepte lo haga con pleno conocimiento de lo que acepta, no sacas nada con tratar de engañarlo
- No uses Flash sin una razón de peso (ojo que hay pocas)
- Personalmente creo que Flash es muy útil para darle movimiento a las páginas, sólo preocúpate que sea en sectores delimitados y que no contengan los “keywords” de búsqueda de tu sitio, sino estos se perderán y Google no los leerá facilmente.
- No toques música en el sitio
- Acaso crees que el usuario le interesa escuchar tu loop? acaso crees que no tiene en su computador música que preferiría escuchar antes que la tuya? no seas egocéntrico
- Si debes reproducir audio, deja que el usuario lo inicie
- OK, no se trata tampoco de hacer una web muda, si eres músico y quieres colocar audio en tu sitio, puedes hacerlo, sólo asegurate que se pueda iniciar y detener por el usuario.
- No llenes tu sitio con “badges”
- Los Badges son esas estrellas con muchas puntas que aparecieron con el look web 2.0, están bastante trilladas ya no?
- No uses una página “Splash” que lance el sitio real
- Tu ubicuidad y usabilidad se irán al cuerno si colocas una de estas malditas páginas.
- Asegúrate de colocar una forma de contacto
- Ohh me encantó esto, ahora cómo puedo comunicarme con ustedes, que?? no hay un formulario de contacto, y teléfono? no? dirección? puff, chao, me voy a otro sitio
- No inhabilites el botón volver del Browser
- La gente usa el botón volver del browser, Ajax y Flash hacen que este se inhabilite (aunque es solucionable) SOLUCIONALO!
- No usues texto parpadeante
- Parpadeante y texto son palabras que no deberían estar juntas nunca, aparte que cuesta leerlo, se ve rasca no?
- Evita Estructuras de URL complejas
- Piensa en que alguien pueda pasarle la URL de una de tus páginas a otra persona por teléfono, evita las URL inintendibles, mejorará incluso tu SEO.
- Prefiere el CSS por sobre las Tablas
- Las tablas son para información de tablas no para diagramar.
- Asegúrate que tus usuarios puedan buscar en todo el sitio
- Yo justifico los búscadores sólo en sitios lo sufucientemente grandes como para tener uno
- Evita los menús deplegables
- Al menos no los hagas la forma principal de navegación del sitio, ya que no permiten que tu usuario entienda claramente y de una pasada la estructura de contenidos de tu web.
- Usa navegación de texto
- Será más facil de actualizar, ubicable por los buscadores y accesible para discapacitados. Ojo, esto no significa que deba ser fea, hay menús hermosos hechos con links de texto
- Si estás vinculando hacia un PDF… Házlo saber
- El PDF abre el Acrobat en el Browser lo cual consume una cantidad importante de recursos que podrían incluso pegar un equipo viejito, deja que usuario decida si quiere ver el PDF o no.
- No confundas al visitante con varias versiones del sitio
- Haz una sóla, eso de versión flash y HTML son cosas del pasado
- No mezcles la publicidad con el contenido
- No te dará mas hits, te dará usuarios apestados
- Usa estructuras de navegación simples
- Haz que tus menús sean tan claros como para que el usuario pueda intuir fácilmente que hay dentro
- Evita por todos lo medios una Intro
- INTRO? come on! ya estamos grandes para eso no?
- No uses FrontPage
- FrontPage? JA
- Asegúrate que tu sitio sea compatible en varios Browsers
- Parte probándolo en FireFox y luego asegúrate que se vea bien en IExplorer
- Asegurate de usar Anclas en tu contenido de texto
- Si el texto es largo mejorará su lectura y además te ayudará con los buscadores
- No metaforices los links
- “El baúl de disfraces” no es un nombre para una sección, sé directo y claro
- Haz que los links se noten
- Si tus links parecen contenido o parte del diseño, nadie sabrá que puede clickearlos
- No subrayes texto a menos que sea un Link
- Está estandarizado que los textos subrayados son links, NUNCA subrayes un texto si no es link, confundirás al usuario
- Haz que los links visitados queden marcados
- Personalmente aplico esta decisión sólo en listados de links o en páginas con muchos links, considero innecesario hacerlo en sitios pequeños en donde no hay mas de 5 secciones, simplemente puede terminar confundiendo más que ayudando
- No uses Gifs Animados
- Agregaría..” a menos que sea tu última alternativa, y haz que no parezca gif animado”
- Asegúrate de colocar los atributos ALT y TITLE en las imágenes
- Mejorará tu accesibilidad y ubicuidad
- No uses colores molestos
- Una cosa es querer ser llamativo, o llamar la atención, otra completamente distinta es hacer de tu sitio el festival del color en donde no se puede leer nada porque la selección cromática perturba
- No uses Pop-Ups
- Aunque tu cliente y tu flojera te lo exijan!!
- Evita los Links por JavaScript
- Los típicos “on click” que luego son reemplazados por gatos (#) no son reconocidos por los spiders de los buscadores por lo tanto no son correctamente indexados en Google
- Incluye links funcionales en tu Footer
- Si tus usuarios no encuentran la información en el principio de la página, irán a buscarla al fondo, preocúpate que tu footer tenga info relevante como teléfonos direcciones o accesos a info destacada
- Evita las páginas largas
- Google adora las páginas largas, mientras más contenido mejor (con limite eso si) pero a la gente no les gusta tanto, hoy están mas acostumbradas a hacer scroll a lo que lo estaban hace un par de años, sin embargo, recuerda siempre que debes mantener tu contenido lo mas conciso posible, la gente no lee textos enormes (como este, JA)
- No uses el Scroll horizontal
- Mucha gente ni siquiera notará que tu sitio tiene un scroll horizontal, por lo que posiblemente pierdan contenido importante, ahora si tienen monitor de 800×600… que se jodan, acostúmbrense al scroll horizontal!
- Cuidado con los errores de ortografía
- “Loz herrores de hortografia le kitan credivilidad a lo que escrives”
- Si usarás CAPTCHA en los formularios, asegúrate que los textos sean legibles.
- (captcha es el sistema que obliga al usuario a escribir un texto distorsionado que aparece en una imagen para continuar el proceso, es utilizado para lograr que el que llene el formulario sea una persona y no un robot).
Eso es por ahora, alguno mas que deberíamos agregar?


Noviembre 16th, 2008 at 0:52
[...] http://www.digilicious.cl/2007/05/24/43-errores-que-no-deberias-cometer-cuando-disenes-un-sitio/ [...]
Octubre 21st, 2008 at 17:15
[...] cometer en tu sitio de acuerdo a varias páginas que he recopilado como Blogger profesional, Digilicius y Punto [...]
Septiembre 14th, 2007 at 4:44
[...] Los tips enteros en el blog de digilicious Publicado por marge Archivado en Programación, Diseño [...]
Julio 25th, 2007 at 2:33
[...] La traducción es gracias a Digilicious, ya que el articulo original es en inglés y lo publicó Daily Blog Tips. [...]
Julio 17th, 2007 at 11:08
[...] [...]
Julio 11th, 2007 at 11:12
[...] Aunque a mayoría de las sugerencias son refritos de lo que Nielsen ha dicho hasta el cansancio, nunca esta de más darles un repaso y tomar lo que más nos sirva. Para ello, en Digilicious, se dieron a la tarea de traducir y hacer un buen resumen de las mismas. [...]
Julio 10th, 2007 at 16:38
Errores como cuales LinksMaster?
Julio 10th, 2007 at 15:17
muy buenos puntos aun que a pesar de los tips creo que el diseñador cometio un par de errores jajajaja….
Julio 10th, 2007 at 12:56
Hay algunas faltas de ortografías (aparte de las ironías) que me hacen dudar de la veracidad del texto jejeje…
No..igual esta bueno.
Julio 10th, 2007 at 11:53
[...] Aunque a mayoría de las sugerencias son refritos de lo que Nielsen ha dicho hasta el cansancio, nunca esta de más darles un repaso y tomar lo que más nos sirva. Para ello, en Digilicious, se dieron a la tarea de traducir y hacer un buen resumen de las mismas. [...]
Julio 9th, 2007 at 16:22
[...] Aunque a mayoría de las sugerencias son refritos de lo que Nielsen ha dicho hasta el cansancio, nunca esta de más darles un repaso y tomar lo que más nos sirva. Para ello, en Digilicious, se dieron a la tarea de traducir y hacer un buen resumen de las mismas. [...]
Junio 14th, 2007 at 18:32
Muy bueno… justo ahora que estoy estudiando el diplomado de producción digital multimedia de la chile y justamente estamos viendo web… claro que el punto Nº 18 “Prefiere el CSS por sobre las Tablas: Las tablas son para información de tablas no para diagramar” me quedó dando vueltas ya que precisamente nos enseñaron a diagramar con tablas!!!! jajajaj… ni idea que es el CSS (bueh, soy principiante en este tema)
Gracias por los consejos…
Junio 8th, 2007 at 1:35
Me gustó mucho este post… muy bueno, aun que como me he podido dar cuenta hay algunos tips que depende de la persona lo que opina… como es el caso de los links, que para mi se TIENEN que abrir en una nueva ventana… y lo otro, es que personalmente a mi me gustan los splash, tanto como usuaria como “diseñadora”, pero creo que es algo muy personal y no puedo pedir que todos esten de acuerdo
Mayo 29th, 2007 at 2:01
shutas
me encantó la guía
alejandro! pk no nos diste este lnk cuando apareció?
=D
veo que a mi sitio le faltan como 20.000,023 puntos
pero estamos aprendiendo ^^
estoy muy de acuerdo con eso de abrir en página aparte, porque el usuario chileno no sabe mucho si haciendo click al boton derecho aparecerá la maravilla
xD
eso es todo, se me fueron mil puntos que se me ocurrian mientras leia, me leí todo aunque a la gente no le gusten los textos largos (eso incluyó una ida al baño entre otras cosas xD)
adios!
Mayo 28th, 2007 at 22:05
bueno, para mi gusto todo se debe abrir en la misma pagina y como bien dicen por ahi el usuario tenga la eleccion.. por eso me gusta eso de firefox (no se si explorer u otro tb lo tenga, hace mucho q no ocupo esos) pero al hacer clik a un link manteniendo alguna tecla modificadora el link se abre de diferetne manera, sin tecla en la misma venta, con ctrl apretado en otra pestaña y con shift apretado en otra ventana. o sea concuerdo con el pto 5 :3
erm.. estaba buscando un link para contactarme yproponerles algo a los srs digilicious y no encontre ninguna forma de contacto q no sea postear en algun topic xD
Mayo 27th, 2007 at 13:32
[...] En Digilicious ha publicado un post que su vez está basado en este otro de daily blog tips sobre los errores que debes evitar cuando diseñas un sitio Web, yo aquí he hecho un resumen de los 20 que creo más importantes, aunque todos me parecen útiles. [...]
Mayo 26th, 2007 at 20:29
Creo que todo tiene que ver con no confundir al usuario. Si el vínculo es hacia algo externo que no se encuentra en la estructura de mi sitio, DEBE abrirse en una ventana nueva, para que evidenciar que el vínculo no es parte de nuestro sitio.
Mayo 26th, 2007 at 3:41
Si, puede que tengan bastante razon estos tipo, los últimos dos citan el primero, (aunque es irónico de todas formas que en el que reclaman que se llenan de ventanas la pantalla por abrir en nuevas ventanas, te invada con un pop up jajaja!).
Creo que para esos años los blogs estaban recién partiendo, web 2.0, incluso ahora no es 100% conocida y la dinámica que genera un blog entre blog y usuario no era tan dinámica como lo es ahora… creo que son muy pocos aquellos que llen completo un artículo y luego revisan los links. Y ahora mozilla e iexplorer, aunque supongo que el resto también, son más amables cuando abres un link en una nueva “ventana”, ya que en vez de “invadirte” con ventanas te abre una pestaña, pudiendo escanear el link entendiendo lo básico sin perder el hilo del post original, dandote la opción de cerrar la pestaña del link y continuar con la lectura del artículo. Dinamismo web usuario, aunque como dijiste, con la “educación web” actual, la solución más salomónica es la que propone DOM(¿?)… por ahora.
Mayo 25th, 2007 at 11:28
La verdad Valk es que este es un tema de usabilidad que tiene bastante tiempo, sin ir mas lejos, Jakob nielsen lo hizo notar en un alertbox en el año 1999, desde entonces, se han escrito variados artículos con el tema, como por ejemplo este de sitepoint (en el año 2004) o este que propone una solución salomónica mediante DOM (año 2005) en donde se coloca un pequeño ícono al costado del link de texto el cual permite que el texto abra en la misma página el link y el icono lo haga en una nueva.
y con el hacer los links tan claros que el usuario pueda decidir cuando quiere o no irse de nuestro sitio.
Personalmente no termino de convencerme del todo con el olvidarse de abrir documentos en una nueva pestaña, creo que el ideal es que los usuarios aprendan a abrir páginas nuevas cuando las quieren, pero eso es algo que sólo puede darse con el tiempo
PD: todos los links en este comentarios se abren en ventana nueva, JA)
Mayo 25th, 2007 at 9:50
Discrepo 99.27% con el tip (5), si no abres los links (link que sauqen al usuario e TU página!!!) en una nueva ventana… el usuario se VA!.
Mayo 24th, 2007 at 15:03
tip 44: no uses word por ningun caso para hacer tu sitio web. Queeee!!!
Mayo 24th, 2007 at 14:52
Buenisimo, siempre es bueno tener algunos tips o al menos una serie de consejos anotados, para no escaparse o terminar haciendo una ensalada grafica. y que mejor que lo haga alguien que sabe jajja
saludos
buen sitio
Mayo 24th, 2007 at 2:26
Hola chicos de Digilicious, los encontre hace unas semanas y lo vienen haciendo genial.
Siempre! añade
Mayo 24th, 2007 at 2:02
la foto es como por lo de “estructura” de sitio, o arquitectura de sitio cierto?
XD
jaja
excelente artículo que quieres que diga, me viene de perilla ya que tengo k desarrollar una página y ahora puedo redordar que usabilidad es mejor que estética, aunque hay que saber equilibrar obvio.
gracias por la info!
Mayo 24th, 2007 at 1:28
ah, y a que viene la foto?
(o yo tengo mucho sueño, y no entendí alguna metáfora?)
Mayo 24th, 2007 at 1:27
me rei demasiado con cosas como
- FrontPage? JA
- “ahora si tienen monitor de 800×600… que se jodan, acostúmbrense al scroll horizontal!”
- y con los badges
So se si lo lei o me acordé, pero también es recomendable que no se usen esos efectos que aprendimos con html en el block de notas, como hacer que el texto aparezca por la izquierda y desaparezca por la derecha (no recuerdo el nombre del comando.. scroll, puede ser?)
Hay varias recomendaciones buenas para considerar a la hora de diseñar una web.. que no, por cierto, no tenia en cuenta.
Muchas graqcias MAD, buen artículo.
Y buenas fotos en el Flickr