Diseño De Formularios Web: Vitrinas Y Soluciones

The Smashing Editorial

Sobre el Autor

El equipo de Smashing ama el contenido de alta calidad y se preocupa por los pequeños detalles. A través de nuestros artículos en línea, Libros Sensacionales, Libros electrónicos y Sm Más sobre el Editorial Sensacional↬

  • 11 lectura mínima
  • Guardado para lectura sin conexión
  • Compartir en Twitter, LinkedIn

Este resumen presenta una selección cuidadosamente seleccionada y organizada de los artículos más útiles y populares de la revista Smashing relacionados con el diseño de formularios web y publicados aquí a lo largo de todos los años.

Descripción Rápida

  • Ideas Útiles Y Directrices Para Un Buen Diseño De Formularios Web
  • Diseño De Formularios Web: Vitrinas Y Soluciones
  • Diseño De Formularios Web: Soluciones Modernas e Ideas Creativas
  • Una Guía Extensa Para La Usabilidad De Los Formularios Web
  • En Busca De 3106>Validación de Formularios Web: Mejores Prácticas y Tutoriales
  • Validación de Campos de Formularios: El Enfoque de Solo Errores
  • Patrones de Diseño de Formularios Web: Formularios de Registro
  • Patrones de Diseño de Formularios Web: Formularios De Registro, Parte 2
  • Nuevos Enfoques Para Diseñar Formularios De Inicio De Sesión
  • Técnicas Innovadoras Para Simplificar Los Registros y Los Inicios De Sesión
  • Formularios Basados En CSS: Soluciones Modernas
  • Formularios En Dispositivos Móviles: Soluciones Modernas
  • Eliminación De Obstáculos En Formularios Móviles

Ideas útiles y Directrices Para Un Buen Diseño de Formularios Web

El formulario de entrada es un elemento esencial de casi cualquier sitio web o aplicación en estos días. La entrada es un método central de interacción, y en muchos casos representa el punto de conversión difícil entre el éxito y el fracaso. Con la cantidad de tiempo y esfuerzo en llevar a los usuarios a nuestra inscripción y formularios de contacto, es sorprendente que no tendemos a gastar una cantidad proporcional de tiempo en los mismos formularios.

 Mejores prácticas de Diseño de Formularios Web

Se pueden usar varias técnicas y elementos en formularios web para convertirlos de fallos abyectos en puntos de conversión exitosos. En este artículo, presentaremos algunos ejemplos interesantes y pautas útiles para el diseño de formularios web.

Leer más

Una Extensa Guía de Usabilidad de Formularios Web

Contrariamente a lo que puede leer, salpicar su formulario con bonitos botones, color y tipografía y muchos complementos de jQuery no lo hará utilizable. De hecho, al hacerlo, estaría abordando (de una manera no estructurada) solo un tercio de lo que constituye la usabilidad del formulario.

En este artículo, le proporcionaremos pautas prácticas que puede seguir fácilmente. Estas pautas se han elaborado a partir de pruebas de usabilidad, pruebas de campo, seguimiento de sitios web, seguimiento ocular, análisis web y quejas reales hechas al personal de atención al cliente por usuarios descontentos.

Leer más

Diseño de Formularios Web: Soluciones Modernas e Ideas Creativas

El formulario web es a menudo el principal canal de comunicación entre los visitantes y los propietarios del sitio. La retroalimentación siempre es importante, por lo que es necesario asegurarse de que los formularios web sean fáciles de entender e intuitivos de usar. Sin embargo, incluso en el diseño de formas uno puede permitirse una porción saludable de creatividad.

Los formularios web no tienen que ser aburridos y, usando CSS o Flash, puede asegurarse fácilmente de que sean atractivos y efectivos. Para llamar la atención, debe idear algo único e interesante: símbolos, iconos, colores, posición o el tamaño del formulario web a menudo se utilizan para lograr soluciones de diseño interesantes. Hemos buscado algunos ejemplos y los hemos encontrado. Formularios web creativos, originales e inusuales.

 Captura de pantalla

A continuación presentamos más de 40 (realmente) hermosos ejemplos de formularios web, así como soluciones modernas e ideas creativas relacionadas con el diseño de formularios web. Algunos de los ejemplos están basados en Flash; sin embargo, en la mayoría de los casos puede crear fácilmente diseños similares con CSS puro y (X)HTML.

Leer más

En Busca de las

s Perfectas, o Pruebas de Turing Públicas Completamente Automatizadas para Distinguir a las Computadoras y a los Humanos, existen para garantizar que la entrada del usuario no haya sido generada por una computadora. Estos peculiares rompecabezas se usan comúnmente en la Web para proteger los formularios de registro y comentarios del spam. Para ser honesto, tengo sentimientos encontrados sobre s. Me han molestado en muchas ocasiones, pero también los he implementado como soluciones rápidas en sitios web.

re

Este artículo sigue la búsqueda de la solución perfecta al problema de las cantidades crecientes de spam generado por humanos. Veremos cómo y por qué se usan las s y su efecto en la usabilidad para responder a preguntas clave: ¿cuál es el perfecto e incluso son deseables?

Leer más

Validación de formularios Web: Prácticas recomendadas y tutoriales

Idealmente, los usuarios llenarán el formulario web con la información necesaria y terminarán su trabajo con éxito. Sin embargo, la gente a menudo comete errores. Aquí es donde entra en juego la validación de formularios web. El objetivo de la validación de formularios web es garantizar que el usuario proporcione la información necesaria y con el formato adecuado para completar con éxito una operación. En este artículo, iremos más allá de la validación en sí y exploraremos diferentes técnicas, métodos y enfoques de validación y retroalimentación de errores.

 Formulario de registro de Facebook

La entrada del usuario se puede validar en el servidor y en el cliente (navegador web). Por lo tanto, tenemos validación del lado del servidor y del lado del cliente. Discutiremos los pros y los contras de cada uno. En la validación del lado del servidor, la información se envía al servidor y se valida utilizando uno de los idiomas del lado del servidor. Si la validación falla, la respuesta se envía de vuelta al cliente, la página que contiene el formulario web se actualiza y se muestra un comentario.

Leer más

Validación de campos de formulario: El Enfoque de solo errores

Las páginas de error para la validación de campos de formulario son terribles. Acabas de rellenar 20 campos de formulario, pero te devuelven la misma página hinchada a la cara porque un solo campo no se validó.

Recuerdo claramente los a menudo fuertes suspiros de desesperación durante nuestro último estudio de usabilidad cada vez que un sujeto de prueba encontró una página de error de validación.

También notamos que los sujetos de prueba que habían estado expuestos a errores de validación comenzaron a tomar acciones preventivas para evitarlos en pasos posteriores, escribiendo cosas como «N/A» en el campo «Nombre de la empresa» si tenían dudas sobre si el campo era opcional.

 Página de Error de Validación de Campos de Formulario en BlueNile.com

En el Instituto Baymard, reflexionamos sobre este problema y tuvimos una idea que llamamos «solo campos de error», que es exactamente de lo que trata este artículo. Antes de explorar esta idea, veamos tres tipos tradicionales de técnicas de validación: «recarga de la misma página»,» recarga optimizada de la misma página «y» validación en línea en vivo.»

Leer más

Patrones de diseño de formularios web: Formularios de registro

Si desea maximizar los ingresos de su servicio, debe maximizar las tasas de finalización de sus formularios web. A menos que tenga algunas ideas revolucionarias para impresionar a sus visitantes a primera vista, no es suficiente simplemente permitir que los usuarios se registren en su sitio. Para hacer posible que el servicio alcance una exposición máxima, nosotros, los diseñadores, necesitamos proporcionar a los usuarios una buena experiencia de usuario. Necesitamos invitarlos, describirles cómo funciona el servicio, explicarles por qué deben completar el formulario y sugerirles los beneficios que obtendrán a cambio. Y, por supuesto, también deberíamos facilitarles la participación.

Sin embargo, diseñar formularios web efectivos no es fácil. Y tiene una razón simple: a nadie le gusta rellenar formularios, ni fuera de línea ni en línea. Por lo tanto, como diseñadores, necesitamos tomar decisiones de diseño de sonido para hacer que la finalización del formulario sea fácil, intuitiva e indolora.

 Patrones de diseño de formularios web

Pero, ¿cómo podemos determinar exactamente estas decisiones? ¿Dónde debe colocarse el enlace al formulario en el diseño? ¿Cómo deberíamos diseñarlo? ¿Cómo debemos resaltar las etiquetas y cómo debemos alinearlas? ¿Cómo se ven los patrones de diseño de formularios web en los sitios web modernos? Estas son exactamente las preguntas que nos hemos hecho. Y para obtener las respuestas hemos realizado una encuesta.

A continuación presentamos los hallazgos de nuestra encuesta de patrones de diseño de formularios web actuales, los resultados de un análisis de 100 sitios web populares donde los formularios web (deberían) importar. Hemos decidido comenzar con los formularios de inscripción primero. Presentamos la primera parte de nuestros hallazgos a continuación; la segunda parte de los resultados de la encuesta se publicará la próxima semana.

Actualización: ahora también se publica la segunda parte de los resultados de la encuesta: Patrones de diseño de formularios Web: Formularios de inscripción, Parte 2.

Leer más

Patrones de diseño de formularios Web: Formularios de inscripción, Parte 2

La semana pasada presentamos los primeros resultados de nuestra encuesta de formularios web. El objetivo principal de la encuesta era proporcionar a los diseñadores y desarrolladores cierta intuición de cómo se diseñan los formularios web efectivos; también presentamos algunas pautas de cómo se puede lograr un formulario web efectivo y fácil de usar.

 Captura de pantalla

Nos hemos centrado en los formularios de registro, ya que queríamos considerar otros formularios cruciales (por ejemplo, formularios de pago) por separado. Después hemos revisado todos y cada uno de los formularios de registro de los sitios seleccionados y analizado los enfoques de diseño implementados en estos formularios. A continuación presentamos la segunda parte de nuestros hallazgos: los resultados de nuestra encuesta entre los formularios web de 100 sitios web populares donde los formularios web (deberían) importar.

Tenga en cuenta que esta publicación no se trata de formularios de pago, es un tema para otra discusión, podemos considerarlos por separado en una de las próximas publicaciones. Nos gustaría agradecer a Wufoo por proporcionarnos un marco para llevar a cabo nuestra encuesta.

Leer más

Nuevos enfoques Para diseñar Formularios de inicio de sesión

Para muchos de nosotros, iniciar sesión en sitios web es parte de nuestra rutina diaria. De hecho, probablemente lo hacemos tan a menudo que hemos dejado de tener que pensar en cómo se hace, es decir, hasta que algo sale mal: olvidamos nuestra contraseña, nuestro nombre de usuario, la dirección de correo electrónico con la que nos registramos, cómo nos registramos o incluso si alguna vez nos registramos.

Estas experiencias no solo son frustrantes para nosotros, sino que también son malas para las empresas. Cómo de malo? El análisis de User Interface Engineering 1 de un importante minorista en línea encontró que el 45% de todos los clientes tenían registros múltiples en el sistema, 160,000 personas solicitaron su contraseña todos los días, y el 75% de estas personas nunca completaron la compra que iniciaron una vez que solicitaron su contraseña.

 Gowalla
El formulario de inicio de sesión en Gowalla.

Para colmo, los visitantes que no han iniciado sesión no ven una vista personalizada del contenido y las recomendaciones de un sitio web, lo que reduce las tasas de conversión y la interacción. Entonces, ¿iniciar sesión es algo importante?—?lo suficientemente grande como para que algunos sitios web hayan comenzado a explorar nuevas soluciones de diseño para el viejo problema.

Leer más

Técnicas innovadoras Para simplificar los registros y los inicios de sesión

Hay muchas formas de diseñar formularios de registro e inicio de sesión. La mayoría de los diseñadores están familiarizados con las formas convencionales. Pero comprender y aplicar algunas técnicas innovadoras podría hacer que sus formularios sean más simples y eficientes de llenar. En este artículo, nos gustaría presentar un par de ideas nuevas que podrían ser útiles para sus próximos diseños. Tenga en cuenta que antes de usar estas técnicas, debe asegurarse de que tengan sentido en el contexto en el que las va a usar. Nos encantaría conocer sus estudios de caso y pruebas de usabilidad que afirmen o descarten las sugerencias que se proponen a continuación.

Leer más

Formularios basados en CSS: Soluciones modernas

Los formularios de registro y comentarios se pueden encontrar en todas partes. Cada nueva empresa trata de atraer la atención de los visitantes, por lo que los formularios web son cada vez más importantes para el éxito de cualquier empresa. Al final, exactamente esos formularios web son responsables del primer contacto con los clientes potenciales. Echemos un vistazo, qué soluciones modernas puede usar un desarrollador web, diseñando su próximo formulario basado en css. Enlaces revisados: 08 de mayo de 2008.

Leer más

Formularios en dispositivos móviles: Soluciones modernas

Los formularios móviles tienden a tener significativamente más restricciones que sus primos de escritorio: las pantallas son más pequeñas; las conexiones son más lentas; la entrada de texto es más complicada; la lista continúa. Por lo tanto, limitar el número de formularios en sus aplicaciones móviles y sitios web generalmente es una buena idea. Cuando desea que los usuarios ingresen en dispositivos móviles, los botones de opción, las casillas de verificación, los menús de selección y las listas tienden a funcionar mucho mejor que los campos de texto abiertos.

Pero las limitaciones fomentan la innovación, y las formas móviles no son diferentes. Las limitaciones de los dispositivos móviles han obligado a los desarrolladores y diseñadores a encontrar nuevas formas de permitir a los usuarios ingresar datos de forma más rápida y sencilla. Gracias a las soluciones modernas cubiertas en este artículo, el espacio móvil puede no ser un lugar para evitar formularios por mucho más tiempo. En cambio, puede convertirse en el lugar para alentarlos.

Leer más

Eliminar Obstáculos En Formularios Móviles

Hace unas semanas, me sorprendió bastante cuando vi que el pavimento se acercaba rápidamente mientras estaba dando un paseo. Yacía allí aturdida, pronto me di cuenta de lo que había pasado: me caí. Ouch. B-menos. Normalmente trato de estar lo más atento posible, pero esta vez una gran grieta en el pavimento atrapó mi zapato y me desequilibró completamente.

 Mobile stumble

Cuando se trata de rellenar formularios en un teléfono móvil, he observado que muchos usuarios se encuentran con una experiencia similar, simplemente menos dolorosa en su aspecto físico. Muchos elementos dentro de un formulario móvil afectan la fluidez con la que los usuarios acceden a un servicio o producto que se esconde detrás de un formulario de cualquier tipo.

Hay varios factores que se pueden considerar obstáculos a lo largo del proceso de llenar un formulario. Específicamente en un dispositivo portátil, este viaje se complica por el hecho de que tenemos que considerar parámetros contextuales como el tiempo, la ubicación o las opciones de entrada limitadas, en comparación con una experiencia de escritorio firme. En este post veremos los obstáculos más comunes para dispositivos móviles. Además, discutiré estrategias de diseño para evitar obstáculos y facilitar un paseo seguro y rápido por los formularios para los usuarios móviles.

Leer más

Descarga gratuita: Hoja de trucos Para Diseñar Formularios Web

Formularios, formularios, formularios: tan a menudo se pasan por alto en el diseño. En este post, nos complace publicar la Hoja de Trucos de Diseño de formularios, creada por Joe Leech y lanzada para la revista Smashing y sus lectores. Esta hoja para cuna contiene una plantilla Omnigraffle, así como ejemplos de Photoshop (PSD) y PDF para descargar y usar como desee. Imprima la hoja, péguela a su pared, envíela a los clientes y, en general, ayude a mejorar un poco las formas de todos.

 Diseño de formularios

Los diseñadores de la hoja de cuna han pasado años diseñando y probando formularios, y han decidido resumir los problemas y problemas más comunes que surgen en sus proyectos.

Leer más

Es posible que también le interesen las siguientes selecciones «Lo mejor de» :

  • Elementos De Diseño Web: Ejemplos Y Mejores Prácticas
  • Escaparate De Navegación De Diseño Web
  • Usabilidad & Experiencia De usuario

Deja una respuesta

Tu dirección de correo electrónico no será publicada.