{"id":7959,"date":"2019-05-06T10:13:17","date_gmt":"2019-05-06T10:13:17","guid":{"rendered":"https:\/\/www.conectasoftware.com\/?p=7959"},"modified":"2024-02-02T18:12:13","modified_gmt":"2024-02-02T18:12:13","slug":"diseno-buen-formulario","status":"publish","type":"post","link":"https:\/\/www.conectasoftware.com\/magazine\/diseno-buen-formulario\/","title":{"rendered":"C\u00f3mo dise\u00f1ar un buen formulario"},"content":{"rendered":"\n

Conocer al cliente es una de las claves<\/strong> para conseguir el \u00e9xito en tu negocio, y si nos referimos a los negocios online, una de las mejores maneras de alcanzar ese conocimiento es el uso de formularios y cuestionarios.<\/span>
 <\/p>\n\n\n\n

\u00bfQu\u00e9 son los formularios?<\/span><\/h2>\n\n\n\n

Los formularios son uno de los tipos m\u00e1s importantes de interacci\u00f3n de usuarios en el mundo web<\/strong> y de aplicaciones siendo la principal herramienta de comunicaci\u00f3n entre nuestra aplicaci\u00f3n y el usuario. Se usan en todos lados: para registros, servicios de suscripci\u00f3n, retroalimentaci\u00f3n de clientes, compras, para interacciones iniciales entre usuarios y empresas. <\/span>
Los desarrolladores de <\/span>p\u00e1ginas web<\/span> deben prestar atenci\u00f3n especial para mejorar sus formularios y hacerlos lo m\u00e1s \u00fatiles posibles<\/span> porque un dise\u00f1o web de formulario tiene un impacto grande en la velocidad en que los usuarios puede completar un formulario.<\/span><\/span>
 <\/p>\n\n\n\n

Objetivos de los formularios <\/span><\/h2>\n\n\n\n

En primer lugar, debemos tomar en cuenta que nadie va a completar un formulario por gusto<\/strong>. Normalmente solicitan datos sensibles, informaci\u00f3n que no est\u00e1 a la mano y adem\u00e1s, completarlos lleva tiempo.<\/span>
Como dise\u00f1ador, est\u00e1 todo en contra para enfrentarte a esto y se debe ser muy cuidadoso. Presenta un objetivo claro y valioso para el usuario<\/span>. Inv\u00edtalos a registrarse, iniciar sesi\u00f3n, comprar, etc. Esta ser\u00e1 su \u00fanica motivaci\u00f3n y el punto de partida de nuestro trabajo.<\/span>
 <\/p>\n\n\n\n

\n

No s\u00f3lo los dise\u00f1adores han mejorado, los usuarios se han acostumbrado a los entornos interactivos.<\/span><\/em><\/p>\n<\/blockquote>\n\n\n\n

\"Formulario<\/figure>\n\n\n\n

Las 4 \u2018\u2019C\u2019\u2019 del buen Dise\u00f1o en Internet<\/span><\/h2>\n\n\n\n

Claro<\/strong><\/span><\/h3>\n\n\n\n

La claridad viene influenciada por diversas cosas como: el lenguaje utilizado, el dise\u00f1o de la forma y las acciones que est\u00e1n disponibles para el usuario. <\/strong><\/span>Al dise\u00f1ar los componentes, se tiene la intenci\u00f3n de <\/span>casar el prop\u00f3sito del formulario con la perspectiva del relleno de formularios. Por ello, es importante tener una comprensi\u00f3n profunda de los usuarios espec\u00edficos<\/span> y el contexto de su uso. <\/span><\/span>La consistencia es otro enfoque que mejora la claridad. Esta hace que la forma sea perceptible y aprendible. <\/span><\/p>\n\n\n\n

Conciso<\/strong><\/span><\/h3>\n\n\n\n

La concisi\u00f3n trata de recoger la informaci\u00f3n necesaria de la manera m\u00e1s eficiente<\/strong>. Hay  personas que creen err\u00f3neamente que una buena forma es corta. Apuntan al menor n\u00famero posible de p\u00e1ginas o pantallas y al menor n\u00famero de preguntas.<\/span>
<\/span>Sin embargo, la calidad no est\u00e1 relacionada linealmente con la longitud.<\/span> Debido a, que las cosas que agregan longitud, como preguntas adaptadas a diferentes circunstancias, a menudo mejoran la experiencia de la persona que completa el formulario.<\/span><\/span><\/p>\n\n\n\n

Inteligente<\/strong><\/span><\/h3>\n\n\n\n

Hacer que el formulario sea inteligente reduce la carga de trabajo para el usuario.<\/strong><\/span>
<\/span>El nivel m\u00e1s b\u00e1sico de inteligencia proviene de la \u00absecuenciaci\u00f3n\u00bb<\/span>. La secuenciaci\u00f3n es el proceso de dirigir al usuario alrededor del formulario, omitiendo preguntas que no se aplican a ellos.<\/span>
<\/span>La inteligencia de las formas realmente se hace realidad en el \u00e1mbito electr\u00f3nico. Aqu\u00ed, la secuenciaci\u00f3n puede ser automatizada, las entradas pueden ser restringidas  y muchas otras inteligencias, como el c\u00e1lculo de totales, pueden integrarse.<\/span>
<\/span>Las formas que no son inteligentes no solo son una carga, son frustrantes.<\/span><\/span><\/p>\n\n\n\n

Cooperativa<\/strong><\/span><\/h3>\n\n\n\n

Y por \u00faltimo, una buena forma trabaja con el formulario de relleno, es decir, es cooperativa.<\/strong><\/span>
<\/span>Ser cooperativo tiene que ver con meterse en \u2018la piel\u2019 del formulario<\/span> de relleno y hacer lo que har\u00e1 que la experiencia sea mejor para ellos. En concreto, las formas cooperativas:<\/span><\/span><\/p>\n\n\n\n

    \n
  • Manejar las expectativas<\/strong><\/span><\/li>\n\n\n\n
  • Coincidir con el modelo mental<\/strong> del usuario<\/span><\/li>\n\n\n\n
  • Proporcionar definiciones y l\u00edmites expl\u00edcito<\/strong>s.<\/span><\/li>\n\n\n\n
  • Dar informaci\u00f3n de fondo<\/strong> y explicaciones y son consistentes pero flexibles.<\/span><\/li>\n<\/ul>\n\n\n\n

     
    En el medio electr\u00f3nico, ser cooperativo es tambi\u00e9n sobre:<\/span><\/p>\n\n\n\n

      \n
    • Confirmando antes de la presentaci\u00f3n,<\/strong> y permitiendo la modificaci\u00f3n<\/span><\/li>\n\n\n\n
    • Siendo libre de errores<\/strong> y estable.<\/span><\/li>\n<\/ul>\n\n\n\n

      Recomendaciones para el dise\u00f1o de la p\u00e1gina<\/span><\/h2>\n\n\n\n

      #1<\/span> Usa el campo derecho para la tarea.<\/span><\/h3>\n\n\n\n

      Con tantos elementos de forma para elegir, cada uno con distintas ventajas y desventajas, puede ser dif\u00edcil decidir qu\u00e9 elementos usar en una situaci\u00f3n dada. Use los botones de opci\u00f3n, las casillas de verificaci\u00f3n y las casillas de selecci\u00f3n de forma adecuada:<\/strong> para los botones de opci\u00f3n o casillas de verificaci\u00f3n, use las etiquetas <\/span>fieldset<\/span>y <\/span>legend<\/span>para agrupar los elementos l\u00f3gicamente bajo un encabezado obvio. Esta agrupaci\u00f3n mantiene la forma manejable para los usuarios, ya que puede dividirse en pedazos m\u00e1s peque\u00f1os en sus mentes.<\/span><\/span><\/p>\n\n\n\n

      #2<\/span> Dales espacio para escribir<\/span><\/h3>\n\n\n\n

      Igualmente importante para tomar la decisi\u00f3n correcta sobre el tipo de campo es especificar la longitud correcta del campo.<\/strong> Solo porque su nombre sea Ana Hache no significa que otros usuarios no necesiten m\u00e1s espacio para ingresar sus nombres. Proporcione al menos 20 caracteres para cada uno de los campos de nombre y apellido. <\/span><\/p>\n\n\n\n

      #3<\/span> Da paso al call to action: <\/span><\/h3>\n\n\n\n

      Dotando a la <\/span>llamada a la acci\u00f3n<\/strong> de un peso visual superior<\/span> a la acci\u00f3n secundaria conseguiremos reducir los errores y dar a los usuarios la posibilidad de acceder de forma f\u00e1cil por medio del teclado.<\/span><\/span><\/p>\n\n\n\n

      #4<\/span> Evita botones para restablecer y borrar los datos introducidos: <\/span><\/h3>\n\n\n\n

      Aunque actualmente ya no resulta una pr\u00e1ctica muy com\u00fan, existe la posibilidad de encontrarla en dise\u00f1os m\u00e1s antiguos.<\/strong><\/span><\/p>\n\n\n\n

      #5<\/span> Marque los campos obligatorios claramente<\/span><\/h3>\n\n\n\n

      Algunos campos deben completarse para completar la transacci\u00f3n: si est\u00e1 vendiendo un bien f\u00edsico, obviamente necesitar\u00e1 una direcci\u00f3n de env\u00edo. Al igual que con la mensajer\u00eda de errores, brinde a los usuarios pistas visuales sobre qu\u00e9 campos se requieren. <\/strong><\/span><\/p>\n\n\n\n

      #6<\/span> Proporcione etiquetas descriptivas para todos sus campos<\/span><\/h3>\n\n\n\n

      \u00bfDe qu\u00e9 sirve un campo de formulario sin saber qu\u00e9 se supone que debe ingresar al campo? Utilice la etiqueta para garantizar que se mantenga la accesibilidad para todos los usuarios. Adem\u00e1s, aseg\u00farese de que sus etiquetas sean lo suficientemente descriptivas<\/strong> para que los usuarios no cuestionen lo que se espera en ese campo. <\/span><\/p>\n\n\n\n

      #7<\/span> Utilizar mensajes de error informativos.<\/span><\/h3>\n\n\n\n

      E<\/span>s totalmente necesario indicar a los usuarios de forma visual si han tenido un error en la cumplimentaci\u00f3n del formulario, pero tan importante o m\u00e1s es indicarle c\u00f3mo resolver ese error<\/strong> y\/o el porqu\u00e9 se ha producido.<\/span><\/span>
       <\/p>\n\n\n\n

      Jakob Nielsen \u00bbEl padre de la Usabilidad\u00bb<\/span><\/h2>\n\n\n\n

      Jakob Nielsen<\/b><\/span> nacido en Dinamarca, es una de las personas m\u00e1s respetadas y pionero<\/span><\/span> en el \u00e1mbito mundial sobre la usabilidadweb.<\/span><\/strong> Este ingeniero obtuvo su doctorado en dise\u00f1o de interfaces de usuario y ciencias de la computaci\u00f3n en la Universidad T\u00e9cnica de Dinamarca. Su andadura profesional le ha hecho pasar por empresas como Bellcore, IBM y Sun Microsystems. Actualmente figura como co-fundador de Nielsen Norman Group con Donald Norman, otro experto en usabilidad.<\/strong><\/span><\/p>\n\n\n\n

      Su trayectoria comenz\u00f3 en\u00a01997\u00a0cuando escribi\u00f3 dos breves art\u00edculos sobre c\u00f3mo preparar los textos. Los t\u00edtulos de estos art\u00edculos fueron\u00a0\u00a1Sea breve! (escribir para la web)<\/i>\u00a0<\/span>y\u00a0C\u00f3mo leen los usuarios en la web<\/i>.<\/span> Las ideas de los art\u00edculos de Nielsen se citan en muchos otros art\u00edculos que ofrecen pautas sobre c\u00f3mo escribir para la\u00a0web\u00a0y mejorar su\u00a0usabilidad.<\/span>
      Nielsen se basaba en que lo habitual es que un usuario no lea con detalle ni siquiera una m\u00ednima parte de los textos de una p\u00e1gina web<\/strong>. En su lugar, y por econom\u00eda de tiempo, el usuario se limita a ojear la p\u00e1gina. Es decir, el usuario realiza un r\u00e1pido\u00a0barrido visual\u00a0de cada p\u00e1gina buscando elementos que llamen su atenci\u00f3n. Por tanto es fundamental la utilizaci\u00f3n de elementos como:<\/span><\/p>\n\n\n\n

        \n
      • Palabras resaltadas<\/strong> mediante negrita y cambios de color o de tama\u00f1o.  Los hiperv\u00ednculos act\u00faan como elementos de atracci\u00f3n visual pues se destacan del resto del texto.<\/span><\/li>\n\n\n\n
      • Listas de elementos con vi\u00f1etas<\/strong> o numeradas.<\/span><\/li>\n\n\n\n
      • T\u00edtulos de secci\u00f3n y titulares breves intercalados<\/strong>.<\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

        Conocer al cliente es una de las claves para conseguir el \u00e9xito en tu negocio, y si nos referimos a los negocios online, una de las mejores maneras de alcanzar ese conocimiento es el uso de formularios y cuestionarios.  \u00bfQu\u00e9 son los formularios? Los formularios son uno de los tipos m\u00e1s importantes de interacci\u00f3n de […]<\/p>\n","protected":false},"author":1,"featured_media":8012,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[23],"tags":[],"class_list":{"0":"post-7959","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-diseno-web"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/7959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/comments?post=7959"}],"version-history":[{"count":2,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/7959\/revisions"}],"predecessor-version":[{"id":40024,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/7959\/revisions\/40024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/8012"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=7959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/categories?post=7959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/tags?post=7959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}