Hasta ahora hemos hablado de los tres pilares del diseño web: teoría del color, tipografía, diseño de interfaz de
usuario y ahora quiero hablar sobre el último pilar, diseño de experiencia de usuario.
Ahora, mucha gente a menudo se confunde acerca de qué es exactamente UX o User Experience.
Y una de las mejores formas que he oído explicar es a través de la historia de la renovación de una universidad.
Así que esta es una imagen de Reed College en los EE. UU. Y usémosla como nuestro telón de fondo imaginario.
Entonces, esta universidad decidió que necesitaba someterse a una renovación seria. Derribar los edificios, construir otros
nuevos y reformar por completo el campus.
Entonces invitaron a este conocido arquitecto que es muy respetado en su campo.
Vino e hizo un gran trabajo con todos los edificios y el rector estaba realmente muy feliz.
Él estaba como "Esto se ve genial.
"Pero tenía una pregunta.
"Hey Sr. Arquitecto. Parece que acaba de dejar césped en todo el campus. ¿Dónde está todo el camino por el que
la gente va a caminar para meterse entre los edificios? En este punto, el arquitecto
dice: "No se preocupe. Regresaré en un año y todo se revelará. "Entonces, en un año,
los caminos por los que la gente necesita caminar naturalmente se trotan y la hierba se desgasta,
revelando estos caminos que la gente necesita".
Y es en este punto cuando el arquitecto coloca todas las baldosas y pavimenta estos caminos.
Así que esta es una especie de diferencia entre la experiencia del usuario y el diseño. En el diseño, a menudo pensamos en
tener una estética, en lo que creemos que se ve bien y en hacer cumplir eso en el usuario.
Ahora la experiencia del usuario está destinada a ser invisible.
Si tiene una buena experiencia con un sitio web, debe ser discreto y solo le permite
hacer lo suyo y se siente como si todo fuera fácil y sin esfuerzo.
Así que esto es lo que buscamos.
Y para hacer eso tenemos que pensar de nuevo en cinco cosas.
La primera es la sencillez. Mantener las cosas simples siempre es mejor que hacerlo más complejo o desordenado.
Así que este es un sitio web llamado Sina y es uno de los sitios web de noticias más grandes de China.
Ahora, cada vez que lo miro, me duele la cabeza porque es muy denso.
Hay tantos enlaces y mi cerebro se abruma y digo "No, no puedo. "Así que eche un vistazo
a esta alternativa.
Este es Monocle, que también es un sitio web de noticias.
Pero mire cómo han logrado dividir el contenido, proporciona cierto interés para los ojos.
Hay un poco de diálogo, algunas imágenes, algunos videos, un poco de texto.
Nunca es abrumador.
Y con ese esquema de color y tipografía consistentes, es realmente delicioso leer en
lugar de esta experiencia de lastimar tus ojos con el diseño.
Esta es una experiencia de usuario mucho mejor porque es simple.
Entonces, cuando tengas que elegir, ¿debo hacerlo más complejo o debo hacerlo
más simple? Siempre trata de reducirlo.
El segundo punto es la coherencia.
Mantenga sus diseños consistentes pero también mantenga la funcionalidad de su producto consistente.
Así que aquí tienes un ejemplo.
Esta es la página web de Xfinity. Xfinity es una empresa de comunicaciones realmente grande en los
EE. UU. Y son responsables de varias cosas, como proporcionar televisión e 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 solo ves que han cambiado el diseño de la barra
de navegación entre las diferentes partes de su sitio web, sino que también han
hecho que funcione de manera un poco diferente.
Los botones no están todos en el mismo lugar, la barra de búsqueda se mueve.
Y esa inconsistencia significa que un usuario se sentirá confundido cuando vaya de una parte del sitio web a
otra, teniendo que volver a aprender a usar su sitio web.
Si piensas en el público objetivo de esta empresa Xfinity, muchos de ellos serán un
poco mayores, ¿verdad?
Y tener esta funcionalidad inconsistente y un diseño inconsistente realmente hará que esos usuarios tengan
una mala experiencia con este sitio web.
Ahora, lo siguiente en lo que debe pensar al diseñar su sitio web es tener en cuenta los patrones
de lectura de las personas.
Ahora han observado cómo los ojos humanos rastrean una página web y qué partes miran cuando navegan.
Y uno de los patrones de lectura más comunes es lo que se llama patrón F, donde el ojo comienza en
la parte superior izquierda de la esquina y luego rastrea la derecha y luego retrocede nuevamente
navegando por la cuneta izquierda.
Entonces, a menudo tiene cosas como viñetas o imágenes o íconos, botones, todos están a la izquierda.
Entonces puede diseñar para esto usando el diseño F.
Por lo tanto, coloque las partes más importantes de su contenido en el canal izquierdo, coloque el logotipo en la parte superior
y haga que todo siga este patrón.
Por ejemplo, como este sitio web para Bigcommerce.
Vea cómo el ojo se acomoda naturalmente yendo de izquierda a derecha.
Ahora, otro patrón realmente común para la lectura es el patrón Z donde nuestros ojos van de izquierda a derecha y luego
zigzaguean hacia abajo por todo el sitio web.
Ahora bien, esto, por supuesto, depende del tipo de sitio web.
Entonces tiene algo que es más escaso con más contenido de video o si alguien está
tratando de navegar por un
sitio web un poco más rápido, lo ve usando este diseño. Y este diseño se usa de manera bastante famosa en el sitio
web de Facebook usando ese patrón Z para adaptarse al patrón de lectura natural de las personas.
Así que piense en esto. Piense en cómo las personas ven naturalmente la
página y coloque su contenido en ese patrón para que sea más fácil para las personas que usan su sitio web.
Ahora, en la época actual, es realmente importante pensar en el diseño de todas las plataformas.
Ya no basta con diseñar un sitio web destinado a una computadora de escritorio.
En su lugar, también debes pensar en los dispositivos móviles.
Por lo tanto, tener un sitio web que se adapte bien a los dispositivos móviles, lo que llamamos responsive para dispositivos móviles, es realmente importante.
No querrás que un gran sitio web que esté diseñado para ocupar un tipo de pantalla de paisaje se apriete en
un teléfono
que en realidad tiene más forma de retrato.
Esto se ve muy mal.
Es muy difícil leer los enlaces individuales y, la mayoría de las veces, mis dedos son demasiado grandes para tocar
la longitud que quiero.
Así que esta es una experiencia de usuario realmente mala.
Ahora bien, esto también puede suceder al revés.
Entonces, un diseño que se ve mucho mejor en dispositivos móviles, pero que cuando se representa en un escritorio con un tipo de pantalla ancha, no
usa lo suficiente el espacio de la pantalla. Por ejemplo, este es
el último rediseño de Facebook de su sitio web.
Y tienes todo este espacio vacío que no se usa en absoluto y todo está abarrotado en
el medio.
Esto no es muy eficaz. Así que piense en cómo está utilizando el espacio disponible y asegúrese de
que su sitio web se reorganice cuando se muestre en una pantalla vertical más pequeña vs. una pantalla de escritorio
más grande. Y trate de evitar una de mis cosas que me molestan en términos de
diseño, que es tener tantos banners en su sitio web que aparecen en la versión móvil que su contenido se vuelve increíblemente pequeño.
E incluso cuando estás desplazándote, es como si lo estuvieras desplazando en un Apple Watch o algo así.
Considerando que todo este contenido adicional está ocupado por advertencias, pancartas y cookies, no es una
muy buena experiencia para el usuario.
Pero por otro lado, tampoco te vuelvas loco.
No haga que todo su sitio web sea solo una parte, como una imagen o un fragmento de texto, escalarlo masivamente, como
esto también es muy, muy incómodo, porque entonces tengo que seguir desplazándome hasta una eternidad antes
de poder leer y asimilar todo el contenido.
Así que busque un punto medio feliz.
Y lo más importante prueba, prueba, prueba.
Dáselo a otros usuarios.
Puede emplear probadores profesionales para que prueben su sitio web y le den su opinión.
Ahora, si no puede pagar eso, simplemente use a su familia y amigos. Y hornee algunas cookies para ellos,
pídales que prueben su sitio web y comience a recibir comentarios sobre cómo puede mejorar el diseño.
Ahora, finalmente, hemos hablado mucho sobre la experiencia del usuario y cómo hacer que la gente se divierta.
Ahora, algunos diseñadores utilizan el conocimiento que tienen sobre la psicología humana y
el diseño de la interfaz de usuario y la experiencia del usuario para hacer cosas malas.
Y en el mundo del diseño, los llamamos patrones oscuros. Entonces, patrones que hacen que un usuario realice una acción o
comportamiento que es beneficioso para la empresa o el diseñador, pero no
es necesariamente lo que el usuario quiere.
Y esto, yo diría, es otra forma de mala experiencia de usuario.
Déjame darte algunos ejemplos.
Este es un ejemplo de la vida real. Digamos que entró en Waitrose, que es un
gran supermercado en el Reino Unido, y se compró un sándwich.
Ahora, cuando lo miras en el punto en el que lo estás comprando, parece que este sándwich va
a ser de longitud completa de borde
a borde, ¿verdad?
Pero luego, cuando abre el empaque, se decepciona cuando descubre que en realidad todo lo que hay
en el medio es solo aire y su sándwich resulta ser mucho más pequeño de lo que pensó inicialmente.
Es el peor sentimiento del mundo.
Esta es una sensación que no puedo soportar cuando mi comida se reduce repentinamente de tamaño.
Es como si alguien viniera y sacara comida de tu plato. En el mundo digital,
la gente hace lo mismo. El mismo tipo de engaño que está destinado a conseguir que realices
una acción que no necesariamente quieres y terminas sintiéndote realmente decepcionado y realmente molesto. Con Amazon cada vez que tengo que volver a
hacer
clic en 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í se resalta en naranja el botón que genera más dinero "Entrega urgente".
Aparece mucho más.
Es mucho más probable que quieras hacer clic en él.
Pero con toda probabilidad, probablemente esté satisfecho con la entrega normal y ahora lo engañaron para que
pague más por esta entrega.
Ahora, aquí hay otro
ejemplo que es realmente cierto sobre el mal.
Este es un anuncio de Snapchat para algunos zapatos.
Pero lo que el diseñador ha hecho inteligentemente con la publicidad es que ha colocado una línea curva de un píxel en este anuncio, lo que hace que parezca
un poco como si hubiera un cabello en la pantalla. Pero cuando entras en esa pantalla e intentas
deshacerte de ese mechón de cabello, bueno, has tocado una avenida.
Entonces, el anuncio lo lleva al sitio web y los anunciantes ganan dinero con cada clic.
Y este es realmente un patrón de perro porque solo te está engañando para que hagas algo que no querías hacer.
Mientras que el buen diseño se trata de ayudar a las personas a hacer lo que quieren hacer y brindarles una
buena experiencia mientras lo hacen.
Ahora el rey de los patrones de perros es RyanAir y es una aerolínea de bajo costo en Europa que es
realmente conocida por cobrarle por cada pequeña cosa.
No me sorprendería que mañana te cobraran de repente por usar el baño en el avión.
Pero así es como se ve el sitio web cuando intentó comprar un boleto de avión. Para comprar su boleto de avión, debe
pasar por todos estos complementos adicionales que incluyen decir "No, no quiero
comprar un seguro de viaje. "Pero mire cómo lo han escondido dentro de esta gran lista desplegable y ni siquiera
está al principio de la lista.
En realidad, está ordenado alfabéticamente debajo de Dinamarca por alguna razón.
Y esto solo hace que sea mucho más difícil para usted encontrar
esa opción y terminar comprando un seguro de viaje accidentalmente.
Ahora, el ejemplo final y probablemente uno de los patrones de perros que más no me gustan son estas casillas de verificación. Sabes que justo debajo llenaste un formulario, obtienes estas
casillas de verificación y,
a veces, la redacción es tan confusa que realmente no sé para qué me
estoy inscribiendo.
Como este: Si desea que no sigamos sin dejar de enviarle ofertas especiales y ofertas cada
semana, indique que está dispuesto a responder afirmativamente
al no marcar la casilla. No tengo idea de lo que hace al hacer clic en ese cuadro.
Yo realmente solo ... No sé.
Puede que haga clic en él, puede que no.
No sé lo que hace. Pero es terriblemente confuso y no es una buena experiencia de usuario en absoluto.
Te apuesto a que después de que me registre no volveré nunca más a este
sitio web, ¿verdad?
¿Estás conmigo? Ahora hemos
visto cómo se ven los buenos sitios web.
Hemos visto cómo se ven los sitios web malos.
Incluso hemos visto cómo se ven los sitios web malvados.
Pero es hora de poner a prueba nuestros conocimientos diseñando nuestro propio sitio web desde cero y
aplicando estos cuatro pilares del diseño web a este proyecto.
Así que piense en lo que ha aprendido hasta ahora y diríjase a la siguiente lección en la
que diseñaremos un sitio web de hotel desde cero.