 Marina es periodista de formación, diseñadora web por vocación e devoradora de libros e formaciones. Quando no está diseñando web dá clases, escribe, cocina o eso dice e le toca, ele gusta tocar el ukulele e eso lo va a contar ya ahora después. En su charla error 400, perdón, error 404 10 fallos que pueden cargarse la usabilidad de tu web. Os dejo ya con Marina Rodrigo. Os dois la bienvenida a esta charla, error 404 e vamos a revisar 10 fallos que podrían estar cargándose la usabilidad de vuestras web. Antes, aunque ya me han presentado brevemente, me presento outra vez, periodista de formación, diseñadora web desde hace más de 11 años e también profe de diseño web en la Universidad Politécnica de Valencia e en Creanas e queréis saber algo máso sobre mi, marinarodrigo.com. E nada, por que querido dar esta charla? Porque muchas veces hacemos lo que acabo a hacer yo ahora con vosotros, dar la espalda a nuestros usuarios quando diseñamos nuestras webs. Para evitar eso, quiero que hablemos un poco de usabilidad, pero antes, que es eso de la usabilidad? Quando hablamos de usabilidad, hablamos por una parte de interacción de como de fácil es navegar por nuestras webs e como es sencillo es comprender la información que hay en ellas. Tambien hablamos de un diseño centrado en el usuario. Más aía de las necesidades que podamos tener nosotros o que pueda tener nuestra empresa, nos tenemos que centrar en que necesitan los usuarios que llegan hasta nuestra web e sobretodo que expectativas tienen, que esperan de la página. Tambien hablamos de unha buena experiencia de usuario. Ao final queremos provocar con el diseño de nuestra web emociones positivas sobre la gente que la visita e que se elgan satisfechos de ella. E, por último, al hablar de usabilidad hablamos de resultados porque, al final, unha buena usabilidad facilita unha maior conversión, unha maior retención e maior fidelización de los usuarios. Así que, bueno, vamos a ver hoy, me ha salido de la diapositiva un poco mal, pero vamos a ver algunos princípios de diseño que puede que non estéis respetando ahora mismo, tambien como mejorar la conversión de nuestras webs e, por último, vamos a ver como un error lo podemos transformar en un acierto. Así que, bueno, empezamos por los textos. Ao final, o contenido de nuestras webs es algo superimportantes como transmitimos la información, el valor de lo que hacemos e, quería empezar con una pregunta que me hacen mucho mis clientes e a la que les respondo a horas de irel que. La pregunta es, me justificas el texto de la web e sempre les digo que no. Por qué? Por esto. Los textos justificados estamos muy habituados a ver-los, sobretudo en impresiones, en formato físico e, quando, lo que hemos escrito, va a estar en una proporción fija. Pero, quando diseñamos webs, ya lo sabeis, diseñamos para pantallas muy grandes e para pantallas muy pequeñas e nos podemos encontrar a veces con esto. Se os fijáis, en la cuarta fila, empezando por abajo, tenemos aí una frase con unos espacios terribles. Entonces, nunca justifiquemos los textos quando diseñamos para web. Tambien, con las tipografías, a veces tenemos un pouco de problema. Las tipografías finas, la verdad que son muy elegantes, son muy bonitas, quedan muy bien, pero nos pueden dar problemas, sobretudo, cuando nos utilizamos a tamaños demasiado pequeños, como puede ser este caso. É o mesmo texto que os acabo de enseñar na diapositiva anterior, pero aquí creo que os va a costar bastante más leer lo que pone. E, aquí os quiero decir, como podemos cambiar todo esto, como podemos solucionarlo. Se os fijáis, en las dos, en tanto de izquierda como derecha, el texto es exactamente el mismo, pero seguramente me daréis la razón que el de la derecha es mucho más agradable de leer. Por qué? Bueno, pues porque tenemos unha jerarquía visual, tenemos marcados los títulos, los subtítulos, tenemos marcado ese enlace que seguramente hasta ahora no hayáis visto e ha salido en todas las diapositivas anteriores, tenemos negritas, tenemos cursivas, entonces, sempre que maqueteis, tener en cuenta esta jerarquía visual. También, los tamaños de letra deben ser legibles, vale? A partir de 16 puntos ya suele funcionar bien, un poquito para arriba, para abajo, pero sobre esas medidas. Las alineaciones, por favor, sin justificar, siempre a la izquierda nos aseguramos de que va funcionar, alguna cosa la podemos centrar, se el texto es cortito e alguna muy esporádicamente a la derecha. E, por último, lo largos que hagamos las líneas de texto, vale? Lo ideal es que estén entre 60 e 75 carácteres quando hablamos de pantalla de ordenador e, se es de pantalla de móvil, entre 35 e 50. Pasamos ao número 2, el color, es outro de esos elementos fundamentales e quiero que lo revisemos juntos. El principal problema que solemos tener con el color es el bajo contraste. Non voy a estender mucho con esto porque Vicente Sanchís ha dado una charla esta mañana donde explicaba esto mucho mejor de lo que lo voy a hacer yo, pero bueno, es importante que todo lo que hagamos dentro de nuestra web tenga buen contraste. Estos ejemplos que os traigo son ejemplos reales e, se veis, por exemplo, el de arriba, el azul con las letras en rojo en cima, la verdad es que no se le nada. Vale? Tiene una relación de contraste de 1,07, prácticamente nada. El abajo tiene un pelín más pero ese gris sobre ese negro también dificulta muchísimo la lectura. E, por outra parte, outro error que solemos comentar con el color es utilizarlo como unico medio de información sobre algo relevante. Os traigo este ejemplo aquí, se os fijáis, esto es un enlace, cambia un poquito de color pero no lo suficiente como para que tenga la percepción de que tengo que realizar un acción ahí. Vale? Entonces, como solucionamos estas cosas? Pues por una parte, teniendo suficiente contraste como mínimo 4,5, si superamos 7, pues ya, matrícula de honor, vale? E, también no utilizando el color como única medida de información. Aquí, se os fijáis, al enlace, le añadi un subrayado y ya queda muchísimo máis claro que aquí sí que pudo hacer un acción y que es clicable. Terder punto, la consistencia o máis bien, la falta de ella. De hecho, os traigo esto, aquí he hecho una selección de diversos botones, tenemos unos con el borde redondeado, otros el borde máis recto, unos con sombras, transparentes, con icono, sinicono, bueno, todas las variaciones que queráis. Lo curioso de éstos que igual estáis pensando que los he sacado de diferentes webs. Pues no, son todos de la misma. Vale? Y había máis. Ésto, já dije, bueno, creo que hay bastantes. Entonces, ésto é un problema porque al final acabo dudando se cada botón tiene un significado especial, se pudo clicar en todos, sino como arreglamos ésto con consistencia. Vale? Podemos crear diferentes tipo de botones e que todos sigan un mismo patrón de manera que se entienda que todos realizan alguno acción. Vale? Entonces, importante consistencia en todos los diseños que hagamos. Cuatro, horror bakui. Non sé se avise escuchar alguna vez esta expresión latina, pero habla del pánico al espacio en blanco. E muchas veces ésto lo trasladamos a las webs. Se traído un ejemplo espectacular. La agencia tributaria en 2021 tenia esta web en la que no tenían máis píxeles que rellenar. Vale? Aqui, a lo mejor, hay 20, 30 enlaces. Ésto é un maravilloso. E, e muy poco navegable. Entonces, intentemos no hacer ésto. Los píxeles son gratis. Vale? Podemos hacer scroll. Podemos hacer las páginas máis largas. Non pasa absolutamente nada. A lo mejor estáis pensando, bueno, es una página que al final tiene muchísima información que va a múchos tipos de personas que a lo mejor tienen necesidades diferentes. Bueno, lo puedo comprar. Pero en realidad, no. Porque os traigo este outro exemplo también é de la agencia tributaria pero de los países bajos. E como veis, no tiene nada que ver. Vale? Aqui, tenemos espacio. Podemos respirar un poquito. Podemos pararnos a leer. Tiene imágenes, iconos. Entonces, ésto é o que tenemos que buscar. Que sea agradable estar en la web, buscar ésa información. Usar recursos visuales é algo que tamén nos va a ayudar. E tamén tenemos que hacer un trajo de priorizar. De decidir que é verdaderamente importante e de recortar e eliminar todo aquello que realmente no é tan necessario. Punto cinco. Quando una web se convierte en un escape room. Se os fijáis en éstos ejemplos que traigo a la izquierda, hay un... unha cosa que nos diferencia. La veis? Vale? La x por aí? Correcto. Ésto é a diferencia entre unha buena usabilidad e unha mala. Porque con la de arriba estamos encerrando ao usuario. Le estamos diciendo que se suscriba e en caso de que no quiera hacer lo que, lo único que me queda é o refrescar la página, o irme para atrás o cerrar con la x e non volver nunca más. Vale? Entonces, non encerremos aos usuarios aunque queramos que hagan unha acción o prefiramos que hagan unha acción, non les oblidemos a ésto. Outra maneira de encerrar aos usuarios entre comillas é esta. Seguro que os ha pasado? E llegáis a un formulario que tiene 3 ou 4 pasos e quando estamos en el paso 3 decimos, ostras, me he dejado en el paso 1, non sei que que me preguntaba, non le he rellanado bien e entonces non podemos volver para atrás se estuviéramos en el primer ejemplo. Vale? Só lo tenemos el botón de siguiente e ya nos queda decir, ostras, pues refresco e vuelvo a hacerlo desde o principio ou ya lo haré en outro momento e ese momento non va a llegar nunca. Entonces, para evitar ésto simplemente con que le dejemos ao usuario rectificar en caso de que se equivoque e hemos mejorado a la usabilidad de nuestra página. E, por último, obligar a cosas que no queremos hacer. Bueno, os avisos de cookies creo que estamos todos hasta al gorro de ellos pero é curioso que la web red.es tenga este maravilhoso aviso de cookies en el que puedes aceptar ou puedes aceptar. Vale? Também puedes aceptar, nada máso. Ésto non lo podemos hacer. Además, por normativa tenemos a aceptar, rechazar o configurar nuestras propias cookies. Vale? Entonces, non obligamos aos usuarios a hacer cosas que non quieren e además, quando no tiene sentido que les obligamos porque non es obligatorio. Entonces, que podemos hacer para mejorar ésto? Pues, siempre ofrecer alternativas e sempre permitir a nosos usuarios que tenga a opción de cambiar de opinión en caso de que se equivoquen ou que quieran modificar algo. Punto 6, el microcopy. Non sé se os suena el copywriting, supongo que sí, al final es la escritura persuasiva que utilizamos para redactar los textos de nuestras webs e, quando hablamos de microcopy, nos referimos a pequeñas estructuras de texto que tamén utilizamos en las páginas, como puede ser el texto que ponemos dentro de unos botones ou un aviso, este tipo de frases cortitas. Entonces, estos microcopys son muy útiles e os utilizamos bien e non así. Vale? Botones llenos de a clic aquí, saber máas, máas información, non aportan absolutamente nada. Los botones lo que tienen que hacer es anticipar la opción que va a ocurrir después de que pulsemos. Vale? E esto non ayuda. Os he traído dos ejemplos, curiosamente, los dos de bancos que les gustan muchísimo este tipo de botones. Otro fallo con los microcopys es esto que se llama el cómpil shaming e es cuando hacemos sentir a nuestro usuario que es tonto. Básicamente, vale? Que está haciendo estupidecer. Entonces, bueno, os he traído este ejemplo de unha suscripción na newsletter donde te regalan un 10% de descuento. Hasta aquí todo bien. El botón me apunto na newsletter, tamén todo bien. Pero que pasa aquí abajo? No, xinón me apunto es que prefiero pagar demás máas de lo necesario por comprar en vuestra página. Me estás haciendo sentir mal. Por que me estás haciendo sentir mal? Por que me estás haciendo sentir imbécil se lo que quieres es que yo sea un cliente tuyo. Vale? Entonces, evitemos estas técnicas. Entonces, que podemos hacer? Bueno, este ejemplo sí que está bien hecho, es de la web Virgintelco e nada, tiene un apartado donde te explican diferentes opciones que tienes para contratar, fibra, móvil e demás. E el botón que pone configura tu oferta. Sin haber entrado en la página que viene después, me queda claro que voy a ir seguramente un configurador donde voy a poder elegir una serie de parámetros e configurar una oferta a mi medida. Vale? Entonces, esto es un buen uso del microcopy. E también evitar pues lo que os decía que los usuarios se sientan tontos o que están haciendo algo mal quando están navegando por nuestra web. Vamos al punto 7. Quien vive aí? E este punto lo que digo a poner sueno poco raro lo mejor en nos habilidad pero creo que es moi importante que con nuestras web generemos confianza e esconder quien está detrás de los proyectos desde luego no la genera. Entonces, hay muchas páginas que no tienen siquiera una sección de about quiénes somos sobre mí. Aquí casi todos tenemos negocios pequeños, somos marcas personales e es imperdonable que no tenemos esa página en nuestra web e que no la tengamos trabajada. Vale? Creo que a todos nos gusta trabajar con personas e tener esta página lista es un punto clave para que quien llega a nuestra web se sienta seguro e sienta que puede confiar en nosotros. Vale? Por favor, se hacéis una página de about no pongáis una foto de stock. Os lo pio, por favor. Vale? No seria a primeira vez que lo he visto. Entonces, una pequena sección de fotos no weza tanto apostemos por ello. E por outra parte aí webs que lo que esconden no, es el contacto. Os traigo un ejemplo de una web así chiquitita, vale? La del corte inglés que no tiene medios para atender a sus clientes al parecer e a única maneira que haido de contactar con ellos es un teléfono. Vale? No hay un e-mail, no hay un formulario, no hay WhatsApp, no hay absolutamente ningún medio digital para contactar con ellos solo un teléfono. Entonces, no hagamos esto, tenemos que hacer la vida fácil a nuestros usuarios e non nos cuesta nada eso. Tener un may beisible, tener un formulario de contacto, un WhatsApp business lo que queramos pero demos le facilidades para que puedan escribirnos e contactar con nosotros al final queremos que nos contraten o que nos compren. Pongamos o fácil. Como acer entonces todo esto? Bueno, pues por una parte siendo transparentes. Os he traido este ejemplo que me gusta muchos de la web de Maider Tomasena e es una de las copismas conocidas de aquí de España e se os vigáis en su página de sobre mi ha hecho, bueno, a parte de mostrarse ella e tener una foto suya e no, una de banco de stock, lo que ha hecho es grabar un audio para explicar quién es, como é, está aquí e por que se erica o copy. Vale, eso genera una confianza e una cercanía que es con un recurso que tenemos todos a nuestra disposición. Vale, entonces este tipo de técnicas son los que tenemos que utilizar. E lo del contacto, pues como os decía, ofrecer varias opciones siempre para que sea lo máz fácil posible. Ocho, los avisos. Un punto crítico en cualquier web, seguro que os ha pasado por ejemplo, vuelvo al ejemplo del formulario que os decía antes, os pasáis ahí diez minutos rellenando un formulario, varios pasos e quando leáis o botón de enviar, no ocurre absolutamente nada. Como, vale, é, é, esto os ha me andado, nos ha mandado, lo tengo que volver a darle al botón, tengo que refrescar la página e volver a rellenar todo. Que leches está pasando? Vale, entonces, siempre que le pidamos a un usuario que realice un acción, le tenemos que devolver una respuesta. Le tenemos que decir, ha pasado esto o ha fallado esto, pase lo que pase, darles una respuesta continuación, super importante. E quando le demos esa respuesta, debe ser lo máz concreta posible. De poco me sirve que eu reine este acceso a mi cuenta e me diga, datos incorrectos. Vale, datos incorrectos, quales? He puesto mal el correo, he puesto mal la contraseña, los dos, nos estou registradas e quiera, en esta página, éso é o que tenemos que evitar. Como lo hacemos? Haciendo visibles e claras cada una de las acciones que vayan realizando os usuarios, como os decía, e ofreciendo sempre alternativas. Como cambia de este mensaje que os decía de datos incorrectos a poner ésto? A marcarle por una parte que de los dos campos en el que se ha equivocado es en el de la contraseña. E, además, a decirles, oye, parece que tu contraseña no é correcta, puedes intentarlo outra vez o si no puedes restablecer tu contraseña. Eu creo que aquí tenemos unha mejor usabilidad. Vamos ao 9, ha hablado moço de formularios. Voy a seguir un pouco máis, porque creo que é uno de os pontos críticos porque, al final, é por onde nos entran muchos dos contatos dos usuarios que acaban na nossa web. Então, aqui que suele pasar? Que muchas veces nos piden máis datos dos necesarios. Este ejemplo que os he traído está basado en un hecho real que me ocorrece un par de semanas en las que, en un formulario, me pidieron un número de fax. Quien é daquí tenéis fax? Habís usado alguno muestra vida alguna vez? Acaso? Bueno, el caso es eso, que muchas veces nos pide muchos máis datos dos necesarios. Se por ejemplo estáis pidiendo a alguien que se suscriba a vuestra newsletter con el nombre e el correo es máis que suficiente. A veces simplemente con el correo. Non le pilláis el teléfono o codigo postal se tiene 3 perros, 4 hijos, da igual. Pedirles sobre a información que necesitáis para podés atenderles luego. E, por outra parte, las etiquetas. Ésta é outra pelea que tengo con os clientes, porque sempre me dicen que les quite las etiquetas dos formularios porque quedan máis monos, quedan máis compactos e de máis. Pero el quitar las etiquetas tiene un problema. Por una parte dificultamos la usabilidad bastante, pero por outra, quando empiégas a rellenar un formulario que le has quitado las etiquetas, por exemplo, en este caso, nombre e apellido, tu correo electrónico, mensaje. Vale, yo empiezo a teclar, escribo marina e me quedo pensando, oye, me pedían solo el nombre. Era el nombre e el primer apellido, el nombre, el primero e el segundo apellido e me toca borrar, volver a leer e volver a rellenarlo. Vale, entonces, las etiquetas son útiles por algo existen, usémosla e aprovechémoslas. Así que, como os decía, pedir únicamente los campos que realmente vallamos a necesitar e etiquetas, por favor, sempre visibles. E llegamos ao último, error 404, queda nombre esta charla e que no cunda o pánico. Quando instalamos un WordPress, esta é a página que nos devuelve. Vale, este mensaje tan precioso, se has visto una instalación ahora mismo de WordPress e os da un error 404, os vais encontrar con esto. La verdad é que nos da ningún tipo de explicación de lo que ha podido ocurrir e ningún tipo de alternativa. Non podemos hacer nada má. Simplemente, pues no está a página e nos jorobamos e ya está. Como podemos transformar alguien que llega aquí que, al final, siente una pequeña frustración, aunque sea, en un cliente que se ponga contento, entre comillas, de haber llegado a una página de error? Podemos hacerlo así. En este ejemplo estuviamos trabajando hace unos meses, es la web de Bill Manuñez, ella se dedica ao marketing online e lo que quisimos é transformar su página 404 en algo especial. Para ello, estamos por una parte por sorprender, es decir, llegas aquí, te encuentras allá en un give diciendo no, como ha pasado esto, como me has encontrado aquí, nos da explicaciones e nos dice, oye, aunque mi equipo de tecnología es buenísimo, pues, bueno, algunas veces estas cosas pasan, puede que hayamos movido esta página, que se haya perdido, cualquier cosa. E, además, nos ofrecen un alternativa muy guai e es que tiene un descargable que só lo puedes encontrar, se todo ha salido mal en su web. Vale? Este descargable non está en ningún outro sitio. Solamente se llegas por casualidad a una página 404, lo vas a encontrar. Así que, de esta manera, hemos conseguido que alguien, que en un momento dado, se siente como, oxtra, eu estava buscando esto e não o encontrado, le acabas dando la huelda a la tortilla e se acaba yendo satisfecho de tu web. E isto é todo, así que, moi xa gracias. Muchísimas gracias Marina, super entretenida e super instructiva la charla de ese fatídico error 404, no? Maravilloso. Tengo para ti también un regalito, pero, como eu he dicho antes a Rubén, hai que ganárselo. Então vamos a someternos a la audiencia, a ver se tenemos alguna pregunta para Marina, algo que queráis saber sobre ese error 404, como personaliza na página, que poner aí quando sale, como aprovecharla, no? Venga, alguna preguntilla por aí? Eu, probando. Dale. Yo hace tiempo estuve investigando lo de la justificación en los textos de web, efectivamente, al final, las termina por alinear no lado izquierdo centrado y hasta ahí fuera. Pero sí que, verda, que encontré un script que permitía hacer lo que haces los textos impresos que cortas las palabras e añadir el yun. Una vez que funcione o script ese, seguiría justificaria o seguiría sin justificar. Yo seguiría sin justificar, pero bueno, aí también es gustos. Se a ti no te molesta el yun, de hecho, muchas veces ahora también incluso en los ibus y demás ni siquiera lo se pagan, también hacen que baje la línea. Entonces, yo creo que aí irás un pouco de gusto personal. Sobre todo, asegúrate que cuando haces las diferentes medidas de un responsive te funciona bien en todas. Se ves que cuadra bien, entonces no debería haber mucho problema, pero se te genera estos huecos entre medio, no. Hola, querías saber si consideras importante lo de las páginas de gracias por suscribirte, o se puede ser suficienta depender la estrategia el mensajito sin más o como ves eso. Claro, sí, aí al final lo importante es que avisemos puede ser simplemente un mensaje al final del formuleo que ponga gracias, hemos recibido tu solicitud o tienes que confirmar tu correo en el caso de que sea un suscripción, pero es verdad que funcionan bastante bien las páginas de gracias sobre todo se les tenemos que dar máx instrucciones, vale? Porque muchas veces lo que hacemos es decirles confirma el correo que te acaba de llegar en caso de que non lo encuentres buscan spam entonces es un texto mucho máis largo sí que te recomiendo que tengas una página de gracias. En caso por ejemplo de que fuera un formuleo de contacto muchas veces con una línea suficiente de oi hemos recibido tu solicitud te contestamos en máximo 48 horas e ya está. Pero se necesitas como máx explicación sí que es verdad que una página de gracias funciona muy bien. Hola. Primero me han encantado la presentación muy bien. Mucha gracias. Quisera ser una más una observación en cuanto a la diapositía que decías ahora sobre el error de la contraseña e no sep. Por el punto de vista de la ciberesuriedad por exemplo se eleio mucho de que es mejor en vez de decir contraseña o el nombre usuarios é sincorrecto pues es mejor en el sentido de que se hay algún atacante o algo así pues puede concluir de que de la cuenta existe e usar la cuenta para tratar de ciberar la contraseña. Bueno, sí, al final es poner un aviso que sea lo suficientemente explicativo como para que notex que desatascado en ese paso porque por ejemplo e yo también tengo que averiguar sí realmente tengo una cuenta en ese sitio, no? Entonces sí que me tienes que facilitar cierta información. Sí, al final es como un arma olefilo pues porque sí dices o una o la otra es mejor pues que el atacante se confunda más bien. Sí, eso sí. Pero nada ya gracias. A ti. Bueno, pues ya he recuperado mi micrófono. Muchísima gracias Marina. Tengo tú regalito por aquí, por supuesto. En nombre de todo el equipo. Uy, perdón, perdón. En nombre de todo el equipo de organización de Wolka Madrid te quiero hacer a entrega de este pequeno detalle para que recuerdes sempre tú paso por aquí, vale? Muchas gracias. Gracias a ti.