Atrás quedaron los días de los sitios de Geocities con su código HTML que nunca cambia. Los sitios y las aplicaciones de hoy son dinámicos e interactivos. Nuestro trabajo como diseñadores es hacer que la interfaz a través de la cual interactúan con nuestro diseño de interfaz de usuario web sea lo más ideal posible. Afortunadamente, hay algunas reglas casi universales que pueden ayudar. Hemos reunido lo que creemos que son los mejores principios de diseño para que pueda mejorar todos sus futuros proyectos de diseño web.
Suscríbete a nuestro canal de Youtube
1. Haga que todo lo que el usuario necesita sea fácilmente accesible
Ya sea una serie de herramientas de diseño para aplicaciones de diseño web, el inventario de un personaje en un videojuego, una hoja de cálculo o cualquier otra cosa, si el usuario no puede encontrar lo que busca, rebota en su software. Las pestañas hacen que las cosas sean accesibles. Accesos directos e información sobre herramientas flotantes, también.
Elegimos usar pestañas para organizar Divi , por ejemplo. Todas las herramientas que necesita están ahí mismo en el constructor, separadas por categoría. Las barras de herramientas son igualmente accesibles. Si usa WordPress, la barra de herramientas de administración le permite acceder rápidamente al editor de publicaciones, al personalizador de temas , a la configuración del complemento, etc. Las opciones están claramente etiquetadas y no es necesario que las busque.
Otro ejemplo son las opciones de Ayuda/Soporte/Contacto. Al diseñar una interfaz de usuario, ya sea para una aplicación móvil, aplicaciones web, sitios web de WordPress o cualquier otra cosa, sus usuarios siempre necesitarán encontrar el botón Ayuda (o el botón Contactar con soporte). Es absolutamente necesario que se comuniquen con usted en algún momento . Es por eso que siempre debe asegurarse de colocar los botones de ayuda al frente y al centro. Mira Divi. En cada módulo, tenemos el botón de soporte listo para ti, al alcance de tu mano, cuando lo necesites.
Además de eso, aparece la ventana de ayuda con un video tutorial sobre cualquier función con la que esté trabajando. Al incluir este módulo, Divi se vuelve mucho más accesible y menos frustrante. Además, como parte de la interfaz de usuario, la ubicación de la ayuda es uniforme en todo el producto. Lo que nos lleva al siguiente punto…
2. Sea consistente
Como dijimos hace un momento, es importante ser coherente en la ubicación de las funciones dentro de la interfaz de usuario. Pero también debe preocuparse de que su interfaz de usuario funcione y se vea consistente en todo el producto. No coloque el menú en la parte superior de una página y en la parte inferior de otra. No reorganice los elementos del menú cada vez que se carga. Asegúrese de que sus usuarios sepan dónde están las cosas en su sitio. Si mantiene un formulario de contacto debajo de las publicaciones de su blog, no decida dejarlo. Los usuarios se darán cuenta y quedarán desconcertados.
La coherencia también incluye las fuentes y el diseño debe funcionar de una página a otra. No cambie las fuentes de encabezado/cuerpo de una página a otra.
Hay una idea interesante llamada el principio de menor sorpresa que dice que si haces que tu usuario se sorprenda de cómo funciona algo… vuelve a trabajarlo para que sea más intuitivo.
Además, debe asegurarse de que su interfaz de usuario sea adecuada para su plataforma: las aplicaciones de iOS funcionan de manera diferente en algunos casos que Android. Los sitios de escritorio tienen diferentes necesidades que los sitios móviles en cuanto a menús, galerías e incluso pago de productos. La consistencia significa que usted no frustra a sus usuarios al obligarlos a decidir qué hacer en su sitio.
3. Sea claro
Esto puede parecer una repetición de lo anterior, pero la claridad y la consistencia son diferentes. Claridad significa que desea que sus usuarios sepan qué hacer en todo momento. De alguna manera, esto también se filtra en el diseño de UX porque reduce la frustración de sus usuarios y aumenta la retención y reduce la tasa de rebote .
La claridad es la razón por la cual el diseño web minimalista (y hasta cierto punto brutalista ) ha sido tan popular. La gente no está confundida acerca del propósito de cualquier sitio o página porque no hay (o hay poco) desorden. Desea proporcionar la experiencia opuesta a la que ofrece Ling’s Cars .
Una forma de lograr claridad es pasar de un paso a otro en diferentes páginas. En lugar de tener un proceso de pago que se desplace hacia abajo en la página, o que esté contenido dentro de una sola sección o cuadro, haga que sus usuarios naveguen desde una página de producto a una página de carrito de compras a una página de pago a una página de elegir su pago a una página de realizar pedido para una página de confirmación. (Amazon hace esto, como puede ver en la imagen a continuación).
Sabrán exactamente dónde se encuentran en el proceso, eliminando cualquier ambigüedad. Esto es especialmente importante para los usuarios de dispositivos móviles, ya que el espacio en pantalla es escaso .
4. Da tu opinión
Lo último que quieren los usuarios es no entender lo que está pasando. Si presionan un botón, proporcione una indicación de que se presionó el botón. Puedes hacerlo de múltiples maneras. Puede animar el botón, haciendo que parezca hundirse en la página. Los íconos de carga (como MacOS Rainbow Wheel) brindan comentarios, «Estamos trabajando en su solicitud», sin tener que decirlo.
Si permite que los usuarios carguen archivos (como con Dropbox o Google Drive), brinde una indicación del tiempo restante. Proporcionar una ventana emergente o modal que les diga que su acción fue un éxito reduce la frustración y la confusión.
Realmente, cada vez que el usuario realiza alguna acción dentro de su interfaz, solo un pequeño reconocimiento puede ser la diferencia entre una buena experiencia y una deslucida.
5. Utilice el reconocimiento, no el recuerdo
Lo opuesto a las buenas habilidades para tomar exámenes, quiere que sus usuarios reconozcan todo acerca de su sitio cuando lo vean. No deberían tener que pensar en ello y recordar la información. Más que nada, está optimizando su interfaz para que cada parte sea intuitiva y se mueva de un punto a otro. Esto se puede hacer usando íconos reconocibles como mencionamos anteriormente. La gente reconoce ciertos íconos para ciertas cosas.
También se puede hacer mediante recorridos virtuales para guiar a un usuario a través de un proceso, incluso cuando no es la primera vez. Reconocerán el proceso una vez que aparezca el primer modal, y no tendrán que gastar energía recordando exactamente cómo realizar esas acciones.
También puede lograr esto a través de mensajes bien ubicados que les recuerden a sus usuarios qué hace qué en su sitio. Logramos esto en Divi con información sobre herramientas simple, incluso si alguien no recuerda lo que hace el ícono, lo guiamos a su función. Después de eso, deberían reconocer el ícono. O al menos la información sobre herramientas si se desplazan nuevamente. O incluso el proceso de flotar para obtener la información.
6. Elija primero cómo interactuarán las personas
crédito de la foto John Picklap, cortesía de MarieClaire.com
¿Sabes qué es lo peor? Empujando una puerta abatible. Especialmente cuando simplemente presionaste un anterior para llegar a ese. El diseñador de ese edificio hizo que la interfaz de usuario fuera inconsistente, por lo que no tenía idea de cómo hacer lo que tenía que hacer. ¿Qué hay de presionar algo que parece un botón que no lo es, pero esperar una respuesta de todos modos? Bueno, eso se debe a que esos diseñadores no tomaron en consideración cómo sus usuarios iban a interactuar con su producto. Entonces, cuando estés diseñando tu interfaz de usuario, elige un movimiento (quizás dos) y apégate a él.
En los dispositivos móviles, eso tiende a ser deslizar. Mira Snapchat. Casi todas las acciones se realizan deslizando el dedo , incluido el acceso a la configuración y el perfil. Puedes deslizarte hacia abajo en Snapchat para verte a ti mismo, deslizar hacia la izquierda para acceder a las conversaciones, hacia la derecha a las historias y hacia arriba para acceder a tus recuerdos (o como se llamen esta semana). Eligieron cómo querían que sus usuarios interactuaran con su producto y diseñaron su interfaz de usuario para adaptarse a eso. No de la otra manera.
Cuando estés diseñando tu interfaz de usuario, elige si vas a usar menús y toques, iconografía, deslizamientos y gestos, o algo completamente diferente. Alexa y Siri usan la entrada de voz como su principal interacción de interfaz de usuario. La forma en que brindan información y realizan sus tareas está diseñada en torno a esa entrada en particular. Y como usuario, sabe qué hacer de manera intuitiva porque esa información se le proporcionó al principio. Los diseñadores te dijeron qué hacer, y lo hiciste . Tus usuarios apreciarán que hagas lo mismo por ellos.
7. Siga los estándares de diseño
El viejo dicho si no está roto, no lo arregles se aplica aquí. Realmente no hay necesidad de tratar de revitalizar algo si el estándar funciona. Eso va desde el uso de iconos hasta la colocación estándar de elementos. No desea ir en contra de lo que sus usuarios esperan que hagan las cosas. La gente sabe que los signos de interrogación (?) indican ayuda. Así que no uses un signo de exclamación (!) . Si desea que los usuarios encuentren su menú móvil, use el ícono de la hamburguesa (las tres líneas apiladas), no una cuadrícula.
Piensa en las barras de búsqueda. Tienden a estar en lugares similares en la mayoría de los sitios: en la parte superior de la barra lateral o al final del menú del encabezado. Si no está allí, el centro de la sección superior de la página. Si decide incluir el único campo de búsqueda en la parte inferior de la barra lateral, los pies de página o debajo del texto de las publicaciones de su blog, la gente no sabrá dónde buscar. Aunque lo identifiques con el icono de lupa estándar.
No tiene nada de malo pensar fuera de la caja y optar por un diseño nuevo e innovador, pero eso no debería significar que el diseño sea difícil de usar.
8. Importancia de la jerarquía elemental
No, no queremos decir que la Tierra, el Viento, el Agua o el Fuego sean los jefes de los demás. Queremos decir que los elementos de su página deben tener una jerarquía clara tanto para la utilidad como para la forma en que el usuario ve la página. Básicamente, desea asegurarse de que las funciones más importantes estén en la parte superior de sus respectivas páginas. Además, este tipo de jerarquía puede llevar al usuario a la página de forma orgánica, llevándolo a través de su servicio.
Los elementos grandes que disminuyen de tamaño a medida que avanza en el proceso son indicativos de importancia y orden. También lo hace el color y el contraste. Hacer uso de espacios en blanco también es importante, ya que el desorden puede detener el progreso del usuario y desviar la atención del propósito de la página. Las líneas limpias, mucho espacio y elementos bien definidos pueden indicar visualmente a sus usuarios cómo moverse a través de su interfaz de usuario sin ninguna documentación o anotación.
Una regla general decente es que desea que las cosas fluyan de izquierda a derecha, de arriba a abajo.
9. Mantén las cosas simples
Mira este formulario de contacto:
Ahora mira este:
Ambos son formularios de contacto para realizar una solicitud. Uno de estos no es un problema para completar, mientras que el otro es un poco más un dolor de cabeza. Fuera de ser un formulario de gobierno, el diseño del formulario inferior no está hecho para el usuario sino para el administrador. Ese no es tu trabajo. Su trabajo es hacer que las cosas sean lo más sencillas posible para el usuario . Y una de las mejores maneras de hacerlo es eliminar todo lo que no sea absolutamente necesario.
10. Mantenga a sus usuarios libres y bajo control
Lo último que queremos tocar, y lo último que quieres hacer con tu interfaz de usuario, es tomar el control del usuario. O para que se sientan confinados o restringidos por su diseño. Desea empoderarlos y su interfaz de usuario debe permitirles realizar las acciones que desean. Hay dos partes en esta regla: contexto y permiso .
En primer lugar, cualquier acción que el usuario deba realizar debe ubicarse cerca de lo que desea realizar. Si necesitan editar una publicación, el botón de edición debe estar cerca de los botones de guardar , publicar/enviar y vista previa . De hecho, la mejor opción son los menús contextuales para todas las acciones que el usuario puede realizar en cualquier elemento (o página) en particular. Si es coherente con su interfaz de usuario, como mencionamos anteriormente, sus usuarios comprenderán que estos menús contextuales o barras de herramientas siempre tendrán la lista completa de acciones para cualquier elemento dado.
Además, su interfaz de usuario siempre debe hacer que el usuario sienta que puede salir o revertir cualquier acción que realice. Mientras diseña la interfaz de usuario, ellos la usarán . Entonces necesitan permiso (o tal vez incluso libertad) para hacer lo que necesitan para hacer el trabajo. Hacer esto puede ser tan simple como agregar un botón de cancelación a cada página de su pago de comercio electrónico (porque presionar el botón Atrás del navegador puede hacer que las cosas se vuelvan locas). Tal vez sea una función de deshacer para que sientan que la experimentación está bien. O un historial de revisiones para proyectos a gran escala (como en Google Drive o WordPress o Git ).
Cuando sus usuarios se sienten libres y sin restricciones, obviamente ha seguido algunos buenos principios de diseño de interfaz de usuario.
¿Está lista la interfaz de usuario?
Mal juego de palabras. Lo sé, lo siento. Pero con estas reglas de interfaz de usuario, estará absolutamente listo para sacar a la luz su próximo proyecto de diseño web. Si bien algunos de estos pueden aplicarse más a algunos proyectos que a otros, una buena interfaz de usuario es una buena interfaz de usuario y una buena interfaz de usuario conduce a una buena experiencia de usuario. Pero ese es un tema para una publicación completamente diferente.
¿Tiene alguna regla para un buen diseño de interfaz de usuario que siempre siga?
Imagen destacada del artículo por emojoez / shutterstock.com