Todos nos hemos encontrado con sitios web y aplicaciones que nos dan ganas de gritar y tirar nuestros dispositivos por la habitación. Al menos no creo que sea solo yo. Los buenos sitios web de interfaz de usuario, en su nivel más básico, permiten a los usuarios realizar el trabajo para el que llegaron al sitio web con facilidad y sin confusión.
Los grandes diseñadores de UI hacen todo esto y más. Las interfaces de usuario que son realmente notables no solo deleitarán al usuario al facilitar el trabajo en cuestión, sino que también lo deleitarán visual y experiencialmente.
Y puede significar cualquier cosa, desde una interacción de animación elegante e innovadora que atrae instintivamente la atención del usuario hacia una característica específica hasta un diseño limpio y ordenado y un uso inteligente del espacio en blanco que infunde una sensación de paz en el usuario, por nombrar algunos ejemplos.
Con un poco de ayuda del Nielsen Norman Group, abordaré el tema de lo que constituye una buena interfaz de usuario en este artículo, antes de profundizar en ocho ejemplos de diseño de interfaz de usuario de sitio web excepcional y una justificación de mi decisión. Elija un ejemplo del menú desplegable para llegar directamente a él o continúe leyendo.
Entonces, ¿cómo evalúa si una interfaz de usuario es buena o no, o incluso excelente? Puede saber si una interfaz de usuario es estéticamente hermosa al mirarla, y también puede usarla para ver si es una experiencia intuitiva y fácil al mirarla. ¿Hay, sin embargo, algo más objetivo? ¿Se está formalizando más?
¿Cómo puede saber si el diseño de la interfaz de usuario de un sitio web es bueno?
Personalmente, siempre vuelvo a los criterios de usabilidad de Nielsen Norman Group.
La capacidad de aprendizaje, la eficiencia, la recordación, los errores y la satisfacción son las cinco cualidades que Nielsen utiliza para caracterizar la usabilidad.
Capacidad de aprendizaje: ¿Puede el usuario ejecutar sus responsabilidades con facilidad?
Eficiencia: ¿Puede el usuario ejecutar tareas de manera oportuna gracias a la interfaz?
Memorabilidad: ¿Qué tan probable es que una persona recuerde cómo utilizar un sitio web la próxima vez que lo visite?
Errores: ¿Qué acciones toma la interfaz para reducir la probabilidad de error del usuario y cómo permite que los usuarios corrijan sus errores?
Satisfacción: ¿El usuario está satisfecho con la forma en que el diseño interactúa con él?
Una excelente interfaz de usuario también debe representar la personalidad de la marca para diferenciarse de la competencia y brindar a los clientes una experiencia agradable. Echemos un vistazo a algunos casos en los que creo que las organizaciones han clavado el diseño de la interfaz de usuario de su sitio web.
1. Medio
Medium, una plataforma de lectura y escritura en línea, es tan hermosa como útil. Este sitio web hace todo bien con el uso limitado del color, el amplio espacio entre líneas y el tipo de letra bien elegido.
El contenido reina en Medium. Cuando un usuario inicia sesión, aparece un cuadro con la frase «Escribe aquí» en la parte superior de la lista de artículos, lo que permite y alienta a todos a comenzar a escribir de inmediato. A los usuarios se les proporciona una página en blanco casi vacía cuando hacen clic en el enlace «Escribir una historia», lo que reduce el desorden y solo ofrece un lugar claro para concentrarse en la escritura.
Los artículos están dispuestos en un estilo de una columna, por lo que es fácil de leer. Medium en realidad brinda a los lectores una experiencia de publicación excelente y fluida, con detalles menores como el tiempo de lectura proyectado y la oportunidad de resaltar y comentar directamente ciertos artículos.
2. Virgen América
Cuando se trataba de ayudar a los consumidores con el proceso de reserva de vuelos, Virgin America fue uno de los primeros, si no el primero, en priorizar las necesidades del usuario. Reservar un vuelo es un dolor para la mayoría de las personas. El sitio web de Virgin America redujo su interfaz para llamar la atención sobre la pregunta más importante: «¿A dónde le gustaría ir?» Al igual que un lavaplatos nos libera de tener que fregar los platos, el sitio de Virgin America eliminó su interfaz para llamar la atención sobre la pregunta más importante: «¿A dónde le gustaría ir?» El usuario puede comenzar el proceso de reserva de inmediato eliminando todo el material circundante.
Y, aunque el sitio ahora puede parecer un poco antiguo, merece ser incluido en nuestra lista como pionero en el diseño de interfaz centrado en el usuario. Lamentablemente, después de combinarse con Alaska Airlines, su interfaz de usuario se ha vuelto mucho más desordenada.
Pero volvamos a lo que hizo que el sitio web de Virgin America fuera tan bueno: al usuario se le recordaba su decisión durante el proceso de reserva a través de una barra en la parte superior de la página que mostraba sus opciones actuales. Virgin facilitó que los usuarios vean y modifiquen sus selecciones al mantener esta información disponible en lugar de depender de ellos mismos para recordar la información. La interfaz de usuario tenía la intención explícita de permitir que los usuarios se concentraran en lograr su objetivo de la manera más rápida y efectiva posible.
Virgin también hizo un esfuerzo consciente para distinguirse estéticamente de la multitud. Los colores brillantes, los degradados y las imágenes entretenidas ayudaron a establecer una identidad de marca y una experiencia distintivas que los distinguen de los sitios web de sus rivales.
3. Airbnb
El diseño de la interfaz de usuario del sitio web de Airbnb sobresale en dos cosas: reservar una habitación y establecer confianza entre dos completos extraños.
En Airbnb se puede encontrar un maravilloso diseño de interfaz de usuario para una página de inicio.
Airbnb, al igual que Virgin America, se ha preocupado por simplificar la reserva de una estadía directamente desde la pantalla de inicio. Al usuario se le da la bienvenida de manera simultánea y cortés y se le indica que comience a organizar su estadía, gracias a su uso único del lenguaje conversacional, como «¿Qué podemos ayudarte a localizar, Edward?» a continuación, y texto de referencia útil.
Esta invitación conversacional para comenzar a buscar es un método encantador para expresar la voz de la marca y, al mismo tiempo, simplifica el proceso de encontrar un lugar para quedarse. Durante esta primera búsqueda, los únicos campos que deberá completar son el destino preferido del usuario, así como la duración de su estadía y el número de invitados. El procedimiento es simplificado, agradable y accesible al diferir los filtros adicionales hasta la siguiente fase.
Cualquier costo adicional que pueda estar involucrado se describe en detalle en las páginas de listado. Para casi todos los usuarios, este es un procedimiento bastante simple y básico. El botón «Solicitud de reserva» se encuentra justo debajo y, al ser uno de los botones más brillantes del sitio web, insta a los usuarios a hacer clic en él para completar su reserva.
Un usuario es enviado a una nueva página de pago después de solicitar reservar un lugar. Para disminuir la necesidad de que el visitante recuerde la información de la página anterior, la lista, el precio y la información de reserva se encuentran a la derecha de la página.
En lugar de ir directamente al pago, la página de la izquierda le indica que «salude a su anfitrión y dígale por qué está de visita». Al presentar esta información antes de la información de pago, inicia una discusión y establece una relación entre el visitante y el anfitrión, además de involucrar aún más al usuario en la experiencia. Airbnb se enorgullece de unir a las personas y prioriza el diálogo sobre las transacciones, y la interfaz de usuario lo refleja maravillosamente.
El texto de Airbnb ha sido cuidadosamente elaborado y se han utilizado fotografías y videos convincentes para garantizar que la interfaz tenga un tono emocional que ayude a generar confianza entre extraños.
4. Mejores tableros
Ahora que es un diseño de interfaz de usuario de sitio web con carácter. Los usuarios son recibidos con un video emocionante, divertido y dinámico del producto en acción tan pronto como llegan. Estás cautivado por una patineta única en su propio viaje, girando y girando, multiplicándose y luego disolviéndose en sus componentes constituyentes: es todo un viaje. Luego verá la llamada a la acción «Comprar ahora» en el medio de la pantalla, esperando ansiosamente que haga clic.
Estás asombrado, curioso, y es hora de descubrir qué hay debajo de toda esta confianza. Cuando haces clic en «Comprar ahora», la interfaz se despoja de todos los colores, salvo las brillantes ruedas naranjas del tablero, y se te presentan solo los detalles más importantes: imagen, velocidad máxima, rango, precio, tiempo de entrega y, por supuesto, «Comprar ahora». ¿Qué te detiene? No hay mucho.
¿Todavía no está convencido? Cuando haga clic en «Más información», obtendrá toda la información que necesita para pasar de la contemplación a la conciencia: la imagen, el texto y los componentes visuales que se apoyan entre sí se dividen efectivamente en aspectos clave del producto. Las calificaciones positivas de los productos y las opciones de financiamiento reducen la ansiedad al reducir la sensación de peligro a medida que se desplaza hacia abajo. En general, es un excelente ejemplo de cómo combinar varias piezas visuales y de texto para crear un todo cohesivo.
5. buzón
Dropbox es, con mucho, una de las interfaces más fáciles de usar. Cualquiera que haya usado una computadora alguna vez está familiarizado con el sistema de organización de carpetas y archivos. No hay mucho que el usuario común no sepa cómo lograr de inmediato en términos de capacidad de aprendizaje. Debido a que es tan común, la mayoría de las personas intentarán arrastrar y soltar archivos desde sus escritorios al sitio web sin siquiera saber si es factible o no.
El comportamiento de bienvenida de Dropbox, que se transmite a través de gráficos divertidos, hace que el usuario se sienta cómodo mientras usa el software. Esta mejora en la interfaz de usuario hace que el producto parezca un viejo amigo, deseoso de ayudar a los consumidores con sus necesidades de uso compartido de archivos.
También tienen un diseño de blog que es quizás el mejor del mundo en este momento. Entiendo que una declaración como esa tiene una buena dosis de subjetividad, pero rara vez he visto un equilibrio tan exitoso de interfaz de usuario experimental, usabilidad y contenido multimedia en un solo lugar.
Se las arregla para parecer experimental, innovador y consistente, con paletas de colores secuenciadas e íconos dinámicos, y excelentes ilustraciones que se sincronizan con todos los otros dibujos maravillosos. ¡Eso es todo un logro! ¡Echar un vistazo!
Hay una variedad de generadores de paletas de colores en línea que puede consultar si necesita ayuda para crear una excelente paleta de colores. Solo asegúrese de evitar algunos de los errores más típicos de la paleta de colores que cometen los diseñadores de UI.
6. tono
Pitch, una herramienta móvil y en línea que le permite crear y administrar presentaciones sorprendentes, es una empresa emergente de tecnología impulsada por el diseño. Su objetivo es persuadirte de que pueden hacer por las presentaciones lo que Slack ha logrado por las comunicaciones. También son muy buenos en eso.
Desde el momento en que visitas su página web, puedes ver que cada aspecto ha sido cuidadosamente considerado. Echa un vistazo al eslogan. «Todas las manos a la obra» es una frase versátil que recuerda tanto el espíritu de colaboración, un aspecto importante de Pitch, como la jerga tecnológica de las «reuniones de todas las manos». Finalmente, la palabra «deck» es un juego de palabras con la palabra «presentación». ¡A quien se le ocurrió merece una estrella de oro!
Los diseñadores de la interfaz de usuario de Pitch realizan un excelente trabajo al guiar al usuario a través de un ejemplo de cómo sería su viaje si realmente estuviera usando la aplicación. Han logrado una combinación fantástica entre limpio y minucioso, minimizando el desorden y asegurando que los elementos más importantes del producto estén cubiertos, permitiendo que el sitio realmente desaparezca.
Con su amplio uso de imágenes, su sitio asiente a las tendencias de diseño moderno, pero se mantiene alejado del diseño de personajes planos y caricaturescos que se ven en tantos sitios en estos días. El uso del diseño de personajes en 3D al estilo de Pixar es raro en este mercado y, por lo tanto, es fácilmente reconocible. Muéstrame una mano de Pitch mañana y apuesto a que recordarás la empresa.
Los beneficios del diseño de la interfaz de usuario de su sitio web no terminan ahí. También han incluido algunos componentes dinámicos sutiles e inteligentes y animaciones que ayudan al usuario a pasar de un desplazamiento al siguiente. Atraen suavemente su atención de derecha a izquierda, y el comienzo diferido de las animaciones lo invita a detenerse en cada función y beneficio del producto. Experimentará una sensación de leve familiaridad, diversión y profesionalismo, y hacer presentaciones ya no será una tarea ardua.
7. Frank y Roble
Frank and Oak, una empresa de ropa con un fuerte énfasis en los medios y el estilo de vida, emplea su interfaz de usuario para captar la atención y las preferencias de estilo de sus consumidores. Si bien la experiencia de compra en línea es bastante fácil desde el punto de vista de UX, la firma combina fotos fuertes y texto sans-serif nítido para transmitir la personalidad de la marca y su grupo demográfico objetivo. A pesar de algunos mensajes de marketing sólidos e impulsados por las ventas (20 por ciento de descuento en todo el sitio), su imagen de marca está firmemente grabada desde el primer punto de contacto de la empresa. Es genial, es limpio y es cercano y personal.
La página del producto se centra en dos elementos después de hacer clic en un elemento: la fotografía del producto y el botón de llamada a la acción, ya que estos son los únicos componentes de color en la página. El botón ‘Agregar al carrito’ no funcionará hasta que se elija un tamaño, lo cual es un toque encantador. Cuando un usuario intenta presionar el botón primero, el color se desvanece y el texto cambia a «Seleccione su tamaño».
Completar información personal por primera vez durante el proceso de pago nunca es una experiencia agradable. Inevitablemente, es un procedimiento torpe o, al menos, nadie ha descubierto cómo hacerlo más fácil para los compradores de vivienda por primera vez. Frank y Oak, por otro lado, hacen un excelente trabajo al ayudar a los usuarios al dividir el formulario en partes más pequeñas de campos de entrada, lo que reduce la carga cognitiva de los usuarios. Sí, está ordenado y despejado.
Probablemente se haya dado cuenta de que son algunos de mis requisitos más críticos para un diseño de interfaz de usuario exitoso.
En general, gran parte de la interfaz de usuario subyacente, y definitivamente la experiencia de usuario, de Frank y Oak se puede encontrar en muchos otros sitios web, pero es la forma en que han combinado una experiencia de usuario lógica y fácil, una interfaz de usuario fuerte, poderosa y limpia, y una imagen de marca ajustada y aspiracional y un mensaje que lo haga destacar.
Eso, supongo, es lo que se lleva del séptimo sitio de la lista: una interfaz de usuario hermosa solo puede ser excelente si va acompañada de una experiencia de usuario sólida y un mensaje seguro y bien pensado.
Ah, ¿y mencioné su fantástico blog o revista? Definitivamente han dominado el arte de establecer el brazo de medios y estilo de vida de una empresa, yendo tan lejos como para crear una revista de estilo periódico que rinde homenaje a las formas de los periódicos de quiosco mientras utiliza ilustraciones contemporáneas, audaces, de cortar y pegar. ¡Es fantástico!
8. Laboratorios Semplice
Semplice Labs, un portafolio de WordPress creado por el famoso diseñador Tobias Van Schneider, quien ha diseñado para Spotify, BMW, Google e incluso la NASA, es uno de mis ejemplos favoritos personales de una interfaz de usuario hermosa y útil. Por decir lo menos, sabe lo que hace.
El contenido aquí realmente atrae a los lectores, animándolos a aprender más sobre Semplice en un lenguaje fuerte y seguro. El resto de la interfaz de usuario del sitio web es una ilustración de lo que los usuarios del producto pueden hacer con sus propios sitios web. Los usuarios recordarán y les gustará esta interfaz debido a las animaciones fluidas y las transiciones fluidas entre páginas.
Conclusión
Estos son solo algunos de mis ejemplos favoritos de diseño de interfaz de usuario para sitios web. Crear una interfaz de usuario funcional y sin fricciones es un aspecto importante para establecer una buena relación con un usuario, sin mencionar que se asegura de que esté diseñada pensando en el usuario. Para crear un producto que brinde la mejor experiencia de usuario posible, es mejor consultar las pautas de usabilidad de Nielsen al diseñar o evaluar una interfaz.
