{"id":1719,"date":"2009-11-18T06:10:31","date_gmt":"2009-11-18T09:10:31","guid":{"rendered":"http:\/\/thuer.com.ar\/?p=1719"},"modified":"2009-11-18T06:10:31","modified_gmt":"2009-11-18T09:10:31","slug":"7-pecados-usabilidad","status":"publish","type":"post","link":"https:\/\/thuer.com.ar\/?p=1719","title":{"rendered":"Los 7 pecados capitales de la usabilidad web"},"content":{"rendered":"<p>La usabilidad es un aspecto clave de una p\u00e1gina o aplicaci\u00f3n web que tiene que ver con la claridad y elegancia con la cual se dise\u00f1a la interacci\u00f3n entre la persona y el sistema. Muchos veces los estudios de usabilidad son campo exclusivo de especialistas que realizan an\u00e1lisis heur\u00edsticos, paneles con usuarios y a partir de los resultados diagnostican problemas y sugieren mejoras a implementar.<\/p>\n<p>Sin embargo, no hace falta nada de esto para desterrar algunas pr\u00e1cticas totalmente obsoletas que atentan contra la experiencia del usuario en una p\u00e1gina web. Estos 7 pecados de la usabilidad web son una lista de estas pr\u00e1cticas e indican que tu sitio necesita urgentemente una revisi\u00f3n. El problema no es tanto cometer alguna de estas faltas, su presencia indica que con toda seguridad habr\u00e1 muchas otras cuestiones a revisar.<\/p>\n<p><strong>1. Tener una introducci\u00f3n al sitio<\/strong><\/p>\n<p><a href=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-1-intro.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1723\" title=\"usabilidad-1-intro\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-1-intro.jpg\" alt=\"usabilidad-1-intro\" width=\"600\" height=\"200\" \/><\/a><\/p>\n<p>Cuando encargaste la p\u00e1gina web probablemente te lo dijeron pero no le diste importancia. Por alguna misteriosa raz\u00f3n quer\u00edas que tu sitio tuviera una bonita animaci\u00f3n en Flash como primera p\u00e1gina \u00bfQu\u00e9 la gente la aburre? Entonces agregamos el bot\u00f3n para saltar la presentaci\u00f3n.<\/p>\n<p>Seguramente sea el bot\u00f3n que m\u00e1s presionan los usuarios en tu sitio. Y con toda certeza sea la p\u00e1gina m\u00e1s odiada por aquellos que tienen que acceder a tu web repetidamente. Es como ver una pel\u00edcula con publicidad cuando est\u00e1 la opci\u00f3n de verla sin interrupciones. Una animaci\u00f3n puede ser bonita la primera o segunda vez, luego cansa y termina por fastidiar aunque merezca un Oscar por el trabajo que tiene.<\/p>\n<p>Cuando la comunicaci\u00f3n tiende a circular en tweets de 140 caracteres hacerle perder el tiempo a la gente mirando una p\u00e1gina innencesaria es un anacronismo. Hasta <a href=\"http:\/\/www.uberbin.net\/archivos\/google\/saltar-las-intros-en-flash-directamente-desde-google.php\" target=\"_blank\" rel=\"noopener\">Google ofrece la posibilidad de saltarla<\/a> porque entiende que una introducci\u00f3n en Flash no representa un resultado de b\u00fasqueda relevante. Y tiene raz\u00f3n.<\/p>\n<h3>2. Poblar tu p\u00e1gina de animaciones<\/h3>\n<p><a href=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-2-animado1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1730\" title=\"usabilidad-2-animado\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-2-animado1.jpg\" alt=\"usabilidad-2-animado\" width=\"600\" height=\"200\" \/><\/a><\/p>\n<p>El dise\u00f1o y la gr\u00e1fica tiene sus leyes para que la interacci\u00f3n con un documento visual resulte agradable. La animaci\u00f3n tambi\u00e9n cuenta con sus propias reglas y muchas las veces resulta dif\u00edcil su convivencia. Hay que trabajar mucho para animar dos o m\u00e1s objetos en una p\u00e1gina y hacer que el conjunto sea agradable para el usuario. Y como el tiempo cuesta dinero existe una alta probabilidad de que si tu p\u00e1gina tiene m\u00e1s de un elemento animado se vea mal.<\/p>\n<p>Comencemos por el principio \u00bfAnimar para qu\u00e9? Una transici\u00f3n de fotograf\u00edas puede aportar valor porque permite visualizar informaci\u00f3n dentro de un mismo espacio de una manera sencilla. Pero si tu logo est\u00e1 fijo o animado en 3D me da exactamente lo mismo. Si hay un personaje saltar\u00edn, un puntero de mouse que suelta estrellas o el insufrible icono de correo que da vueltas a lo loco molestan, distraen y terminan por entorpecen la experiencia del usuario.<\/p>\n<p>Un espacio prolijo y ordenado donde todos los elementos est\u00e1n bajo control y sin ser animados por un esp\u00edritu superior que les insulfa vida es un deleite para la vista y un relax para los sentidos.<\/p>\n<h3>3. Texto subrayado que no es enlace<\/h3>\n<p><a href=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-3-subrayado.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1727\" title=\"usabilidad-3-subrayado\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-3-subrayado.jpg\" alt=\"usabilidad-3-subrayado\" width=\"600\" height=\"200\" \/><\/a><\/p>\n<p>El texto subrayado es feo. Habiendo tantos recursos gr\u00e1ficos (color, tama\u00f1o, negrita, it\u00e1lica) querer remarcar una palabra agregando el subrayado como si se tratara de un resumen para la escuela es volver a la \u00e9poca de la m\u00e1quina de escribir.<\/p>\n<p>Pero hay otro problema m\u00e1s grave: cuando se crearon las p\u00e1ginas web a alguien le pareci\u00f3 que era una forma interesante para se\u00f1alar el hipertexto. Nada m\u00e1s que agregar. El subrayado es para los enlaces y punto.<\/p>\n<h3>4. Optimizado para\u2026<\/h3>\n<p><a href=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-4-optimizado.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1725\" title=\"usabilidad-4-optimizado\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-4-optimizado.jpg\" alt=\"usabilidad-4-optimizado\" width=\"600\" height=\"200\" \/><\/a><\/p>\n<p>En una \u00e9poca el oficio de dise\u00f1ador web era duro. Era una profesi\u00f3n nueva, hab\u00eda poca informaci\u00f3n y encima Microsoft y Netscape se peleaban para ver qui\u00e9n lograba imponer sus est\u00e1ndares. Crear una p\u00e1gina bonita que se viese bien en todos lados era un poco m\u00e1s dif\u00edcil que ahora por lo cual los sitios se poblaron de carteles anunciando que hab\u00eda unas condiciones \u00f3ptimas para visualizarlo: con el navegador fulanito y la resoluci\u00f3n de pantalla pepito.<\/p>\n<p>Pero el mundo cambio, la industria y los desarrolladores se dieron cuenta de que era mejor \u00a0seguir los est\u00e1ndares del W3C antes que pelearse \u00a0y gracias a ello hoy vivimos en un ambiente un poco m\u00e1s ordenado. Por eso, las p\u00e1ginas web ya se hacen para todo el mundo y no para quienes tienen tal o cual requerimiento. Seguir manteniendo el cartel dichoso cartelito o (peor) hacer que el sitio funciona solo bajo ciertas condiciones es como colocar una letrero en una ruta que diga \u00abOptimizada para el Ford Fiesta\u00bb.<\/p>\n<h3>5. Tiempo de carga elevado<\/h3>\n<p><a href=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-5-tiempo.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1726\" title=\"usabilidad-5-tiempo\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-5-tiempo.jpg\" alt=\"usabilidad-5-tiempo\" width=\"600\" height=\"200\" \/><\/a><\/p>\n<p>La paciencia es una virtud, pero en la web es un milagro. La velocidad de respuesta de un sitio es un factor cr\u00edtico en la experiencia del usuario. M\u00e1s de 2 segundos con la pantalla en blanco es una invitaci\u00f3n a retirarse del sitio o un preanuncio de las penurias que tendremos para navegar decentemente. Y por si fuera poco, pr\u00f3ximamente <a href=\"http:\/\/www.downloadsquad.com\/2009\/11\/14\/google-to-use-page-load-speed-as-a-search-result-ranking-factor\/\" target=\"_blank\" rel=\"noopener\">Google tendr\u00e1 en cuenta la velocidad de una web<\/a> para mostrar sus resultados de b\u00fasqueda.<\/p>\n<p>Hay muchos factores involucrados en la velocidad de la p\u00e1gina pero hay dos sobre los que se pueden actuar. El primero no es m\u00e1s que tomar una buena decisi\u00f3n: contratar un hosting decente y no dejarte seducir por precios rid\u00edculos o pel\u00edculas de ciencia ficci\u00f3n como la banda ancha ilimitada. El segundo es trabajo para el dise\u00f1ador o desarrollador que tiene que <a href=\"https:\/\/thuer.com.ar\/blog\/2009\/buenas-practicas-mas-velocidad-sitios-web\" target=\"_blank\">optimizar el rendimiento de la p\u00e1gina web<\/a>.<\/p>\n<p>Hay veces en que por las caracter\u00edsticas de la p\u00e1gina es imposible ofrecer un tiempo de respuesta bajo como consultas complejas a una base de datos, accesos im\u00e1genes y archivos multimedia de gran tama\u00f1o o mucho javascript. En este caso, y s\u00f3lamente cuando sea imposible mejorar la velocidad de la p\u00e1gina, un simple cartel de \u00abCargando\u00bb nos da unos segundos extra de benevolencia por parte del usuario (siempre y cuando lo que viene despu\u00e9s justifique el tiempo invertido).<\/p>\n<h3>6. Ir al inicio y volver<\/h3>\n<p><a href=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-6-atras1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1733\" title=\"usabilidad-6-atras\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-6-atras1.jpg\" alt=\"usabilidad-6-atras\" width=\"600\" height=\"200\" \/><\/a><\/p>\n<p>Enredarse en un laberinto puede ser divertido, pero en una web es frustrante. Los usuarios saben de memoria la soluci\u00f3n para ello: volver a atr\u00e1s o ir al inicio. El bot\u00f3n volver del navegador es una salida de emergencia f\u00e1cil, intuitiva y que resuelve la mayor parte de los problemas: si llego a un lugar que no me gusta siempre tengo la opci\u00f3n de regresar para elegir otro camino.\u00a0Obstruir esta salida (con javascript, por ejemplo) es inadmisible.<\/p>\n<p>El otro gran recurso que incorporan los usuarios cuando est\u00e1n confundidos es regresar al inicio de la p\u00e1gina. A veces los usuarios llegan desde Google a una p\u00e1gina en particular pero no logran hacerse una idea correcta de c\u00f3mo est\u00e1 organizada la web. Suponen que la home mostrar\u00e1 lo m\u00e1s importante y les ayudar\u00e1 a entender c\u00f3mo est\u00e1 organizada la informaci\u00f3n.\u00a0Por eso es esencial tener a mano una manera clara e inconfundible de cargar la p\u00e1gina principal del sitio. Y la manera m\u00e1s clara es tener un bot\u00f3n o texto que diga \u00abInicio\u00bb.<\/p>\n<h3>7. Enlaces rotos<\/h3>\n<p><a href=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-7-links.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1722\" title=\"usabilidad-7-links\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2009\/11\/usabilidad-7-links.jpg\" alt=\"usabilidad-7-links\" width=\"600\" height=\"200\" \/><\/a><\/p>\n<p>Los enlaces son la columna vertebral de un sitio. Conectan unidades de informaci\u00f3n mediante palabras clave, botones, im\u00e1genes o un men\u00fa. Una p\u00e1gina hu\u00e9rfana que no enlaza con el sitio es una invitaci\u00f3n sin fecha ni lugar. Igual un enlace que lleva a ninguna parte.<\/p>\n<p>La mejor p\u00e1gina de error es la que no existe, pero como a veces en sitios muy grandes no podemos asegurar que el 100% de los enlaces funciones hay algunos <a href=\"https:\/\/thuer.com.ar\/blog\/2009\/21-recursos-para-tus-paginas-de-error-404-personalizadas\" target=\"_blank\">recursos para crear p\u00e1ginas de error personalizada<\/a>. Si hay un mensaje de error, que al menos sea personalizado y f\u00e1cil de comprender.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La usabilidad es un aspecto clave de una p\u00e1gina o aplicaci\u00f3n web que tiene que ver con la claridad y elegancia con la cual se dise\u00f1a la interacci\u00f3n entre la persona y el sistema. Muchos veces los estudios de usabilidad son campo exclusivo de especialistas que realizan an\u00e1lisis heur\u00edsticos, paneles con usuarios y a partir &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Los 7 pecados capitales de la usabilidad web\" class=\"read-more button\" href=\"https:\/\/thuer.com.ar\/?p=1719#more-1719\" aria-label=\"M\u00e1s en Los 7 pecados capitales de la usabilidad web\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[21,56,235],"tags":[414],"class_list":["post-1719","post","type-post","status-publish","format-standard","category-blog","category-diseno-web","category-usabilidad","tag-usabilidad","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","entry"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Sebasti\u00e1n Th\u00fcer","author_link":"https:\/\/thuer.com.ar\/author\/diseno-web"},"_links":{"self":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/posts\/1719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1719"}],"version-history":[{"count":0,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/posts\/1719\/revisions"}],"wp:attachment":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}