22/03/2015

Autocompletar: optimizando el ingreso de información en nuestro sitio web

Autocompletar: optimizando el ingreso de información en nuestro sitio web

En nuestro último artículo conocimos tres maneras de mejorar el ingreso de datos a través de formularios de búsqueda. Hoy conoceremos a fondo una de ellas: la función de autocompletar, que consiste en acercarle al usuario una lista de palabras sugeridas a medida que escribe en uno de los campos del formulario.

En sitios web, esta herramienta se utiliza para completar los campos de cualquier tipo de formularios, no solo de búsqueda. Por ejemplo, es común que, al completar el campo de un formulario, el browser nos acerque la lista de términos que ya ingresamos anteriormente en ese mismo campo. En dispositivos móviles, esta función puede ahorrarnos trabajo para escribir un mensaje o la dirección de un sitio web. En procesadores de texto, puede facilitarnos la fecha actual cuando escribimos una carta. En programas de correo electrónico, puede ahorrarnos el trabajo de escribir varias veces los datos de un mismo destinatario. En entornos de desarrollo, puede ayudarnos a completar palabras reservadas del lenguaje que estemos usando.

Según una wiki de desarrolladores de Nokia, es ideal utilizar esta característica en los siguientes casos:

  1. Las posibles opciones para completar la frase son finitas y fácilmente manejables por el usuario (por ejemplo, una lista de direcciones de email).
  2. Son importantes la velocidad y la exactitud de los datos ingresados (por ejemplo, en sitios para reservar vuelos).
  3. Las opciones pueden ser validadas, así sea contra información que el usuario ingresó en el pasado, o bien a través de consultas a bases de datos, bibliotecas del back-end, etc.

Hay escenarios donde la lista de opciones es fija, es decir, no variará de acuerdo a elecciones previas del usuario o a circunstancias del momento (como sería el caso de una lista de vuelos disponibles). Si hay muchas opciones (por ejemplo, la lista de todos los países del mundo), es mejor utilizar el control select. Si hay alrededor de cinco opciones (por ejemplo, una lista de montos disponibles para donar), lo ideal es una lista de radio buttons.

Por último, para proteger la seguridad del usuario, es aconsejable deshabilitar el autocompletado del browser en campos de formulario destinados a información sensible, como, por ejemplo, el número de tarjeta de crédito.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce