‫Hasta ahora hemos hablado de los tres pilares del diseño web: Teoría del color, tipografía, interfaz de usuario
‫diseño y ahora quiero hablar del último pilar, el diseño de la experiencia del usuario.
‫Ahora mucha gente se confunde con lo que es exactamente la UX o la experiencia del usuario.
‫Y una de las mejores maneras en que lo he oído explicar es a través de la historia de la renovación de un colegio.
‫Esta es una foto del Reed College de Estados Unidos y vamos a utilizarla como telón de fondo imaginario.
‫Así que este colegio decidió que debía someterse a una seria renovación. Derribar los edificios, construir
‫nuevos y reformar completamente el campus.
‫Así que invitaron a este conocido arquitecto, muy respetado en su campo.
‫Vino e hizo un gran trabajo con todos los edificios y el preboste quedó muy contento.
‫Él estaba como "Esto se ve muy bien".
‫Pero tenía una pregunta.
‫"Hola Sr. Arquitecto. Parecía que acababas de dejar el césped en todo el campus. ¿Dónde está todo el camino que
‫la gente va a caminar para pasar entre los edificios?" En este punto
‫el arquitecto dice "No te preocupes. Volveré dentro de un año y todo se revelará".
‫Así que en un año los caminos por los que la gente tiene que caminar de forma natural se convierten en trotes y la hierba se desgasta
‫por revelar estos caminos que la gente necesita.
‫Y es en este punto cuando el arquitecto realmente coloca todas las baldosas y pavimenta estos caminos.
‫Esta es la diferencia entre la experiencia del usuario y el diseño. Diseño
‫A menudo pensamos en tener una estética, en lo que creemos que queda bien y en imponerlo al usuario.
‫Ahora la experiencia del usuario debe ser invisible.
‫Si tienes una buena experiencia con un sitio web se supone que es discreto y sólo te permite hacer tu
‫y se siente como si todo fuera fácil y todo fuera sin esfuerzo.
‫Así que esto es lo que pretendemos.
‫Y para ello tenemos que volver a pensar en cinco cosas.
‫La primera es la simplicidad. Mantener las cosas simples es siempre mejor que hacerlas más complejas o más desordenadas.
‫Este es un sitio web llamado Sina y es uno de los mayores sitios web de noticias en China.
‫Sin embargo, cada vez que lo miro me duele la cabeza porque es muy denso.
‫Hay muchos enlaces y mi cerebro se abruma y digo "No, no puedo hacerlo".
‫Así que echa un vistazo a esta alternativa.
‫Esto es Monocle, que también es un sitio web de noticias.
‫Pero mira cómo han conseguido trocear el contenido, proporciona algo de interés para los ojos.
‫Hay un poco de diálogo, algunas imágenes, algunos vídeos y un poco de texto.
‫Nunca es abrumador.
‫Y con esa combinación de colores y tipografía tan consistente, es realmente agradable de leer en lugar de
‫que esta experiencia de herir los ojos con el diseño.
‫La experiencia del usuario es mucho más agradable porque es sencilla.
‫Así que cuando tengas que elegir, ¿lo hago más complejo o lo hago más sencillo?
‫siempre intenta reducirlo.
‫El segundo punto es la coherencia.
‫Mantenga la coherencia de sus diseños, pero también la funcionalidad de su producto.
‫He aquí un ejemplo.
‫Esta es la página web de Xfinity. Xfinity es una empresa de comunicaciones realmente grande en los Estados Unidos y
‫se encargan de varias cosas, como ofrecer televisión y proporcionar Internet.
‫Aquí hay tres capturas de pantalla de varias partes de su sitio web.
‫Una es su página de inicio,
‫la segunda es su oferta de televisión y la última es su sitio de noticias.
‫Y si echas un vistazo a la barra de navegación superior no sólo ves que han cambiado el diseño
‫de la barra de navegación entre las diferentes partes de su sitio web,
‫también lo hicieron funcionar de manera un poco diferente.
‫Los botones no están todos en el mismo lugar, la barra de búsqueda se mueve.
‫Y esa incoherencia significa que un usuario se va a confundir cuando vaya de una parte del sitio web
‫a otro, teniendo que volver a aprender a utilizar su sitio web.
‫Si piensas en el público objetivo de esta empresa Xfinity, muchos de ellos van a ser un poco
‫un poco mayor, ¿verdad?
‫Y tener esta funcionalidad inconsistente y un diseño inconsistente realmente hará que esos usuarios tengan
‫una mala experiencia con este sitio web.
‫Lo siguiente que hay que tener en cuenta a la hora de diseñar el sitio web es la
‫patrones de lectura.
‫Ahora han estudiado cómo los ojos humanos siguen una página web y qué partes miran cuando navegan.
‫Y uno de los patrones de lectura más comunes es el llamado patrón F, en el que el ojo comienza en la
‫arriba a la izquierda de la esquina y luego rastrea la derecha y luego vuelve a girar
‫navegando por el canalón de la izquierda.
‫Así que a menudo tienes cosas como viñetas o imágenes o iconos, botones, todo está a la izquierda.
‫Así que puedes diseñar para esto usando el diseño F.
‫Por lo tanto, tenga las partes más importantes de su contenido en el canalón izquierdo, tenga el logotipo en la parte superior y tenga
‫todo sigue este patrón.
‫Por ejemplo, como este sitio web para Bigcommerce.
‫Observa cómo el ojo se acomoda de forma natural yendo de izquierda a derecha.
‫Ahora bien, otro patrón realmente común para la lectura es el patrón Z, en el que nuestros ojos van de izquierda a derecha y luego
‫zigzagueando por todo el sitio web.
‫Por supuesto, esto depende del tipo de sitio web.
‫Así que tienes algo que es más escaso con más contenido de vídeo o si alguien está tratando de navegar
‫un sitio web un poco más rápido,
‫se les ve usando esta disposición. Y este diseño se utiliza de forma bastante famosa en el sitio web de Facebook
‫utilizando ese patrón Z para adaptarse al patrón de lectura natural de la gente.
‫Así que piensa en esto. Piensa en cómo la gente mira naturalmente la página y coloca tu
‫contenido en ese patrón para facilitar a las personas que están utilizando su sitio web.
‫En los tiempos que corren, es realmente importante pensar en el diseño de todas las plataformas.
‫Ya no basta con diseñar un sitio web destinado a un ordenador de sobremesa.
‫En cambio, hay que pensar también en el móvil.
‫Por eso, es muy importante tener un sitio web que se adapte bien a los móviles, lo que llamamos mobile responsive.
‫No querrás que un sitio web grande, diseñado para ocupar una pantalla de tipo apaisado, se atiborre de
‫un teléfono
‫que en realidad es más bien una forma de retrato.
‫Esto tiene muy mala pinta.
‫Es muy difícil leer los enlaces individuales y, la mayoría de las veces, mis dedos son demasiado grandes para golpear
‫en la longitud que quiero.
‫Así que esta es una experiencia de usuario realmente mala.
‫Ahora bien, esto también puede ocurrir a la inversa.
‫Por lo tanto, un diseño que se ve mucho mejor en el móvil, pero luego cuando se representa en un escritorio con un tipo de ancho
‫de la pantalla, no utiliza suficiente espacio de la pantalla. Por ejemplo,
‫este es el último rediseño de la página web de Facebook.
‫Y tienes todo este espacio vacío que no se está utilizando en absoluto y todo se aprieta en el
‫medio.
‫Esto no es muy eficiente. Así que piense en cómo está utilizando el espacio disponible y asegúrese de que
‫que su sitio web se reorganiza cuando se está representando en una pantalla pequeña vertical frente a una más grande
‫pantalla del escritorio. Y tratar de evitar una de mis manías en términos de diseño que es tener tantos banners
‫en su sitio web que se muestran en la versión móvil que su contenido se vuelve imposiblemente pequeño.
‫E incluso cuando te desplazas es como si lo hicieras en un Apple Watch o algo así.
‫Mientras que todo este contenido extra está ocupado por avisos y banners y cookies y simplemente no es
‫una muy buena experiencia de usuario.
‫Pero, por otro lado, tampoco te vuelvas loco.
‫No hagas que todo tu sitio web sea sólo una parte, como una imagen o un trozo de texto, escalándolo masivamente
‫como esto también es muy muy incómodo porque entonces tengo que seguir desplazándose hasta siempre antes de
‫Realmente puedo leer y asimilar todo el contenido.
‫Así que busque un término medio.
‫Y lo más importante, prueba, prueba, prueba.
‫Darlo a otros usuarios.
‫Puede contratar a probadores profesionales para que prueben su sitio web y le den su opinión.
‫Ahora bien, si no puedes permitírtelo, recurre a tu familia y amigos. Y hornear algunas galletas para ellos,
‫Haz que prueben tu sitio web y empieza a recibir comentarios sobre cómo puedes mejorar el diseño.
‫Por último, hemos hablado mucho de la experiencia del usuario y de cómo conseguir que la gente se lo pase bien.
‫Ahora bien, algunos diseñadores utilizan los conocimientos que tienen sobre psicología humana e interfaz de usuario y
‫Diseño de experiencia de usuario para hacer cosas malas.
‫Y en el mundo del diseño, los llamamos patrones oscuros. Así que los patrones que hacen que un usuario realice una acción
‫o comportamiento beneficioso para la empresa o el diseñador
‫pero no es necesariamente lo que el usuario quiere.
‫Y esto diría que es otra forma de mala experiencia de usuario.
‫Así que permítanme darles algunos ejemplos.
‫Este es un ejemplo de la vida real. Digamos que entras en Waitrose que es un gran supermercado en la
‫Reino Unido y te compraste un sándwich.
‫Ahora, cuando lo miras en el momento de comprarlo, parece que este sándwich va a ser
‫de borde a borde, en toda su longitud
‫¿verdad?
‫Pero luego, cuando abres el envase, te decepciona ver que en realidad todo lo que hay es
‫en el centro es sólo aire y tu sándwich resulta ser mucho más pequeño de lo que pensabas inicialmente.
‫Es la peor sensación del mundo.
‫Es una sensación que no soporto cuando mi comida se reduce repentinamente de tamaño.
‫Es como si alguien viniera y te quitara la comida del plato. En el mundo digital,
‫la gente hace lo mismo. El mismo tipo de engaño que pretende que realices una acción que
‫que no necesariamente quieres y acabas sintiéndote muy decepcionado y muy molesto. Con Amazon cada
‫tiempo único
‫Tengo que volver a pulsar el botón de envío gratuito que me he ganado al comprarles tanto producto.
‫Pero todavía intentan engañarte usando las cosas que hemos aprendido sobre la jerarquía
‫por ejemplo. Aquí el botón que hace más dinero "Entrega urgente" está resaltado en naranja.
‫Se destaca mucho más.
‫Es mucho más probable que quiera hacer clic en él.
‫Pero lo más probable es que te conformes con una entrega normal y que ahora te engañen para que pagues
‫más para esta entrega.
‫He aquí otro ejemplo
‫eso es realmente cierto el mal.
‫Este es un anuncio de Snapchat para unos zapatos.
‫Pero lo que el diseñador ha hecho inteligentemente en la publicidad es que ha colocado una línea curva de un píxel
‫en este anuncio que hace que parezca que hay un pelo en la pantalla. Pero cuando entras en ese
‫pantalla y tratas de deshacerte de ese trozo de pelo, pues has tocado en una avenida.
‫Así, el anuncio te lleva al sitio web y los anunciantes ganan dinero con cada clic.
‫Y esto es realmente un patrón de perro porque sólo te está engañando para que hagas algo que no querías.
‫Mientras que el buen diseño consiste en ayudar a las personas a hacer lo que quieren y ofrecerles una buena experiencia
‫mientras están en ello.
‫Ahora el rey de los patrones de perros es RyanAir y es una aerolínea de bajo coste en Europa que es realmente conocida por
‫como para cobrarte por cada pequeña cosa.
‫No me extrañaría que mañana de repente te cobraran por usar el baño en el avión.
‫Pero este es el aspecto del sitio web cuando se intenta comprar un billete de avión. Para comprar su
‫billete de avión tienes que pasar por todos estos añadidos extra incluyendo decir "No quiero
‫comprar un seguro de viaje". Pero mira cómo lo han escondido dentro de esta gran lista desplegable y ni siquiera es
‫al principio de la lista.
‫De hecho, está ordenado alfabéticamente por debajo de Dinamarca por alguna razón.
‫Y esto sólo hace que sea mucho más difícil para usted encontrar esa opción
‫y que, de hecho, acabes comprando un seguro de viaje por accidente.
‫Ahora el último ejemplo y probablemente uno de los patrones de perro que más me disgusta son estas casillas de verificación. Usted
‫saber justo debajo que rellenaste un formulario,
‫se encuentran estas casillas de verificación y a veces la redacción es tan confusa que realmente no sé lo que estoy
‫inscribiéndose.
‫Como éste: Si quieres que no sigamos sin enviarte ofertas especiales
‫cada semana, por favor indique que se inclina por el sí
‫al no marcar la casilla. No tengo ni idea de lo que hace hacer clic en esa casilla.
‫Realmente sólo... No lo sé.
‫Puede que haga clic, puede que no.
‫No sé lo que hace. Pero es terriblemente confuso y no es para nada una buena experiencia de usuario.
‫Apuesto a que después de inscribirme no vuelvo a entrar en esta página web
‫¿verdad?
‫¿Estás conmigo? Ahora
‫hemos visto cómo son los buenos sitios web.
‫Ya hemos visto cómo son los sitios web malos.
‫Incluso hemos visto cómo son los sitios web malvados.
‫Pero ha llegado el momento de poner a prueba nuestros conocimientos diseñando nuestra propia página web desde cero y aplicando
‫estos cuatro pilares del diseño web a este proyecto.
‫Así que reflexiona sobre lo que has aprendido hasta ahora y dirígete a la siguiente lección en la que vamos a
‫para diseñar la página web de un hotel desde cero.