Formularios                                                                                          http://www.ricardotay...
Diseño de Interacción                        Diseño de Interacción            Interactividad            • Capacidad de int...
Diseño de Interacción          Muchas formas de interacción       • Enlaces, botones y menús de         navegación        ...
Diseño de Interacción          Muchas formas de interacción       • Tooltips, globos y notas             –   Información e...
Formularios              Diseño de Interacción     • Formularios: ¿Por qué son importantes?
Formularios              Diseño de Interacción     • Formularios: ¿Por qué son importantes?                               ...
Formularios              Diseño de Interacción     • Formularios: ¿Por qué son importantes?                               ...
Formularios              Diseño de Interacción     • Formularios: ¿Por qué son importantes?                               ...
Formularios              Diseño de Interacción     • Desde diversos       dispositivos!!
Formularios               Asumámoslo…              Odiamos llenar               formularios!
Formularios >> Buenas Prácticas            Patrones – Buenas prácticas     • Test de usabilidad           – Errores, probl...
Formularios >> Buenas Prácticas                      La receta para buenos                            formularios      • M...
Formularios >> Buenas Prácticas >> Información                                        Información
Formularios >> Buenas Prácticas >> Información                                        Información    Layout               ...
Formularios >> Buenas Prácticas >> Información >> Layout                                        Información    Layout     ...
Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas                                  Al...
Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas                                  Al...
Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas                       Alineado a la...
Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas                       Alineado a la...
Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas                      Alineado a la ...
Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas                      Alineado a la ...
Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas                  Resultados Eye-Tra...
Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas    Posicionamiento de etiquetas    ...
Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas                       Dentro de los...
Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido             Agrupación de contenido     ...
Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido             Agrupación de contenido     ...
Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido             Agrupación de contenido    •...
Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido                               Tipos de c...
Formularios >> Buenas Prácticas >> Información >> Ingreso de datos                                        Información    L...
Formularios >> Buenas Prácticas >> Información >> Ingreso de datos                                Ingreso de datos     • I...
Formularios >> Buenas Prácticas >> Información >> Ingreso de datos                                Ingreso de datos     • E...
Formularios >> Buenas Prácticas >> Información >> Ingreso de datos                           Campos requeridos     • Para ...
Formularios >> Buenas Prácticas >> Información >> Ingreso de datos                                Largo del campo     • Ad...
Formularios >> Buenas Prácticas >> Información                                        Información    Layout               ...
Formularios >> Buenas Prácticas >> Información >>Acciones                No todas las acciones son                        ...
Formularios >> Buenas Prácticas >> Información >>Acciones                                 Jerarquía visual     • La presen...
Formularios >> Buenas Prácticas >> Información >>Acciones                              Ayudar al usuario                  ...
Formularios >> Buenas Prácticas >> Información >>Acciones       • Papeleta de votación del 10 Abril 1938.         “¿Está u...
Formularios >> Buenas Prácticas >> Información >>Acciones                                            Acciones     • Evitar...
Formularios >> Buenas Prácticas >> Información                                        Información    Layout               ...
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips                                        Ayuda y tips     • Ú...
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips                                                            ...
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips                                                            ...
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips                                                            ...
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips                                                            ...
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips                                                            ...
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips                                                            ...
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips                                                            ...
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips                                                            ...
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips                                       Ayuda y tips     • Mi...
Formularios >> Buenas Prácticas >> Interacción                                         Interacción
Formularios >> Buenas Prácticas >> Interacción                                         Interacción                        ...
Formularios >> Buenas Prácticas >> Interacción >> Guiar al final                              Guiar hacia el final     • O...
Formularios >> Buenas Prácticas >> Interacción >> Guiar al final                                           Pedir poco     ...
Formularios >> Buenas Prácticas >> Interacción >> Guiar al final                             Default inteligentes     • Lo...
Formularios >> Buenas Prácticas >> Interacción >> Guiar al final               “Iluminar el camino al final”              ...
Formularios >> Buenas Prácticas >> Interacción >> Guiar al final                                            Por partes    ...
Formularios >> Buenas Prácticas >> Interacción >> Tabulación                                          Tabulación      • Mu...
Formularios >> Buenas Prácticas >> Interacción >> Tabulación                                Varias columnas               ...
Formularios >> Buenas Prácticas >> Interacción >> Tabulación                                          Tabulación      • El...
Formularios >> Buenas Prácticas >> Interacción >> Revelación progresiva                       Revelación progresiva      •...
Formularios >> Buenas Prácticas >> Interacción >> Dependencias        Ingreso de datos dependientes      • Un dato requier...
Formularios >> Buenas Prácticas >> Interacción >> Dependencias                             Página intermedia         • Req...
Formularios >> Buenas Prácticas >> Interacción >> Dependencias                                                   Tabs     ...
Formularios >> Buenas Prácticas >> Interacción >> Dependencias                      Selectores de sección        • Agrupa ...
Formularios >> Buenas Prácticas >> Interacción >> Dependencias                        Inactivo hasta que se               ...
Formularios >> Buenas Prácticas >> Interacción >> Revelación progresiva                       Revelación progresiva      •...
Formularios >> Buenas Prácticas >> Feedback                                          Feedback                            h...
Formularios >> Buenas Prácticas >> Feedback >> Validación inline                                 Validación inline      • ...
Formularios >> Buenas Prácticas >> Feedback >> Validación inline                   Validación de nombre de                ...
Formularios >> Buenas Prácticas >> Feedback >> Validación inline                                   Otros ejemplos      • S...
Formularios >> Buenas Prácticas >> Feedback >> Validación inline                                 Validación inline      • ...
Formularios >> Buenas Prácticas >> Feedback >> Errores                                               Errores      • Asegur...
Formularios >> Buenas Prácticas >> Feedback >> Errores                                               Errores              ...
Formularios >> Buenas Prácticas >> Feedback >> Errores                            Formularios cortos                      ...
Formularios >> Buenas Prácticas >> Feedback >> Errores                                                         Web Form De...
Formularios >> Buenas Prácticas >> Feedback >> Errores                                               Errores      • Comuni...
Formularios >> Buenas Prácticas >> Feedback >> Progreso                                           Progreso     • Algunas a...
Formularios >> Buenas Prácticas >> Feedback >> Progreso                                           Progreso     • Dar indic...
Formularios >> Buenas Prácticas >> Feedback >> Éxito                                                   Éxito      • Comuni...
Formularios >> Buenas Prácticas >> Feedback >> Éxito                                                       Web Form Design...
Formularios >> Buenas Prácticas >> Feedback >> Éxito      • a                                                       Web Fo...
Formularios >> Buenas Prácticas >> Otras                     Otras buenas prácticas      • Evitar cambiar datos ingresados...
Formularios >> Buenas Prácticas >> Otras                                           Títulos     •   Titular formularios    ...
Formularios >> Buenas Prácticas >> Otras                                      Página inicial     • Si el proceso es comple...
Formularios >> Buenas Prácticas >> Otras                                           Mensajes     • Hacer un inventario de t...
Ejemplo  Favorece – Registro de usuario: http://favorece.net/user/register
Ejemplo  Favorece – Registro de usuario: http://favorece.net/user/register
Ejemplo  Favorece – Registro de usuario: http://favorece.net/user/register
Lecturas recomendadas   – Web Form Design - Luke Wroblewski (ebay, yahoo)       • http://rosenfeldmedia.com/books/webforms...
Upcoming SlideShare
Loading in...5
×

Formularios

2,231

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,231
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Formularios

  1. 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. 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. 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. 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. 5. Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes?
  6. 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. 7. Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes? Online: lo único que tenemos son formularios..
  8. 8. Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes? Online: lo único que tenemos son formularios..
  9. 9. Formularios Diseño de Interacción • Desde diversos dispositivos!!
  10. 10. Formularios Asumámoslo… Odiamos llenar formularios!
  11. 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. 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. 13. Formularios >> Buenas Prácticas >> Información Información
  14. 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. 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. 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. 17. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado arriba Web Form Design - Luke Wroblewski
  18. 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. 19. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado a la derecha Web Form Design - Luke Wroblewski
  20. 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. 21. Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado a la izquierda Web Form Design - Luke Wroblewski
  22. 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. 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. 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. 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. 26. Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido Agrupación de contenido Web Form Design - Luke Wroblewski
  27. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 37. Formularios >> Buenas Prácticas >> Información >>Acciones Ayudar al usuario Web Form Design - Luke Wroblewski
  38. 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. 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. 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. 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. 42. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  43. 43. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  44. 44. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  45. 45. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  46. 46. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  47. 47. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  48. 48. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  49. 49. Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
  50. 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. 51. Formularios >> Buenas Prácticas >> Interacción Interacción
  52. 52. Formularios >> Buenas Prácticas >> Interacción Interacción Guiar al final Tabulación Revelación Dependencias progresiva Web Form Design - Luke Wroblewski
  53. 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. 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. 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. 56. Formularios >> Buenas Prácticas >> Interacción >> Guiar al final “Iluminar el camino al final” Buenas Prácticas Web Form Design - Luke Wroblewski
  57. 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. 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. 59. Formularios >> Buenas Prácticas >> Interacción >> Tabulación Varias columnas • Formularios con varias columnas pueden generar conflictos Web Form Design - Luke Wroblewski
  60. 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. 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. 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. 63. Formularios >> Buenas Prácticas >> Interacción >> Dependencias Página intermedia • Requiere pasos adicionales Web Form Design - Luke Wroblewski
  64. 64. Formularios >> Buenas Prácticas >> Interacción >> Dependencias Tabs • Requiere default inteligentes • Pueden pasar desapercibidos Web Form Design - Luke Wroblewski
  65. 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. 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. 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. 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. 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. 70. Formularios >> Buenas Prácticas >> Feedback >> Validación inline Validación de nombre de usuario Web Form Design - Luke Wroblewski
  71. 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. 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. 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. 74. Formularios >> Buenas Prácticas >> Feedback >> Errores Errores Web Form Design - Luke Wroblewski
  75. 75. Formularios >> Buenas Prácticas >> Feedback >> Errores Formularios cortos Web Form Design - Luke Wroblewski
  76. 76. Formularios >> Buenas Prácticas >> Feedback >> Errores Web Form Design - Luke Wroblewski
  77. 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. 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. 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. 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. 81. Formularios >> Buenas Prácticas >> Feedback >> Éxito Web Form Design - Luke Wroblewski
  82. 82. Formularios >> Buenas Prácticas >> Feedback >> Éxito • a Web Form Design - Luke Wroblewski
  83. 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. 84. Formularios >> Buenas Prácticas >> Otras Títulos • Titular formularios • Texto introductorio • Titulo de grupos • Etiquetas de los campos
  85. 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. 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. 87. Ejemplo Favorece – Registro de usuario: http://favorece.net/user/register
  88. 88. Ejemplo Favorece – Registro de usuario: http://favorece.net/user/register
  89. 89. Ejemplo Favorece – Registro de usuario: http://favorece.net/user/register
  90. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×