Saltar al contenido
  • Linkedin
  • Twitter
  • Youtube
  • Facebook
  • Instagram
  • Inversores
  • Contacto
  • Trabaja con nosotros
  • Español
    • English
Cuatroochenta
  • Casos de éxito
  • Servicios
  • Productos
  • Somos
  • Contacto
  • Linkedin
  • Twitter
  • YouTube
  • Facebook
  • Instagram
  • Español
    • English
  • Grupo 1
    • FAMA: Facility Management
      • FAMA AFM: Gestión integral de activos e infraestructuras
      • FAMA CAE: Coordinación de Actividades Empresariales
      • FAMA SOS: Gestión de la Sostenibilidad
    • CheckingPlan: Facility Services
      • Planificación y tareas
      • Checklist y formularios
      • Registro horario
    • Software a medida
      • Aplicaciones de movilidad
      • Experiencia de cliente
      • Procesos y actividades empresariales
  • Grupo 2
    • Aplicaciones de gestión empresarial
      • Microsoft Business Central ERP
      • Ekadis: ERP Distribución
      • Ekatex: ERP Textil
      • Zoho CRM
      • Invoice System
      • Matrix Document Solutions
      • Escena Online: Ticketing
  • Grupo 3
    • Sofistic: Ciberseguridad e identidad
      • Security Operations Center
      • Pentest: Auditoría de seguridad
      • Servicios de seguridad gestionados (MSSP): Darktrace, Crowdstrike, Exabeam
      • Microsoft Security
      • UareSAFE: Mobile Threat Defense + VPN
      • USign: Firma digital
  • Grupo 4
    • Be Cuatroochenter
      • Insights
      • Cátedra IA
      • Podcast
      • Inversores
      • Ecosistema
      • 480Academy
      • Área de prensa
      • Agenda
      • Trabaja en Cuatroochenta
Artículos

Login
_
y
_
registro,
_
los
_
mejores
_
anfitriones
_
para
_
un
_
producto
_
digital

Desarrollo Software a medida  ·  Diseño UX UI
Home Artículos
WhatsApp Linked In Twitter Facebook
ester caballer
Autor: Ester Caballer Romero
Ingeniera informática y desarrolladora de apps para iOS en Cuatroochenta
Fecha: 10/08/2020
Suscripción
Newsletter

La pantalla para que las personas usuarias se autentiquen es la puerta de entrada a una web o una app. Tener en cuenta una serie de requisitos en el diseño de la interfaz y la experiencia de usuario son la clave para que funcione.

Cuenta la leyenda que antes de la llegada del ordenador personal existió un todopoderoso llamado Mainframe era un enorme y potente cerebro mecánico, usado por los principales monstruos de los negocios para procesar cantidades ingentes de datos. Con el paso del tiempo este súper cerebro evolucionó, permitiendo la interactividad con los humanos y convirtiéndose en un sistema multiusuario. El humano ingresaba su usuario y contraseña. Tras validar los datos, Mainframe le abría la barrera de paso para que pudiera programar las tareas que luego procesaría, devolviéndole finalmente su resultado al humano. Es así como la aparatosa máquina se convirtió en   del tan conocido proceso de autenticación.

Después de tantos años de uso, las personas estamos sobradamente acostumbradas a rellenar formularios de registro y login. Quizá sea esta familiaridad con la autenticación la razón por la que esta parte suele ser la menos atractiva en el diseño de interfaces. Aún resultando monótonos, estos formularios son generalmente una pieza clave a nivel de negocio y marketing, y no hay que subestimarlos, ya que son la puerta de entrada a un producto digital y a que este funcione.

Que un usuario se autentique en una web o app significa que le interesa lo que le ofrece, creando así un vínculo con ésta a través de la aportación de sus datos para poder hacer uso de los servicios.

Evidentemente, no siempre se necesita nuestra información personal para hacer uso de lo que nos brinda un producto digital pero, ¿cuántas webs y apps nos han pedido nuestros datos sin necesidad alguna? Seguro que demasiadas, y en la mayoría hemos salido corriendo de ahí. Si por el tipo de negocio (servicios de streaming, compras online, planes nutricionales personalizados…) se necesita cierta información del usuario habría que pedirla de forma simple, y solo lo que sea estrictamente esencial.

Obligar de primeras a ingresar nuestros datos genera rechazo, es más recomendable preparar una especie de visita guiada, reflejando el propósito del producto y destacando los elementos que requieran de alguna explicación adicional.

 

A nadie nos gusta sentirnos como Sheldon Cooper en la cola del departamento de tráfico, con un montón de dudas a la hora de rellenar un formulario. Los siguientes consejos básicos servirán de guía pero, como siempre en diseño de interfaces y experiencia de usuario, hay que adaptarse a cada tipo de negocio y producto, ya que las necesidades de uno pueden ser muy diferentes a las de otro.

Menos es más

  • Descartar cualquier elemento que distraiga (menús, imágenes de fondo…). Lo que se pretende es que el usuario esté centrado en rellenar el formulario y enviarlo.
  • Un botón para iniciar sesión, por si el usuario eligió el registro por error, y otro de ayuda, con respuestas a las preguntas más frecuentes, debería bastar.

Lo bueno, si breve, dos veces bueno

  • No ponerle una señal de stop al usuario con un formulario kilométrico. Si, por ejemplo, se quiere incluir un campo para el nombre, puede etiquetarse como “Nombre completo”, ahorrando así un campo extra para los apellidos.
  • Repetir campos para usarlos como confirmación (ya sea el correo electrónico o la contraseña) está de más. Si la política de empresa lo requiere es preferible desplegarlo una vez se haya ingresado el primer campo duplicado.
  • Incluir la opción del registro y login social agiliza sobremanera la autenticación.

Diseño en cascada

  • Disponer los campos del formulario en una única columna para poder rellenarlos de arriba a abajo, con la etiqueta situada encima del campo de texto. Evitar posicionar tanto campos uno al lado de otro como etiquetas a la izquierda.
  • Siempre que sea posible, mostrar primero los campos obligatorios y/o más fáciles de rellenar. Se puede hacer una agrupación o, en caso de que el formulario sea más largo de lo habitual, dividirlo en pasos (no más de 4).

Toda ayuda es poca 

  • Señalar de forma clara y simple los campos requeridos. Incluir una ayuda visual si el valor a ingresar en un campo requerido es difícil de encontrar.
  • A la hora de elegir entre un listado de opciones, si dicha lista es corta, anteponer el uso de selectores al de desplegables.
  • Dejar que en la web el autocompletado tome el mando. En app, para agilizar el rellenado, se podría incluir la transición automática entre campos.
  • Otra buena práctica es marcar el campo que tiene actualmente el foco, sobretodo en app, ya que los dispositivos son más pequeños y es posible que no se vea el formulario completo.

 

Validación en línea

  •  Los mensajes de error poco claros son una fuente de frustración para cualquiera. Estos mensajes no tienen que culpar directamente al usuario y se deben ubicar en una posición intuitiva.
  • Asegurarse de que el usuario sepa corregir fácilmente los errores, y no avisar de ellos cuando el formulario esté completamente rellenado y se intente enviar. Mejor validar y alertar en cuanto un campo erróneo haya perdido el foco.
  • Se gana en experiencia de usuario si un formato incorrecto para un teléfono, un código postal, una tarjeta de crédito, etc. se corrige en el transcurso del envío, de manera que sea transparente para el usuario.

Políticas de seguridad en la contraseña

  •  No exceder las reglas a la hora de ingresar una contraseña. El hecho de obligar a un usuario a que su contraseña cumpla con unos requisitos que le impiden usar su contraseña habitual, o inventar una nueva que probablemente olvide, empuja a que se abandone el registro, y con ello el uso de la web o app.
  • Es más óptimo indicar visualmente la fuerza de la contraseña, porque esto no impide que el usuario se pueda registrar si la contraseña no es lo suficientemente segura, pero sí que advierte de la poca o mucha fiabilidad de la misma.
  • Incluir la opción de mostrar/ocultar la contraseña.
  • En las apps, hacer uso del reconocimiento de huella/rostro para autenticarse es un adelanto a tener muy en cuenta. El flujo sería el siguiente:
  1. Registro o inicio de sesión con correo electrónico y contraseña.
  2. Una vez dentro de la app presentar la sección de autenticación por huella/rostro (con la elección de no volver a mostrar).
  3. Cuando se vuelva a enseñar el formulario de acceso incluir la acción de autenticación por huella/rostro.

Envío de correos electrónicos

  • Evadir la confirmación de registro por correo electrónico. En caso de ser esencial confirmar el registro hacerlo por métodos que no requieran un cambio de contexto, como un sms si se trata del registro en una app.
  • Incluir siempre una opción para recuperar la contraseña. Si el usuario ya ha ingresado su correo electrónico en el login sería bueno trasladar ese valor a la pantalla de restablecimiento.
  • Enviar un enlace de restaurar contraseña, no una contraseña autogenerada, y hacer login automático tras este restablecimiento.

 

 

 

¿Qué beneficio se obtiene?

  • Mantener la privacidad y seguridad de nuestros datos es una lucha constante. A los usuarios nos gusta saber para qué se va a usar nuestra información personal. Por muy escueto que sea el formulario, es recomendable dar una breve explicación de por qué vale la pena rellenar el registro.
  • Tranquilizar al usuario explicándole que sus datos estarán seguros, y ofrecer una política que se acepte al pulsar en enviar, evitando así una confirmación adicional.
  • Sobra tiempo para rellenar más datos en una sección de perfil si el usuario lo considera oportuno.
  • Y como buen proceso anfitrión, como es el acceso a nuestra web o app, no hay que olvidar dar la bienvenida al usuario una vez haya accedido.

No hay una segunda oportunidad para causar una primera impresión, por eso los datos que se le pidan a un usuario deben estar bien estudiados, y ser los justos y necesarios para que este pueda hacer uso de todo lo que un producto digital ofrece.


Relacionado

  • Artículos
    17/03/2020
    Share
    El superpoder invisible del diseño accesible
    Diseñar pensando en una minoría puede hacernos abarcar de forma implícita a la gran mayoría. En publicidad, una campaña triunfa cuando rompe barreras, llegando a cuanta más gente mejor....
    Desarrollo Software a medida, Diseño UX UI
  • Artículos
    23/10/2019
    Share
    Lo complejo de simplificar
    Integrar un sistema de diseño en una gran organización para mejorar la marca propia o usar guías como Material Design en proyectos digitales y apps resulta realmente rentable.
    Diseño UX UI
  • Artículos
    06/08/2019
    Share
    UX/UI, olvidados pero omnipresentes
    El diseño de la interfaz y experiencia de usuario se basa en investigar y empatizar con cliente y usuario para equilibrar la balanza entre la parte estética y la...
    Diseño UX UI

Suscripción al Newsletter

¿Quieres estar al día?

Sigue la actualidad de Cuatroochenta y recibe nuestros últimos contenidos sobre tecnología y software para la mejora de procesos empresariales.

Suscribirse
  • Home
  • FAMA: Facility Management
  • CheckingPlan: Facility Services
  • Microsoft ERP
  • Zoho CRM
  • Software a medida
  • Sofistic: Ciberseguridad e identidad
  • Casos de éxito
  • Proyectos
  • Mobile App
  • Invoice System
  • Matrix Document Solutions
  • Escena Online
  • UareSAFE
  • USign
  • Somos
  • Trayectoria
  • Misión, visión y valores
  • Equipo
  • Premios y reconocimientos
  • Inversores
  • 480Academy
  • Contacto
  • Insights
  • Cátedra Cuatroochenta
  • Podcast
  • #EnModoAvión
  • Ecosistema
  • Área de prensa
  • Aviso legal
  • Política de seguridad
  • Trabaja en Cuatroochenta
Great Place to Work
© 2014 – 2023 Cuatroochenta
Síguenos en: 
  • Linkedin
  • Twitter
  • Youtube
  • Facebook
  • Instagram
  • Flickr
  • Telegram
  • Spotify
  • Español
    • English
Empresa cotizada en BME Growth
CookiesUtilizamos cookies propias y de terceros con finalidad analítica y para mostrarte publicidad personalizada en base a un perfil elaborado a partir de tus hábitos de navegación (por ejemplo, páginas visitadas). Haz clic aquí para obtener más información. Puedes aceptar todas las cookies pulsando el botón "Aceptar" o configurarlas o rechazar su uso pulsando el botón "Configurar".
Configurar cookiesAceptar todas las cookies
Gestionar consentimiento

Configuración de cookies

Cuatroochenta le informa que este sitio web utiliza cookies para mejorar su experiencia mientras navega por el sitio web. A continuación, encontrará información detallada sobre qué son las Cookies, qué tipología de cookies trata esta web y cómo configurarlas. Se considera cookies a cualquier tipo de archivo o dispositivo que se descarga en el equipo terminal de un usuario con la finalidad de almacenar datos que podrán ser actualizados y recuperados por la entidad responsable de su instalación. Se ubican en el disco duro del ordenador o terminal del Usuario, que archivan información sobre el uso que se realiza de un determinado Sitio Web. Las cookies solamente pueden ser leídas por el servidor que las colocó y no pueden ejecutar ningún programa o virus.
Necesarias
Siempre activado
Estas cookies son necesarias para que el sitio web funcione y no se pueden desactivar en nuestros sistemas. Por lo general, solo se configuran en respuesta a sus acciones realizadas al solicitar servicios, como establecer sus preferencias de privacidad, iniciar sesión o completar formularios. Puede configurar su navegador para bloquear o alertar sobre estas cookies, pero algunas áreas del sitio no funcionarán. Estas cookies no almacenan ninguna información de identificación personal.
Técnicas
Son aquellas que permiten al usuario la navegación a través de una página web, plataforma o aplicación y la utilización de las diferentes opciones o servicios que en ella existan, incluyendo aquellas que el editor utiliza para permitir la gestión y operativa de la página web y habilitar sus funciones y servicios, contar visitas a efectos de la facturación de licencias del software con el que funciona el servicio (sitio web, plataforma o aplicación), utilizar elementos de seguridad durante la navegación, almacenar contenidos para la difusión de vídeos o sonido, habilitar contenidos dinámicos o compartir contenidos a través de redes sociales, entre otras.
Analíticas
Las cookies analíticas se utilizan para comprender cómo interactúan los visitantes con el sitio web. Estas cookies ayudan a proporcionar información sobre métricas, el número de visitantes, la tasa de rebote, la fuente de tráfico, etc.
Publicitarias
Las cookies publicitarias se utilizan para proporcionar a los visitantes anuncios y campañas de marketing relevantes. Estas cookies rastrean a los visitantes en los sitios web y recopilan información para proporcionar anuncios personalizados.
Funcionales
Las cookies funcionales ayudan a realizar ciertas funciones, como compartir el contenido del sitio web en plataformas de redes sociales, recopilar comentarios y otras funciones de terceros.
GUARDAR Y ACEPTAR
Funciona con CookieYes Logo