Formularios
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,945
On Slideshare
1,908
From Embeds
37
Number of Embeds
2

Actions

Shares
Downloads
21
Comments
0
Likes
1

Embeds 37

http://webasignatura.ucu.edu.uy 24
http://uruguayparatodos.org 13

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Formularios http://www.ricardotayar.com/Disclaimer: Lamentablemente (para el autor) nada de esto es creación del autor, su único mérito es recopilar información reconociendo a losautores originales y presentarlo en un formato apropiado para servir de apoyo a las clases en Facultad de Ingeniería . No obstante, estapresentación puede contener opiniones del autor (en lo posible, pocas...).
  • 2. Diseño de Interacción Diseño de Interacción Interactividad • Capacidad de intercambiar información entre dos entes comunicativos usando elementos del diseño y acciones Nuevas formas de diseño interactivo, John Vega, Cristalab Perú 2007
  • 3. Diseño de Interacción Muchas formas de interacción • Enlaces, botones y menús de navegación – Estados • Link • Hover • Active • Visited • Mostrar y ocultar, información alternativa – Menús de navegación largos – Campos de formularios – Barras laterales – Bloques de contenido – Opciones de aplicaciones Nuevas formas de diseño interactivo, John Vega, Cristalab Perú 2007
  • 4. Diseño de Interacción Muchas formas de interacción • Tooltips, globos y notas – Información extra – Descripción de enlaces – Resumen de opciones – Detalles de descargas – Cortos comentarios – Notas en fotos • Mensajes, respuestas loops – Mensajes de estado – respuestas de formularios – Mensajes de búsqueda – Precargas • Efectos, animaciones y movimiento – Fade, Slide, Drag and drop, Bounce Nuevas formas de diseño interactivo, John Vega, Cristalab Perú 2007
  • 5. Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes?
  • 6. Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes? Dialogo real: Aspectos que ayudan en la comunicación (pistas visuales, detalles)
  • 7. Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes? Online: lo único que tenemos son formularios..
  • 8. Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes? Online: lo único que tenemos son formularios..
  • 9. Formularios Diseño de Interacción • Desde diversos dispositivos!!
  • 10. Formularios Asumámoslo… Odiamos llenar formularios!
  • 11. Formularios >> Buenas Prácticas Patrones – Buenas prácticas • Test de usabilidad – Errores, problemas, asistencias, tiempo/tarea, satisfacción del usuario • Testeo de campo – Ambiente, contexto • Soporte a clientes – Problemas más comunes, numero de incidentes • Encuestas de convenciones – Soluciones mas comunes, acercamientos únicos • Seguimiento del sitio – Puntos de entrada y salida, completitud de tareas, datos ingresados • Eye tracking – Número de miradas, longitud, mapas de calor, rutas Web Form Design - Luke Wroblewski
  • 12. Formularios >> Buenas Prácticas La receta para buenos formularios • Minimizar el dolor – A nadie le gusta llenar formularios – Valores por default inteligentes “Depende” • Iluminar el camino para el éxito Si tus objetivos son…, • Tener en cuenta el contexto prueba la solución… – Usuario familiarizado vs usuario nuevo – Usuario habitual vs usuario poco frecuente Si tus restricciones son…, prueba la solución… • Consistencia en la comunicación – Errores, ayuda, éxito – Única voz Web Form Design - Luke Wroblewski
  • 13. Formularios >> Buenas Prácticas >> Información Información
  • 14. Formularios >> Buenas Prácticas >> Información Información Layout Ingreso de datos Acciones Ayuda y tips • Posicionamiento de • Formatos, campos • Primaria y etiquetas requeridos secundaria • Agrupación de contenido
  • 15. Formularios >> Buenas Prácticas >> Información >> Layout Información Layout Ingreso de datos Acciones Ayuda y tips • Posicionamiento de • Formatos, campos • Primaria y etiquetas requeridos secundaria • Agrupación de contenido
  • 16. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado arriba  Requiere más espacio vertical  Espaciado o contraste es vital para permitir scanning eficiente  Flexibilidad para inputs complejos y de localización Web Form Design - Luke Wroblewski
  • 17. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado arriba Web Form Design - Luke Wroblewski
  • 18. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado a la derecha  Asociación clara entre etiqueta y campo  Requiere menos espacio vertical  Mas difícil escanear etiquetas  Tiempo de completado más rápido Web Form Design - Luke Wroblewski
  • 19. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado a la derecha Web Form Design - Luke Wroblewski
  • 20. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado a la izquierda  Permite scanear las etiquetas  La asociación entre etiqueta y campo no es tan clara  Requiere menos espacio vertical  Las diferencias en los largos de las etiquetas pueden resultar en layout desprolijos Web Form Design - Luke Wroblewski
  • 21. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado a la izquierda Web Form Design - Luke Wroblewski
  • 22. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Resultados Eye-Tracking • Estudio: Matteo Penzo, 2006 • Izquierda: – Fácil asociación entre etiqueta y campo – Mucha distancia entre etiquetas y campos hacia que se tomara mas tiempo • Derecha: – Numero de fijaciones reducida a la mitad – Tiempos de completado disminuido a la mitad • Arriba – Permite a usuarios capturar etiquetas y campos con un solo movimiento de ojo – Tiempos de completado mas rápidos Web Form Design - Luke Wroblewski
  • 23. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Posicionamiento de etiquetas • Para tiempo de completado reducido y datos de ingreso Buenas Prácticas familiares: top • Cuando el espacio vertical es una restricción: right • Para ingreso de datos no familiares y avanzados: left Web Form Design - Luke Wroblewski
  • 24. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Dentro de los campos • Antiguamente era recomendación de accesibilidad, ya no mas • Nunca usar como única información • Sí para facilitar usabilidad – Indicando ejemplo de valor – Desaparezca al posicionar el foco
  • 25. Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido Agrupación de contenido • Posibilidad de escanear información requerido a alto nivel • Saber cómo se relaciona la información en el formulario Web Form Design - Luke Wroblewski
  • 26. Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido Agrupación de contenido Web Form Design - Luke Wroblewski
  • 27. Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido Agrupación de contenido • Crear grupos lógicos para varios campos • Separar grupos visualmente Buenas Prácticas • Menor cantidad posible de elementos visuales para comunicar las relaciones Web Form Design - Luke Wroblewski
  • 28. Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido Tipos de campos • Usar martillo para clavos y destornilladores para tornillos… Buenas Prácticas
  • 29. Formularios >> Buenas Prácticas >> Información >> Ingreso de datos Información Layout Ingreso de datos Acciones Ayuda y tips • Posicionamiento de • Formatos, campos • Primaria y etiquetas requeridos secundaria • Agrupación de contenido
  • 30. Formularios >> Buenas Prácticas >> Información >> Ingreso de datos Ingreso de datos • Indicar campos requeridos cuando: – Muchos campos – Pocos son requeridos – Permite al usuario escanear el formulario para ver que es necesario llenar • Indicar campos opcionales cuando: – Muy pocos son opcionales • No indicar nada cuando: – Todos son requeridos Web Form Design - Luke Wroblewski
  • 31. Formularios >> Buenas Prácticas >> Información >> Ingreso de datos Ingreso de datos • Evitar campos opcionales Buenas Prácticas • Si la mayoría son requeridos – indicar los opcionales • Si la mayoría son opcionales – indicar los requeridos Web Form Design - Luke Wroblewski
  • 32. Formularios >> Buenas Prácticas >> Información >> Ingreso de datos Campos requeridos • Para marcar requeridos: * y texto • Ejemplo: * (requerido) – Al inicio y final del formulario Buenas Prácticas explicar significado de asteriscos. “Los campos marcados con * son requeridos” – Mostrar el asterisco en color diferente al de la etiqueta. – Situar el asterisco junto a la etiqueta, a la izquierda preferiblemente. Web Form Design - Luke Wroblewski
  • 33. Formularios >> Buenas Prácticas >> Información >> Ingreso de datos Largo del campo • Adecuado para el dato • Siempre que se pueda, mantener el mismo tamaño en todos los campos Buenas Prácticas Web Form Design - Luke Wroblewski
  • 34. Formularios >> Buenas Prácticas >> Información Información Layout Ingreso de datos Acciones Ayuda y tips • Posicionamiento de • Formatos, campos • Primaria y etiquetas requeridos secundaria • Agrupación de contenido
  • 35. Formularios >> Buenas Prácticas >> Información >>Acciones No todas las acciones son iguales • Reset, Cancel y Atrás – son acciones secundarias, no deberían ser usadas muy seguido • Guardar, Continuar y Enviar – son acciones primarias, directamente responsables por el llenado del formulario Web Form Design - Luke Wroblewski
  • 36. Formularios >> Buenas Prácticas >> Información >>Acciones Jerarquía visual • La presentación visual de la acción debe ser según su importancia Web Form Design - Luke Wroblewski
  • 37. Formularios >> Buenas Prácticas >> Información >>Acciones Ayudar al usuario Web Form Design - Luke Wroblewski
  • 38. Formularios >> Buenas Prácticas >> Información >>Acciones • Papeleta de votación del 10 Abril 1938. “¿Está usted de acuerdo con la reunificación de Austria con el Imperio Alemán y vota por el partido de nuestro líder Adolf Hitler?” El círculo grande dice “Si”, el chico dice “No” Wikipedia: http://en.wikipedia.org/wiki/German_election_and_referendum,_1938
  • 39. Formularios >> Buenas Prácticas >> Información >>Acciones Acciones • Evitar acciones secundarias, si es posible. Buenas Prácticas • Asegurar una distinción visual clara entre acciones primaria y secundaria • Alinear acciones primarias con campos de entrada para una ruta clara Web Form Design - Luke Wroblewski
  • 40. Formularios >> Buenas Prácticas >> Información Información Layout Ingreso de datos Acciones Ayuda y tips • Posicionamiento de • Formatos, campos • Primaria y etiquetas requeridos secundaria • Agrupación de contenido
  • 41. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Ayuda y tips • Útiles cuando: – Preguntan por datos poco familiares – Los usuarios pueden preguntarse porqué se solicita ese dato – Hay un formato recomendado de ingreso del dato – Algunos datos son opcionales • Si son demasiados, complica… – Que se muestren al hacer foco – Que se muestren a pedido del usuario Web Form Design - Luke Wroblewski
  • 42. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  • 43. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  • 44. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  • 45. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  • 46. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  • 47. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  • 48. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  • 49. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  • 50. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Ayuda y tips • Minimizar la cantidad de ayuda y tips requeridas Buenas Prácticas • La ayuda debe estar visible y adyacente al campo • Cuando se piden muchos datos complejos o que el usuario no esta familiarizado, considere usar un sistema de ayuda dinámico Web Form Design - Luke Wroblewski
  • 51. Formularios >> Buenas Prácticas >> Interacción Interacción
  • 52. Formularios >> Buenas Prácticas >> Interacción Interacción Guiar al final Tabulación Revelación Dependencias progresiva Web Form Design - Luke Wroblewski
  • 53. Formularios >> Buenas Prácticas >> Interacción >> Guiar al final Guiar hacia el final • Objetivo primario de todo formulario es que sea completado y enviado • Cada ingreso de datos requiere consideración y acción Web Form Design - Luke Wroblewski
  • 54. Formularios >> Buenas Prácticas >> Interacción >> Guiar al final Pedir poco • Eliminar todos los pedidos innecesarios de datos Buenas Prácticas www.msp.gub.uy - Registrarse
  • 55. Formularios >> Buenas Prácticas >> Interacción >> Guiar al final Default inteligentes • Lo más usado • Lo recomendado Buenas Prácticas Web Form Design - Luke Wroblewski
  • 56. Formularios >> Buenas Prácticas >> Interacción >> Guiar al final “Iluminar el camino al final” Buenas Prácticas Web Form Design - Luke Wroblewski
  • 57. Formularios >> Buenas Prácticas >> Interacción >> Guiar al final Por partes • Formularios largos – Dividir – Mostrar progreso Buenas Prácticas – Salvar “borrador” Web Form Design - Luke Wroblewski
  • 58. Formularios >> Buenas Prácticas >> Interacción >> Tabulación Tabulación • Muchos usuarios interactúan con un formulario tabulando entre campos • El marcado correcto de HTML asegura que el tabulador funcione como se espera Web Form Design - Luke Wroblewski
  • 59. Formularios >> Buenas Prácticas >> Interacción >> Tabulación Varias columnas • Formularios con varias columnas pueden generar conflictos Web Form Design - Luke Wroblewski
  • 60. Formularios >> Buenas Prácticas >> Interacción >> Tabulación Tabulación • El marcado correcto de HTML asegura que el tabulador funcione como se Buenas Prácticas espera • Probar siempre el formulario usando solamente el teclado Web Form Design - Luke Wroblewski
  • 61. Formularios >> Buenas Prácticas >> Interacción >> Revelación progresiva Revelación progresiva • Opciones adicionales cuando es necesario, Buenas Prácticas no antes. – Opciones avanzadas – Compromiso gradual Web Form Design - Luke Wroblewski
  • 62. Formularios >> Buenas Prácticas >> Interacción >> Dependencias Ingreso de datos dependientes • Un dato requiere o permite ingresar otros datos dependientes Web Form Design - Luke Wroblewski
  • 63. Formularios >> Buenas Prácticas >> Interacción >> Dependencias Página intermedia • Requiere pasos adicionales Web Form Design - Luke Wroblewski
  • 64. Formularios >> Buenas Prácticas >> Interacción >> Dependencias Tabs • Requiere default inteligentes • Pueden pasar desapercibidos Web Form Design - Luke Wroblewski
  • 65. Formularios >> Buenas Prácticas >> Interacción >> Dependencias Selectores de sección • Agrupa información efectivamente • Esconde alguna información Web Form Design - Luke Wroblewski
  • 66. Formularios >> Buenas Prácticas >> Interacción >> Dependencias Inactivo hasta que se selecciona • Asociación entre la selección primaria se deteriora Web Form Design - Luke Wroblewski
  • 67. Formularios >> Buenas Prácticas >> Interacción >> Revelación progresiva Revelación progresiva • Mantener la relación con la selección inicial clara Buenas Prácticas • Asociar claramente los campos adicionales con su disparador • Evitar "saltar" des-asociando las opciones de selección iniciales Web Form Design - Luke Wroblewski
  • 68. Formularios >> Buenas Prácticas >> Feedback Feedback http://www.bang2write.com/2012/08/how-to-feed-back-on-others-work-by-samuel-caine.html
  • 69. Formularios >> Buenas Prácticas >> Feedback >> Validación inline Validación inline • Feedback directo mientras se ingresan los datos – Valida datos – Sugiere datos validos – Ayuda a los usuarios a Web Form Design - Luke Wroblewski
  • 70. Formularios >> Buenas Prácticas >> Feedback >> Validación inline Validación de nombre de usuario Web Form Design - Luke Wroblewski
  • 71. Formularios >> Buenas Prácticas >> Feedback >> Validación inline Otros ejemplos • Sugerencias de datos válidos • Conteo de caracteres Web Form Design - Luke Wroblewski
  • 72. Formularios >> Buenas Prácticas >> Feedback >> Validación inline Validación inline • Para datos que tienen un alta probabilidad de erro Buenas Prácticas • Usar datos sugeridos para desambiguar • Comunicar los limites Web Form Design - Luke Wroblewski
  • 73. Formularios >> Buenas Prácticas >> Feedback >> Errores Errores • Asegurar que todos los datos requeridos son validos • Etiquetas claras, ayudas, tips y validaciones ayudan a reducir errores • Pero algunos errores pueden ocurrir • Proveer una resolución clara en la menor cantidad posible de pasos Web Form Design - Luke Wroblewski
  • 74. Formularios >> Buenas Prácticas >> Feedback >> Errores Errores Web Form Design - Luke Wroblewski
  • 75. Formularios >> Buenas Prácticas >> Feedback >> Errores Formularios cortos Web Form Design - Luke Wroblewski
  • 76. Formularios >> Buenas Prácticas >> Feedback >> Errores Web Form Design - Luke Wroblewski
  • 77. Formularios >> Buenas Prácticas >> Feedback >> Errores Errores • Comunicar claramente cuando un error ha ocurrido: Buenas Prácticas – arriba con contraste visual • Indicar cómo corregir los errores • Asociar el campo con el error Web Form Design - Luke Wroblewski
  • 78. Formularios >> Buenas Prácticas >> Feedback >> Progreso Progreso • Algunas acciones requieren tiempo de procesamiento – Envío de formulario – Cálculos – Uploads Web Form Design - Luke Wroblewski
  • 79. Formularios >> Buenas Prácticas >> Feedback >> Progreso Progreso • Dar indicaciones sobre la tarea en progreso • Deshabilitar botón de envío para evitar Buenas Prácticas envíos duplicados Web Form Design - Luke Wroblewski
  • 80. Formularios >> Buenas Prácticas >> Feedback >> Éxito Éxito • Comunicar claramente que el envío del formulario fue exitoso Buenas Prácticas • Proveer feedback en el contexto de los datos enviados Web Form Design - Luke Wroblewski
  • 81. Formularios >> Buenas Prácticas >> Feedback >> Éxito Web Form Design - Luke Wroblewski
  • 82. Formularios >> Buenas Prácticas >> Feedback >> Éxito • a Web Form Design - Luke Wroblewski
  • 83. Formularios >> Buenas Prácticas >> Otras Otras buenas prácticas • Evitar cambiar datos ingresados por el usuario Buenas Prácticas • Si hay información que no es fácil de obtener, avisar al usuario antes de presentarle el formulario Web Form Design - Luke Wroblewski
  • 84. Formularios >> Buenas Prácticas >> Otras Títulos • Titular formularios • Texto introductorio • Titulo de grupos • Etiquetas de los campos
  • 85. Formularios >> Buenas Prácticas >> Otras Página inicial • Si el proceso es complejo y demorado e involucra muchos pasos • Crear una pagina de introducción donde se indican necesidades y restricciones
  • 86. Formularios >> Buenas Prácticas >> Otras Mensajes • Hacer un inventario de todos los posibles mensajes, como y donde serán usados – Para simplificar, reutilizar y garantizar consistencia • Mensajes de ERROR! – Solamente cuando es imposible continuar – Los demás mensajes NO son errores • Evitar paginas de error sin salida
  • 87. Ejemplo Favorece – Registro de usuario: http://favorece.net/user/register
  • 88. Ejemplo Favorece – Registro de usuario: http://favorece.net/user/register
  • 89. Ejemplo Favorece – Registro de usuario: http://favorece.net/user/register
  • 90. Lecturas recomendadas – Web Form Design - Luke Wroblewski (ebay, yahoo) • http://rosenfeldmedia.com/books/webforms/ – Olga Carreras • http://olgacarreras.blogspot.com/2007/02/formularios- usables-60-directrices-de.html – Usolab • http://www.usolab.com/articulos/abril3_04.phpImágenes y conceptos de esta presentación son tomadas de las lecturas recomendadas