Saltar al contenido
  • Somos
  • Contacto
Cuatroochenta
  • Servicios
  • Proyectos
  • Productos
  • Ciberseguridad
  • Somos
  • Contacto
  • Todo Cuatroochenta

    Servicios y productos

    CheckingPlan Gestión de servicios Invoice System Digitalización de facturas UareSAFE Mobile Endpoint Security Alejandría Gestión documental Geombo Gestión de flotas Escena Online Venta de entradas USign Firma Certificada Digital Móvil Ágora Gestión de actas Sefici Gestión de incidencias 

    Desarrollo de aplicaciones cloud

    Aplicaciones interoperables Arquitectura orientada a microservicios Data & Analytics Customer Experience Análisis de requisitos funcionales y técnicos

    Software de gestión empresarial Microsoft

    Dynamics 365 Business Central Power BI

    Sofistic Cybersecurity

    Security Operations Center 24x7 Productos Ciberseguridad Servicios Ciberseguridad

    Be Cuatroochenter

    Agenda 480Academy Ecosistema Trabaja en Cuatroochenta Invierte en Cuatroochenta Área de prensa
    • CheckingPlan - Gestión de servicios
    • Invoice System - Digitalización de facturas
    • UareSAFE - Mobile Endpoint Security
    • Alejandría - Gestión documental
    • Geombo - Gestión de flotas
    • Escena Online - Venta de entradas
    • USign - Firma Certificada Digital Móvil
    • Ágora - Gestión de actas
    • Sefici - Gestión de incidencias 
    • Aplicaciones interoperables
    • Arquitectura orientada a microservicios
    • Data & Analytics
    • Customer Experience
    • Análisis de requisitos funcionales y técnicos
    • Dynamics 365 Business Central
    • Power BI
    • Security Operations Center 24x7
    • Productos Ciberseguridad
    • Servicios Ciberseguridad
    • Agenda
    • 480Academy
    • Ecosistema
    • Trabaja en Cuatroochenta
    • Invierte en Cuatroochenta
    • Área de prensa
Artículos

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

Diseño UX UI
Home Artículos
WhatsApp Linked In Twitter Facebook
Autor: Ester Caballer Romero
Ingeniera informática y desarrolladora de apps para iOS en Cuatroochenta
Fecha: 10/08/2020
Tags: desarrollo app, login, Mainfram, registro, User Experience, User Interface
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
    WhatsApp Linked In Twitter Facebook 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....

    Diseño UX UI

  • Artículos
    23/10/2019
    WhatsApp Linked In Twitter Facebook 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
    WhatsApp Linked In Twitter Facebook 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

Suscríbete a nuestra newsletter

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

Suscribirse
  • Home
  • Servicios
  • Análisis y asesoramiento
  • Planificación de proyecto
  • Diseño UI/UX
  • Implantación de soluciones
  • Desarrollo de software cloud
  • Quality Assurance y Ciberseguridad
  • Puesta en producción
  • Mantenimiento y soporte
  • Proyectos
  • Casos de éxito
  • Apps
  • Estrategia digital
  • Productos
  • CheckingPlan
  • USign
  • UareSAFE
  • Ciberseguridad
  • Somos
  • Trayectoria
  • Misión, visión y valores
  • Equipo
  • Premios y reconocimientos
  • Inversores/as y accionistas
  • 480Academy
  • Contacto
  • Ecosistema
  • Xarxatec
  • #EnModoAvión
  • Hackathon
  • Blast Off Partners
  • Archivo
  • Área de prensa
  • Aviso legal
  • Trabaja en Cuatroochenta
Great Place to Work
© 2014 – 2021 Cuatroochenta
  • Linkedin
  • Twitter
  • Youtube
  • Facebook
  • Instagram
  • Flickr
  • Telegram
  • Español
    • Italiano
    • English
Empresa cotizada en BME Growth

Configuración de cookies

Cuatroochenta le informa que este sitio web utiliza cookies. 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.

Cookies estrictamente necesarias: Siempre activo

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.

Cookies de rendimiento, análisis, personalización y publicidad:

Estas cookies nos permiten contar las visitas y fuentes de tráfico para poder evaluar el rendimiento de nuestro sitio y mejorarlo. Nos ayudan a saber qué páginas son las más o las menos visitadas, y cómo los visitantes navegan por el sitio. Toda la información que recogen estas cookies es agregada y, por lo tanto, es anónima. Si no permite utilizar estas cookies, no sabremos cuándo visitó nuestro sitio y no podremos evaluar si funcionó correctamente.