formularios
Post on 12-Jun-2015
2.128 Views
Preview:
TRANSCRIPT
Formularios
Disclaimer: Lamentablemente (para el autor) nada de esto es creación del autor, su único mérito es recopilar información reconociendo a los autores originales y presentarlo en un formato apropiado para servir de apoyo a las clases en Facultad de Ingeniería . No obstante, esta presentación puede contener opiniones del autor (en lo posible, pocas...).
http://www.ricardotayar.com/
Diseño de InteracciónDiseño de Interacción
Nuevas formas de diseño interactivo, John Vega, Cristalab Perú 2007
Interactividad• Capacidad de intercambiar información entre dos entes
comunicativos usando elementos del diseño y acciones
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, BounceNuevas formas de diseño interactivo, John Vega, Cristalab Perú 2007
Diseño de Interacción
Diseño de Interacción
• Formularios: ¿Por qué son importantes?
Formularios
Diseño de Interacción
• Formularios: ¿Por qué son importantes?
Formularios
Dialogo real:Aspectos que ayudan en la comunicación (pistas visuales, detalles)
Diseño de Interacción
• Formularios: ¿Por qué son importantes?
Formularios
Online:lo único que tenemos son formularios..
Diseño de Interacción
• Formularios: ¿Por qué son importantes?
Formularios
Online:lo único que tenemos son formularios..
Diseño de Interacción
• Desde diversos dispositivos!!
Formularios
Odiamos llenar formularios!
Formularios
Asumámoslo…
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, rutasWeb Form Design - Luke Wroblewski
• Minimizar el dolor– A nadie le gusta llenar formularios– Valores por default inteligentes
• Iluminar el camino para el éxito
• Tener en cuenta el contexto– Usuario familiarizado vs usuario nuevo– Usuario habitual vs usuario poco frecuente
• Consistencia en la comunicación– Errores, ayuda, éxito– Única voz
La receta para buenos formularios
Formularios >> Buenas Prácticas
Web Form Design - Luke Wroblewski
“Depende”
Si tus objetivos son…, prueba la solución…
Si tus restricciones son…, prueba la solución…
InformaciónFormularios >> Buenas Prácticas >> Información
Formularios >> Buenas Prácticas >> Información
Información
Layout•Posicionamiento de etiquetas•Agrupación de contenido
Ingreso de datos•Formatos, campos requeridos
Acciones•Primaria y secundaria
Ayuda y tips
Formularios >> Buenas Prácticas >> Información >> Layout
Información
Layout•Posicionamiento de etiquetas•Agrupación de contenido
Ingreso de datos•Formatos, campos requeridos
Acciones•Primaria y secundaria
Ayuda y tips
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
Alineado arriba
Web Form Design - Luke Wroblewski
Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas
Alineado a la derecha
Web Form Design - Luke Wroblewski
Asociación clara entre etiqueta y campo
Requiere menos espacio vertical
Mas difícil escanear etiquetas
Tiempo de completado más rápido
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
Web Form Design - Luke Wroblewski
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
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 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
Buenas Prácticas
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: Posicionamiento de etiquetas
Agrupación de contenido
• Posibilidad de escanear información requerido a alto nivel• Saber cómo se relaciona la información en el formulario
Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido
Web Form Design - Luke Wroblewski
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• Menor cantidad posible de elementos visuales
para comunicar las relaciones
Web Form Design - Luke Wroblewski
Buenas Prácticas
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 >> Layout: Agrupación de contenido
Información
Layout•Posicionamiento de etiquetas•Agrupación de contenido
Ingreso de datos•Formatos, campos requeridos
Acciones•Primaria y secundaria
Ayuda y tips
Formularios >> Buenas Prácticas >> Información >> Ingreso de datos
Ingreso de datos
Web Form Design - Luke Wroblewski
• 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
Formularios >> Buenas Prácticas >> Información >> Ingreso de datos
Ingreso de datos
• Evitar campos opcionales
• Si la mayoría son requeridos– indicar los opcionales
• Si la mayoría son opcionales– indicar los requeridos
Web Form Design - Luke Wroblewski
Buenas Prácticas
Formularios >> Buenas Prácticas >> Información >> Ingreso de datos
Campos requeridos• Para marcar requeridos: * y texto• Ejemplo: * (requerido)– Al inicio y final del formulario 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
Buenas Prácticas
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
Web Form Design - Luke Wroblewski
Buenas Prácticas
Formularios >> Buenas Prácticas >> Información >> Ingreso de datos
Formularios >> Buenas Prácticas >> Información
Información
Layout•Posicionamiento de etiquetas•Agrupación de contenido
Ingreso de datos•Formatos, campos requeridos
Acciones•Primaria y secundaria
Ayuda y tips
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”
Formularios >> Buenas Prácticas >> Información >>Acciones
Wikipedia: http://en.wikipedia.org/wiki/German_election_and_referendum,_1938
Acciones
• Evitar acciones secundarias, si es posible.
• 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
Buenas Prácticas
Formularios >> Buenas Prácticas >> Información >>Acciones
Formularios >> Buenas Prácticas >> Información
Información
Layout•Posicionamiento de etiquetas•Agrupación de contenido
Ingreso de datos•Formatos, campos requeridos
Acciones•Primaria y secundaria
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
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips
Web Form Design - Luke Wroblewski
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
• 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
Buenas Prácticas
Formularios >> Buenas Prácticas >> Información >> Ayuda y tips
InteracciónFormularios >> Buenas Prácticas >> Interacción
Interacción
Guiar al final Tabulación
Revelación progresiva Dependencias
Formularios >> Buenas Prácticas >> Interacción
Web Form Design - Luke Wroblewski
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
Formularios >> Buenas Prácticas >> Interacción >> Guiar al final
Web Form Design - Luke Wroblewski
Pedir poco
• Eliminar todos los pedidos innecesarios de datos
Formularios >> Buenas Prácticas >> Interacción >> Guiar al final
www.msp.gub.uy - Registrarse
Buenas Prácticas
Default inteligentesFormularios >> Buenas Prácticas >> Interacción >> Guiar al final
Web Form Design - Luke Wroblewski
Buenas Prácticas
• Lo más usado• Lo recomendado
“Iluminar el camino al final”Formularios >> Buenas Prácticas >> Interacción >> Guiar al final
Web Form Design - Luke Wroblewski
Buenas Prácticas
Por partesFormularios >> Buenas Prácticas >> Interacción >> Guiar al final
Web Form Design - Luke Wroblewski
Buenas Prácticas
• Formularios largos – Dividir– Mostrar progreso – Salvar “borrador”
TabulaciónFormularios >> Buenas Prácticas >> Interacción >> Tabulación
Web Form Design - Luke Wroblewski
• Muchos usuarios interactúan con un formulario tabulando entre campos
• El marcado correcto de HTML asegura que el tabulador funcione como se espera
Varias columnasFormularios >> Buenas Prácticas >> Interacción >> Tabulación
Web Form Design - Luke Wroblewski
• Formularios con varias columnas pueden generar conflictos
TabulaciónFormularios >> Buenas Prácticas >> Interacción >> Tabulación
Web Form Design - Luke Wroblewski
• El marcado correcto de HTML asegura que el tabulador funcione como se espera
• Probar siempre el formulario usando solamente el teclado
Buenas Prácticas
Revelación progresivaFormularios >> Buenas Prácticas >> Interacción >> Revelación progresiva
Web Form Design - Luke Wroblewski
• Opciones adicionales cuando es necesario,
no antes.– Opciones avanzadas– Compromiso gradual
Buenas Prácticas
Ingreso de datos dependientes
Formularios >> Buenas Prácticas >> Interacción >> Dependencias
Web Form Design - Luke Wroblewski
• Un dato requiere o permite ingresar otros datos dependientes
Página intermediaFormularios >> Buenas Prácticas >> Interacción >> Dependencias
Web Form Design - Luke Wroblewski
• Requiere pasos adicionales
TabsFormularios >> Buenas Prácticas >> Interacción >> Dependencias
Web Form Design - Luke Wroblewski
• Requiere default inteligentes• Pueden pasar desapercibidos
Selectores de secciónFormularios >> Buenas Prácticas >> Interacción >> Dependencias
Web Form Design - Luke Wroblewski
• Agrupa información efectivamente• Esconde alguna información
Inactivo hasta que se selecciona
Formularios >> Buenas Prácticas >> Interacción >> Dependencias
Web Form Design - Luke Wroblewski
• Asociación entre la selección primaria se deteriora
Revelación progresivaFormularios >> Buenas Prácticas >> Interacción >> Revelación progresiva
Web Form Design - Luke Wroblewski
• Mantener la relación con la selección inicial clara
• Asociar claramente los campos adicionales con su disparador
• Evitar "saltar" des-asociando las opciones de selección iniciales
Buenas Prácticas
FeedbackFormularios >> Buenas Prácticas >> Feedback
http://www.bang2write.com/2012/08/how-to-feed-back-on-others-work-by-samuel-caine.html
Validación inlineFormularios >> Buenas Prácticas >> Feedback >> Validación inline
Web Form Design - Luke Wroblewski
• Feedback directo mientras se ingresan los datos– Valida datos– Sugiere datos validos– Ayuda a los usuarios a
Validación de nombre de usuario
Formularios >> Buenas Prácticas >> Feedback >> Validación inline
Web Form Design - Luke Wroblewski
Otros ejemplosFormularios >> Buenas Prácticas >> Feedback >> Validación inline
Web Form Design - Luke Wroblewski
• Sugerencias de datos válidos
• Conteo de caracteres
Validación inlineFormularios >> Buenas Prácticas >> Feedback >> Validación inline
Web Form Design - Luke Wroblewski
• Para datos que tienen un alta probabilidad de erro
• Usar datos sugeridos para desambiguar• Comunicar los limites
Buenas Prácticas
ErroresFormularios >> Buenas Prácticas >> Feedback >> Errores
Web Form Design - Luke Wroblewski
• 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
ErroresFormularios >> Buenas Prácticas >> Feedback >> Errores
Web Form Design - Luke Wroblewski
Formularios cortosFormularios >> Buenas Prácticas >> Feedback >> Errores
Web Form Design - Luke Wroblewski
Formularios >> Buenas Prácticas >> Feedback >> Errores
Web Form Design - Luke Wroblewski
ErroresFormularios >> Buenas Prácticas >> Feedback >> Errores
Web Form Design - Luke Wroblewski
• Comunicar claramente cuando un error ha ocurrido: – arriba con contraste visual
• Indicar cómo corregir los errores• Asociar el campo con el error
Buenas Prácticas
ProgresoFormularios >> Buenas Prácticas >> Feedback >> Progreso
Web Form Design - Luke Wroblewski
• Algunas acciones requieren tiempo de procesamiento– Envío de formulario– Cálculos– Uploads
ProgresoFormularios >> Buenas Prácticas >> Feedback >> Progreso
Web Form Design - Luke Wroblewski
• Dar indicaciones sobre la tarea en progreso• Deshabilitar botón de envío para evitar
envíos duplicadosBuenas Prácticas
ÉxitoFormularios >> Buenas Prácticas >> Feedback >> Éxito
Web Form Design - Luke Wroblewski
• Comunicar claramente que el envío del formulario fue exitoso
• Proveer feedback en el contexto de los datos enviados
Buenas Prácticas
Formularios >> Buenas Prácticas >> Feedback >> Éxito
Web Form Design - Luke Wroblewski
Formularios >> Buenas Prácticas >> Feedback >> Éxito
Web Form Design - Luke Wroblewski
• a
Otras buenas prácticasFormularios >> Buenas Prácticas >> Otras
Web Form Design - Luke Wroblewski
• Evitar cambiar datos ingresados por el usuario
• Si hay información que no es fácil de obtener, avisar al usuario antes de presentarle el formulario
Buenas Prácticas
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
Formularios >> Buenas Prácticas >> Otras
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
– 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.php
Imágenes y conceptos de esta presentación son tomadas de las lecturas recomendadas
Lecturas recomendadas
top related