• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Formularios
 

Formularios

on

  • 1,485 views

 

Statistics

Views

Total Views
1,485
Views on SlideShare
1,448
Embed Views
37

Actions

Likes
1
Downloads
18
Comments
0

2 Embeds 37

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Formularios Formularios Presentation Transcript

    • 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...).
    • 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
    • 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
    • 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
    • Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes?
    • Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes? Dialogo real: Aspectos que ayudan en la comunicación (pistas visuales, detalles)
    • Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes? Online: lo único que tenemos son formularios..
    • Formularios Diseño de Interacción • Formularios: ¿Por qué son importantes? Online: lo único que tenemos son formularios..
    • 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, 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
    • 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
    • Formularios >> Buenas Prácticas >> Información Información
    • 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
    • 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
    • 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
    • Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado arriba Web Form Design - Luke Wroblewski
    • 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
    • Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado a la derecha Web Form Design - Luke Wroblewski
    • 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
    • Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas Alineado a la izquierda Web Form Design - Luke Wroblewski
    • 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
    • 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
    • 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
    • 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
    • Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido Agrupación de contenido Web Form Design - Luke Wroblewski
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Formularios >> Buenas Prácticas >> Información >>Acciones Ayudar al usuario Web Form Design - Luke Wroblewski
    • 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
    • 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
    • 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
    • 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
    • Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Información >> Ayuda y tips Web Form Design - Luke Wroblewski
    • 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
    • Formularios >> Buenas Prácticas >> Interacción Interacción
    • Formularios >> Buenas Prácticas >> Interacción Interacción Guiar al final Tabulación Revelación Dependencias progresiva Web Form Design - Luke Wroblewski
    • 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
    • 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
    • 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
    • Formularios >> Buenas Prácticas >> Interacción >> Guiar al final “Iluminar el camino al final” Buenas Prácticas Web Form Design - Luke Wroblewski
    • 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
    • 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
    • Formularios >> Buenas Prácticas >> Interacción >> Tabulación Varias columnas • Formularios con varias columnas pueden generar conflictos Web Form Design - Luke Wroblewski
    • 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
    • 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
    • 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
    • Formularios >> Buenas Prácticas >> Interacción >> Dependencias Página intermedia • Requiere pasos adicionales Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Interacción >> Dependencias Tabs • Requiere default inteligentes • Pueden pasar desapercibidos Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Interacción >> Dependencias Selectores de sección • Agrupa información efectivamente • Esconde alguna información Web Form Design - Luke Wroblewski
    • 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
    • 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
    • Formularios >> Buenas Prácticas >> Feedback Feedback http://www.bang2write.com/2012/08/how-to-feed-back-on-others-work-by-samuel-caine.html
    • 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
    • Formularios >> Buenas Prácticas >> Feedback >> Validación inline Validación de nombre de usuario Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Feedback >> Validación inline Otros ejemplos • Sugerencias de datos válidos • Conteo de caracteres Web Form Design - Luke Wroblewski
    • 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
    • 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
    • Formularios >> Buenas Prácticas >> Feedback >> Errores Errores Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Feedback >> Errores Formularios cortos Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Feedback >> Errores Web Form Design - Luke Wroblewski
    • 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
    • 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
    • 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
    • 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
    • Formularios >> Buenas Prácticas >> Feedback >> Éxito Web Form Design - Luke Wroblewski
    • Formularios >> Buenas Prácticas >> Feedback >> Éxito • a Web Form Design - Luke Wroblewski
    • 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
    • Formularios >> Buenas Prácticas >> Otras Títulos • Titular formularios • Texto introductorio • Titulo de grupos • Etiquetas de los campos
    • 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
    • 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
    • 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/ – 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