Mejores prácticas para 6 elementos comunes de interfaz de usuario
La apariencia y usabilidad de ciertos elementos de la interfaz y la funcionalidad son cruciales para el éxito de cualquier sitio web en el mercado actual.
Los estudios han demostrado que incluso una demora de un segundo en pensar por parte del usuario debilitará su percepción e interés en un sitio web y, en última instancia, reducirá la tasa de conversión del sitio web.
En ciertos nichos e industrias, tener elementos de IU que no son obvios en su uso puede ser perfectamente aceptable. La industria del desarrollo de blogs y la web son ejemplos perfectos.
Pero cuando diseñamos interfaces de usuario para audiencias no conocedoras de la tecnología (que generalmente es el caso con el trabajo del cliente), tenemos que asegurarnos de que ciertos elementos de la IU no se alejen demasiado de lo que los usuarios están acostumbrados.
Este artículo analiza algunas de las mejores prácticas y rasgos de usabilidad de seis elementos de la interfaz de usuario y las convenciones para cada uno, de modo que los desarrolladores puedan crear experiencias de usuario que sean hermosas y simples.
1. Aspecto del cuadro de búsqueda
En grandes sitios web ricos en información o pesados, la búsqueda es el rey. En general, los usuarios renuncian a las barras de navegación convencionales a favor del cuadro de búsqueda.
Un cuadro de búsqueda que no está inmediatamente visible tendrá uno de dos efectos: 1) el usuario supondrá que no hay ninguna funcionalidad de búsqueda disponible, o 2) el usuario encontrará la funcionalidad de búsqueda después de un período demorado y posiblemente irritante.
Asegúrese de que el cuadro de búsqueda en su sitio web sea fácil de ver. Los fondos oscuros y los gráficos sofisticados afectarán la usabilidad , por lo que es mejor mantenerlo blanco o gris claro. Además, asegúrese de que el cuadro de búsqueda sea lo suficientemente grande en relación con otros elementos importantes en la página, manteniendo así su posición en la jerarquía visual.
El cuadro de búsqueda en Dominio por IP se adapta muy bien al tema visual del sitio web, es naranja y gráficamente coherente con su entorno. Pero si un cuadro de búsqueda en un sitio web más concurrido recibiera este tratamiento, probablemente sería difícil detectarlo.
El diseño no es un obstáculo en Dominio por IP porque el sitio web tiene una función: búsqueda, que está justo en el medio de la página. Además, al estar en un nicho tecnológico, sus desarrolladores tienen menos incentivos para seguir con las convenciones. Pero este grado de creatividad debe evitarse en sitios web más grandes , cuyo público objetivo puede no ser tan inteligente técnicamente.
Tiempo de Aventura Mientras tanto, mantiene su cuadro de búsqueda en blanco, de tamaño conveniente y fácil de encontrar en la página:
A pesar de estar en un idioma extranjero, Adventure Time tiene un cuadro de búsqueda muy claro, incluso para usuarios de habla inglesa. El tamaño y el color de la caja se complementan con el gráfico de lupa, que se ha convertido en el símbolo universal para la búsqueda en línea. Un usuario que busca esta funcionalidad no tendrá problemas aquí.
Este patrón se debe seguir en todos los proyectos dirigidos a una base de usuarios diversa.
Otras lecturas:
2. Contenido plegable / expansible claramente marcado
Los sitios web se benefician de los paneles plegables y los menús desplegables porque hacen diseños más limpios y menos abarrotados. El contenido oculto en estos elementos de la interfaz puede, sin embargo, perjudicar la usabilidad de un sitio web si su presencia no está claramente indicada.
Cuando un usuario hace clic en un enlace o botón, esperan ser llevados a una nueva página. Pero cuando un usuario hace clic en un enlace o botón que tiene un indicador de contenido oculto, espera que el nuevo contenido se muestre instantáneamente (a través de JavaScript o AJAX) y tenga la opción de ocultarlo posteriormente. Por lo tanto, un sitio web debe diferenciar claramente entre los enlaces normales y los enlaces que revelan contenido nuevo a través de JavaScript .
El contenido plegable, como en los paneles laterales y los árboles del menú, se puede indicar con una flecha, un triángulo o un indicador de más / menos similar al de Windows Explorer. El panel que los usuarios que inician sesión ven en CSS Globe indica claramente que es plegable:
A continuación se muestra la misma página después de que el panel se haya expandido para revelar un grupo de funciones:
Con el contenido en el panel ahora expandido, la flecha se gira 90 grados, lo que sugiere que el mismo contenido ahora puede ocultarse o colapsarse. Este mismo principio se puede aplicar a menús desplegables o desplegables, aunque estos no requerirían una flecha giratoria. Sorprendentemente, esta característica a menudo se omite incluso en sitios web diseñados profesionalmente.
Otras lecturas:
3. Indicador de carga AJAX
Cuando mejore la experiencia del usuario cargando contenido a través de solicitudes asincrónicas, asegúrese de informar al usuario que se está procesando una solicitud AJAX. Sin este indicador, el usuario puede dejar de esperar o preguntarse por qué no sucedió nada en respuesta a su clic.
Puedes lograr esto de varias maneras; Una forma es destacar un mensaje de "Carga" o similar en o cerca de la ubicación donde se realizará la acción, como lo hace el lector de RSS de Google:
En la parte superior de la captura de pantalla se encuentra el texto resaltado en amarillo, que aparece cuando se hace clic en el botón "Marcar todo como leído", indicándole al usuario que algo está sucediendo.
Otra forma de indicar esto es con animación o un reloj de arena giratorio, que sería familiar para los usuarios de Windows. Un indicador animado se utiliza en numerosos sitios web, incluidos Gorjeo , donde los usuarios hacen clic en un botón "Más" para ver tweets anteriores:
Una vez que se hace clic en el botón, y dependiendo de la velocidad de la conexión del cliente con el servidor, aparece un gráfico remolino animado que le indica al usuario que su solicitud se está procesando.
Los gráficos de carga de AJAX están disponibles de forma gratuita desde varios sitios web diferentes, muchos de los cuales le permiten personalizar los gráficos con el tamaño, el color y otras opciones.
Este tipo de indicador visual es importante para las solicitudes asincrónicas que no proporcionan pistas del lado del cliente sobre qué actividad se está cargando.
Un indicador tipo AJAX también podría usarse para mejorar la funcionalidad no AJAX que se comporta como AJAX y lleva tiempo cargar. Esto podría incluir una galería de fotos que carga una imagen más grande cuando se hace clic en una miniatura.
Los gráficos de carga de AJAX y otros indicadores en realidad no aceleran una página, pero mejoran el tiempo de carga "percibida" , que a menudo es tan valioso como mejorar el tiempo de carga real .
Otras lecturas:
4. Ubicación del carrito de la compra y funciones de inicio de sesión y registro
Cuando los usuarios escanean una página para ver el botón "Carrito de la compra" o "Registrarse ahora", el primer lugar que miran es la esquina superior derecha de la página. A menos que tenga un motivo convincente para hacerlo, mantenga esta funcionalidad en su ubicación familiar, de lo contrario corre el riesgo de ralentizar e interrumpir la experiencia del usuario.
Las opciones y funciones que se incluirían en esta categoría incluyen "Ver carro", "Cerrar sesión", "Iniciar sesión", "Cerrar sesión", "Registrarse", "Enviar enlace", "¿Olvidó su contraseña?" E incluso "Contáctenos". "Este último artículo suele ser el último en una barra de navegación horizontal.
TasteBook incluye cuatro de esos enlaces en la esquina superior derecha de su diseño:
Joyería Maui Divers es otro buen ejemplo y también incluye un gráfico de bolsa de compras:
5. Formato de fecha de caducidad en formularios de tarjeta de crédito
Cuando un formulario solicita la fecha de vencimiento de su tarjeta de crédito, el formato es siempre el mismo: el mes, representado por dos dígitos, seguido del año, representado por dos o cuatro dígitos (p. Ej., 03/11 o 03/2011). El formato de cuatro dígitos es cómo aparece la fecha de vencimiento en la tarjeta de crédito.
La mejor manera, entonces, de recopilar esta información y fortalecer la experiencia del usuario es utilizar dos cuadros de selección separados, uno para el mes y el otro para el año. No haga que el usuario ingrese la fecha de vencimiento en un solo cuadro de texto, incluso si proporciona instrucciones.
Aquí hay un buen ejemplo de página de pago de Joyería Maui Divers:
Y aquí hay un ejemplo de un campo de fecha de vencimiento mal diseñado:
Además, el selector de mes no debe mostrar los nombres de los meses, sino que debe enumerar los números 01 a 12. No hay razón para desacelerar a los usuarios al hacerles descubrir que "08" significa "agosto".
6. Enlaces fácilmente identificables
Esto nunca debería ser un problema, pero desafortunadamente algunos sitios web todavía no distinguen claramente entre enlaces y texto normal en el cuerpo principal.
En la mayoría de los casos, la mejor manera de indicar esta diferencia es hacer que los enlaces tengan un color diferente y subrayarlos. En algunos casos, basta un fuerte contraste de color; pero solo subrayar o simplemente cambiar el color es poco frecuente y, a menudo, perjudicará la accesibilidad.
Cameron.io hace bien esta distinción:
Estos enlaces no serían tan visibles si estuvieran simplemente subrayados pero no cambiados de color. No diseñaría un botón que no pareciera un botón, entonces, ¿por qué los enlaces de texto se mezclan con el cuerpo principal? Como la mayoría de los usuarios escanean el texto en línea, los diseñadores deben asegurarse de que todos los enlaces sean identificables mucho antes de que se les pase el mouse sobre ellos.
Otras lecturas:
Conclusión
Todos los elementos y funciones de la interfaz de usuario discutidos en este artículo son cruciales para la usabilidad del sitio web y juegan un papel importante en la percepción del usuario de su marca.
Muchas pequeñas mejoras pueden marcar una gran diferencia en la velocidad percibida y pueden evitar que los usuarios se sientan frustrados o incómodos.
Haga que los elementos de su interfaz de usuario sean simples y simplificados, y siga las convenciones donde sea posible. Verá tasas de rebote reducidas, mejores conversiones y un flujo constante de tráfico de retorno.
Escrito exclusivamente para WDD por Louis Lazaris, escritor independiente y desarrollador web. Louis corre Webs impresionantes , donde publica artículos y tutoriales sobre diseño web.
¿Cómo podrían mejorarse algunos de estos u otros elementos de la interfaz de usuario? Por favor comparte tus pensamientos en los comentarios a continuación.