Uploaded on

 

More in: Technology
  • 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,785
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
22
Comments
0
Likes
1

Embeds 0

No embeds

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