Estaba tirando ideas para una lista de "best practices" de diseño y desarrollo web; y después de un rato me puse a pensar en que también es muy importante tener en cuenta las cosas que nunca deberían hacerse (¿worst practices?) en estos casos.
Muchos de los ejemplos típicos que se me ocurrían ya están casi extinguidos (como los frames); pero, aunque a veces nos parezca increíble, hay sitios que se empeñan en utilizar algunos recursos que pueden resultar desde molestos hasta insoportables para los visitantes.
Estas son algunas de las cosas que personalmente encuentro molestas y consideraría worst practices en internet:
- Enlaces que se abren en otra ventana/pestaña (
target="_blank")
Yo tengo mi forma de navegar y quiero poder elegir cómo abro los enlaces, no que me lo impongan (de todas formas, en Firefox lo soluciono con TargetKiller). Además, para los usuarios novatos puede resultar confuso: al hacer click en un enlace se encuentran el destino en otra ventana (muchas veces sin darse cuenta) y puede resultarles difícil volver a dónde estaban.
- Sitios enteramente en Flash
Suelen ser más pesados de lo necesario, más complicados de navegar y se pierden todas las opciones del navegador (copiar, imprimir, volver atrás, ver el URL de una sección concreta para enlazarla o guardarla en favoritos…). Tampoco son indexables por buscadores ni pueden ser vistos por lectores de pantalla. En algún caso puede quedar genial que el sitio de nuestra empresa tenga espectaculares animaciones y menús voladores, pero incluso en ese caso es probable que nadie tenga ganas de verlos más de una vez. El Flash es muy útil para ciertas cosas, pero no hace falta abusar.
- Pop-ups
¿Hace falta que explique lo que tienen de malo? Molestan. Molestan más cuando se abren constantemente. Molesta cuando se abren varios a la vez. Nos quitan el foco, nos distraen, nos hacen perder tiempo…
También es molesto cuando se usan para mostrar información importante y el navegador los bloquea sin que nos enteremos.
- Las ventanas que cambian de tamaño automáticamente
Irritante. Sobre todo cuando uno navega con tabs y todo el browser cambia de tamaño. Más molesto en los sitios en los que, aunque volvamos a maximizar o redimensionar la ventana a nuestro gusto, cada vez que cambiemos de sección todo vuelva a redimensionarse.
- Audio o video que se reproduce automáticamente (
autoplay)
Si tengo ganas y/o tiempo de escuchar una canción o video en tu sitio, ya lo activaré yo mismo. Es insoportable cuando empieza a sonar algo, sobre todo si no sabemos de dónde viene. A veces estamos escuchando nuestra propia música y algo así sólo molesta. A veces estamos en silencio (y/o tenemos que mantener el silencio) y molesta mucho más. Además no todos tenemos conexiones rápidas, y el activar un audio/video automáticamente consume ancho de banda innecesario.
Lo peor: Sitios donde hay audio/video en autoplay que se repite en todas las páginas (por ejemplo, cuando está fijo en el footer o sidebar)… Si no me interesa, no me va a interesar cada vez que cambio de sección o cada día que entro nuevamente; y si me interesa, tampoco necesito verlo/oírlo infinitas veces.
- Las páginas que se recargan automáticamente cada cierto tiempo
Pasa en varios sitios, pero sobre todo lo encuentro en los periódicos online. Suelo navegar con varios tabs a la vez, y la mayoría de las veces abro un sitio, leo un poco y cambio a otra pestaña para seguir leyendo después. También puede que suene el teléfono, que me distraiga hablando por IM, que vaya al baño, que venga el cartero, e infinitas opciones más… El caso es que, cuando la página se recarga, al volver a ella perdemos la posición en la que estábamos en la ventana o directamente lo que estábamos leyendo fue archivado y desapareció de la pantalla.
Lo peor: Cuando la página se recarga mientras estamos leyendo. ¡Déjenme leer como quiero!
¿Qué opinan de estos puntos? ¿Qué otras cosas agregarían a la lista?
Otro de los debates más comunes ultimamente en el área del diseño web es sobre cuáles son las tipografías y tamaños de letra más legibles en la pantalla de un monitor.
Teniendo en cuenta las limitaciones actuales (que esperemos que se solucionen con la nueva versión de CSS), Juan Carlos, de Úsalo hace un muy buen artículo que explica un poco el tema y reúne la opinión de diversos especialistas: Elegir los tipos de letra.
Como continuación a lo que comentaba hace un par de días sobre el uso y el abuso de AJAX con el que nos encontramos en esta nueva era de internet, les recomiendo un artículo de Alex Bosworth en el que comenta en que situaciones el uso de AJAX es realmente útil y en cuáles no:
Casos en los que es recomendable usar AJAX:
- Interaccion a través de formularios
- Navegación jerárquica por nodos (o estilo árbol)
- Comunicación rápida entre usuarios
- Votaciones, encuestas, valoraciones, etc.
- Filtrado y manipulación de datos o resultados de búsqueda
- Autocompletado de campos de texto usados comunmente
Casos en los que es recomendable evitar AJAX:
- Envíos a través de formularios simples
- Búsquedas
- Navegación básica
- Reemplazar grandes cantidades de texto
- Manipulación de la interfaz
- Widgets sin sentido
Más detalles en el artículo completo: 10 Places You Must Use Ajax.
Una de las cosas que trajo esta nueva era de internet, denominada por muchos "web 2.0", es la popularización de diseños más accesibles y/o usables. Además, nos encontramos con la notable aparición de AJAX, la nueva diva de la programación de aplicaciones web.
Pero, de repente, parece que para estar al día en internet hay que usar AJAX… y en algunos casos este uso se convierte en abuso. Muchos son los sitios donde comienza a primar el aspecto visual y los efectos, en vez de la accesibilidad y/o la usabilidad. Un fenómeno muy al estilo de lo que llegó a pasar con el abuso de Flash.
¿Puede ser que todo esto empiece a ir un poco para atrás? ¿Es AJAX el nuevo Flash en lo bueno y en lo malo? ¿En la riqueza y en la pobreza? ¿Ustedes que piensan?
Internet ha evolucionado muchísimo desde sus inicios, hace alrededor de 10 años. Y en todo ese tiempo, la forma de ofrecer contenidos ha evolucionado drásticamente.
Hoy en día hay cuatro cosas que pueden considerarse fundamentales al diseñar un sitio web:
- Código válido
- Código accesible
- Código semánticamente correcto
- Separación del contenido y la presentación
Hace ya casi un año, Jason Foss explicaba de una forma muy simple estos cuatro puntos en la conferencia Web Essentials 04; pero aunque haya pasado ese tiempo, vale la pena darle un repaso a ese artículo, The Four Essentials of Modern Design, que puede ser una muy buena introducción para los diseñadores que se estén iniciando o para los que quieran convertirse al estilo moderno
.
Hace ya un mes Jakob Nielsen, gurú de la usabilidad, publicaba su lista de los 10 errores más frecuentes en el diseño web. Motivados por ese hecho, un grupo de bloggers de habla hispana se reunieron (virtualmente, aprovechando una de estas aplicaciones online que te permiten editar un documento entre varias personas) e hicieron su lista con su propia visión de los más importantes errores de usabilidad, enfocándose en los weblogs, que son los siguientes:
- Enlace a la página principal no disponible
Un error frecuente y complejo es la falta de un vínculo permantente hacia la página principal o portada del blog. Un usuario que entre al sitio directamente a una página interior se verá imposibilitado de acceder a la portada, a menos que modifique directamente la URL buscando la página principal.
- Enlaces que se abren en una nueva ventana
Por razones de interoperatividad e independencia de dispositivos de visualización oficialmente se dejó de incluir el atributo target en XHTML. Esta propieda permitía abrir una nueva ventana al activar un vínculo. Para un usuario puede resultar molesto, desorientador e intrusivo que sin previo aviso se abra una nueva ventana, las consecuencias de accesibilidad son aún más negativas. Es más apropiado dejar que el usuario tome la decisión de navegar en la misma ventana o decidir abrir una nueva.
- Enlaces embebidos
Los enlaces que figuran dentro de un texto más extenso deben tener un rótulo descriptivo, que permita predecir hacia dónde lleva el enlace y que a la vez sea significativo respecto al contenido del que trata. Deben ser representados visualmente de un modo distintio y lo más convencional posible. Por esta caracterización especial, no se debe abusar de enlaces en el cuerpo del texto, ya que pueden producir ruido visual y dificultar la lectura.
- Acerca de…
No es necesaria una fotografía del autor, pero una breve descripción del sitio y un aviso desde que lugar (país) desde donde se está escribiendo es de gran importancia. Darse a conocer genera confianza y esto aumenta la credibilidad.
- Correo de contacto
Un correo de contacto es fundamental, los comentarios en el blog no son suficientes. Si alguien desea preguntar algo en privado, sugerir un tema, o establecer cualquier tipo de comunicación, debe encontrar un mecanismo simple y efectivo para ello.
- Enlaces permanentes (Permanent Links) usables
Los permalinks o enlaces permanentes son la URI para identificar un post. El permalink de un post debe ser único y permanente, no cambiar. A esto se aplican las reglas generales de una URI bien diseñada: que sea legible y no una solicitud GET de forma http://miblog.com?postid=12345
- Títulos claros y significativos
Los títulos deben ser precisos y concretos además de estar relacionados con el ontenido de un post. Un título como He estado pensando… es ambiguo y poco significativo, en tanto Pensamientos sobre diseño utiliza palabras clave relevantes que indican inequívocamente el tema general del que se habla. Esto ayudará a describir mejor el tema, permitirá a los buscadres indexar más apropiadamente, etc.
- Títulos de ventanas
El título de la ventana o más apropiadamente del documento (head->title) debería estar construido como Título del post – Nombre del Blog. De este modo se informa apropiadamente al usuario del tema y la ubicación de la página, a la vez que resulta mucho más fácil leer el historial del navegador y las pestañas de las ventanas minimizadas, cuando están disponibles. Un ejemplo de buen uso es Señalética en Baños > Mi blog de diseño.
- Enlace a contenido sindicado
Los contenidos sindicados (o feeds) mediante formatos como RSS o Atom son muy utilizados por quienes acostumbran leer blogs. Por lo mismo, es importante ofrecer vínculos claros a este tipo de canales alternativos. Aunque muchas herramientas ofrecen auto descubrimiento de feeds, es importante hacer explícita la existencia de estos formatos y disponer de un modo rápido de suscribirse a ellos.
- Contenido sindicado: demasiados sabores, demasiados dolores de cabeza
Los formatos de contenido sindicado y sus mecanismos de lectura son conocidos por los usuarios frecuentes de blogs, pero no se debe asumir que todos los letores estarán familiarizados con ellos o su significado. Si a esto agregamos la variedad de alternativas de formatos, tenemos una gran posibilidad de confusión. Es recomendable utilizar herramientas que proveen contenidos optimizados para cada usuario o cliente de modo automático, como por ejemplo Feedburner. Estos servicios permiten entregar un solo formato al usuario final, con una única URL, evitando así traspasar al usuario un problema innecesario.
- Entradas previas y Encontrabilidad
Los blogs son sistemas de publicación basados en fechas y con una actualización frecuente de contenidos, por lo que es común que los posts vayan quedando ocultos en los archivos. Resulta útil, con el objetivo de proporcionarles visibilidad, ofrecer sistemas de navegación alternativos al clásico Archivo: Taxonomía de categorías, esquemas de navegación por paginación cronológica (atras/adelante), y elementos como los posts más leídos, destacados, etc. Además de estos sistemas, enlazar desde posts actuales aquellos otros posts relacionados temáticamente y publicados con anterioridad proporcionará encontrabilidad a estos últimos.
- Páginas con exceso de información o mal organizadas
Es frecuente el uso de columnas o sidebars de apoyo que contienen información o funcionalidades complementarias, como por ejemplo buscadores, archivos, categorías y otros. Tamien es común la promoción de algunos servicios o campañas. No obstante, el abuso de estos elementos y su disposición indiscriminada puede causar efectos nocivos como lentitud en la carga de las páginas y una gran contaminación visual.
- Vocabulario excluyente o demasiado tecnologizado
No todos entienden lo que es un blog, un blogroll, un permalink, un feed, un post ni por qué existen los comentarios o cómo se comenta. Es importante asumir que los visitantes nunca han visitado un weblog, por lo que es preferible pecar de obvio que dejar a los usuarios sin pistas de lo que se está hablando. Si alguien encuentra accidentalmente.
- Redacción
Es preferible utilizar un lenguaje sencillo, claro y directo. Resume.
- Limpieza y Legibilidad
Es necesario evitar el uso de texto multicolor, el empleo de bajos contrastes entre texto y fondo, tamaños de texto minúsculos, el UsO InjUStificADO de mayúsculas y eskritur4 ko0l. Todos estos recursos dificultan la lectura y van en desmedro del acceso al contenido.
- Estética
La estética es uno de los factores de diseño que de forma más directa impacta en la percepción de los usuarios. Cuidar la estética, que no significa añadir elementos decorativos superfluos, contribuirá a persuadir y motivar al usuario. Recordemos además que el minimalismo en el diseño es al mismo tiempo un principio heurístico de usabilidad y una noción estética.
- Escribe en tu idioma
Un error de usabilidad bastante común es no usar correctamente el lenguaje. Evita los aforismos en la medida de lo posible. Cuando existan términos que reflejen apropiadamente un concepto en castellano, prefiere la opión en castellano. En este documento, hemos optado conscientemente por téminos como blog y post porque creemos que las traducciones no son tan apropiadas. Al incluir una cita originalmente en otro idioma, es importante traducirla. Es un esfuerzo que los usuarios agradecerán.
- Intenta seguir estándares
Los estándares en la web (XHTML, CSS…) así como las directrices de accesibilidad (WAI), son importantes para no excluir a nadie de tu blog.
Este texto fue creado por Gustavo Barron, Nelson Rodríguez-Peña, NOlo y Seth, Raúl Ramírez, Vuarnet y Yusef Hassan.
Macropsia es un weblog sobre internet, enfocado en las novedades, aplicaciones, tendencias, diseño y demás; parte de la red de sitios de