Resumen 30/04/2020

Hola a tod@s!!! Un pequeño resumen para l@s que no han podido participar hoy! 😊

Hemos vuelto a hablar de UI/UX (usabilidad y experiencia de usuario) ya que es el fundamento del éxito de un sitio web. Esta fase hay que estudiarla muy bien antes de ponerse a escribir código. Y por lo que hemos estado discutiendo, queda claro que la redacción del código solo es la ultima fase de un proceso muy largo.

Como ya hemos dicho anteriormente:

-          Usabilidad -> es lo fácil de usar que es el sitio

-          Experiencia del Usuario -> es lo agradable que es la interacción de los usuarios con el sitio

Pero ¿qué significa “fácil de usar”, cuando lo traducimos en requisito técnicos del sitio?

Y, ¿qué significa “una interacción agradable”, traducida en requisitos técnicos?

La definición clara de estos requisitos es clave para el éxito de una página web, y por eso necesita mucha atención y estudio, antes de ponerse a “picar código”.

¡Información, razonamiento, boli y papel! Estas son las herramientas que necesitamos antes de empezar todo tipo de proyecto.

Un requisito que seguramente mejora la experiencia de usuario es la velocidad de carga de la página. En estos artículos hay algunas sugerencias para mejorar la rapidez y con ello la UX.

-          https://es.wix.com/blog/2019/06/mejorar-velocidad-de-paginas-web/

-          https://likegeeks.com/es/velocidad-de-carga-de-un-sitio/

-          https://kinsta.com/es/blog/optimizar-imagenes-para-la-web/

Aquí hay tres enlaces al W3school que se refieren a menú horizontal, vertical y responsive para formato móvil.

-          Hotizontal: https://www.w3schools.com/css/tryit.asp?filename=trycss_template3

-          Vertival: https://www.w3schools.com/css/tryit.asp?filename=trycss_template4

-          Responsive: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

En mi ejercicio he fusionado los tres códigos para pasar del menú horizontal para desktop, a menú lateral izquierdo para tableta, y a menú desplegable para móvil. En cuanto acabo de integralos lo cuelgo en el campus.

Entre otras cosas, hoy hemos hablado de una herramienta muy útil para analizar como el usuario se mueve en nuestra página web que es el “mapa de calor”.

-          https://blog.saleslayer.com/es/herramientas-mapas-de-calor-eye-tracking

Un mapa de calor muestra en qué zonas de una página (títulos, textos, banner, formulario…) se detienen más usuarios. Pero no va a decirte por qué. Por eso hay que integrar esa información con otras que permitan comprender el comportamiento del usuario y transformar esa información en requisitos de técnicos de optimización.

Una herramienta que suelen utilizar los de màrqueting es hotjar. https://www.hotjar.com

Además de mapa de calor, https://www.hotjar.com/heatmaps/  también permite grabar la sesión del usuario y ver dónde va, dónde se para y descubrir eventuales fallos de la web.

Como deberes para este finde largo, además de seguir con la programación responsive, añadiendo más elementos para hacer más interesante la tarea, sugerimos la lectura y estudio de los varios artículos sobre UI/UX e intentar integrar esos conceptos en los ejercicios.

Buen finde largo!!! 

Hasta el lunes 😊