10 reglas para una interfaz de buen uso que se respetará en cada proyecto de diseño web

Los tiempos de los sitios de Geocytes han estado yendo con su código HTML, que nunca cambia. Los sitios y aplicaciones de hoy son dinámicos e interactivos. Nuestra tarea como diseñadores es hacer para que la interfaz a través de la cual interactúen con el diseño de nuestra interfaz web esté lo más cerca posible del ideal. Afortunadamente, hay algunas reglas casi universales que pueden ayudarte. Hemos reunido lo que creemos que son los mejores principios de diseño, por lo que puede mejorar todos los proyectos de diseño web futuros. 10 reglas para una interfaz de buen uso que se respetará en cada proyecto de diseño web
Suscríbase a nuestro canal de YouTube 1. Haga accesible todo lo que el usuario necesita

Ya sea que se trate de una serie de herramientas de diseño para aplicaciones de diseño web, un personaje en un videojuego, una hoja de cálculo o lo que sea, si el usuario no encuentra lo que quiere, navegará por su software. Las pestañas hacen que las cosas sean accesibles. Atajos y consejos de herramientas con mouse. Hemos elegido usar las pestañas para organizar el DIV, por ejemplo. Todas las herramientas que necesita están allí en el constructor, separadas por categorías. Las barras de herramientas son de manera similar. Si está utilizando WordPress, la barra de herramientas de administración le ofrece la oportunidad de acceder rápidamente al editor de mensajes, el personalizador del tema, la configuración del complemento, etc. Las opciones están claramente etiquetadas y no tienes que buscarlas.
Otro ejemplo son las opciones de ayuda / asistencia / contacto. Al diseñar una interfaz para su uso, ya sea una aplicación móvil, aplicaciones web, sitios web de WordPress o cualquier otra cosa, sus usuarios siempre tendrán que encontrar el botón de ayuda (o el botón de soporte de contacto). Tendrás que contactarte a la vez. Por lo tanto, siempre debe asegurarse de poner los botones de ayuda en el frente y el centro. Mira el Div. En cada módulo, tenemos el botón de asistencia listo para usted, a mano, cuando lo necesite. Además, la ventana de ayuda aparece con un video tutorial con cualquier función con la que trabaje. Al incluir este módulo integrado, el DIV se vuelve mucho más accesible y menos frustrante. Además, como parte de la interfaz de uso, la ubicación para la ayuda es consistente en todo el producto. Lo que nos lleva al siguiente punto … 2. Se consistente
Como dije ahora, es importante ser consistente en colocar características en su interfaz de uso. Pero debe preocuparse por el hecho de que su interfaz operativa funciona y se ve uniformemente en todo el producto. No tiene 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 cargan. Asegúrese de que sus usuarios sepan dónde están las cosas en su sitio si mantiene un formulario de contacto en las publicaciones de blog, no decida dejarlo. Los usuarios notarán y estarán desconcertados.

La coherencia también incluye fuentes y el diseño deberían funcionar desde la página hasta la página. No pase para cambiar las fuentes de cabeza / cuerpo de la página a la página. Hay una idea interesante llamada Principio de la más pequeña sorpresa, que dice que si hace que el usuario sorprenda por cómo funciona algo … reanude, para que sea más intuitivo. Además, debe asegurarse de que su interfaz de uso sea adecuada para su plataforma: las aplicaciones iOS funcionan de manera diferente a Android. Los sitios de escritorio tienen diferentes necesidades para sitios móviles para menús, galerías e incluso verificación de productos. La coherencia significa que no frustra a sus usuarios, haciendo que se den cuenta de qué hacer en su sitio3. Sea claro que esto puede parecer una repetición de lo anterior, pero la claridad y la consistencia son diferentes. La claridad significa que desea que sus usuarios sepan qué hacer en cualquier momento. En algunos aspectos, esto también sangra en el diseño de UX, ya que reduce la frustración de sus usuarios y aumenta la retención y reduce la tasa de rechazo. La claridad es la razón por la cual el diseño web minimalista (y brutalista) era tan popular. Las personas no están confundidas sobre el propósito de ningún sitio o página porque hay (o poco) trastorno. Desea dar la experiencia opuesta que hace los autos de Ling.
Una forma de lograr la claridad es moverse de un paso a otro en diferentes páginas. En lugar de tener un proceso de recorte, desplácese hacia abajo, o esté contenido en una sola sección o caja, solicite a sus usuarios que navegen de una página de producto a un carrito de compras en una página de pago a una página Elija su pago en una página de ubicación de pedido en una Página de confirmación. (Amazon hace esto, como puede ver en la imagen a continuación). Usted sabe exactamente dónde está en el proceso, eliminando cualquier ambigüedad. Esto es particularmente importante para los usuarios móviles, porque los bienes raíces en la pantalla están en un nivel superior.
4. Dale a los comentarios que lo último que los usuarios quieren es no entender lo que está sucediendo. Si presiona un botón, proporcione una indicación de que se ha presionado el botón. Puedes hacerlo de varias maneras. Puede animar el botón haciendo que parezca que se hunde en la página. La carga de iconos (como la rueda de arco iris MacOS) ofrece comentarios, “Trabajamos en su solicitud”, sin tener que decirlo. Si permite que los usuarios carguen archivos (como Dropbox o Google Drive), dé una indicación a la izquierda. Dé una ventana emergente o modal que les diga que su acción fue un éxito, reduce la frustración y la confusión.
De hecho, cada vez que el usuario toma alguna acción en su interfaz, solo un pequeño reconocimiento puede ser la diferencia en una buena experiencia y otra sin luz. 5. Use el reconocimiento, no recordando

Lo contrario de las buenas habilidades de prueba, desea que los usuarios reconozcan todo sobre su sitio cuando lo ven. No debería pensar en ello y recordar la información. Más que nada, simplifica su interfaz para que cada lado sea intuitivo y se mueva de un punto a otro. Esto se puede hacer utilizando iconos reconocidos como se mencionó anteriormente. Las personas reconocen ciertos íconos para ciertas cosas. También se puede hacer utilizando tours 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á que gastar la energía recordando exactamente cómo realizar esas acciones. También puede tener éxito en hacer esto a través de un mensaje bien ubicado, recordando a los usuarios lo que hace en su sitio. Hacemos esto en Divi con simples consejos de desplazamiento, incluso si alguien no recuerda lo que hace el icono, los llevamos a su función. Después de eso, debería reconocer el ícono. O al menos el consejo de instrucciones si están planeando nuevamente. O incluso el proceso de planificación para obtener la información.
6. Elija cómo la gente interactuará primero

Foto de crédito John Picklap, a través de la bondad marieclaire.com

¿Sabes cuál es el peor? Presionando en una puerta de tiro. Especialmente cuando acabas de empujar un precedente para alcanzar eso. El diseñador de diseño 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. ¿Pero si presiona algo que parece un botón que no es más que esperar una respuesta de todos modos?
Bueno, eso es porque esos diseñadores no han tenido en cuenta cómo sus usuarios interactuarán con su producto. Entonces, cuando diseñe su interfaz de usuario, elija un movimiento (tal vez dos) y quédese con ella. En dispositivos móviles, esto tiende a deslizarse. Mira a Snapchat. Casi todas las acciones se realizan deslizando, incluso tocando la configuración y el perfil. Puede deslizar por Snapchat para verte, deslizarte a la izquierda para llegar a conversaciones, a la derecha a historias y subir a tus recuerdos (o como se llamaría esta semana). Eligieron la forma en que querían que sus usuarios interactuaran con su producto y diseñaron su interfaz de uso para que coincida con él. No el reverso. Al diseñar su interfaz de usuario, elija si usa menús y toques, iconografía, diapositivas y gestos o algo completamente. Alexa y Siri usan la entrada vocal como la interacción principal de la interfaz de uso. La forma en que proporcionan información y realizan sus tareas está diseñada en torno a esa contribución. Y como usuario, sabe qué hacer intuitivamente, porque esta información ha sido establecida para usted al principio. Los diseñadores te dijeron qué hacer y tú lo hiciste. Sus usuarios apreciarán que haga lo mismo por ellos. 7. Respeta tus estándares de diseño
El viejo dicho, si no se rompe, no lo resuelve, se aplica aquí. Realmente no necesitas intentar revitalizar algo si el estándar funciona. Esto pasa del uso de iconos a la colocación estándar de los elementos. No querrás ir en contra de lo que tus usuarios están esperando que hagan cosas. La gente sabe que los signos de interrogación (?) Indica ayuda. Así que no use un signo de exclamación (!). Si desea que los usuarios encuentren su menú móvil, use el icono de hamburguesa (las tres líneas apiladas), no una cuadrícula. Piense en buscar bares. Tienden a estar en lugares similares en la mayoría de los sitios: la parte superior de la barra lateral o el extremo del menú de encabezado. Si no 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 sótanos de la página o debajo del texto de las publicaciones de blog, las personas no sabrán dónde buscar. Incluso si lo identifica con el icono de aumento estándar. No hay nada de malo en pensar fuera de la caja y elegir un diseño nuevo e innovador, pero eso no debería significar que el diseño sea difícil de usar. 8. La jerarquía elemental es importante

No, no queremos decir que ni la tierra, el viento, el agua o el fuego son el jefe de los demás. Entendemos que los elementos en su página deben tener una jerarquía clara tanto para la utilidad como para cómo el usuario ve la página. Básicamente, debe asegurarse de que las funciones más importantes estén en la parte superior de las páginas respectivas. Además, este tipo de jerarquía puede impulsar al usuario por la página, lo que lleva al usuario a través de su servicio. También lo hace el color y el contraste. El uso del espacio en blanco también es importante, porque el trastorno puede prevenir el progreso del usuario y puede atraer el aspecto de la página. Las líneas limpias, mucho espacio y elementos bien definidos pueden indicar visualmente a los usuarios cómo pasar por la interfaz de usuario sin ninguna documentación o anotación. Una regla decente es que desea mantener las cosas que fluyen de izquierda a derecha, de arriba a abajo. 9. Mantenga las cosas simples Mira este formulario de contacto: míralo ahora:

Ambos son formularios de contacto para hacer una solicitud. Uno de estos no es un problema para completar, mientras que el otro es más un dolor de cabeza. Además de ser una forma gubernamental, el diseño de la forma inferior no está hecho para el usuario, sino para el administrador. Ese no es tu trabajo. Su tarea es hacer las cosas lo más posible para el usuario. Y una de las mejores maneras de hacer esto es cortar lo que no sea absolutamente necesario. 10. Mantenga a sus usuarios libres y bajo control lo último que queremos lograr, y lo último que desea hacer con su interfaz de uso es para tomar el control del usuario. O para que se sientan limitados o restringidos por su diseño. Desea empoderarlos, y su interfaz de uso debería permitirles realizar las acciones deseadas. Esta regla tiene dos partes: contexto y permiso. En primer lugar, cualquier acción que el usuario tenga que hacer debe ubicarse junto a lo que quiere actuar. Si tiene que editar una publicación, el botón de edición debe estar cerca del rescate, los botones de publicación / envío. De hecho, la mejor opción es para los menús contextuales para todas las acciones que el usuario puede tomar en un elemento (o página) en particular. Si es consistente en su interfaz de uso, como hemos hablado anteriormente, sus usuarios comprenderán que estos menús o barras de herramientas contextuales siempre tendrán la lista completa de acciones para cualquier elemento dado.
Además, su interfaz de uso siempre debe hacer que el usuario se sienta como si pudiera salir o cancelar cualquier acción que realice. Al diseñar 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 en cada página de su comercio electrónico (porque presionar el botón Backbone puede dejar que las cosas no están claras). Puede ser una característica de cancelación, por lo que piensan que la experimentación está bien. O un historial de revisiones para grandes proyectos (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. ¿Están preparados? Mal juego. Lo sé, lo siento. Pero con estas reglas de interfaz, estará absolutamente listo para eliminar del parque el próximo proyecto de diseño web. Si bien algunos de estos pueden aplicar más proyectos que otros, la interfaz de buen uso es una buena interfaz de uso, y la interfaz de buen uso conduce a una buena interfaz de usuario. Pero este es un tema para una publicación completamente diferente. ¿Tiene reglas para un buen diseño de la interfaz de uso que siempre sigue? Imagen presentada por el elemento de Emojoez / Shutterstock.com