10 reglas de un buen diseño de interfaz de usuario para seguir en cada proyecto de diseño web

Atrás quedaron los días de los sitios de Geocities con su código HTML que nunca cambia. Los sitios y las aplicaciones actuales son dinámicos e interactivos. Nuestro trabajo como diseñadores es lograr 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, existen 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.

10 reglas de un buen diseño de interfaz de usuario para seguir en cada proyecto 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, rebotan 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í 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 brinda la posibilidad de 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 tiene que buscarlas.

Otro ejemplo son las opciones 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 el soporte técnico). Es absolutamente necesario que se pongan en contacto contigo en algún momento . Es por eso que siempre debe asegurarse de colocar los botones de ayuda al frente y al centro. Mira a 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 interno, 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 debería preocuparse de que su interfaz de usuario funcione y se vea coherente en todo el producto. No tenga 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 cargue. 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 sus 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 la mínima 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 las de Android. Los sitios de escritorio tienen necesidades diferentes a las de los sitios móviles en cuanto a menús, galerías e incluso pago de productos. La coherencia significa que no frustra a sus usuarios haciéndoles tener que averiguar qué hacer en su sitio.

3. Sea claro

Esto puede parecer una repetición de lo anterior, pero la claridad y la coherencia son diferentes. Claridad significa que desea que sus usuarios sepan qué hacer en todo momento. De alguna manera, esto también influye en el diseño de UX porque reduce la frustración de los usuarios, aumenta la retención y reduce la tasa de rebote.

La claridad es la razón por la que el diseño web minimalista (y hasta cierto punto brutalista) ha sido tan popular. La gente no está confundida sobre el propósito de ningún sitio o página porque no hay (o hay poco) desorden. Desea proporcionar la experiencia opuesta a la de Ling's Cars.

Una forma de lograr claridad es pasar de un paso a otro en diferentes páginas. En lugar de que un proceso de pago 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 Elija su pago a una página de 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 un bien escaso .

4. Dar retroalimentación

Lo último que quieren los usuarios es no entender lo que está pasando. Si presionan un botón, proporciona una indicación de que se presionó el botón. Puedes hacerlo de múltiples formas. Puede animar el botón, haciendo que parezca hundirse en la página. Los íconos de carga (como la Rueda arcoíris de MacOS) brindan retroalimentación, "Estamos trabajando en su solicitud", sin tener que decirlo.

Si permite que los usuarios carguen archivos (como con Dropbox o Google Drive), proporcione 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 marcar 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, usted 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 iconos para ciertas cosas.

También se puede hacer mediante recorridos virtuales para guiar al 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 recuerden a sus usuarios qué hace qué en su sitio. Logramos esto en Divi con simples descripciones emergentes, 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 vuelven a flotar. O incluso el proceso de flotar para obtener la información.

6. Elija primero cómo interactuará la gente

Crédito de la foto John Picklap, cortesía de MarieClaire.com

¿Sabes que es lo peor? Empujando una puerta de tiro. Especialmente cuando 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 ni 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 esperando 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é diseñando su interfaz de usuario, elija un movimiento (tal vez dos) y apéguese a él.

En dispositivos móviles, eso tiende a deslizarse. Mira Snapchat. Casi todas las acciones se realizan deslizando el dedo , incluido el acceso a su configuración y perfil. Puedes deslizar el dedo hacia abajo en Snapchat para verte a ti mismo, deslizarte hacia la izquierda para acceder a las conversaciones, directamente 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 diseñe su interfaz de usuario, elija si va a usar menús y toques, iconografía, deslizamientos y gestos, o algo completamente diferente. Alexa y Siri utilizan la entrada de voz como su interacción principal en la 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 forma intuitiva porque esa información se le proporcionó al principio. Los diseñadores te dijeron qué hacer y tú lo hiciste . Tus usuarios agradecerá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 intentar revitalizar algo si el estándar funciona. Eso va desde el uso de iconos hasta la ubicación estándar de elementos. No querrás ir en contra de lo que los usuarios esperan que hagan. 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 hamburguesa (las tres líneas apiladas), no una cuadrícula.

Piense en las barras de búsqueda. Suelen estar en lugares similares en la mayoría de los sitios: la parte superior de la barra lateral o el 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, pies de página o debajo del texto de las publicaciones de su blog, la gente no sabrá dónde buscar. Incluso si lo identifica con el icono de lupa estándar.

No hay nada de malo en 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. Asuntos de 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 por la página de forma orgánica, guiando al usuario 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. Lo mismo ocurre con el color y el contraste. Hacer uso de los 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. Mantenga 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 que un dolor de cabeza. Fuera de ser un formulario gubernamental, 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 formas 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 limitados o restringidos por su diseño. Quieres empoderarlos y tu interfaz de usuario debería permitirles realizar las acciones que quieran. Esta regla consta de dos partes: contexto y permiso .

En primer lugar, cualquier acción que deba realizar el usuario debe ubicarse cerca de donde desea actuar. Si necesitan editar una publicación, el botón editar debe estar cerca de los botones guardar , publicar / enviar , 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 en 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, la usarán . Por lo tanto, 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 de retroceso 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 revisión 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 IU.

¿Está lista la interfaz de usuario?

Mal juego de palabras. Lo sé, lo siento. Pero con estas reglas de la interfaz de usuario, estará absolutamente listo para sacar del parque 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