[kml_flashembed movie=\u00bbhttp:\/\/www.youtube.com\/v\/FgzZt1V99mc\u00bb width=\u00bb560″ height=\u00bb315″ wmode=\u00bbtransparent\u00bb \/]<\/p>\n
Transcripci\u00f3n del audio:<\/strong><\/p>\n Hola, soy Sergio Luj\u00e1n Mora, profesor de la Universidad de Alicante.<\/p>\n En este v\u00eddeo voy a utilizar este formulario de inscripci\u00f3n a un curso de la Universidad de Alicante para explicarte algunos consejos para mejorar la usabilidad de tus formularios.<\/p>\n Mejorar la usabilidad de un formulario, es decir, lograr que sea m\u00e1s f\u00e1cil de usar y que se evite que el usuario cometa errores es esencial hoy en d\u00eda, ya que los usuarios est\u00e1n cansados de rellenar formularios todos los d\u00edas.<\/p>\n Un formulario f\u00e1cil de usar alegrar\u00e1 la vida de tus usuarios, te lo aseguro.<\/p>\n \u00bfC\u00f3mo puedo hacer que un formulario sea m\u00e1s f\u00e1cil de usar? Ve\u00e1moslo con un ejemplo concreto.<\/p>\n Vamos a utilizar como ejemplo de este an\u00e1lisis la inscripci\u00f3n al curso \u201cDise\u00f1o de docencia on-line\u201d organizado por el Instituto de Ciencias de la Educaci\u00f3n de la Universidad de Alicante. En la p\u00e1gina del curso se nos proporciona diversa informaci\u00f3n como el nombre del profesor que lo impartir\u00e1, los objetivos del curso, sus contenidos, a qui\u00e9n va dirigido, el m\u00e9todo de evaluaci\u00f3n, informaci\u00f3n general, la certificaci\u00f3n y la relaci\u00f3n de admitidos. Aqu\u00ed ya vemos un problema de usabilidad y de experiencia de usuario: aparecen dos fechas, las fechas de realizaci\u00f3n del curso, pero no se indica qu\u00e9 d\u00edas de la semana son.<\/p>\n As\u00ed que yo me tengo que molestar, en buscar un calendario, para confirmar qu\u00e9 d\u00edas de la semana son el 11 y 12 de septiembre y entonces decidir si esos d\u00edas puedo o no puedo asistir al curso.<\/p>\n Seguro que alguien ya estar\u00e1 pensando \u201cSergio, es que eres un pejiguero\u201d. Pero al final de este v\u00eddeo veremos la raz\u00f3n de por qu\u00e9 ser pejiguero es importante y \u00fatil a veces.<\/p>\n Por cierto, como soy un pejiguero, resulta que pejiguero no existe en el diccionario de la Real Academia Espa\u00f1ola, s\u00f3lo existe pejiguera. \u00bfUn descuido, un error, machismo encubierto?<\/p>\n Bueno, sigamos con nuestro proceso de inscripci\u00f3n.<\/p>\n El bot\u00f3n \u201cInscripciones\u201d ser\u00eda m\u00e1s significativo si pusiera \u201cInscripci\u00f3n\u201d o \u201cInscribirse\u201d, ya que \u201cInscripciones\u201d se puede entender como \u201cver las inscripciones que se han realizado hasta el momento\u201d.<\/p>\n Ya, ya lo s\u00e9, \u201cpejiguero\u201d, pero hay que evitar que el usuario tenga dudas, pierda el tiempo y, lo peor cometa errores.<\/p>\n Al situar el cursor del rat\u00f3n sobre el bot\u00f3n \u201cInscripciones\u201d, podemos ver la URL de destino y podemos comprobar que no se pasa ning\u00fan valor por la URL que identifique el curso. Malo, malo.<\/p>\n Al pulsar en el bot\u00f3n \u201cInscripciones\u201d no aparece el formulario de inscripci\u00f3n, sino que aparece esta p\u00e1gina con este aviso. \u00bfNo podr\u00edan haber puesto el aviso en la p\u00e1gina anterior y as\u00ed nos ahorramos una p\u00e1gina?<\/p>\n Bueno, aqu\u00ed les doy un voto de confianza, porque seguro que mucha gente se apunta a los cursos y luego ni asiste ni avisa de que no va a asistir, as\u00ed que, aunque sea molesto, es muy importante este aviso.<\/p>\n Pulsamos sobre el bot\u00f3n \u201cInscripciones\u201d y aparece este formulario que vamos a analizar con detalle.<\/p>\n En primer lugar vamos a fijarnos en lo general. Vemos que las etiquetas de algunos controles est\u00e1n por encima de los controles, mientras que en otros casos est\u00e1n situadas a la izquierda de los controles. \u00bfCu\u00e1l es la mejor forma?<\/p>\n Existen multitud de estilos, multitud de formas de dise\u00f1ar un formulario, por ejemplo las etiquetas pueden estar alineadas a la izquierda, alineadas a la derecha o sobre el control.<\/p>\n Lo que est\u00e1 claro es que lo mejor no es lo que nos encontramos en este formulario, con una mezcla de diferentes estilos. \u00bfQu\u00e9 estilo es el mejor? Tambi\u00e9n podemos ver un asterisco al lado de las etiquetas de algunos de los controles. \u00bfQu\u00e9 significa ese asterisco? En ning\u00fan sitio de la p\u00e1gina se me dan instrucciones sobre su significado.<\/p>\n Analicemos ahora el formulario control por control.<\/p>\n Primero me solicitan el c\u00f3digo del curso y el nombre del curso. \u00bfC\u00f3mo? \u00bfPero no vengo de la p\u00e1gina con la informaci\u00f3n del curso? \u00bfPor qu\u00e9 me piden estos datos? A continuaci\u00f3n me preguntan el NIF, los apellidos, el nombre y el n\u00famero de a\u00f1os totales como docente universitario. Y yo me pregunto, \u00bfno sobrar\u00eda con introducir un par de datos, como el NIF y el correo electr\u00f3nico que tambi\u00e9n me piden despu\u00e9s? \u00bfNo conoce ya la universidad todos esos datos sobre m\u00ed? \u00bfNo se evitar\u00edan errores? \u00bfPara qu\u00e9 me piden el n\u00famero de a\u00f1os totales como docente universitario? \u00bfSer\u00e1 porque se tendr\u00e1 en cuenta para priorizar las inscripciones?<\/p>\n Pues no, porque si volvemos a la p\u00e1gina de informaci\u00f3n del curso, s\u00f3lo encontramos este aviso sobre qui\u00e9n tendr\u00e1 prioridad en la inscripci\u00f3n, y como podemos leer, el n\u00famero de a\u00f1os totales como docente universitario no se menciona para nada.<\/p>\n As\u00ed que, el prop\u00f3sito de la solicitud del n\u00famero de a\u00f1os totales como docente universitario es todo un misterio para el usuario que rellena el formulario. En el caso de un formulario, los tres consejos generales que se deben aplicar cuando se dise\u00f1a un formulario son:<\/p>\n En este formulario se incumplen estos tres consejos varias veces.<\/p>\n Bueno, volviendo al formulario, al principio he dudado y he pensado que quiz\u00e1s el curso est\u00e1 abierto a cualquiera y por eso tienen que pedir todos esos datos.<\/p>\n Pero no,\u00a0si volvemos otra vez a la p\u00e1gina principal, encontramos un apartado en el que se indica que el curso est\u00e1 dirigido s\u00f3lo a Personal Docente e Investigador de la Universidad de Alicante. As\u00ed que, cuando alguien se inscriba<\/p>\n \u00a1La Universidad ya sabe todos esos datos que se solicitan y muchos m\u00e1s!<\/p>\n A continuaci\u00f3n, me preguntan la categor\u00eda profesional. Otra vez, \u00bfes que la Universidad no la sabe? Pero bueno, lo que est\u00e1 fatal es que hay un cuadro de texto en que me dicen \u201cEscriba la categor\u00eda profesional\u201d. \u00bfEhhh? \u00bfPero no la he elegido ya en estos botones de radio? \u00bfO se refiere a que la escriba cuando seleccione \u201cOtras categor\u00edas\u201d? Pues se tendr\u00eda que explicar de alguna manera qu\u00e9 tengo que hacer.<\/p>\n A continuaci\u00f3n se me pregunta el departamento, el centro, el tel\u00e9fono de trabajo, el e-mail y el cargo que desempe\u00f1o en la Universidad. Otra vez, una serie de datos que la Universidad ya conoce y que adem\u00e1s, \u00bfpara qu\u00e9 necesita todos estos datos para gestionar simplemente la inscripci\u00f3n a un curso? En realidad, el pedir tantos datos puede tener una explicaci\u00f3n muy simple y razonable, las islas de informaci\u00f3n. Pero hoy no toca explicar ese problema en este v\u00eddeo.<\/p>\n Y ahora volvamos a \u201cSergio, es que eres un pejiguero\u201d.<\/p>\n \u00bfCu\u00e1l puede ser el coste de los problemas de usabilidad de este formulario?<\/p>\n Hagamos unos peque\u00f1os n\u00fameros:<\/p>\n \u00bfCu\u00e1ntos cursos organiza el ICE al cabo de un a\u00f1o? Muchos. Digamos que 50 y creo que me quedo corto.<\/p>\n \u00bfCu\u00e1ntos alumnos se inscriben en un curso? El n\u00famero de plazas que se ofertan oscila entre 10 y 25, aunque los cursos de 25 plazas predominan. Pero este es el n\u00famero de plazas, seguramente el n\u00famero de personas que se inscriban en un curso ser\u00e1 mayor. Pongamos que de media, por cada curso se inscriben unas 30 personas.<\/p>\n As\u00ed que, al cabo del a\u00f1o, se pueden realizar unas 1.500 inscripciones.<\/p>\n Pongamos que el formulario actual se tarda 4 minutos en rellenarlo, mientras que un formulario m\u00e1s usable que me pidiese menos datos podemos tardar 2 minutos o incluso menos. Eso supondr\u00eda un ahorro de 2 minutos por inscripci\u00f3n, 3.000 minutos de ahorro en total, 50 horas de ahorro al cabo del a\u00f1o.<\/p>\n \u00bfY cu\u00e1nto supone eso en dinero? Supongamos que cada hora de un trabajador le cuesta a la Universidad 30\u20ac, entre sueldos, cotizaciones a la seguridad social, impuestos, costes asociados, etc. (y creo que soy muy optimista).<\/p>\n 50 horas por 30 euros la hora son 1.500 euros, 1.500 euros que se desperdician por un formulario de inscripci\u00f3n mal realizado. Ya, mucha gente dir\u00e1 que es poco dinero.<\/p>\n Pero recordemos que no es s\u00f3lo ese dinero, tambi\u00e9n habr\u00eda que calcular el impacto en la felicidad de los usuarios que tienen que rellenar ese formulario, y eso es m\u00e1s dif\u00edcil de calcular, pero quiz\u00e1s es mucho m\u00e1s importante.<\/p>\n Pero ya, ya lo s\u00e9, soy un pejiguero.<\/p>\n Y con esto finaliza este videotutorial en el que he analizado la usabilidad de un formulario de inscripci\u00f3n en un curso de la Universidad de Alicante.<\/p>\n Si necesitas m\u00e1s informaci\u00f3n o quieres contactar conmigo, en mis p\u00e1ginas web http:\/\/accesibilidadweb.dlsi.ua.es y en http:\/\/desarrolloweb.dlsi.ua.es podr\u00e1s encontrar m\u00e1s informaci\u00f3n sobre la accesibilidad web y el desarrollo web o tambi\u00e9n puedes contactar directamente conmigo a trav\u00e9s de mi direcci\u00f3n de correo electr\u00f3nico sergio.lujan@arroba@ua.es o a trav\u00e9s de mi cuenta de Twitter @sergiolujanmora.<\/p>\n","protected":false},"excerpt":{"rendered":" [kml_flashembed movie=\u00bbhttp:\/\/www.youtube.com\/v\/FgzZt1V99mc\u00bb width=\u00bb560″ height=\u00bb315″ wmode=\u00bbtransparent\u00bb \/] Transcripci\u00f3n del audio: Hola, soy Sergio Luj\u00e1n Mora, profesor de …<\/p>\n
\nCada estilo tiene sus ventajas y desventajas, aunque seg\u00fan este estudio del a\u00f1o 2006, \u201cLabel Placement in Forms\u201d, la mejor opci\u00f3n es colocar las etiquetas encima de los controles.<\/p>\n
\nPara rellenar estos datos, que no me indican en la primera p\u00e1gina que debo recordar, me toca salir del formulario de inscripci\u00f3n, echar para atr\u00e1s dos p\u00e1ginas y copiar el nombre del curso y el c\u00f3digo del curso, para a continuaci\u00f3n volver al formulario. Por lo menos me lo han pedido al principio y no he perdido ninguna informaci\u00f3n que ya podr\u00eda haber introducido en el formulario.<\/p>\n
\nEn la usabilidad, existe un principio de dise\u00f1o llamado KISS \u201cKeep It Simple, Stupid!\u201d, que recomienda la b\u00fasqueda de lo sencillo y comprensible, rechazando lo enrevesado e innecesario.<\/p>\n\n
\nSin embargo, lo m\u00e1s sorprendente de este formulario es lo \u00faltimo que encontramos, una pregunta con respuesta de tipo s\u00ed\/no en la que se pueden se\u00f1alar las dos respuestas a la vez. Pero, \u00bfno se supone que son excluyentes, o una o la otra, pero no las dos a la vez? Seguramente ser\u00e1 un nuevo tipo de l\u00f3gica.
\nFinalmente, se puede enviar un formulario de inscripci\u00f3n vac\u00edo y no pasa nada, es m\u00e1s, se recibe la contestaci\u00f3n \u201cTu solicitud de cursos de formaci\u00f3n ICE ha sido recibida correctamente en nuestro Centro\u201d. No hay ning\u00fan tipo de validaci\u00f3n.<\/p>\n