Está en la página 1de 9

Las opiniones recogidas en este documento no se

corresponden, necesariamente, con las de ninguno


de los organismos pblicos participantes en esta
iniciativa.

En colaboracin con

 

  
 





3.6. Acciones primarias y secundarias .............................................................................. 15

3.5.2. Tamao de los controles ................................................................................................... 15

3.5.1. Campos obligatorios .......................................................................................................... 14

3.5. Informacin y ayuda ................................................................................................... 11

3.4. Divisin de las tareas ................................................................................................. 11

3.3. Agrupaciones de contenidos ........................................................................................ 9

3.2.3. Alineacin a la derecha: ...................................................................................................... 9

3.2.2. Alineacin a la izquierda: .................................................................................................... 9

3.2.1. Alineacin superior .............................................................................................................. 8

3.2. Alineacin de los controles .......................................................................................... 7

3.1. Etiquetado .................................................................................................................... 6

2.4. Grficos ........................................................................................................................ 5


3. Anexo I: Criterios de Usabilidad para Formularios ....................................................... 6

2.3. Diseo .......................................................................................................................... 5

2.2.3. Prevencin y correccin de errores ..................................................................................... 4

2.2.2. Retroalimentacin al usuario ............................................................................................... 4

2.2.1. Navegacin global ............................................................................................................... 4

2.2. Navegacin e Interaccin ............................................................................................. 3

2.1.1. Estilo de redaccin .............................................................................................................. 3

2.1. Contenidos ................................................................................................................... 2

2. Criterios de Usabilidad ..................................................................................................... 2

1. Objetivo. ............................................................................................................................ 2

Contenidos

RBU17 - Proporcionar un nmero razonable de opciones de navegacin, evitando


los mens con un nmero excesivo de opciones o los contenidos con demasiados
enlaces.
RBU18 - Verificar la disponibilidad de las opciones de navegacin a lo largo del
tiempo, haciendo revisiones peridicas de los contenidos para comprobar que no

RBU5 - Optimizar el tamao total de los documentos, que en condiciones ptimas


deberan mantenerse siempre por debajo de los 50k para conseguir una experiencia de
uso suficientemente fluida incluso con conexiones lentas.

RBU6 - Verificar la correccin de los textos, utilizando revisores sintcticos y


gramaticales para detectar los posibles errores.

RBU16 - Distinguir claramente los enlaces visitados y no visitados, de forma que


resulten evidentes cules son las opciones disponibles y tambin su estado actual en
cuanto a si ya han sido visitados o no por el usuario.
!

RBU4 - Asegurarse de que los textos son legibles, utilizando tipos de fuente
adecuados para la lectura y verificando que, tanto el tamao mnimo, el contraste por
defecto y el resto de valores tipogrficos, son adecuados.

RBU15 - Utilizar siempre textos de enlaces significativos, teniendo en cuenta que


deben tener sentido cuando sean ledos fuera de contexto para facilitar el escaneo
rpido del documento por parte de los usuarios.
!

RBU14 - Ofrecer atajos para los usuarios ms avanzados, para que puedan realizar
las tareas frecuentes de forma ms eficiente, e incluso personalizarlas a su gusto.
!

RBU3 - Mantener una consistencia lingstica, utilizando siempre las mismas


palabras o expresiones cuando se mencione o describa un mismo concepto a lo largo
del sitio, teniendo especial cuidado en la relacin entre los ttulos de los documentos y
las opciones a travs de las que se accede a ellos.

RBU13 - Mantener los mecanismos de navegacin a lo largo del portal, siendo


coherentes en su aplicacin de forma que segn se vaya profundizando en el portal se
mantengan los elementos necesarios en coherencia con los mecanismos adicionales
que se necesiten ir aadiendo.
!

RBU2 - Seleccionar un etiquetado adecuado que prime las necesidades, objetivos e


intereses de los usuarios antes que los del organismo, especialmente para partes
fundamentales de los documentos como pueden ser las opciones de navegacin y los
ttulos de los documentos y secciones. Reutilizar los trminos que ya constituyan un
estndar de facto para las opciones que normalmente estn disponibles en cualquier
portal, como por ejemplo Mapa Web.

RBU12 - Identificar claramente los mecanismos de navegacin, destacndolos de


forma que el usuario pueda distinguir fcilmente qu opciones estn disponibles en cada
momento.
!

RBU1 - Estructurar adecuadamente los contenidos, agrupando la informacin


relacionada haciendo uso de las estructuras propias del lenguaje escrito: encabezados,
prrafos, listas!

RBU11 - Permitir que sea el usuario el que mantenga el control en todo momento,
evitando siempre el uso de elementos invasivos como pueden ser las ventanas
emergentes, redirecciones o refrescos automticos o pantallas de presentacin que no
pueden omitirse.

2.2 Navegacin e Interaccin

2.1 Contenidos

2 Criterios de Usabilidad

RBU9 - Utilizar un estilo de pirmide invertida a la hora de redactar contenidos, es


decir, empezar siempre con las conclusiones, o en su defecto los contenidos ms
importantes del documento.

Dado el carcter particular de los formularios, y el uso que tendrn en las aplicaciones del portal,
as como su importancia para las tareas y servicios que ste ofrece, se ha ampliado este
documento con un anexo final especfico y detallado que se centra en los aspectos de usabilidad
de aplicacin especfica a formularios.

RBU10 - Enfatizar adecuadamente los conceptos clave, utilizando los elementos que
tenemos disponibles para ese propsito, como pueden ser los elementos de nfasis, o
destacando los contenidos necesarios mediante encabezados o listas versin.

RBU8 - Resumir los contenidos lo mximo posible, evitando extenderse


innecesariamente y eliminando cualquier elemento de poca relevancia o inters para el
pblico objetivo.

RBU7 - Utilizar un lenguaje claro y sencillo, que sea cercano primando los trminos
ms familiares y de uso ms comn para los usuarios, evitando las frases con
estructuras complejas, no utilizando trminos pertenecientes al argot, jergas especficas
o tecnicismos, y evitando tambin las metforas, irona, smiles u otras figuras
estilsticas.

Este documento se complementa con otro sobre Accesibilidad y Estndares desarrollado para el
proyecto, y por tanto dichas temticas no se contemplan aqu de forma explcita.

El objetivo de este documento es describir una serie de puntos bsicos de comprobacin,


basados en heursticos de usabilidad, que podrn utilizarse como gua de buenas prcticas de
aplicacin en el diseo de nuevas plantillas para todo el conjunto del portal Open Data Estatal.

1 Objetivo.

2.1.1 Estilo de redaccin

RBU41 - Optimizar el nmero de recursos grficos, manteniendo el nmero total de


recursos en un valor razonable para minimizar el nmero de peticiones HTTP
!

RBU29 - Asistir al usuario en los problemas utilizando mensajes distintivos y


personalizados que describan, sin alarmar al usuario, todas las acciones que son
necesarias para llevar a cabo la tarea con xito.

RBU40 - Evitar utilizar imgenes para presentar texto siempre que se pueda, ya que
el texto en imgenes presenta una menor legibilidad y es menos flexible a la hora de
adaptarse a las necesidades de los usuarios.

RBU39 - Eliminar imgenes superfluas, evitando todo contenido grfico puramente


decorativo en forma de imgenes que no aporte un contenido o mejore la legibilidad y
comprensin de la interfaz, es decir, lo que comnmente se conoce como caras
sonrientes.
!

2.4 Grficos

RBU38 - Garantizar la compatibilidad entre navegadores, evitando desarrollar


especficamente para un nico navegador o dispositivo para poder adaptarse a las
preferencias de hardware o software que tenga cada usuario.
!

RBU35 - Evitar una densidad excesiva de contenidos, es decir, evitar la aglomeracin


de contenidos mediante un uso adecuado del espacio en blanco para la divisin de las
distintas reas y elementos en nuestros diseos.

RBU37 - No abusar de los efectos de resaltado, como la cursiva y la negrita, ya que si


resaltamos demasiados elementos al final quedara todo homogneo en lugar de
destacado.

RBU34 - Evitar que el diseo afecte a la legibilidad utilizando colores, contrastes,


fondos y texturas que no dificulten o interfieran en la comprensin de los contenidos.
Tambin deben evitarse animaciones, destellos, movimientos o cualquier otro elemento
de distraccin innecesario.

RBU33 - Dotar de suficiente flexibilidad al diseo de forma que pueda adaptarse a


las caractersticas de los dispositivos de los usuarios para evitar el uso de scroll
horizontal.

RBU36 - Limitar las combinaciones de colores utilizando un esquema cromtico


reducido y consistente para cada una de las categoras de los distintos elementos que
estn presentes en el portal.

RBU32 - Utilizar una rejilla de diseo comn para garantizar que la colocacin de los
distintos componentes de las pginas sigue una disposicin coherente a lo largo del sitio.

RBU31 - Mantener una consistencia visual en el diseo para que se transmita una
imagen o look&feel del portal y cada uno de sus componentes caractersticos que sea
claramente reconocible y consistente, de forma que para el usuario sea ms fcil
familiarizarse con el sitio web e interactuar con sus elementos.

2.3 Diseo

RBU30 - Proporcionar puntos de salida claros de forma que el usuario pueda


abandonar o cancelar cualquier accin en todo momento-

RBU28 - Prevenir errores proporcionando instrucciones concisas para los usuarios y


desarrollando sistemas flexibles que sean tolerantes ante distintas situaciones.

2.2.3 Prevencin y correccin de errores

RBU27 - Ofrecer metainformacin til sobre los contenidos, como por ejemplo la
fecha de publicacin o actualizacin y el autor o las fuentes de los mismos.

RBU26 - Proporcionar confirmacin para todas aquellas acciones realizadas por el


usuario y que hayan terminado de forma efectiva.

RBU25 - Ofrecer informacin puntual al usuario acerca de todo aquello que est
sucediendo y que sea relevante para su interaccin con el sistema, as como de los
tiempos de espera.

2.2.2 Retroalimentacin al usuario

RBU24 - Proporcionar mecanismos adicionales de orientacin, como por ejemplo


un mapa del sitio y un mecanismo de bsqueda en el portal que debern estar
fcilmente localizables.

RBU23 - Utilizar los estndares de facto para la navegacin general del sitio, como
son por ejemplo el logotipo como identificador y acceso al inicio del portal, las barras de
navegacin superiores o laterales para la navegacin principal y secundaria, las
secciones de utilidades destacadas en la parte superior de cada documento o la
utilizacin de rastros de migas de pan para la orientacin del usuario.

RBU22 - Primar las acciones principales, dando acceso directo en todo el portal a las
utilidades ms comunes y proporcionando formas de acceso a las partes ms
importantes desde la pgina principal de forma que esta sirva de escaparate para las
caractersticas principales del conjunto del portal.

RBU21 - Proporcionar un acceso directo a la pgina principal, que se localice


fcilmente en todos y cada uno de los documentos que componen el portal.

RBU20 - Facilitar un mecanismo de localizacin a lo largo del sitio, puede el


usuario saber en todo momento en qu lugar se encuentra dentro del sitio web?

RBU19 - Facilitar la identificacin general a lo largo del sitio, puede el usuario


saber inmediatamente en qu sitio web se encuentra y para qu sirve ese sitio en todo
momento?

2.2.1 Navegacin global

existan enlaces rotos y evitar los enlaces auto-referentes que nos lleva a la misma
pgina en la que estamos.

RBU43 - Reservar el espacio necesario para las imgenes, indicndolo


explcitamente en el cdigo para de esta manera evitar los efectos de salto de scroll que
se pueden producir mientras se carga la pgina.

En caso de utilizar informacin de relleno en los campos de los formularios, cosa que
generalmente no es necesaria si hemos seleccionado correctamente el etiquetado, e incluso

Una vez hemos seleccionado la etiqueta ms adecuada para un campo deberemos aplicarla de
forma consistente a lo largo del sitio web, evitando utilizar distintos etiquetados para un mismo
concepto.

Diferencia entre etiquetado explcito e implcito en los formularios.

Todos los controles de los formularios, a excepcin de los de tipo button, hidden, image,
reset y submit deben tener una etiqueta explcita, asociada con su correspondiente control
para facilitar que cualquier persona pueda identificar claramente el objetivo de cada campo.

3.1 Etiquetado

A continuacin se presentan una serie de criterios especficos a tener en cuenta para el desarrollo
de formularios con un nivel adecuado de usabilidad. Es importante recordar que existen otros
criterios generales de usabilidad (no necesariamente especficos para formularios) que tambin
deben ser contemplados durante la elaboracin de formularios.

Los formularios son los elementos de interaccin por excelencia en la Web, ya que son el medio
del que disponemos para interactuar y realizar acciones, tales como compras, actualizaciones de
datos, registros, etc. Es por ello que ser fundamental tener especial cuidado en el diseo de los
formularios para optimizar los procesos que se vayan a proporcionar en nuestros sitios web.

3 Anexo I: Criterios de Usabilidad para Formularios

RBU42 - Optimizar los formatos grficos, utilizando en cada caso el formato grfico
ms apropiado segn las caractersticas de la imagen y redimensionando siempre las
imgenes al tamao deseado.

necesarias, por ejemplo varios recursos grficos en una nica imagen con tcnicas como
los CSS sprites.

As mismo la alineacin entre los controles tambin es una cuestin importante, tanto para
facilitar la asociacin mental entre etiquetado y controles como para la legibilidad global del
formulario. Podramos optar por alguno de los siguientes tipos de alineacin, todos ellos con
sus puntos fuertes e inconvenientes:

Estndares para la colocacin de las etiquetas segn el tipo de control.

La colocacin de las etiquetas en relacin a sus respectivos controles tambin es un punto


importante en los formularios. Debemos siempre respetar las convenciones existentes en el
desarrollo de interfaces, segn las cuales las etiquetas se anteponen a los controles de
edicin (INPUT de tipo text, file o password y TEXTAREA) o seleccin (SELECT) pero en el
caso de los controles de opcin (INPUT de tipo checkbox o radio) las etiquetas irn a
continuacin del control.

3.2 Alineacin de los controles

As pues, en el ejemplo anterior se puede observar que si utilizamos un etiquetado adecuado,


como el que se muestra en el ltimo caso, podramos prescindir de aadir informacin
adicional, que en los dos primeros casos sera superflua y en el tercero innecesaria.

Distintos ejemplos de informacin de ayuda.

podra resultar contraproducente en algunos casos como los campos de contraseas, debemos
procurar siempre que sea informacin til para el usuario.

Esta, por darle ms importancia a las etiquetas, sera la opcin ms adecuada para
formularios que manejen datos novedosos o poco familiares para el usuario.

Opcin 2: Alineacin a la izquierda.

En este caso la asociacin entre campos y etiquetas ser menos evidente, ya que se prima
nicamente la legibilidad de las etiquetas. Tambin se mejora el uso del espacio vertical,
pero podramos tener problemas en el espacio horizontal si manejamos datos complejos con
etiquetas muy amplias.

3.2.2 Alineacin a la izquierda:

Esta opcin ser la ms adecuada cuando los formularios manejen informacin comn y
familiar o de uso frecuente. Tambin es la mejor opcin si necesitamos tener en cuenta una
posible internacionalizacin de los mismos o si se utilizan frecuentemente mensajes de
ayuda, ya que el espacio disponible para el etiquetado ser mayor y ms flexible.

Opcin 1: Alineacin superior.

En este caso la asociacin entre campos y etiquetas es clara, aunque las etiquetas sern
algo menos escaneables que en el caso anterior, y los tiempos de rellenado son
reducidos. Nuevamente el uso del espacio vertical es mejor, pero tambin podramos tener
problemas con el espacio horizontal.

La alineacin superior minimiza el tiempo necesario para rellenar los formularios,


gracias a que la asociacin entre etiquetas y campos es evidente y adems se crea una
lnea visual que facilita el avance a travs del formulario. Por otro lado necesita mucho
espacio vertical debido a la propia disposicin de los elementos.

Por este motivo debemos utilizar elementos visuales, siempre lo ms sutiles que sea posible,
para crear las agrupaciones sin crear ruido visual.

Debemos centrarnos nicamente en las agrupaciones que realmente sean relevantes, ya que
una sobrecarga visual que transmita un exceso de agrupaciones puede resultar
contraproducente al obtener el efecto contrario al deseado, es decir la disgregacin de la
informacin en lugar de su asociacin.

Crear agrupaciones de contenidos basados en la relaciones existentes entre ellos es una


buena prctica que nos ayudar a facilitar la comprensin y rellenado de los campos existentes
cuando haya varias categoras de datos, facilitando la lectura y la exploracin a alto nivel de la
informacin.

3.3 Agrupaciones de contenidos

Esta opcin es muy utilizada, especialmente si un exceso de espacio vertical pudiese ser
problemtico, ya que constituye en general un buen compromiso entre legibilidad y tiempo
de rellenado.

Opcin 3: Alineacin a la derecha.

3.2.3 Alineacin a la derecha:

3.2.1 Alineacin superior

Agrupacin de opciones en un control de seleccin.

10

Tambin es posible crear agrupaciones de elementos para los listados de opciones


desplegables siempre que necesitemos categorizar las opciones en distintos grupos como se
observa en el siguiente ejemplo.

Demasiada sensacin de agrupacin afecta a la legibilidad y dispersa los campos.

11

La informacin de gua o ayuda, tal como informacin sobre los formatos o mensajes de error,
puede convertirse rpidamente en un arma de doble filo si se abusa de ella. En general
debemos utilizar con precaucin los mensajes de ayuda, limitndolos preferiblemente a
algunos casos especficos como:

3.5 Informacin y ayuda

Es tambin importante que a la vez se establezca un mecanismo de identificacin que indique


claramente en que parte del proceso nos encontramos en cada momento, as como mantener
la informacin ya proporcionada, dejando que el usuario avance o retroceda por los pasos
libremente y sin perder los datos ya introducidos.

Divisin de las tareas en pasos.

En estas ocasiones podemos optar por dividir el formulario en varias etapas, preferiblemente
no ms de cuatro o cinco, que nos faciliten la tarea y en las que se vayan solicitando los datos
relevantes para cada momento.

En primer lugar deberamos plantearnos reducir el nmero de campos al mnimo


imprescindible, siguiendo estrategias como pedir nicamente la informacin absolutamente
necesaria, infiriendo la informacin a partir de otra ya disponible cuando sea posible y evitar
siempre pedir la misma informacin dos o ms veces. No obstante, en algunas ocasiones
seguir siendo necesario solicitar un nmero elevado de datos.

En algunos casos puede ser necesario el plantearse dividir una operacin en distintos pasos ya
sea por ejemplo porque se trata de operaciones largas y complejas que conviene dividir en
distintas fases para facilitar el proceso, o bien porque son operaciones variables en las que los
datos de cada paso dependern de los datos introducidos en los pasos anteriores.

3.4 Divisin de las tareas

Informacin sobre formatos especficos o preferentes a la hora de introducir los


datos.

Informacin relativa a la privacidad o seguridad de los datos, como por ejemplo la


utilizacin de los correos electrnicos.

12

Normalmente, y segn su presentacin, podemos clasificar la informacin de ayuda tanto por


su colocacin en el formulario como por su disponibilidad en el tiempo. As pues podemos
hablar de ayuda contextual si la informacin se presenta de forma adyacente a los datos y de
secciones de ayuda si la informacin se agrupa en una seccin nica y destacada.

La informacin de ayuda debe tambin presentarse en los momentos precisos, siendo


necesario que el usuario reciba la confirmacin de sus acciones a travs de mensajes
informativos cuando resulte adecuado, como por ejemplo cuando se lleva a cabo una nueva
alta de usuario o cuando se borran o actualizan una serie de datos.

Una regla general para cualquier tipo de informacin de ayuda es que est claramente
asociada a los campos correspondientes, evitando por ejemplo mostrar este tipo de mensajes
en un documento aparte, ya que de no ser as estaramos obligando al usuario a recordar toda
la informacin, perdiendo as eficacia en la retroalimentacin al usuario y la interaccin con el
formulario.

Por supuesto, todo mensaje de ayuda deber ser redactado con mucha precaucin y de la
forma ms clara y concisa que sea posible. Adems debern presentarse de forma claramente
destacada y que contraste con el resto de informacin.

Mensajes de ayuda de distintos tipos.

Tipos de datos que son de uso poco comn, como por ejemplo un cdigo de uso
especfico para la aplicacin actual.

13

Por supuesto, y en cualquier caso, es fundamental mantener el estado de la aplicacin


respetando los datos ya introducidos.

En general la mejor aproximacin suele ser una combinacin de bloques de ayuda y


ayuda contextual que se muestren de forma continua o en respuesta a ciertas acciones del
usuario. Tambin puede ser interesante proporcionar ayuda dinmica para algunos tipos de
datos muy especficos o con una probabilidad de error alta, como por ejemplo comprobacin
automtica de la calidad de una contrasea o disponibilidad de un nombre de usuario.

En cuanto a la disponibilidad temporal tambin podemos dividir los mensajes de ayuda en


dinmicos, es decir los que se generan de forma dinmica en respuesta a las acciones del
usuario, o estticos, que sern los que se muestran al usuario de forma continua o en ciertos
momentos especficos.

Seccin de ayuda.

Mensajes contextuales.

14

En cuanto a la forma de indicar cundo un campo es obligatorio u opcional es preferible


utilizar una forma textual explcita, por ejemplo [obligatorio], no obstante el uso del smbolo *
(asterisco) est bastante extendido y va camino de convertirse en un estndar de facto, por
lo que podra resultar aceptable en algunos casos siempre que se acompae de una

Todava mejor es minimizar el nmero de campos opcionales.

Es preferible indicar aquellos campos que constituyan la excepcin a lo general.

Tambin hay que tener en cuenta que debemos valorar la solucin de forma global en el
portal, y una vez se haya tomado una decisin debe aplicarse de forma consistente a lo
largo del mismo.

Ambas estrategias consisten en indicar cules son los campos obligatorios o cules son los
campos opcionales, dejando el otro tipo sin ninguna identificacin especial. Sin embargo, en
general es ms conveniente identificar aquellos campos que constituyan la
excepcin, es decir, si la mayora de campos son obligatorios se indicaran los opcionales,
y si la mayora son los opcionales entonces sealaramos los obligatorios.

Partiendo de la base de que lo ideal es minimizar el nmero de campos opcionales que se


requieran para evitar aadir ruido innecesario en el proceso que se est llevando a cabo,
existen dos estrategias diferenciadas a la hora de distinguir entre los campos de obligatoria
cumplimentacin y los opcionales en un formulario.

3.5.1 Campos obligatorios

15

Debemos disear nuestros formularios de forma que prioricemos siempre las acciones
primarias frente a las secundarias, tanto para facilitar la realizacin de las tareas como para
prevenir errores no intencionados.

Algunos ejemplos de acciones primarias seran Enviar, Registrarse, Avanzar!, mientras


que como acciones secundarias podramos mencionar Borrar, Cancelar, Retroceder!

En cualquier formulario podemos normalmente distinguir entre acciones primarias y


secundarias segn su importancia. Normalmente consideraremos acciones primarias a
aquellas que son directamente responsables de llevar a cabo la tarea principal para la que
fue diseado el formulario, y acciones secundarias sern acciones auxiliares de apoyo que
generalmente se llevarn a cabo con menor frecuencia.

3.6 Acciones primarias y secundarias

Un tamao adaptado para los campos contribuye a mejorar la legibilidad.

La utilizacin de tamaos suficientes y adecuados para cada campo, de forma que estos se
ajusten al tamao de los datos esperados, del formulario al mejorar el recorrido visual del
mismo y la interpretacin de los datos.

El escalado adecuado del tamao de los controles puede proporcionar una ayuda muy til a
la hora de interpretar un formulario.

3.5.2 Tamao de los controles

Por ltimo, si en un formulario todos los campos son obligatorios no es necesario indicarlo
explcitamente en cada uno de ellos, sino que podramos utilizar un mensaje general al inicio
que as lo indique.

leyenda explicativa adecuada. En todo caso, dicha indicacin debera asociarse siempre a
la etiqueta, no al control.

16

En el segundo caso se han separado las opciones para prevenir errores, pero siguen
tratndose visualmente de forma idntica, por lo que no se facilita su distincin como s se hace
por ejemplo en el tercer y ltimo caso.

En el ejemplo anterior se puede observar cmo en el primer caso las opciones primarias y
secundarias no se distinguen y adems estn colocadas demasiado prximas, lo que puede
dar lugar fcilmente a errores involuntarios.

Distintas posibilidades para las opciones primarias y secundarias.