Guía de usabilidad web - Juan J.

Dimuro (2014)
Corrección . Carolina Condado
Índice

Introducción 5

Concepciones básicas 6

Qué es la Usabilidad 6
Entonces, ¿qué es la usabilidad? 6
¿Por qué es importante la usabilidad? 7
Beneficios 7
Para profundizar en estos temas: 7

Interacción con el sitio 8

La experiencia del usuario 8

Navegabilidad 9
En este contexto 9
Pensar en móviles 10

Técnicas 12

Los usuarios no son adivinos (Convenciones) 12

No dejarse seducir por la tecnología 13
Menos es más 14
No es escribir en papel 14
Titulares 16
Títulos seductores 18
Uso de las mayúsculas sostenidas 19
No cualquier tipografía 19
Entre líneas 21
¿Se justifica Justificar? 21
Entre la izquierda y la derecha 22
Otros idiomas 23
Son tablas tabulares 23
Listas listas 23
Enlaces, links, vínculos… 24
Formularios 25
En la paleta de colores 28
Imágenes 29
Fondos 31
¿Banners? 31
Flash o no flash 33
Audio y video 34
Animaciones 35
Menús desmenusados 35
Be responsive 36
¿Violación de la Ley? 38
Estética, usabilidad y emoción 39
Consistente 39
Ruido 40
 Pop…! up 40
Nuevas ventanas 40
Si busca, encuentra 41
PDFs 43
Todo sobre el hover 44
Navegación 44
Sólo 3 clics 45
Fresco y actualizado 45
Cuando hay que cargarla 46
El efecto cabecera 46
El scroll no es maligno 46
404 47
Mensajes de error para humanos 48

Materiales de consulta 50
Introducción

Cuando un usuario explore un sitio web, todo debe parecerle obvio, evidente,
claro y fácil de entender. Él, debe sentir que tiene el control sobre el sitio y
no al revés, por más que así sea.

En la actualidad, cualquier sitio web se ha convertido en la carta de presentación

de empresas, instituciones, organizaciones, ideas, símbolos, etcétera, incluso en
muchos casos, un portal supone la primera toma de contacto de una persona con
esa institución, organización e idea; por tanto, es esencial que el usuario se sienta
cómodo navegando por la aplicación web. Un diseño desacertado o
incomodidades en la búsqueda de información que provoquen molestia o
frustración en el usuario podría suponer el abandono de la aplicación, y por tanto,
la pérdida de un cliente o estudiante potencial. Se trata, por tanto, de un elemento,
en el que se debe cuidar las formas y el trato dispensado al usuario.
Así, resulta conveniente invertir tiempo en determinar criterios de usabilidad
comunes a todo tipo de aplicaciones web, que garanticen, en cierta medida, la
aceptación de aplicaciones genéricas.
Por lo tanto, la presente guía busca recoger los principales criterios de usabilidad a
tener en cuenta en el momento de diseñar, administrar, o elaborar contenidos para
la web. Así, a través de la aplicación de los criterios aquí expuestos se puede
garantizar un alto nivel de usabilidad en el producto final, y, por tanto, una
reducción considerable de las posibilidades de no aceptación del sitio por parte de
los usuarios.

Página  5  
Concepciones básicas

Qué es la Usabilidad
Mucho se recuerda cómo hace años, cuando en los hogares comenzaban a
hacerse presentes las primeras computadoras personales y en los entornos
laborales la automatización de procesos era la novedad, se incorporó un nuevo
término al vocabulario: “amigable”.
Este se utilizaba para referirse a aquellas aplicaciones software en las que su uso,
al menos, no terminaba provocándonos un dolor de cabeza o un estado de
interminable frustración.
Este término fue progresivamente mutando hacia otro, usabilidad, un anglicismo
(usability) que se refiere a la facilidad de uso de las aplicaciones, herramientas o
productos interactivos. Este cambio terminológico no obedecía a una moda, sino a
la intención de definir, delimitar y clarificar uno de los atributos de calidad de los
productos interactivos que mayor impacto tienen en la satisfacción del usuario y la
aceptación social del “producto”.

Entonces, ¿qué es la usabilidad?

Fundamentalmente, la usabilidad se refiere a la facilidad de uso, de cómo el diseño
de un producto cualquiera facilita o dificulta su utilización. La Organización
Internacional de Normalización (ISO) 9241-11 la define como la medida en la cual
un producto puede ser utilizado por determinados usuarios para conseguir
objetivos específicos con efectividad, eficiencia y satisfacción, en un contexto de
uso determinado.1
Si hablamos de usabilidad aplicada al entorno web, Jakob Nielsen2 la entiende
como un atributo de calidad que evalúa la facilidad de uso de las interfaces de
usuario. También se refiere a los métodos que podemos aplicar para mejorar esta
facilidad de uso durante el proceso de diseño. Nielsen define la usabilidad a partir
de cinco elementos:
• Facilidad de aprendizaje: hasta qué punto es fácil para los usuarios
realizar las tareas básicas cuando se enfrentan por primera vez a un diseño.
• Eficiencia: una vez que los usuarios ya han aprendido el diseño, con
qué rapidez realizan las tareas.
• Facilidad para ser recordado: cuando los usuarios han dejado durante
un tiempo de interactuar con ese diseño, cuánto les cuesta recordar cómo
se utilizaba.
• Errores: cuántos errores cometen los usuarios al enfrentarse con el
diseño, los pueden solventar fácilmente.
• Satisfacción: ¿es agradable utilizar el diseño?, ¿son fácilmente
localizables los elementos en él?, ¿ayuda o dificulta la realización de las
tareas?, ¿volverían los usuarios a utilizar de nuevo ese diseño?

                                                                                                               
Página  6  

1 ISO/IEC 9126: http://www.issco.unige.ch/en/research/projects/ewg96/node14.html#SECTION00311000000000000000 -

2 Jakob Nielsen, conocido como el gurú de la usabilidad, es uno de los principales referentes en el ámbito mundial de usabilidad en la
web. Web personal del teórico: http://www.nngroup.com/people/jakob-nielsen/
¿Por qué es importante la usabilidad?
En la web, la usabilidad es una condición necesaria para la supervivencia:
• Si un sitio web es difícil de usar, la gente se va.
• Si las páginas no exponen claramente lo que se ofrece y lo que
pueden hacer los usuarios en el sitio, la gente se va.
• Si los usuarios se pierden en un sitio web , se van.
• Si la información de un sitio web es difícil de leer o entender, se van.
Un usuario no va a leer un manual de cómo navegar una web, ni va a gastar
tiempo tratando de entender una interfaz; siempre va a haber otros sitios web
disponibles. El abandono es la primera línea de defensa cuando los usuarios se
encuentran con una dificultad.

Beneficios
Los sitios Web fáciles de usar producen un conjunto de beneficios permanentes
que generan una “conquista” definitiva de los usufructuarios de nuestro sitio,
incluso podemos hablar hasta de un enamoramiento de los mismos; es decir,
estamos hablando de:
• Usuarios satisfechos: la satisfacción de los usuarios es un resultado
directo de las posibilidades que tengan éstos de conseguir sus objetivos con
el mínimo esfuerzo posible.
• Usuarios fieles: la facilidad de uso produce una utilización mayor de
funcionalidades tanto en frecuencia como en amplitud. Provoca en los
usuarios el deseo de volver a utilizar el sitio o aplicación y de seguir
indagando en sus funcionalidades.
• Menor costo de soporte: una aplicación más fácil de usar genera
menos problemas a los usuarios y por tanto se reducen las necesidades de
soporte y ayuda.
• Menor costo de mantenimiento: los problemas de Usabilidad surgen
inmediatamente a la luz a través de las llamadas a soporte y quejas de los
usuarios, lo que genera un ciclo permanente de modificaciones.
Los beneficios de la Usabilidad son amplios y tienen impacto tanto desde el punto
de vista de la imagen del sitio como desde el punto de vista económico.

Para profundizar en estos temas:

• Informe APEI sobre usabilidad:
http://www.nosolousabilidad.com/manual/1.htm
• ¿Qué es la usabilidad? Definición de Usabilidad:
http://www.alzado.org/articulo.php?id_art=39
Página  7  

• Usability 101: Introduction to Usability:

http://www.nngroup.com/articles/usability-101-introduction-to-usability/
Interacción con el sitio

La experiencia del usuario

Ocurre muy a menudo que se intenta buscar algo en concreto en una página web y
no se encuentra.
Puede semejarse a buscar un producto en particular en un supermercado;
dependiendo de cuál sea su distribución, se puede llegar a pasar más de cinco
minutos buscándolo, mientras se pregunta si no hubiera sido mejor situarlo junto a
los productos de higiene en vez de la sección de alimentación.
Estos 5 minutos alguien puede perderse en un supermercado, pero en el mundo
de internet el escenario es distinto, ya que un usuario que no encuentre lo que
busca en pocos segundos, abandonará la página.

En este sentido, cada usuario interactuará con los contenidos del sitio en función
de la necesidad de información; esta será la que condicione el comportamiento de
búsqueda. Así, la búsqueda de información conocida es diferente que la búsqueda
de información sobre un tema desconocido por el usuario. Esta diferencia es
determinante en las prioridades de nuestros usuarios y por lo tanto debe ser tenida
en cuenta al estructurar la información en el espacio Web.
Entonces, necesidades de información más comunes que debemos tener en
cuenta:
• Encontrar un ítem conocido: cuando el usuario sabe lo que quiere, cómo se
llama y dónde encontrarlo.
• Búsqueda exploratoria sobre un tema conocido: el usuario no está
totalmente seguro de lo que está buscando y espera aclarar lo que desea
encontrar a través de la propia búsqueda.
• Búsqueda exhaustiva: cuando el usuario quiere obtener toda la información
disponible vinculada con un tema.
• Re-encontrar un ítem: cuando el usuario ya encontró lo que busca pero por
alguna razón decide regresar en otra ocasión.
En esa búsqueda, los usuarios suelen hacerse las siguientes preguntas cuando
acceden a una página:
• ¿Dónde me encuentro?
• ¿Dónde he estado?
• ¿Dónde puedo ir?
• Sé lo que estoy buscando. ¿Cómo lo busco?
• ¿Cómo me muevo en este sitio?
• ¿Qué es importante o único acerca de esta
organización/institución/empresa?
• ¿Qué información hay disponible en este sitio?
¿Qué es lo que sucede o se desenvuelve en esta institución?
Página  8  

•
• ¿Quieren mi opinión acerca de su sitio/del contenido?
 • ¿Cómo me pongo en contacto con un humano?
• ¿Cuál es su dirección física?.

Para lograr responder estas preguntas, un sitio web debe proporcionar un conjunto
de recursos y estrategias de navegación diseñados para conseguir un resultado
óptimo en la localización de la información y en la orientación para el usuario.

Navegabilidad
Se trata de la navegabilidad del sitio: un sitio debe ser cómodo para el usuario,
debe ser fácilmente navegable, el usuario tiene que poder ir de un lado a otro del
sitio rápidamente y sin perderse.
Así, llegamos a un principio básico de la usabilidad: el usuario no tiene tiempo, y
menos para estar adivinando cuál es la manera de llegar a los diferentes
contenidos de nuestras webs.

La navegabilidad es un elemento muy importante en todo sitio y debe ser igual en

cada parte del mismo. Es un elemento de la usabilidad que debe ser tomado en
cuenta a la hora de planificar cualquier sitio web.

En este contexto
Todo esto deriva en que, entre otras cuestiones que se verán más adelante, la
nomenclatura utilizada en la navegación y encabezados es de vital importancia
para el sitio.
Hay que tener en cuenta que, en este contexto, normalmente los usuarios no leen
los contenidos de las páginas Web, sino que los "escanean"3, por las siguientes
razones:
1. No siempre cuentan con mucho tiempo para leer todos los contenidos
2. Saben que no necesitan leer todo. Generalmente buscan porciones de
contenidos
3. Están acostumbrados a hacerlo, desde leer revistas, diarios y libros en
búsqueda de que coinciden con sus intereses.
Sin duda que, siguiendo la última afirmación, se está frente a una cuestión
fundamental. En este sentido, en este modo de lectura, cada unidad de
información compite con el resto por llamar la atención del usuario. Cualquier
elemento irrelevante, y de manera más acentuada si es de vivos colores o se
mueve, será distractorio y disminuirá la "ojeabilidad" del sitio web. Esta afirmación
no significa que estos no analicen y capten detalladamente la información, se
refiere únicamente al estilo de captar información, no leyendo línea por línea, sino
a saltos. Los estudios de movimientos oculares4 muestran que incluso cuando los
                                                                                                               
3
Los usuarios casi siempre ojean velozmente (scan) las páginas web, leyendo palabras y frases sueltas, concretamente el 79% de
Página  9  

ellos actúa de esta manera. Los usuarios nunca leen detalladamente mientras navegan y sólo el 16% de ellos leen palabra por
palabra.
4
Eye tracking: Seguimiento de ojos (traducido del inglés eye tracking) es el proceso de evaluar, bien el punto donde se fija la mirada
(donde estamos mirando), o el movimiento del ojo en relación con la cabeza. Este proceso es utilizado en la investigación en los
 usuarios creen leer totalmente un texto on-line, en realidad sólo leen
aproximadamente el 75%.
Los usuarios se centran en las áreas de texto de la página, es decir, en los
contenidos, ignorando las áreas de navegación, gráficos y otros elementos de
diseño global. Este dato confirma la idea de que el aspecto estético de un sitio
web, o del contenido del sitio, debe ser pensado en función de lo que se quiere
transmitir y no en pro de una estética vacía y reconocida en si misma (esto
tampoco quiere decir que no se deba proponer una estética que no sea destacable
por su propia belleza o impacto).
Así, se puede afirma que, como consecuencia de este comportamiento, los
usuarios prestan raramente atención a los logotipos, eslóganes, banners u otros
elementos parecidos, ya que muy ocasionalmente sirven a sus objetivos. Esto
hace que los elementos que se mueven, los banners con colores estridentes, las
páginas que al abrirlas presentan efectos o bloques que flotan sobre el contenido
(que la única manera de sacarlos es cerrándolos con una pequeña “x” ubicada en
lugares impensados), los videos y audios que comienzan sin que uno lo ordene,
etcétera, simplemente molestan al usuario y pueden provocar que este abandone
el sitio.
Por lo tanto, cada página de la web requiere por lo menos una jerarquía visual
clara, un aprovechamiento de las convenciones, áreas bien definidas y
estructuradas, una interactividad de elementos obvia y fácilmente descifrable y
limpieza visual (disminución del ruido).

Siempre tomando en cuenta el contexto en el que se encuentran los usuarios, ese

contexto es la Web. En este sentido, en esta:
• Se carece del sentido de dirección, no nos movemos hacia arriba, abajo,
derecha e izquierda.
• Se carece de las referencias de objetos para orientarnos y recordar los
caminos que hacemos
• Al movernos de forma conceptual, debemos proveer mecanismos que nos
permitan superar las dificultades anteriores.

Pensar en móviles
Pantallas y resoluciones pequeñas, varios navegadores distintos con soportes
programáicos precarios, tiempos de descarga lentos y un nuevo medio en el que
no terminan de encajar las soluciones que ya aplicabas en otros… eso es pensar
en móviles.
Los usuarios a los que se llega, poseen cientos de dispositivos diferentes, y la
mala noticia es que es imposible realizar un único diseño que funcione en todos y
cada uno de ellos. Por tanto, diseñadores, contenidistas y administradores, están
obligados a pensar en sitios para celulares, Tablets, escritorio, etcétera a la vez.
Página  10  

                                                                                                                                                                                                                                                                                                                                                                           
sistemas visuales, en psicología, en lingüística cognitiva y en diseño de productos. http://www.nosolousabilidad.com/articulos/eye-
tracking.htm
Entonces, “Pensar en móvil” es, en primer lugar, pensar en el usuario como centro
del contenido y diseño, en su experiencia de navegación satisfactoria; y en
segundo lugar, es pensar en dispositivos móviles en plural, ya que para cada
dispositivo los elementos de una página deberán ser planificados de forma
particular, teniendo en cuenta las ventajas e inconvenientes de cada uno de ellos.
Por ejemplo, si se piensa en smartphones, quizás lo más importante sería recodar
que las páginas web creadas con Flash o las animaciones en este formato, no
pueden ser visualizadas en muchos teléfonos móviles.
Otro de los inconvenientes de los smartphones que se deben tener muy presente
es la velocidad de carga. Las conexiones suelen ser algo lentas, por lo que si una
página tarda una eternidad en cargar, los usuarios la abandonarán e irán a otra
optimizada que no les haga perder su tiempo.
En cuanto las tabletas, a pesar de tener un pantalla mayor que la de los
smartphones (lo que posibilita una navegación más satisfactoria a priori), se debe
apuntar a una construcción de la información y un diseño web lo más simple y
preciso posible, que se centre en desatar todo el potencial y todas las ventajas de
las pantallas táctiles de este tipo de dispositivo.

En ese sentido, se debe tener claro que no es sólo cuestión de diseño y

programación, corresponde también a los contenidos.

Página  11  
Técnicas

Se listan a continuación algunas técnicas y buenas prácticas a seguir para lograr

que un sitio, página, portal, aplicación web, sea considerado como usable.
Cada una es importante en sí misma al tiempo que todas, en su conjunto, se
retroalimentan y complementan.

Los usuarios no son adivinos (Convenciones)

“Innova cuando sabes que tienes una mejor idea (y todo aquel a quien se la
muestras dice “Wow!”), pero sino toma ventaja de las convenciones”.5

Una de las habilidades clave para diseñar o crear paginas web es respetar las
convenciones web, aplicándolas (cuando se considere pertinente) para su máximo
beneficio.
Las convenciones son una serie de normas no escritas, adquiridas por el uso
cotidiano, que todo el mundo conoce, entiende e interpreta prácticamente de la
misma forma.
Cuando quienes se encargan de crear, diseñar y subir contenido a la web, se
atienen a ellas, garantizan que los usuarios van a ser capaces de moverse
cómodamente por un sitio web, sin tener que estudiar un manual de usuario ni
dedicar un tiempo a la experimentación y el aprendizaje.
La razón por la que funcionan las convenciones es también la razón por la que son
tan valorables: son atajos visuales, capaces de tener significados complejos con la
información visual más simple. Un triangulo rojo alrededor de un signo de
exclamación toma menos trabajo mental para decodificar que la palabra "Cuidado".

Se trata de colores, formas, patrones, disposiciones, estilos de fuente que, con el

tiempo, comenzaron a implicar significados que no están realmente evidenciados.
Hay literalmente cientos de convenciones reconocibles. Algunos ejemplos simples
que encontrará en la web incluyen:
• En muchas partes del mundo, un triángulo amarillo en un cartel vial significa
‘atención’. Esto ha pasado a convertirse una convención en software.
Página  12  

                                                                                                               
5  Steve Krug, “Don’t Make Me Think. A Common Sense Approach to Web Usability” http://web-profile.com.ua/wp-
content/uploads/steve-krug-dont-make-me-think-second-edition.pdf  
 • Un área de la pantalla que se ve como un botón (rectangular y elevado con
un borde biselado) llevará a cabo convencionalmente una acción al ser
seleccionado con el mouse. Esto imita botones en dispositivos físicos, tales
como radios, televisores y computadoras. Tomando la apariencia de un
botón de presionar, el objeto toma la asociación primaria del usuario: "botón
= puedo presionar = hace que algo suceda".
• Los primeros navegadores presentaban los hipervínculos de texto en
formato azul subrayado. Esta convención ha durado por una década, incluso
a pesar que no es el formato más fácil de leer.
• Si quiere ir a la página inicial de un sitio web, mirará primero arriba a la
izquierda de la pantalla para un logo o botón con la palabra "Inicio" en él.
Nadie le dijo que lo hiciera, lo ha aprendido por experiencia.
• Si ve un grupo de palabras separadas por pequeñas líneas verticales en el
fondo de una página web, se asume que son un grupo de links generales
del sitio web en el que se está.
• El logo del sitio web, generalmente ubicado en el extremo superior izquierdo
de la página, está vinculado al home del sitio.

Esto no significa que siempre se deba utilizar las convenciones, sino que la
recomendación sugiere que el apoyarse en las convenciones, hará que la
navegación por un sitio sea más intuitiva. Por ejemplo, un texto azul subrayado
(entendido en todo el mundo como un enlace) es una de las convenciones más
claras, pero no significa necesariamente que se deba aplicar, justamente, muchos
diseñadores web optan por no aplicarla por ser poco estético.
Por lo tanto, son como reglas, y, como las mejores reglas, pueden ser rotas o
torcidas. El truco es saber cuándo el ir contra una convención establecida será
perjudicial para una función, y cuándo necesita ser reinterpretada.
Es también muy importante evitar usar una convención en un contexto errado.

Más sobre este punto:

• Steve Krug, “Don’t Make Me Think. A Common Sense Approach to Web
Usability” http://web-profile.com.ua/wp-content/uploads/steve-krug-dont-make-me-think-
second-edition.pdf  

No dejarse seducir por la tecnología

Innovar no significa tener que reinventar la rueda en cada proyecto, sino construir
sobre la base de modelos existentes. En otras palabras, enriquecer las
experiencias implica ser consistentes con lo que el usuario conoce y acepta.
Página  13  
Menos es más
En los dispositivos móviles, ante una pantalla más pequeña, se podrá ver menos
contenido al mismo tiempo. Esto tiende a hacer más difícil para el usuario tener
una visión general de la página, comparar las diversas opciones, y recordar el
contenido anterior.
Si tenemos largos textos, presentaciones, galerías eternas o formularios
interminables donde el usuario va haciendo scroll y no puede ver el título o el
contenido inicial junto con la información previamente presentada o introducida,
complicará mucho la experiencia del usuario. Lo ideal es proponer contenidos
cortos, puntuales, pequeños formularios o galerías con pocos elementos linkeados
a otras más grandes (evidenciando esto al usuario) haciendo el contenido lo más
sencillo posible.

No es escribir en papel
El espacio con el que se cuenta en la pantalla es escaso, el tiempo que invierten
los usuarios en leer nuestro contenido, más escaso todavía,
Así, es aconsejable seguir una serie de pautas a la hora de presentar la
información:
• Se debe poner el contenido más significativo al principio de la página.
• Se debe hacer resaltar los elementos más representativos utilizando
distintos métodos: palabras resaltadas mediante negrita y cambios de color
o de tamaño. En este sentido los hipervínculos actúan como elementos de
atracción visual pues se destacan del resto del texto.
• Los usuarios no leen las páginas web sino que las escanean en busca de
información, de algo que les llame la atención o que les ayude a identificar
lo que están buscando. Una página sin ningún elemento destacado es como
una gran mancha gris en la pantalla, estructurando el contenido mediante
encabezados y párrafos ayudamos a romper esa “mancha visual” y a crear
focos de atención que ayudan al usuario a seguir leyendo.
• Al insertar encabezados en el texto, igual que ocurre con la prensa escrita,
hay que crear una jerarquía visual en la que los encabezados principales
tengan un cuerpo de letra más grande que el resto del texto. En el que caso
de que haya encabezados secundarios, tendrán que ser más pequeños
pero claramente destacados. Es aconsejable que estén alineados a la
izquierda, y escritos en minúscula.
• Es recomendable que los párrafos sean cortos y que contengan una idea o
tema en cada uno de ellos.
• Otros elementos que se pueden utilizar para estructurar el contenido son las
listas y el uso de la negrita, que crea focos de atención que ayudan al lector
a localizar las palabras clave de la página.
• Hay que tener especial cuidado con el título de la página, porque sirve de
enlace en los listados de resultados de los buscadores. Tiene que ser lo
Página  14  

suficientemente descriptivo tanto para que nos identifique, como para que el
usuario sepa de qué va y si se ajusta a sus expectativas.
 • No utilizar mayúsculas sostenidas, son difíciles de leer.
• Utilizar palabras clave como hipervínculo, en el caso de que se opte por
poner enlaces relacionados tienen que ser lo suficientemente descriptivos
como para que informen del contenido de la página (no escribir: “Pincha
aquí”) y, sobre todo, que al pulsar sobre ellos el usuario obtenga la
información esperada.
• Los mensajes de error deben ser constructivos, escríbelos con un lenguaje
claro y sencillo, que ayuden al usuario a solucionar el problema, no te
limites a decirle que se ha equivocado.

Brevedad y sencillez
Nielsen recomienda usar menos del 50% del texto usado habitualmente en una
publicación escrita. Los usuarios se abruman con los textos largos en un monitor o
pantalla. Los párrafos deben ser cortos, de dos o tres frases únicamente y muy
directos en su estilo.
Los textos largos no deben existir o se deben dividir y agrupar el contenido en
partes significativas, con su respectivos títulos descriptivos para mostrarlo en
distintas páginas. Cada página se enlaza entonces a través de un índice principal
para permitir el acceso directo a la misma.
Entonces:
• Los párrafos deben ser cortos: entre 2 y 3 líneas. Las historias cortas llaman
más la atención
• Recargar a mano izquierda los elementos que más aportan información.
Ejemplos:
! El Presidente ordenó retirar el Proyecto de Reforma Educativa.
! Retirado Proyecto de Reforma Educativa por orden de Presidencia.
El segundo “acumula” la información relevante a la izquierda.
• Uso de la voz pasiva.
• Uso de los dos puntos.
• Unificación de cifras para todas las cantidades.
• Palabras cortas, conocidas y precisas.
• El verbo debe ser fuerte y directo (presente o pasado simples): Inició en vez
de dio inicio a la ceremonia

De la manera más atenta de…

Frases de museo
El día inmediatamente anterior…
 

Estilo de pirámide invertida

Página  15  

La idea principal o conclusión del texto debe escribirse al principio del mismo para
lograr interesar al usuario en la lectura del mismo. Después se debe continuar con
los razonamientos generales que sustentan el argumento. Para terminar se
 pueden ofrecer enlaces a otras páginas donde se ofrecen más detalles como
tablas de datos, resultados concretos o informaciones previas.
Este tipo de redacción se conoce como el “estilo de pirámide invertida”. Se trata de
una secuenciación completamente opuesta a la utilizada tradicionalmente en los
artículos científicos y académicos. De esta manera se asegura que el lector retiene
lo más importante de la argumentación aunque no llegue a leer hasta el final del
artículo o de la página.

¿Qué?  
 
 
 
¿Por  qué?  
 
 
 
¿Para    
qué?  

Más sobre este punto:

• Jakob Nielsen, “Be Succinct! (Writing for the Web)” -
http://www.nngroup.com/articles/be-succinct-writing-for-the-web/

• Jakob Nielsen, “How Users Read on the Web” -

http://www.nngroup.com/articles/how-users-read-on-the-web/

Titulares
Las páginas web, desde un punto de vista programático, conceptual y visual (para
el usuario) deben mantener una estructura lógica para transmitir un orden
jerárquico en la estructura del documento.
Ese es el caso de los encabezados, cuando ingresamos título y subtítulos,
debemos evidenciar y respetar el orden jerárquico de estos. Para esto,
programáticamente, se usan las etiquetas de encabezados h1, h2, h3, h4, h5 y h6.
En los editores de texto o en los editores WYSIWYG6, por lo general se ven
presentados como “título 1” a “título 6”.
La etiqueta de encabezado h1 (“título 1”) y sus hermanas pequeñas, son una de
las herramientas más potentes con las que contamos en lo que corresponde al
posicionamiento en los buscadores para decirles a los usuarios de qué va el
contenido de nuestra página web. Además, su correcto uso es fundamental desde
el punto de vista de la accesibilidad web y desde la óptica de la usabilidad.
Sin embargo, y aunque su concepto es en origen sencillo, darles un uso adecuado
no es algo conocido por todos.
Página  16  

                                                                                                               
6
en inglés: What You See Is What You Get
Entonces, siguiendo un orden y estructura debemos evidenciar la jerarquía de los
títulos, respetando las siguientes normas:  
• Nunca deberá aparecer “título 2” (h2) antes que “título 1” (h1). O un título de
“grado” menor antes que uno mayor.
• Se debe mantener el orden consecutivo.
• No se puede pasar de “título 1” (h1) a “título 6” (h6) y viceversa; es decir, no
saltear niveles.
• Debe existir contenido textual entre encabezados consecutivos (“título 1” (h1) a
“título 6” (h6)) del mismo nivel, entre encabezados consecutivos (“título 1” (h1)
a “título 6” (h6)) cuando el segundo sea de mayor nivel que el primero; y entre
el último encabezado y el final de página.

Especificaciones:
H1 (“título 1”) es una etiqueta que sirve para colocar el título del contenido de una
página web; es decir, un título h1 debe hacer referencia a una página de tu sitio web,
y no al sitio web en general. Entonces, no tiene sentido que en un mismo documento
web existan títulos 1.
La etiqueta h2 (“título 2”) es un elemento similar al h1, que indica títulos de
importancia para subsecciones del documento web actual. Por su naturaleza, puede
haber varios h2 en un sitio que indiquen los diferentes títulos de importancia de la
página en la que nos encontramos.
Página  17  

Los titulares h2 marcan las diferentes secciones de un texto, los títulos de los nodos
accesibles desde un listado de elementos, etcétera. No existe un número determinado
de elementos h2 que puedan colocarse en una página, pero el contenido debe ser el
 que marque este requerimiento. Entre 2 y 8 titulares h2 son lo más adecuado, aunque
pueden no aparecer o presentarse en un número mayor si la longitud del texto lo
requiere.
Las etiquetas h3 (“título 3”) en adelante nos permiten definir títulos de subapartados
de un bloque encabezado con un h2. Su incidencia en los buscadores es más
limitada, y por ello no es habitual ni recomendable el trabajar los titulares a partir de
h4.
Importante: las etiquetas h1, h2… (o “título 1”, “título 2”…) no cumplen una función
estética, sino semántica. No se deben usar en función del tamaño o de los colores,
sino en función de la jerarquización de los encabezados y de la estructura de la
información.

Títulos seductores
Los títulos son para algunos la parte más importante de una web; son la presentación
del contenido, juegan un rol de pequeña introducción a la información presentada, al
tiempo que deberían cautivar al usuario para que se detenga a leer el contenido que
presenta; pero, teniendo en cuenta que el título no es parte del texto del documento.
De esta forma, no se debe abusar de títulos extensos. Como norma general se
establece que estos no debería ser de más de 70 caracteres de largo.
Asimismo, los títulos muy largos no atraen a los lectores; la mayor parte de los
internautas no se detendrán a leer mucho antes de alcanzar el argumento que
realmente les interesa. Recordemos que el usuario, hasta que no encuentra lo que
realmente quiere leer, simplemente escanea las páginas. Entonces, en el momento en
que un debe elegir a qué prestarle atención, pondrá cuidado a las primeras palabras
de cada título, tratando de encontrar enseguida el contenido que cree más conforme a
su búsqueda, por lo tanto, si el texto es muy largo, simplemente no encontrará en esa
mirada (o escaneo) las claves que lo seduzcan a leer el texto (la importancia de
las palabras clave que contiene el titular irá perdiendo fuerza cuanto más largo sea).
De esta forma, un texto corto, donde las palabras clave se resalten al principio del
título, son lo ideal. Aunque tampoco se debe abusar de los textos muy cortos que no
evidencian nada y pueden confundir más que encantar al lector.
Puede que estas recomendaciones vayan en contra de un titular de un estilo
periodístico, pero recordemos que estamos escribiendo para la web y no para papel.
En ese contexto, esos consejos se vuelven útiles también para cuando se busca
posicionar el documento de buena forma en los buscadores, pues, por ejemplo,
Google confiere una mayor importancia a las primeras palabras de la frase que a las
últimas a la hora de indexar contenidos para sus búsquedas.

Más sobre este punto:

• Convenciones generales sobre el armado de títulos propuesto por
Wikipedia: http://es.wikipedia.org/wiki/Wikipedia:Convenciones_de_t%C3%ADtulos
Página  18  
Uso de las mayúsculas sostenidas
Cuando se lee, lo primero que se observa es la forma general de las palabras. De
manera que un titular con la primera letra de cada palabra en mayúscula es mas
atractivo visualmente que todo el titular en mayúsculas.

La mayor cantidad de la información reside en la parte superior de las letras, la

vista está acostumbrada a fijarse en esa parte, por lo que si capitalizamos todas
las palabras estaremos obligando a realizar un esfuerzo superior que puede
resultar molesto.

Muchos piensan que la mejor manera de hacer sobresalir un párrafo, o una

palabra en su contenido escrito es usar las mayúsculas sostenidas, que según
estos, podrían darle una mayor importancia a “esa” palabra.
La realidad es que se equivocan, en la Web (y por lo general en cualquier medio)
la lectura, si se utiliza esta mal llamada “estrategia”, dificulta la comprensión del
texto para el visitante.
Asimismo, las normas de "etiqueta" de la web indican que el uso de mayúsculas
tiene como significado "GRITAR LO QUE UNO DICE", enfatizando el mensaje, el
uso de minúsculas significa una charla normal.
En este sentido, en el caso de los títulos, si se quiere usar mayúsculas sostenidas,
se deberá llegar al un consenso entre todos los administradores del sitio en el cual
todos se comprometen a crear todos los títulos con mayúsculas sostenidas.

No cualquier tipografía
Las fuentes están presentes en toda la página: artículos, banners, botones, links,
barras de navegación y menús, por lo que es de vital importancia elegir la
tipografía adecuada. Así, el tipo de letra que se use en la página, afectará la
usabilidad y determinará en qué porcentaje el usuario que ingrese al sitio se quede
en ella o la abandone.
En un inicio, la norma de usabilidad en cuanto a la fuente a usar en páginas web
era muy sencilla y similar a la que se usa en textos impresos: utilizar fuentes sans
serif como Verdana (primera fuente diseñada para mejorar la legibilidad en
pantalla), Arial, Franklin Gothic, entre otras.
Esto se debía a la baja calidad de las pantallas de las computadoras que eran de
apenas 60 PPI y, a pesar de que esta regla aún se mantiene, ya no es tan estricta
como en un inicio.
Página  19  
Incluso, hay quienes sostienen que, dado que en la web no hay referencias
horizontales como puede ser un renglón en un papel, se debe utilizar fuentes que
tengan serifa, ya que estas, por el “efecto visual” dado por sus terminaciones,
forman un renglón que a la hora de leer textos largos forman una línea guía para la
lectura.
El experto y padre de la usabilidad Jakob Nielsen, cuestiona estas norma en su
artículo “serif vs Sans Serif” en donde argumenta que investigaciones hechas
concluyen que la diferencia de la velocidad de lectura entre fuente sans serif y serif
es muy pequeña. Por lo que no debe haber ninguna directriz de usabilidad en favor
del uso de una u otra.
De todos modos, Nielsen plantea que la elección de la fuente deberá depender de
otros factores como la tipografía usada por la marca o el estado de ánimo que se
desee expresar.
Sin embargo, hay normas de usabilidad en cuanto a la fuente que sí se mantienen
vigentes como:
• El uso de una o más de dos tipos de fuentes debe ser evitados (con la
excepción de ser usadas para diferenciar títulos de párrafos), así como
también los tipos de fuente “fantasía” que dificultan la legibilidad.
• No es recomendable usar subrayado en páginas web, pues tiende a
confundirse con enlaces.
• La cursiva debe usarse con poca frecuencia, ya que no es muy legible en la
pantalla.
• Negrita. No abusar del uso de la negrita destacando gran cantidad de texto.
• Es recomendable usar las fuentes de al menos 12 ó 14 puntos para facilitar
la lectura.

Más sobre este punto:

• Serif vs. Sans-Serif Fonts for HD Screens -  http://www.nngroup.com/articles/serif-
Página  20  

vs-sans-serif-fonts-hd-screens/
Entre líneas
El interlineado (espacio entre líneas de texto) recomendado por las WCAG 2.0
debe ser de, al menos, la mitad de la altura del texto, y el espacio entre párrafos
1.5 veces la medida del interlineado.

Más sobre este punto:

• Visual Presentation — Understanding SC 1.4.8:
http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-
presentation.html

¿Se justifica Justificar?

El texto justificado se utiliza en libros, boletines, periódicos y revistas en papel,
para crear un ritmo horizontal que guía a los ojos por la página. Pero una buena
justificación requiere una cuidada elección de elementos que ofrecen las
herramientas profesionales con las que se crean estas publicaciones: tipo y
tamaño de letra, ancho de la página, longitud del bloque de texto, separación de
sílabas, idioma, el propio texto del contenido, etcétera.
Desafortunadamente, en una página web no se puede controlar ninguno de estos
elementos, por lo que las justificaciones de texto rara vez están justificadas, ya que
es más fácil que el resultado sea peor de lo esperado. Los navegadores no están
preparados para justificar textos, no pueden partir palabras y crean ríos de
espacios en blanco (efecto conocido como “rivers of white”).
Aquí no hablamos sólo de razones estéticas, sino de accesibilidad y usabilidad.
En este sentido, la mayoría de los usuarios con dificultades de lectura, encuentran
problemas con el texto justificado. El irregular espacio en blanco que se produce
entre palabras, causa los mencionados 'ríos de espacios blancos' hacia abajo,
provocando una lectura difícil y en algunos casos imposible para algunos lectores
de la web.

Página  21  
 Lo que suele suceder es que la justificación se utiliza como un intento de "parecer
serio y autoritario. Es un truco barato (...)” con el que se suele querer activar el
modo "hagamos que parezca como un libro" (...) Generalmente no funciona bien ni
siquiera con las páginas que salen por la impresora, de modo que es mejor evitarlo
en pantalla. En la mayoría de las páginas, escribir bien y tener cierta consideración
con los lectores es la única "justificación" que se necesita."7
Sin duda que este es un tema polémico; el debate sobre justificar o no en la web
está sucediendo en este momento aunque con notoria preponderancia de quienes
sostienen la posición negativa.

Más sobre este punto:

• River (typography) - http://en.wikipedia.org/wiki/River_%28typography%29

Entre la izquierda y la derecha

Cuando se planifica un sitio web, una página o un espacio dentro de una página
generalmente nos encontramos con la duda sobre dónde colocar o cómo distribuir
los distintos elementos en ese lugar. Más allá de cuestiones estéticas, se debe
tener en cuenta que la direccionalidad de la escritura, de izquierda a derecha en
occidente, condiciona totalmente la manera en que los usuarios “escanean” una
página web en busca de contenido. De nuevo, Jacob Nielsen, a través de uno de
sus tips de usablidad analiza la cuestión y proporciona datos al respecto:
básicamente, plantea que el 69% del tiempo, los usuarios están mirando hacia el
lado izquierdo de los sitios web. Allí, es donde se inician las frases de todos los
textos en escritos de izquierda a derecha.
Entonces, surge una serie de recomendaciones de diseño que favorecen la
usabilidad de un sitio web:

• Mantener los menús de navegación a la izquierda. Es donde el usuario suele

buscar sus opciones de navegación.
• Situar la mayor parte del contenido en la zona contigua, un poco más adentro.
• El elemento más importante debe estar situado en la “mejor zona”, justo donde
los usuarios centran su atención: entre 1/3 y la mitad de la página según su eje
vertical central.
• El contenido secundario menos importante es mejor situarlo a la derecha. No
se puede aspirar a tener un interés del 100% en todos los elementos, hay que
jerarquizar.

Más sobre este punto:

• Horizontal Attention Leans Left - http://www.nngroup.com/articles/horizontal-­‐
attention-­‐leans-­‐left/  
Página  22  

                                                                                                               
7
Martínez Diana, Julio. S/d. http://www.antipixel.com.ar/
Otros idiomas
Cuando es necesario ingresar texto, gráficas, imágenes, adjuntos que estén en un
idioma que no sea el español, debemos aclararlo en un texto introducción previo,
con una nota la final, paréntesis, etcétera.

Son tablas tabulares

Una tabla en Html no es más que un modo de presentar una serie de datos que
guardan cierto orden y relación entre ellos. Entonces, cuando tenemos datos
tabulares a mostrar, debemos presentarlos en una tabla.
Esta no sólo constará de filas y columnas, sino que también deberá colocarse
anteriormente una descripción de la misma y, de ser compleja, una pequeña guía o
manual de cómo leerla.
Asimismo, cuando se crea la misma, en la herramienta de edición debemos
recordar ponerle un título.

Por otro lado, es importante recordar que las tablas no se usan con fines de
maquetación o estructuración de la web (más allá de que muchos sitios las usan
con este fin); es decir, no deben ser usadas para darle forma al diseño de una
página web.

Mal uso de tablas Correcto uso de tablas

Listas listas
Las listas se utilizan para organizar información, para dar una disposición a un
contenido que se considere sea plausible de ser presentado en ese formato. Así,
es fundamental que cuando uno presenta un contenido y está listando elementos,
se presenten en forma de lista.
Página  23  
 Consideraciones a tener en cuenta:
• Nombre: toda lista debe llevar un nombre. De esta forma, al ponerle nombre,
evitar llamarla de una forma similar a "Lista de X elementos...", se aconseja
simplemente "X elementos". El lector puede darse cuenta solo si está viendo
una lista o texto desarrollado.
• Introducción: ninguna lista debería ser sólo la lista en sí. Incluso si el nombre
fuera claro en sí mismo, siempre se debe incluir una introducción que presente
y contextualice el tema.
• Contenido: una lista debería consistir en elementos individualizables, concretos
y análogos entre sí. Cuando son conceptos generales, no delimitables,
superpuestos entre sí, u ordenados simplemente por la forma en que se
presenta la información, se prefiere no crear ninguna lista y en lugar de ello
explicarla con texto de corrido.
• Características: el criterio de inclusión de la lista debe basarse en hechos o en
características claras de los elementos; por lo tanto, una lista no debe tener
elementos asociados libremente o sin un criterio claro.
• Ubicación: pueden estar incluidas dentro de un artículo, o conformar un anexo
independiente.

En este contexto, cuando planificamos una lista, lo primero que debemos tener en
cuenta es si ésta es ordenada o desordenada; es decir, las listas ordenadas son
aquellas en donde el orden o la ubicación que los ítems ocupan en la misma es
importante, y por lo tanto, se les coloca números o letras. Las desordenadas, por el
contrario, son simplemente recuentos de ítems donde el orden no importa. Por
ejemplo:

Tabla ordenada Tabla desordenada

Primeros puestos del mundial de Países finalistas del mundial de

Sudáfrica: Sudáfrica:
1. España - Uruguay
2. Holanda - Holanda
3. Alemania - Alemania
4. Uruguay - España

Enlaces, links, vínculos…

Regla fundamental: los enlaces se distinguen del resto.
Los enlaces, vínculos, hipervínculos o hiperenlaces son elementos de un
documento electrónico que hacen referencia a otro recurso, por ejemplo, otro
Página  24  

documento o un punto específico del mismo o de otro documento. Son una zona
que presenta cierta dinámica dentro de la web; incluso, en casi todos los casos
representa un cambio de contexto al interactuar con ellos.
 Es por eso que se debe evidenciar la existencia de estos enlaces, destacándolos
del resto de los elementos del sitio, ya sea con colores, símbolos, colocándolos en
secciones destinadas para ellos, etcétera.
Lo que más recomiendan los expertos en usabilidad es apoyarse en las
convenciones, un texto azul subrayado significa que es un hipervínculo, un grupo
de imágenes de no más de 400px de ancho con nombres de empresas, marcas u
otras web pueden ser considerados como banners (enlaces a páginas externas).

Enlaces en los cuerpos

Los enlaces de palabras dentro de un cuerpo de texto es una práctica muy
utilizada, sobre todo después de la popularización de Wikipedia y sus artículos
plagados de hiperenlaces. Pero no siempre ayudan tanto como se considera que
lo hacen.
En ese sentido, muy pocas veces son claros sobre su destino; es decir, en el
contexto de Wikipedia y por experiencia de usuario sabemos que los vínculos
dentro de los artículos llevarán a otro donde se conceptualizará la palabra o
expresión vinculada. Pero en sitios donde pude no existir esa experiencia de
usuario, el simple hecho de una palabra subrayada puede no evidenciar lo
suficiente sobre el destino de ese enlace; mejor ofrecer los vínculos de tal forma
que tengan sentido por si mismos; es decir, si en un texto sobre cine, enlazamos la
palabra "Kubrick", se puede entender que ese enlace lleva a una página con más
información sobre el director, pero, ¿es la página de un fan? ¿es su página oficial?,
¿es una biografía?.
En la misma línea, llenar un texto de enlaces puede dificultar la lectura del mismo,
más cuando la recomendación gira en torno a resaltar esos textos.
Asimismo, podemos dejar el artículo sin enlaces y ponerlos todos al final con una
pequeña descripción o usar algún tipo de tabla para incluirlos cerca del cuerpo de
texto al que hacen referencia, pero el incluir una pequeña descripción ayudaran a
darle más claridad a los enlaces.

Formularios
Los formularios son una pieza clave de la interacción de los usuarios con la web,
están presentes en los aspectos más relevantes: la comunicación, los procesos de
alta, las transacciones y las búsquedas.

Para muchos, escribir en un teclado sigue siendo un ejercicio lento y propenso a

errores, así que se cuándo se solicita información a un usuario debe ser de una
forma simple, sin “rodeos”, complicaciones o sinsentidos.
Así, cuando se planifica y diseña un formulario, se tendrá que reducir al máximo el
numero de campos; por ejemplo, no pedir por un lado el nombre y por otro el
apellido, sino que todo en un mismo campo. En este sentido, un formulario de 8
Página  25  

campos tiene el largo justo.

Reconsiderando la formula, “menos es más”, cuando hablamos de formularios,
menos es mucho... se debe tender a cero.
Por lo tanto, lo primero que se debe tener en cuenta es mantener los campos de
un formulario a un mínimo absoluto y pre-seleccionar valores por defecto en todo lo
que sea posible.
Aunque desde luego hay que hacer frente a los datos erróneos en los diseños web
normales, tales como email o nombres mal introducidos, habrá aún más errores en
los formularios completados en los dispositivos móviles, debido al teclado táctil y al
menor tamaño de pantalla. Por esto, incluir alguna página o sección donde el
usuario pueda revisar sus datos posteriormente siempre es una buena idea.
También se puede considerar el auto-completado, el uso de geo-datos, la
validación en línea, los validadores de direcciones, y otros métodos para sugerir y
corregir las entradas del usuario a medida que se escriben.
Los combos de selección son de gran ayuda cuando las opciones no pasan de 5 o
6, por ejemplo, escribir la palabra "Uruguay" puede llevar entre 1 y 2 segundos
más o menos, elegirla en un combo donde podemos encontrar todos los países del
mundo puede llevar un promedio de 4 y 10 segundos.
El uso de combos es útil en aquellos casos en los que la respuesta está
predefinida en tipo rangos, valoraciones subjetivas, marcas, etcétera.

Instrucciones
La tendencia natural de los usuarios es omitir las instrucciones y completar el
formulario cuanto antes. Por lo tanto, lo mejor es limitarlas a ayudas en los campos
cuando resulten imprescindibles.
En efecto, no debería ser necesario explicar a los usuarios cómo se debe rellenar
un formulario, en el caso de serlo esto puede ser un buen indicador de que es
necesario volver a diseñar el formulario.
Igualmente, algunos campos pueden requerir un texto de ayuda: acrónimos,
aclaraciones a la hora de demandar datos privados, etcétera.
Este tipo de ayuda específica puede ofrecerse en dos formatos con sus pros y
contras:
• Ayuda automática: se descubre a medida que los usuarios interactúan en el
ítem. Tiene el inconveniente de que los usuarios no conocen que existe ayuda
disponible hasta que clican en el ítem.
• Ayuda visible activada por el usuario: otra forma de mostrar la ayuda es a
través de un icono visible al lado del campo. En ese caso el usuario debe clicar
en el icono para poder leer la ayuda que suele aparecer en forma de tooltip. La
desventaja de este método es que fuerza al usuario a clicar en el ícono para
poder conocer la ayuda.

En varias columnas
Los formularios en varias columnas deben evitarse. Resultan sumamente confusos
cuando se les busca un orden. Con una sola columna solo existe un orden posible
que es descendente.
Página  26  

Cuando hay dos columnas son posibles múltiples interpretaciones: ¿se cubre la
primera y luego se pasa a la que se sitúa a la derecha?, ¿se termina con la
primera columna y se sigue con la siguiente? En algunos casos sucede también
que los usuarios omiten la columna de la derecha.
En una prueba conducida por Jamie Appleseed, los usuarios encontraron hasta
cinco formas potenciales del cubrir el formulario.

Vale la pena ganar en scroll y hacer el formulario sencillo evitando confundir al

usuario.

Asterisco
Si existen campos que son requeridos y se va a realizar una validación sobre los
mismos, es necesario avisar al usuario.
Si bien parece más útil indicarlo con un texto (“necesario”) existe la convención de
apuntarlo con un asterisco (*) en un color diferente al resto del texto y
habitualmente en rojo, de forma complementaria al asterisco se emplea una
leyenda (“Los campos marcados con asterisco son obligatorios”).
Si la mayoría de los campos son requeridos entonces se deben indicar solo los
opcionales: un texto “opcional” en este caso, no se debe emplear el asterisco para
indicar opcional.
Es fundamental evitar dar información sólo a través del color; por ejemplo, evitar la
frase “los campos en amarillo son obligatorios”. Muchas personas con cualquier
grado de daltonismo, baja visión o otros problemas relacionados a la vista no van a
poder hacer frente a esa condición.

Acciones primarias y secundarias

Las acciones asociadas a los formularios y ofrecidas en forma de botones pueden
clasificarse en dos tipos: primarias y secundarias.
Las acciones primarias, enviar, guardar y continuar, son necesarias para poder
completar el formulario.
Las secundarias son cancelar, resetear y volver. Este tipo de acciones no resultan
imprescindibles para el objetivo principal. La recomendación es prescindir de ellas.
Por los siguientes motivos:
Página  27  

• Pueden tener consecuencias negativas al clicar en ellas de forma

inesperada.
• Generan ruido en la interfaz.
 • Son una opción adicional que requiere procesamiento extra.

En el caso de que se tengan que emplear, la mejor opción para reducir el riesgo de
potenciales error es limitar su impacto visual destacándolas menos que la acción
principal. Una garantía extra la dará además la posibilidad de deshacer la acción.

Más sobre este punto:

• Web Form Design: Filling in the Blanks:
http://www.lukew.com/resources/web_form_design.asp

• Usability ROI Declining, But Still Strong: http://www.nngroup.com/articles/usability-roi-

declining-but-still-strong/

En la paleta de colores
Las pantallas de ordenador de los usuarios por lo general soportan miles de
colores. Es raro encontrar monitores con 256 colores aunque aún existen algunos.
Así, la selección de "colores básicos" de nuestro sitio se debe mantener dentro del
rango de 256 colores. Podremos ampliar el rango en elementos no fundamentales
(fotos, ilustraciones, etcétera) pero debemos asegurarnos que el 100% de la
población podrá acceder a nuestra web sin problemas.

Con contraste
Por otro lado, si el objetivo de un texto es ser leído, cuando no se lee bien existe
un problema. Sin embargo es frecuente encontrar sitios web con insuficiente
contraste8 de luminancia entre texto y fondo que impiden la correcta lectura. Este
escaso contraste puede ser estéticamente agradable, pero es un recurso del que
no se puede abusar, ni para párrafos enteros que los hace muy incómodos de leer,
ni para opciones principales del sitio web porque son menos visibles.
Siguiendo las Pautas de Accesibilidad al Contenido en la Web (Recomendación
W3C)9, los administradores web, así como los desarrolladores deben asegurarse
de que las combinaciones de los colores de fondo y primer plano tengan suficiente
contraste para que sean percibidas por personas con deficiencias de percepción
de color o en pantallas en blanco y negro, al mismo tiempo que un alto contraste
ayuda a “no forzar la vista” y por lo tanto reducir las posibilidades de agotamiento
de la vista del lector.
Página  28  

                                                                                                               
8  Contraste: http://es.wikipedia.org/wiki/Contraste  
9  Pautas de Accesibilidad al Contenido en la Web 1.0. Recomendación W3C: http://www.discapnet.es/web_accesible/wcag10/WAI-
WEBCONTENT-19990505_es.html#toc    
 Por medio del color
En esta misma línea, se sugiere que toda la información transmitida a través de los
colores también esté disponible sin color, por ejemplo mediante el contexto, tramas
o marcadores.
Por ejemplo, un esquema puede ser presentado de esta forma:

En el gráfico 1 vemos que la información está presentada sólo a través del color,
por ejemplo: en el espacio amarillo aparece representado el 40% de la muestra. En
el gráfico 2, siguiendo la recomendación antes destacada, cada sección o trozo del
esquema está representado por una trama, entonces nos podemos referir a cada
uno de esos sectores mencionando la trama. Lo mismo con referencias como
números, letras, etcétera.
Entonces, para el tratamiento de la información, el color no es indispensable. Los
textos y los gráficos deben ser comprensibles con independencia del color. Es
decir, el color no es un medio de información

Más sobre este punto:

• Validadores de color: http://www.usableyaccesible.com/recurso_misvalidadores.php#color
• María J. Hernández-Lloreda, “Mecanismos de detección del contraste
cromático y de luminancia en el sistema visual humano”, anales de
psicología, 2001, vol. 17, nº 2 (diciembre), 219-233:
http://www.um.es/analesps/v17/v17_2/07-17_2.pdf

Imágenes
Uno de las cuestiones que más espacio de discusión ocupa es la inclusión de
imágenes en los sitios web: desde qué tipo debemos utilizar hasta los derechos de
autor y reutilización de las mismas, pasando por el tamaño, colores, formas,
Página  29  

ilustraciones, multimedia, etcétera.

En este contexto, resalta el hecho de que la inclusión de imágenes es algo que no
debe ser realizado deliberadamente. Veamos algunas cuestiones fundamentales a
tener en cuenta:
• Los contenidos no textuales (cualquier contenido que no está formado por una
secuencia de caracteres) deben tener alternativas en texto que comuniquen el
propósito que tienen esos elementos no-textuales: ejemplo, imágenes, vídeos,
flashs. Se trata del texto alternativo de una imagen (atributo alt).
El atributo alt se emplea para proporcionar un texto alternativo que sustituya a
una imagen en aquellos casos que la imagen no pueda ser empleada por
ciertos usuarios, como por ejemplo los usuarios ciegos que utilizan un lector de
pantallas. Se recomienda que el texto alternativo no supere los 100 caracteres
y que no contenga información compleja como tablas o listas.
• Imágenes de texto: hace años, era muy normal encontrar páginas web donde el
texto se ponía en imágenes, porque por aquel entonces no se disponía de la
tecnología necesaria para modificar la tipografía del texto al gusto del
diseñador. En este sentido, usar texto en imágenes, más allá de usar texto
alternativo, es un gran error, ya que ocasionaría muchos problemas de
accesibilidad y usabilidad. Existen excepciones como son los logos, afiches o
casos donde el administrador considere que no existe otra posibilidad; siempre,
en estos casos, colocando el texto alternativo correspondiente.
• La presentación visual del texto y las imágenes de texto, en caso que se usen,
tienen una relación de contraste de al menos 4.5:1, es decir, deben presentar
un contraste "correcto".
• El perfil de usuario de Internet, que acostumbra a tener bastante impaciencia,
no esperará a que las imágenes terminen de cargar. Así, conviene optimizar las
fotografías que colocamos en las páginas web ajustando la calidad de la misma
(comprimiendo la imagen y ajustando la calidad de la misma), ajustando el
tamaño de la foto (Las dimensiones de la imagen son otro de los factores que
más afectan al tamaño del archivo en kb, a veces es preferible presentar la
imagen con tamaño menor que bajar mucho la calidad y tener una pérdida
excesiva, que estéticamente es poco agradable), si tenemos muchas imágenes
en una misma página utilizar thumbnails o miniaturas de las imágenes y que
sea el usuario el que decida cuáles de esas imágenes desea verlas en mayor
tamaño. Así, es importante tener en cuenta que las imágenes de la web no
ralenticen la carga de la página. Pero, siempre tratando de conservar la calidad
de la foto.
Finalmente, las imágenes atraen y distraen a usuarios por igual, por eso, cuando
vamos a usar una, se debe tener claro cuál es su objetivo; es decir, esas pueden
ser imágenes de contexto o imágenes que brindan información relevante para el
contenido de la página. En el caso de las primeras, son simplemente decorativas,
por lo tanto, se pretenderá que no llamen mucho la atención, que no interfieran
(demasiado) en el campo visual del usuario. El caso opuesto son las segundas;
son imágenes que se pretende sean vistas y, por qué no, analizadas por el
usuario, ya que brindan información importante, por esto, deben ser claras, contar
con un contraste correcto, tener texto alternativo, llevar una nota al pie o
Página  30  

referencial, no presentar mucha complejidad (de ser así, por ejemplo un esquema,
insertar una introducción o una nota aclaratoria de la misma).
Fondos
Cada decisión que se toma en torno a la apariencia de un sitio va a interferir en la
usabilidad de este. En este contexto, la elección del fondo del mismo es una
determinación fundamental.
El fondo de un sitio puede ser un color, una imagen o un mosaico de imágenes.
Para el primero de los casos, se debe tomar en cuenta que los colores generan
emociones y se deben complementar con la información que se trata en el sitio: un
sitio sobre flores silvestres puede presentar problemas en ese sentido si el fondo
es rojo (color que por lo general se relaciona con el peligro). Igualmente, se
recomienda que los fondos sean siempre lisos y claros, la imágenes o texturas
pueden interferir con el texto.

Según Nielsen, lo ideal es siempre fondo blanco o, para webs que tienen mucho
texto, los tonos claros de grises pueden ser una buena opción para no cansar la
vista durante la lectura.
En este sentido, muchas veces se usa el colorear el fondo de una sección o bloque
de una página; investigaciones afirman que los usuarios ignoran los textos con
fondo de color.
Este no es un comportamiento deliberado, es la reacción defensiva del sistema
cognitivo del usuario para evitar procesar información no relacionada con sus
objetivos. Los estudios de "eyetracking" (seguimiento de movimientos oculares)
confirman que los usuarios no miran las áreas con colores de fondo y se centran
preferentemente los contenidos el fondo blanco. Esto es debido a un fenómeno
con el mismo mecanismo que la ceguera a los banners, que provoca que cualquier
contenido excesivamente resaltado (sea un banner o no), sea ignorado. Los
usuarios aprenden que cualquier fondo de color con texto no es una información
realmente útil. Normalmente es publicidad, promociones, información de contexto o
estética y simple decoración.
Por esto, la recomendación gira en torno al uso de colores que respeten una
misma paleta cromática o una selección de colores que identifican con los
contenidos de la web (por ejemplo el uso de algunos colores que están en el logo
de la página). Usado de esta forma, el color de fondo se puede utilizar para
separar unas áreas de otras y crear rupturas que ayuden a jerarquizar y separar
los contenidos.

En definitiva, un fondo blanco es lo más indicado, ya que normalmente otros

colores de fondo tienen una interpretación personal o emocional por parte del
usuario.

¿Banners?
Un banner es un formato propagandístico de Internet. Es una forma de publicidad
online que consiste en incluir una pieza publicitaria dentro de una página web.
Página  31  

Prácticamente en la totalidad de los casos, su objetivo es atraer tráfico hacia el sitio

web del anunciante.
Muchos estudios e investigaciones plantean la ceguera al banner; es decir, los
usuarios, cuando navegan una página, intuitivamente reconocen los banners y,
básicamente, no los ven. Esta ceguera se basa en las ideas previas o convenciones
que tenemos en torno a la forma, color comportamiento de un banner (por ejemplo, un
texto de color amarillo sobre un fondo negro, en un rápido escaneo de la web, puede
ser considerado como un banner por más que no lo sea).
En ese sentido, ya que como pieza publicitaria no estría cumpliendo con su cometido,
surge la problemática en torno a su diseño: algunos diseñadores han optado por ir
aumentando el tamaño, otros prefieren hacerlos animados con colores estridentes,
otros los colocan “flotando” sobre el contenido y le brindan al usuario un botón
(pequeño y difícil de encontrar) para cerrarlos. Todas estas soluciones sólo han
molestado cada vez más a los usuarios y no se ha ganado en efectividad; es decir,
cuando se coloca una imagen sobre el costado de un contenido, esta imagen será un
elemento de distracción para el lector, mucho más si esta se mueve; en ese sentido,
si el banner aparece sobre el contenido, tapándolo, generará disgusto y ganas de
cerrarlo o de salir de esa página.
Por lo tanto, la solución sería no usar banners. Pero, una web necesita subsistir, lo
que hace que la publicidad y los banners se vuelvan un mal necesario. Entonces, lo
que se debe cuestionar cuando se planifica la colocación de banners es:
• ¿Realmente hace falta colocar banners horizontales, skycrapers y mini sites
que se expanden, en la misma página?, o podemos solucionar el problema
colocándolos en algunos rincones de la misma y que en lugar de querer
resaltar, se acompasen al diseño y estética del sitio
• ¿Cuánto espacio ocuparán? Como norma general, al contenido se le debería
dar por lo menos el 50% del espacio de la página y como un ideal, el 80%. La
navegación por su parte debería restringirse a un 20% como máximo, a
excepción de las páginas de inicio. Así, la publicidad no debería superar el 10%
del espacio, siendo 5% el ideal.
• ¿Usar banners avanzados? Estos tipos de banners (que contienen campos de
texto, combos o invitan a una cierta interactividad) son interesantes, pero la
gente no los usa por que no sabe si debe pinchar o usarlo. Asimismo, muchas
veces se abusa de este tipo de banners, engañando al usuario haciéndolos
parecer botones del sistema.
• ¿Usar banners animados? Una animación que comienza y se mueve
“eternamente” sin que el usuario pueda detenerla, es de los elementos que más
molestan y hacen que se abandone el sitio. Sobre todo cuando se trata de
publicidades que incluyen audios o videos que comienzan sin que el usuario lo
disponga. Por esta razón y por ser publicidad que influye negativamente en el
momento en que la página se carga, retrasándola, es que no son
recomendados.
• El tamaño. El banner no debería pesar más de 4kbs. Al igual que las imágenes
que usamos en cualquier parte de la web, los banners deben ser livianos para
no influir en la carga de la página.
Página  32  
Flash o no flash
Hacia Octubre del 2000, Jakob Nielsen, desaconsejaba, en un artículo titulado
“Flash 99% Malo” el uso de la tecnología Flash porque “hace que un mal diseño
sea más probable, rompe con el estilo básico de interacción de la Web y consume
recursos que podrían ser utilizados mejorando el valor primordial del sitio”10.
Así, el uso o no de esta tecnología desató la polémica que enfrentó a los puristas
de la usabilidad contra los fanáticos intransigentes del Flash.
Los que ocupan el primer grupo sostienen varios argumentos para evitar su uso:
• Requiere el uso de un plugin que no todos los usuarios tienen instalados y
actualizados. Así, para hacer que una web en Flash sea accesible a todo el
mundo, se recomienda tener también una versión no Flash, por lo tanto se
necesitan recursos extras para su desarrollo además de tener que mantener
2 web al mismo tiempo.
• La mayoría de los buscadores no indexan los contenidos en Flash, lo que
hace que, por ejemplo, una web que esté diseñada totalmente en flash no
sea encontrada con facilidad.
• Aunque casi todas las computadoras de mesa tienen Flash instalado,
también hay usuarios que utilizan herramientas para bloquearlo.
• Diseñar una web en Flash es para expertos, esto se evidencia en que
existen muchas webs mal diseñadas en Flash.
• Cuando se abusa de su uso, se está dejando de lado o interfiriendo en la
navegabilidad de los usuarios con conexiones lentas.
• Si bien una web en Flash puede cumplir virtualmente todos los criterios de
accesiblidad web, no los cumple.
• Varios usuarios, siguiendo los consejos de expertos en seguridad,
deshabilitan flash cuando visitan webs desconocidas, debido a sus
vulnerabilidades.
• La mayoría de teléfonos móviles, incluyendo iPhone and the iPad, y tablets
no soportan Flash, así, el contenido que sólo está en este formato será
inaccesible para el creciente número de usuarios de móvil.
Por otro lado, quienes consideran que abandonar la tecnología Flash es un error,
sostienen:
• De acuerdo con Adobe, el 99% de las computadoras de mesa tienen Flash
instalado (otras fuentes estiman la penetración de Flash en un 77%). Así, La
omnipresencia del plugin ha determinado que Flash se convierta en un
entorno viable para el desarrollo de aplicaciones de contenido multimedia.
• Actualmente Google puede indexar casi todo el contenido en Flash.
• Una web en Flash puede cumplir virtualmente todos los criterios de
accesiblidad y usabilidad web.
• Brindar al usuario la habilidad de interactuar con aplicaciones en el
navegador.
Página  33  

                                                                                                               
10  Jakob Nielsen, “Flash: 99% Bad”, 2000. http://www.nngroup.com/articles/flash-99-percent-bad/
 • Presenta fácilmente diferentes segmentos de información sin necesidad de
cambiar o actualizar la página, juega un rol importante en aplicaciones que
trabajan con datos dinámicos desarrollados en Flash.
• El soporte de video streaming y su creciente calidad en las últimas
versiones del reproductor de Flash, lo han convertido en el plugin de video
mejor distribuido del mercado.
• Flash soporta la navegación con el botón de “atrás” del explorador.
• El texto que aparece dentro del Flash se puede copiar y pegar.
• Un diseñador creativo puede crear páginas o aplicaciones con Flash tan
agradables como sin él.

En definitiva el enfrentamiento sigue y seguirá. Aunque lo que sí es cierto es que

esta tecnología no está incluida en la mayoría de los dispositivos móviles, y esto,
aunque sea sólo uno de los aspectos que incluyen la discusión antes presentada,
es fundamental, ya que cada vez más gente navega por Internet desde su celular,
Tablet, etcétera.

Audio y video
Veamos 5 cuestiones fundamentales a tener en cuenta:
• Complementando multimedia: cuando se colocan audios y videos es buena
práctica colocar una alternativa textual a ellos; se trata de un documento de
texto que presenta la transcripción del diálogo y todo sonido de fondo
relevante a la información comunicada. Se insertará un enlace a dicho
documento inmediatamente después del reproductor.
Al mismo tiempo, es recomendable colocar antes de cada contenido
multimedia una introducción a este, explicando que es audio o video y
haciendo una pequeña descripción del mismo.
• Problemas con flash: para que un sitio cumpla condiciones básicas de
accesibilidad y usabilidad debe poder ser navegado íntegramente sólo con
el teclado, utilizando lo que se llama el foco del teclado.
En este sentido, las presentaciones en formato flash generan las llamadas
trampa de teclado; es decir, cuando el foco cae dentro del flash no sale
más, imposibilitando la navegación.
Entonces, se recomienda evitar el uso del flash o, en caso que sea
necesario usarlo, introducirlo aclarando esa cuestión.
• Pausar videos: para cualquier información que se mueva, parpadee o se
desplace, y que comience automáticamente, dure más de cinco segundos, y
se presente paralelamente a otro contenido, existe un mecanismo que
permite al usuario pausar, detener u ocultar la información, a menos que
ese movimiento, parpadeo o desplazamiento sea esencial para la actividad.
Igualmente, no es recomendable que videos, audios, etcétera comiencen
Página  34  

automáticamente (existen excepciones como los slides, siempre que tengan

la posibilidad de pausa)
 • 3 destellos sobre el umbral: las páginas web no contienen nada que destelle
más de tres veces en cualquier periodo de un segundo, o el destello está
por debajo de los umbrales de destello general y de destello rojo. Este
criterio se orienta a un tipo particular de epilepsia fotosensitiva, ocasionada
por parpadeos o destellos regularmente de la luz roja con frecuencia
mayores a 5 por segundo. Si se duda de un video con este problema se
puede testear con UW Trance Center Photosensitive Epilepsy Tool (PEAT).
Software libre.  

Animaciones
Los movimientos constantes dentro de un sitio pueden retrasar la carga de la
página; a los que utilizan Internet de manera habitual no les gusta esperar por una
página web, a no ser que por la razón que sea les interese demasiado acceder a
su información. Lo habitual es que se vayan rápidamente pulsando el botón "Atrás"
del navegador (es un hecho demostrado). Si hay que escoger entre una web
cargada de imágenes grandes, animaciones flash, efectos visuales, etcétera y una
web más sobria y con menos ornamentos: el consejo es buscar un equilibrio
razonable.
Por lo tanto, no se debe abusar de la utilización de la animación, esto puede
abrumar y cansar a la vista. Pero, en caso que decidamos utilizarla, debemos
permitir al usuario detener o pausar esas animaciones.

Menús desmenusados
Una óptima arquitectura web logra un buen posicionamiento y generan visitas, algo
fundamental para cualquier página web.
En este sentido, cuanto más sencilla sea la navegación, más fácil va a ser para el
usuario y, por lo tanto, se generará más fidelidad con la web. En este sentido, en
cuanto a la navegabilidad, los menús de navegación son el alma de los sitios, es
por eso que debemos procurar diseñarlos (en forma y función) lo mejor posible
para evitar errores y aliviar la navegación a nuestros usuarios. Existen una serie de
buenas formas a tomar en cuenta a la hora de construir un menú:
• Evitar un menús muchas opciones, más de 7 u 8 son muchas para leer,
entender y pinchar. Se deberá reducir el numero al máximo y procurar que
lo que se ponga en el menú tenga una importancia real. Es mejor que una
opción agrupe diferentes apartados que tener un menú con muchas
opciones "simples".
• Es bueno indicar dónde está el usuario. Una practica habitual en los menús
es remarcar el ítem del menú que indica dónde se encuentra el usuario. Si
bien es una buena practica, la recomendación gira en torno a no deshabilitar
el enlace de ese botón; es decir, el usuario no podrá volver a pinchar sobre
esta opción si se siente perdido. Entonces, es recomendable dejar los
Página  35  

botones del menú siempre activos.

• Los colores de los ítems de menú "nuevo" y "visitado" (y hover en caso de
que se use) deben ser del mismo color pero con diferentes tonalidades.
 • Si el menú se despliega, procurar abrir una pagina por defecto y mantener el
menú desplegado (no lo cerrarlo sin que el usuario lo haya ordenado). En
este sentido, los teóricos de la usabilidad reniegan de los menús que se
despliegan: aconsejan no usarlos. Es mejor navegar a través de paginas
donde el usuario ve resultados, y se informa de cuáles son las siguientes
opciones a ver. Cuando se deben usar, se deberán seguir las siguientes
indicaciones:
! No usar rollover. Esta probado que el usuario se siente mas cómodo
si pincha y el menú se abre. Los menús se abren y se cierran si el
usuario lo indica.
! Si por razones de espacio se debe cerrar un menú cuando se abre
otro, la opción es reducir el numero de opciones
• No variar la estructura del menú de forma seguida. Si decimos que los
menús son el alma del sitio, no podemos estar cambiándolo habitualmente,
más si pretendemos que los usuarios se identifiquen con el sitio. Variando el
menú, estamos complicando la navegabilidad del mismo.
• Respetar la condición de los menús; es decir, esencialmente, son
agrupaciones de enlaces que se dirigen hacia dentro del sitio, no son
vínculos hacia páginas externas (eso son banners), o enlaces de descarga.
En este sentido, debemos respetar las convenciones de la web: todos los
usuarios que pretendan navegar por un menú, previamente van considerar
que ese menú los va a mantener dentro del sitio en que están. De suceder
lo contrario, se deberá informar.
• Siguiendo con el punto anterior y entendiendo que existen distintos “tipos”
de menús, debemos tener en cuenta que elementos similares tienen
comportamiento igual, entonces, si en la portada se coloca un menú en un
lugar que se comporta de una manera, no se deberá usar ese mismo lugar
para colocar un menú que se comporte de otra manera.
• Dependiendo del contenido y la información, se debe limitar la navegación
web a 7 u 8 páginas como mucho; mantener una navegación constante; no
esperar que los visitantes a aprendan confusos caminos o esquemas para
la navegación en diversas partes de su sitio.

En definitiva, se trata de generar menús simples, lo más estáticos posibles,

amigables y que faciliten la exploración más que la compliquen; recordemos que,
fundamentalmente, los menús son el esqueleto de los sitios.

Be responsive
Un diseño responsive (o RWD, de Responsive Web Design) es un diseño que es
capaz de adaptarse al dispositivo con el que se está navegando el sitio. En este
tipo de diseños se envía el mismo contenido siempre y es el móvil, la tablet o el
ordenador el que realiza el trabajo de adaptar la visualización a la pantalla,
Página  36  

normalmente ayudados por javascript.

Esta adaptación a la pantalla del dispositivo se suele realizar apilando las
columnas o módulos que formen nuestro sitio formando una o dos columnas en la
pantalla del dispositivo, mostrando primero las columnas más a la izquierda y
finalmente las que estén más a la derecha de nuestro diseño. Así, las ventajas de
este tipo de diseño son:
• Necesitaremos un único diseño para todo el sitio.
• El diseño será el mismo para cualquier dispositivo por lo que no habrá
usuarios que piensen que están en otro sitio si acceden con el móvil.
• Los diseños responsive utilizan el tamaño de la pantalla del dispositivo para
adaptar el contenido, por lo que una mayor número de dispositivos verán
correctamente el sitio.
• En general el coste de desarrollo de un sitio responsive es bajo.
• También se supone que evita tener que desarrollar aplicaciones ad-hoc para
versiones móviles, por ejemplo, una aplicación específica para iPhone, otra
para móviles Android, etcétera.

El principal concepto en el que se apoya el Diseño Web Adaptable es en

abandonar los anchos fijos. Estos deberán ser fluidos. En lugar de pensar los
elementos en valores fijos (por ejemplo una imagen con un width: 360px), el diseño
fluido está pensado en términos de proporciones (ahora el width: 40%). Así,
cuando veamos nuestra web a través de la pequeña pantalla de un móvil los
elementos se harán más pequeños guardando la proporción entre ellos.

Imágenes
Por eso es una buena práctica prever que las imágenes se vean siempre
completas, evitando que se te corten. Así, cuando se le da el ancho a la imagen se
le da el 100% (width:100%;). De esta forma se está indicando al dispositivo que
recalcule la altura que debe darle a la imagen para que se vea su ancho al cien por
cien.

Aprovechar los soportes

Página  37  

No es lo mismo acceder a una web desde un ordenador de mesa que desde un

iPad o un teléfono móvil. La experiencia es distinta no sólo por el tamaño del
dispositivo, sino también por los contextos en que se usan unos u otros, por el
 “tipo” de exploración que se hace en cada uno, etcétera, por eso, a la hora de
pensar el diseño y la ubicación de los elementos para cada dispositivo, debemos
tener en cuenta todo esto.

Varios
Hacer escribir lo menos posible al usuario, ya que resulta incómodo escribir en la
mayoría de los dispositivos móviles. .
No hacer uso de ventanas emergentes ya que, más allá que son molestas, se
evitará refrescar el sistema automáticamente y no se saturará de forma
innecesaria.
No utilizar imágenes de gran tamaño debido a las pequeñas proporciones de la
pantalla al tiempo que evitar las animaciones en flash, ya que ralentizarán el sitio
web y en la gran mayoría de los casos, no funcionan.

En este contexto, el consejo de los diseñadores y programadores web que

diariamente se enfrentan a la creación de páginas, objetos, aplicaciones web,
consiste en simplificar el diseño, ofreciendo una navegación ágil simplificando y
diferenciando claramente los links, aportando enlaces que contengan contenido
necesario para la página web, donde los contenidos estén “a la mano”, así, los
usuarios, en cualquier dispositivo, se sentirán cómodos navegando por el sitio o
usando la aplicación.

Más sobre este punto:

• Diseño Web Adaptable: http://www.antoniorigo.com/diseno-web-adaptable/
• Mobile Web Best Practices 1.0 - Basic Guidelines. W3C Recommendation:
http://www.w3.org/TR/mobile-bp/#OneWeb

¿Violación de la Ley?
De forma general las imágenes (fotografías, dibujos, diseños, bocetos, etc.) que
encontramos en Internet no son de dominio público, esto es, los autores no han
renunciado a todos sus derechos sobre la obra, y por lo tanto siguen estando
protegidas por el copyright que de forma automática les otorga el Convenio de Berna.
Si un usuario encuentra una imagen que está licenciada bajo Creative Commons (CC)
podrá usarla de manera mas libre, pero siempre cumpliendo con los términos de la
licencia otorgada. Una obra distribuida bajo una licencia CC sigue estando protegida
por la leyes de Propiedad Intelectual. Estas licencias, facilitan al autor la renuncia a
parte de sus derechos, pero nunca a todos como es el caso del reconocimiento de
autoría.
Si se utiliza una imagen encontrada en Internet incluso citando al autor y la fuente
original de la imagen, si esta no está licenciada de forma explicita para su reutilización
Página  38  

y redistribución estará infringiendo las leyes de Propiedad Intelectual y por lo tanto

podrá ser demandado legalmente por el autor original acusándole de plagio.
Más sobre este punto:
 • Convenio de Berna para la Protección de las Obras Literarias y Artísticas:
http://es.wikisource.org/wiki/Convenio_de_Berna_para_la_Protecci%C3%B3n_de_las_Obras_L
iterarias_y_Art%C3%ADsticas

Estética, usabilidad y emoción

A la percepción humana le parecen estéticamente agradables las armonías y
simetrías en las formas, los colores suaves, los bordes con transiciones suaves,
los degradados, etc. Sin embargo en muchos casos estos recursos gráficos
dificultan la usabilidad de los sitios web. Por otro lado los recursos exactamente
contrarios (colores chillones, fuertes contrastes, etc.) aunque también pueden ser
estéticamente agradables, son excesivamente llamativos y tras su utilización
masiva en publicidad generan la llamada "ceguera a los banners" o
insensibilización a este tipo de recursos.
En este sentido, muchas veces, el escaso contraste entre elementos puede
resultar estéticamente agradable, pero es un recurso del que no se debe abusar,
sobre todo en los textos ni en opciones principales del sitio. En efecto, si a alguien
le cuesta leer algo, simplemente no lo leerá.
Así, se llega a dos elementos fundamentales: la simetría y la armonía. Estos dos
elementos son muy importantes en la percepción de la belleza (incluso hay reglas
matemáticas sobre ello). Los diseños que contienen el llamado "número de oro"
son percibidos como más armoniosos y estéticamente agradables (las
dimensiones de las tarjetas de crédito o la espiral de la caparazón de un caracol
contienen este número).
Sin embargo la simetría y la armonía en las formas tienen también graves
inconvenientes. Si todo es excesivamente simétrico se reducen las posibilidades
de jerarquizar, destacar o diferenciar un elemento del resto de los contenidos. Las
leyes de la proximidad y la semejanza de la Gestalt (entre otras) actúan para que
percibamos áreas y contenidos próximos y parecidos como relacionados o unidos.
Por ejemplo, si el rectángulo superior tiene aspecto de un bloque compacto y
contiene en gran parte publicidad, los usuarios entienden que toda la parte
superior es un área publicitaria de poco interés. Así pueden descartar información
interesante simplemente porque se ha situado cerca de la publicidad.

Más sobre este punto:

• Número áureo: http://es.wikipedia.org/wiki/N%C3%BAmero_%C3%A1ureo
• Psicología de la Gestalt: http://es.wikipedia.org/wiki/Psicolog%C3%ADa_de_la_Gestalt

Consistente
Un sitio debe tener consistencia en el diseño para que las personas sepan que
siguen dentro de la misma web cuando navegan por las páginas del mismo.
Página  39  
Ruido
Algunos purista de la usabilidad dicen que cuando se diseñan páginas web es
bueno asumir que todo es ruido visual hasta que se demuestre lo contrario.
Los diseñadores y encargados de contenidos de páginas Web deberían tener en
cuenta que cuando el usuario concentra su atención en una pequeña zona de la
página el resto es "ruido" de fondo que tiene que ser filtrado. Si éste es demasiado
elevado, el usuario no será capaz de concentrarse en lo que desea hacer y
abandonará el sitio.
Debemos esforzarnos por limitar ese “ruido”, es decir, los objetos que compiten
innecesariamente entre sí dentro de una misma página.
Nielsen propone un diseño minimalista. Los sitios web no deben contener
información irrelevante o innecesaria ya que ésta compite con la información
importante disminuyendo su visibilidad. Según el autor, los diálogos no deben
contener información irrelevante o poco usada. Cada unidad extra de información
en un diálogo que compite con las unidades de información relevante y disminuye
su visibilidad relativa.

Pop…! up
No se deben usar pop ups… salvo que sea necesario.
Este es un punto central que debemos tener en cuenta a la hora de pensar en
mejorar la navegación del usuario.
En un navegador web de escritorio, si se abre un pop up, podemos rápidamente
cambiar entre ventanas con el ratón, sin embargo en un dispositivo móvil,
tendremos que acceder al menú de selección de ventanas e ir cambiando entre
ventanas con varios clics con el dedo, con lo que si estamos navegando dentro de
una web donde se abren algunas ventanas se puede hacer un poco “pesado” para
el usuario.
Las personas que no ven su pantalla y están navegando mediante un lector de
pantalla o navegador por voz no saben que acaban de abrir un pop up (lo mismo
que en una nueva ventana) y si tratan de regresar, mediante el botón "Atrás" de su
navegador, descubren que han perdido el hilo de su navegación y lo deberán
encontrar entre las páginas abiertas en su ordenador. También las personas con
problemas cognitivos o aquellas que tienen poco hábito de navegar por la Web
pueden encontrar sorprendente que no puedan regresar a la página de origen que
les llevó a la página que visualizan en ese momento.

Nuevas ventanas
Si de una cosa está segura la Humanidad, es que todos los usuarios de Internet
entienden a plenitud el botón "Atrás".
Ese botón es parte integral de la navegación: sigue un vínculo, vuelve atrás;
Página  40  

explora el resultado de un buscador, vuelve atrás… todos lo hicieron, hacen y

harán.
 Entonces, cada una las páginas internas del sitio debe permitir al usuario navegar
hacia cualquier otra ubicación y regresar por los pasos previos con el botón
“Atrás”; es decir, no debemos romper la linealidad de la navegación.
Para esto es aconsejable evitar “abrir en ventana nueva” ya que al hacerlo así, no
se podrá usar el botón atrás; al mismo tiempo, una persona con problemas de
visión (así como con problemas cognitivos) no notará que se abre una nueva
ventana y para ellos es fundamental el botón “Atrás”. Esta forma de proceder
desconcierta a muchos usuarios.
Debemos tomar en cuenta que si alguien quiere abrir algo en una nueva ventana lo
hará por su cuenta, no es aconsejable obligarlo a eso.
Si es necesario que el vínculo abra en una nueva ventana, se debe evidenciar en
el texto del enlace o en un párrafo previo.

Si busca, encuentra
Si existe una lista definitiva de elementos fundamentales para cumplir con una
usabilidad web básica, seguramente esta sería encabezada por la exigencia de la
presencia de buscadores o índices de búsqueda.
Los buscadores (sobre todo los internos), además de influir decisivamente en la
primera impresión de los usuarios, son herramientas cruciales para que éstos
encuentren los contenidos que buscan.
Jakob Nielsen, ha comprobado en numerosos tests que más de la mitad de los
usuarios, cuando llegan a un sitio web, intentan encontrar la información que
necesitan utilizando su buscador, aproximadamente un quinto intentan encontrarla
siguiendo los enlaces que se les presentan y el resto muestran un comportamiento
mixto.
De esta forma, existen una serie de procedimientos, normas, consejos que pueden
hacer al buscador mas accesible, intuitivo, fácil de utilizar y satisfactoria para la
mayoría de usuarios:
• Es importante que pueda acceder al buscador desde cualquier página a demás
de contar con una fácil localización visual. El escoger un lugar estándar para
situar el buscador facilitará su localización en primera instancia.
• Interfaz estándar. Se trata de una norma básica y genérica de usabilidad, y en
los buscadores no es una excepción. Lo más estándar es un campo de texto
con un botón al lado que diga "Buscar". Los internautas ya conocen muy bien
este tipo de interfaz y se sienten cómodos con él.
• Campo de texto suficientemente ancho. Refuerza visualmente el hecho de que
se puede introducir más de una palabra, además de dar seguridad a algunos
usuarios.
• Búsquedas por defecto no acotadas. La opción de búsqueda por defecto no
debe estar acotada ni a secciones del sitio, espacios concretos, fechas,
etcétera. Un gran número de usuarios no conocen las estructuras de los sitios
Página  41  

web por los que navegan, y lo más probable es que ante una página de
resultados vacía producida por una acotación del espacio de búsqueda,
piensen que la información no está disponible en el sitio.
 • Página de búsqueda avanzada. Las opciones avanzadas de búsqueda deben
agruparse en una página aparte diseñada para recogerlas de forma unificada y
compacta. Así, se debe explicar al usuario cómo funciona esa página, dónde y
cuáles datos son necesarios para que busque y encuentre. La recomendación
es proponer ejemplos de uso en conjunto de pequeñas guías explicativas.

Página de resultados
La página de resultados de un buscador es igual de importante si no más que su
interfaz de usuario. Debe ser clara y contener la información necesaria para que el
usuario pueda decidir con facilidad si los resultados que se le ofrecen le interesan
o no. Existen algunos requerimientos básicos:
• Texto de los links a los resultados. Como en toda la página, los enlaces de
resultados deben ser texto, no direcciones, ya que las URLs aportan muy poca
información sobre la relevancia de los documentos presentados al tiempo que
causan confusión.
• Referencia del documento. Resulta imprescindible para que el usuario pueda
decidir con más criterio si los resultados devueltos por el buscador son o no
relevantes para su búsqueda sin necesidad de descargarlo. Algunos
buscadores plantean un resumen, mientras otros utilizan las primeras palabras
de la página.
• Énfasis sobre los términos buscados. El hecho de resaltar las palabras
buscadas tanto en los enlaces como en los resúmenes ayuda en gran medida a
la escaneabilidad de los resultados.
• Sin resultados. Cuando el usuario utiliza los motores de búsqueda y no recibe
resultados, es especialmente importante informarle las alternativas que dispone
para completar su objetivo. Una página con un simple mensaje de "No se
encontraron resultados" le dejará especialmente frustrado. Lo típico en estos
casos es decirle que revise los términos de la sentencia de búsqueda por si se
ha equivocado, que pruebe con otros términos, etcétera.
• No repetir resultados. Hay sitios web que acceden a la misma página a través
de URLs diferentes. Es importante que el buscador sepa detectar que se trata
del mismo destino y que no lo presente como si se tratase de dos resultados
diferentes.
• Información adicional. La siguiente información, o metadatos, puede ser útil en
determinadas circunstancias:
! URL
! Tamaño del documento (en caso de ser un descargable)
! Fecha de última modificación
! Idioma
! Sección a la que pertenece el documento o la página
Si se incluye esta información se debe hacer de forma que no interfiera en la
escaneabilidad de los resultados (por ejemplo con una fuente más pequeña o
Página  42  

con un color diferente al del resto del texto).

 Complemento: mapa del sitio
Un mapa de sitio es una lista de las páginas de un sitio web accesibles por parte
de los buscadores y los usuarios presentado en forma de esquema. Puede ser
tanto un documento en cualquier formato usado como herramienta de planificación
para el diseño de una web como una página que lista las páginas de una web
organizadas comúnmente de forma jerárquica. Esto ayuda a los visitantes y a los
motores de búsqueda a hallar las páginas y la información de un sitio web.
Son una ayuda fundamental para la navegación por ofrecer una vista general del
contenido de un sitio de un simple vistazo.

En este sentido, los mapas de sitio son un complemento importante no sólo para
los buscadores o para la navegabilidad, sino que también para el posicionamiento
del sitio en los “grandes buscadores” de la web; es decir, por ejemplo, Google no
garantiza rastrear todas las URLs, por lo que puede no indexar un sitio propio. Sin
embargo, si este sitio tuviera un mapa, utilizando los datos del mapa para obtener
más información sobre la estructura, permitirá mejorar el programa de rastreo del
buscador y, en definitiva, encontrarlo y mostrarlo como resultado ante una posible
búsqueda.

PDFs    
Un fichero PDF no es simplemente lo que vemos en pantalla, sino que detrás del
documento existe una estructura lógica que incluye etiquetas similares a las html,
el correcto uso de estas etiquetas, en ambos casos, permite que, por ejemplo, a la
hora de utilizar un lector de pantalla o cualquier herramienta asistiva, éste leerá el
documento respetando sus etiquetas y evidenciando cuando se encuentra con un
Página  43  

título, con una cita, con una lista, etcétera.

 Más sobre este punto:
• guía para la creación de documentos PDFs accesibles a partir de un
procesador de texto:
http://sphynx.uc3m.es/~lmoreno/ConsejosComoCrearPdfAccesibleApartirWordAccesible.pdf

Todo sobre el hover

El efecto hover consiste en la alteración del aspecto de un elemento de la interfaz
gráfica cuando se sitúa el puntero sobre el mismo, pero no se ha seleccionado (o
cliqueado) aún.
En este sentido, desde hace ya un tiempo, quienes participan en la construcción o
carga de información de los sitios deben empezar a tener en cuenta el acceso a
esa página desde dispositivos móviles, más allá que consideremos que los
objetivos de nuestra web no tienen en cuenta que sea vista desde esos equipos;
el no considerarlos repercutirá en el hecho de “perder” visitantes (cada vez más
gente navega por Internet sólo desde su celular o tablet). Tengamos en cuenta que
las interfaces de pantalla táctil están generando mucho interés. Hay un deseo de
usar pantallas táctiles en los dispositivos, desplazándose a través de los menús,
moviéndose entre opciones con las flechas del teclado o por control de voz, los
televisores inteligentes, las consolas de videojuegos, los “Google Glasses” y otras
aplicaciones de Internet no dependen de un puntero de ratón.
“Hover” no tiene sitio en ese mundo.
Efectivamente, en los dispositivos móviles no hay estado hover. Como gran parte
de los móviles son táctiles un enlace o botón sólo puede ser pulsado, por lo que no
podemos poner el cursor encima como haríamos con un ratón cuando vemos una
web desde un ordenador.
La tendencia es clara; el “point and click” está en declive, cliquear (sea con un
dedo, aguja digital, atajo de teclado, control de voz) está en lo alto de la ola. Así,
no podemos depender de que un puntero esté siendo usado. Por lo tanto, no
podemos depender de la ubicuidad del “hover” en la web.

Navegación
Veamos 3 cuestiones fundamentales a tener en cuenta para facilitar la navegación
de los usuarios:
• Términos espaciales: no referirse a la navegación en la página con términos
espaciales, como por ejemplo: "el menú de la derecha", "abajo". En ese
sentido, no debemos hacer referencia a un mecanismo de interacción para
la activación de los mismos. Por ejemplo, “hacer clic aquí”.
• Medios visuales: el color no se emplea como el único medio visual para
transmitir una información, indicar una acción, provocar una respuesta o
distinguir visualmente un elemento; es decir, la referencia al color no debe
Página  44  

ser la única indicación para cumplir con cierto objetivo o para proponer
interactuar con los elementos de una página.
 • Propósito de un vínculo (en su contexto): el propósito de cada vínculo puede
determinarse con el texto del vínculo descontextualizado, excepto donde el
propósito del vínculo puede ser ambiguo para los usuarios en general; es
decir, cuando leemos el texto de un enlace deberíamos tener una idea del
lugar al que nos está llevando ese link. En este sentido, cuando agregamos
un enlace, debemos colocarle un título que evidencie el destino del enlace o
la razón del mismo en no más de 100 caracteres.

Sólo 3 clics
En el año 2001, Jeffrey Zeidman, un reconocido talento del diseño web
internacional, escribió “Taking your talent to the Web. A guide to the transitioning
designer” dónde se planteó la regla de los 3 clics. Según esta regla, para conseguir
un diseño web verdaderamente usable y intuitivo, el usuario debería poder acceder
a cualquier parte del contenido de nuestro sitio sin necesidad de sobrepasar los 3
clics.
Dicha regla ha sido muy cuestionada a lo largo de los años pero plantea una
cuestión muy importante que afecta a la estructura de contenido de una página
web. ¿Cuántos clics puede tener como máximo el recorrido de los usuarios en los
sitios web? ¿Pueden ser más de 3? ¿Hasta cuántos?
En este sentido, Joshua Porter desmiente la regla de los 3 clics y aporta datos de
comportamiento de más de 8.000 clics realizados por 44 usuarios a los que se
encomendaron 264 tareas que consistían en localizar determinados contenidos en
internet. De su estudio se desprende que los usuarios realizan recorridos de hasta
25 clics y que por lo tanto, la teoría de los 3 clics de Zeidman no es más que un
mito.
¿Significa ésto que el número de clics que implique la estructura de nuestro sitio es
irrelevante? No, por supuesto. Indica que es relativo. Evidentemente cuánto más
largo sea el recorrido que debe realizar el usuario para localizar lo que busca en
nuestro sitio, más aumentan las posibilidades de que decida abandonar nuestra
página web.
Una estructura de contenidos ordenada y lógica, hace que al usuario no le importe
hacer recorridos más largos de 3 clics. Eso sí­, se deber asegurar de que en cada
uno de los clics que se realiza recibe información nueva y relevante que anime a
seguir explorando.

Más sobre este punto:

• Taking your talent to the Web. A guide to the transitioning designer:  
http://www.zeldman.com/talent/book.html  

Fresco y actualizado
Página  45  

La manera más sencilla para que una web pierda credibilidad y los usuarios (leales
o potenciales) no la visiten más es contener información anticuada o desfasada.
Del mismo modo, cuando el usuario accede a información incompleta tiende a
 abandonar el sitio, es por eso que si una sección no está completa, no la
publiques.

Cuando hay que cargarla

Controlar el tiempo de carga de un sitio es fundamental para no hacer esperar a
los usuarios; es decir, si una página tarda mucho en cargar el usuario se cansará y
abandonará la página para siempre.
Por eso se debe tener cuidado cuando atiborramos el sitio de imágenes gigantes,
animaciones flash, videos, audios, etcétera.
En tiempos de fibra óptica y velocidades de subida y bajada cada día más rápidas,
se debe pensar en aquellos que aún no han recibido la tan anhelada visita de los
equipos de instalación de la fibra óptica y aún siguen poniendo pausa al video en
YouTube y esperan que cargue un rato para poder verlo. Sin duda que estos
usuarios, que son muchos, cuando entran a una página “pesada” que requiere
bastante tiempo de espera para poder ser navegada, van a decidirse por cerrar
esa página y buscar lo que quieren en otra más “liviana”.

El efecto cabecera
Los usuarios nunca miran en la cabecera porque no esperan encontrar nada de
utilidad allí. Por se busca evitar crear el efecto de "franja" de cabecera con el logo y
los colores corporativos. Es decir, la cabecera contiene el logotipo representativo
de la web y la barra de navegación; debe ocupar lo menos posible y contener lo
que sea realmente útil. Un gran logotipo puede tener sentido en la pagina inicial,
en las otras solo distrae dado que ya nadie sigue mirando la cabecera.
De esta forma, a la hora de estructurar un sitio debemos tener en cuenta que la
información que da la cabecera debe ser de contexto y poco relevante para el
usuario ya que es el área más ignorada. Asimismo, en ningún caso se debe
colocar un vínculo a contenidos importantes del sitio en la cabecera o cercano a
ella.

El scroll no es maligno (el espacio en blanco tampoco)

Sería interesante averiguar de dónde proviene el miedo al scroll… todos nos
desplazamos por las páginas, usando esa barra sin ningún tipo de rechazo ni
negación, pero al momento de planificar un sitio propio hacemos lo imposible para
que nadie pueda hacerlo… no lo queremos en nuestro sitio, que la gente vea la
web entera sin hacer scroll.
Existe un mito que dice que a los cibernautas no les gustan las páginas largas
donde hay que usar la barra de scroll o la rueda del mouse. Pero es sólo un mito,
podemos decir que casi el 99% de los usuarios entiende el concepto de
Página  46  

movimiento de la rueda del ratón, o que nadie se perderá en la web al hacer clic en
la barra de desplazamiento de la derecha, o, mucho menos se quedará sin dedo
cuando se desliza por la página usando las flechas del teclado.
 Lo que es realmente importante en esta cuestión es que, muchas veces, en el afán
de eliminar el scroll, se crear páginas cortas, lo cual puede devenir en muchos
problemas. Pero, el más importante trata sobre que las páginas cortas disponen de
menos espacio y por ello están mas recargadas de contenidos, sin apenas espacio
en blanco.
En este sentido, el scroll permite el espacio en blanco necesario para crear una
arquitectura de información efectiva. El diseño no se puede basar únicamente en
unos elementos más chillones que otros a base de carga gráfica. El espacio en
blanco alrededor de los elementos, da importancia sin añadir ruido.
En efecto, mucha gente considera los espacios en blanco en un diseño son
inútiles, pero, esto es incorrecto. Los espacios en blanco son una gran ayuda para
los usuarios para moverse en un espacio limpio sin ruido visual y para entender la
distribución de objetos en una página.

Varias barras
Según distintos estudios, el navegador se lleva aproximadamente el 35% de los
clics, con la barra de scroll y el botón atrás como los máximos receptores de estos
clic. Esto se hace notorio en los sitios que incluyen una segunda barra de scroll al
interior de la página y mucho más aún cuando esta no es una barra del propio
navegador, sino una generada por programación del propio sitio, algo típico de los
sitios hechos en Flash. La Usabilidad se reduce radicalmente, con usuarios que no
consiguen pasar el contenido (hacer scroll) y ni siquiera llegan a percibir por qué.

Más sobre este punto:

• The myth of the page fold: evidence from user testing:
http://www.cxpartners.co.uk/cxblog/the_myth_of_the_page_fold_evidence_from_user_testing/

404
Cuando el usuario recibe algo distinto a lo que se esperaba, como cuando sigue un
enlace roto o abre una página caída, más allá de las penosas frases de disculpa y
explicaciones sin sentido, se le debe proporcionar opciones para que esa página
no se transforme en un frustrante callejón sin salida; o dicho de mejor modo,
abandone el sitio.
En estos casos, lo aconsejable es presentarle las posibles opciones para salir de
esa encrucijada: facilitándole un árbol de navegación o un mapa de sitio;
proporcionar un atajo a los motores de búsqueda simple o avanzada, o una breve
descripción del funcionamiento del sitio con enlaces a las diferentes secciones del
mismo complementado con reseñas del contenido de las mismas.
Página  47  
Mensajes de error para humanos
Lamentablemente no se puede impedir que los usuarios cometan errores, pero sí
intentar prevenir que se produzcan, así como ofrecer vías de solución cuando
estos ocurren. Por ejemplo: cuando le pedimos un dato o información, debemos
proporcionarle los espacios justos para tal objetivo, entonces si se pretende que
coloque una fecha de determinada forma (por ejemplo dd/mm/aaaa) debo limitar al
usuario a esos campos y no darle libertad de acción.
Al mismo tiempo, esto requiere orientar al usuario ofreciéndole ayuda contextual,
por ejemplo colocando un modelo de búsqueda cerca de los campos que tienen
ese objetivo, y así facilitarle esta acción. Otra forma efectiva de orientar al usuario
es mediante sugerencias interactivas, que respondan a la acción del usuario y
guíen su recorrido.
En ocasiones el usuario lleva a cabo una acción que puede tener consecuencias
irreversibles y potencialmente perjudiciales, casos en los que resulta de gran
importancia solicitar confirmación. De todos modos no debemos olvidar que cuanto
más abusemos de este tipo de mensajes en nuestras aplicaciones, menor será su
efectividad, pues la atención del usuario se insensibiliza por repetición.
En la misma línea, se debe advertir al usuario de posibles consecuencias
indeseadas, en este caso no se le solicita confirmación alguna, ya que estos
mensajes tienen lugar antes de que el usuario lleve a cabo la acción (advertencia),
no como respuesta a su acción (solicitud de confirmación).
Ya que estos mensajes no requieren del usuario la toma de ninguna decisión, su
contenido puede pasar desapercibido con mucha más probabilidad, por lo que se
recomienda no sólo no abusar de ellos en la aplicación, sino también redactarlos y
presentarlos visualmente de forma "inusual", con el fin de forzar la atención del
usuario.
Así, permitir deshacer, una opción tan común en aplicaciones software de
escritorio, resulta igualmente necesaria en multitud de contextos web. Un ejemplo
clásico es el de la “Papelera” en servicios web de correo electrónico, lo que
permite al usuario deshacer su decisión de eliminar un mensaje, pero una vez más
podemos encontrar ejemplos en otros tipos de aplicaciones online. Por ejemplo,
cuando el usuario se halla completando un proceso de compra divido en diferentes
pasos, se le debe permitir volver y rehacer pasos previos. O cuando el usuario
introduce una consulta en un buscador, la caja de búsqueda de la página de
resultados debe incluir la consulta introducida por el usuario, a fin de permitirle
rehacerla o modificarla.
Asimismo, idealmente las aplicaciones software, incluidos los sitios web, deberían
demostrar un comportamiento “inteligente”, solucionando automáticamente errores
cometidos por los usuarios. Un ejemplo por todos conocidos es el algoritmo que
Google emplea para detectar errores en las consultas del usuario (el famoso
“quizás quiso decir:”).
Por supuesto, no se encuentra al alcance de cualquier proyecto ofrecer soluciones
algorítmicas como la citada, aunque sí emplear otras de más sencilla
implementación, basadas en simples condicionales. Por ejemplo, detectando
Página  48  

cuándo el usuario introduce una URL sin “http://” en un campo de texto para tal fin,
y solucionando el problema automáticamente en vez de obligarle a solucionar el
error manualmente.
Pero, el usuario se equivocó.
Todos los usuarios se han encontrado a lo largo de su vida digital con verdaderas
obras de arte en forma de mensajes de error, desde luego no pensados para su
consumo por simples humanos.
Redactar mensajes de error para humanos implica exponer breve y claramente el
problema, motivos y posibles soluciones, con un vocabulario entendible y sencillo.

Página  49  
Materiales de consulta

Recopilación de artículos, estudios, manuales, etcétera sobre los temas trabajados

a lo largo de la guía. Algunos fueron referidos en esta, muchos otros no.

• Allsopp, John. Diseño Web Adaptable

El arquitecto inglés Christopher Wren bromeó alguna vez diciendo
que su profesión “apuntaba a la Eternidad”, y hay algo atractivo en
esa fórmula: a diferencia de la web, que siempre parece estar
apuntando al corto plazo, la arquitectura es una disciplina definida por
su permanencia.
http://www.antoniorigo.com/diseno-web-adaptable/

• Cañada, J. Diseño emocional

La forma en que se aplican los factores humanos (HCI, ergonomía,
usabilidad, etc.) hoy en día es deshumanizante.
http://www.terremoto.net/x/archivos/000069.html

• CrazyEgg, SingleGrain. Así se mueven nuestros ojos en una página web

Página web que rompe con casi todas las recomendaciones sobre
usabilidad, pero que presenta una infografía sobre “los caminos
recorridos” por ojos del usuario cuando recorre una página web.
http://www.marketingdirecto.com/actualidad/infografias/asi-se-mueven-nuestros-
ojos-en-una-pagina-web/

• Floría Cortés, A. Recopilación de Métodos de Usabilidad

El siguiente documento consiste en una recopilación de herramientas
de Usabilidad y Diseño Centrado en el Usuario. En la misma, se han
establecido cuatro categorías (Indagación, Inspección, Test y
Técnicas Relacionadas), proporcionándose una breve descripción de
cada una de ellas, al igual que de los métodos que comprenden.
http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm

• Garret, J.J. Un vocabulario visual para describir arquitectura de

información y diseño de interacción
Los diagramas son una herramienta esencial para comunicar
arquitectura de información y diseño de interacción en equipos de
Página  50  

desarrollo Web. Este documento trata las consideraciones en el

desarrollo de tales diagramas, delinea una simbología básica para
 diagramar conceptos de arquitectura de información y diseńo de
interacción, y entrega guías para el uso de estos elementos.
http://www.jjg.net/ia/visvocab/spanish.html

• Hassan Montero, Yusef, J. Martín Fernández. Método de test con usuarios .

Explicación de qué son los tests de usuarios, e indicaciones acerca
de por qué, cuándo y cómo llevarlos a cabo.
http://www.nosolousabilidad.com/articulos/test_usuarios.htm

• Hassan Montero, Yusef, J. Martín Fernández. Qué es la Accesibilidad Web

Definición del concepto de accesibilidad web, así como de las
diferentes limitaciones de acceso.
http://www.nosolousabilidad.com/articulos/accesibilidad.htm

• Hassan Montero, Yusef, J. Martín Fernández, Ghzala Iazza. Diseño Web

Centrado en el Usuario: Usabilidad y Arquitectura de la Información
La usabilidad, anglicismo que significa "facilidad de uso", parece
tener su origen en la expresión "user friendly", que es reemplazada
por sus connotaciones vagas y subjetivas. Numerosos autores han
propuesto diversas definiciones de usabilidad, normalmente a través
de la enumeración de los diferentes atributos o factores mediante los
que puede ser evaluada, dependiendo finalmente cada definición del
enfoque con el que pretende ser medida.
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html#4

• Hassan Montero, Yusef, Sergio Ortega Santamaría. Informe APEI sobre

usabilidad
El presente informe tiene por objetivo introducir al lector en el amplio
tema de la usabilidad. Además de tratar conceptos relacionados
como accesibilidad, experiencia de usuario, simplicidad o arquitectura
de información, el trabajo describe los principios clave para
comprender el factor humano en procesos interactivos, y analiza las
metodologías y técnicas más relevantes en la práctica del diseño de
productos interactivos usables
http://www.nosolousabilidad.com/manual/1.htm

• Hernández-Lloreda, María J. Mecanismos de detección del contraste

cromático y de luminancia en el sistema visual humano.
El objetivo de este artículo es dar una visión general del conocimiento
actual acerca del procesamiento del contenido cromático y de
Página  51  

luminancia por el Sistema Visual Humano (SVH). Aunque los

primeros hallazgos hacían concebir un procesamiento modular en el
que cada uno de estos tipos de información sería procesado de forma
 independiente para contribuir al procesamiento global de la imagen,
la evidencia experimental más reciente muestra un panorama más
complejo. Tanto a nivel fisiológico como psicofísico, se perfila una
interacción entre ambos contrastes así como una asimetría en la
forma en la que ambos participan en el procesamiento.
http://www.um.es/analesps/v17/v17_2/07-17_2.pdf

• Herrera Batista, Miguel Ángel, Latapie Venegas, Imelda. Diseñando para la

educación
A partir del acelerado desarrollo tecnológico, el e-learning y los
nuevos modelos de enseñanza apoyados en sistemas multimedia, el
diseño ha adquirido una especial relevancia en el escenario
educativo. En el presente trabajo proponemos cinco áreas de acción
específicas del diseño en el desarrollo de sistemas multimedia
educativos y entornos virtuales de aprendizaje usables, confortables y
habitables.
http://www.nosolousabilidad.com/articulos/diseno_educacion.htm

• ISO/IEC 9126
ISO 9126 es un estándar internacional para la evaluación de la
calidad del software.
http://www.issco.unige.ch/en/research/projects/ewg96/node14.html#SECTION0031
1000000000000000 - http://es.wikipedia.org/wiki/ISO/IEC_9126

• Kissmetrics. What makes someone leave a website?

La mala navegación es el primero de los pecados que destaca esta
infografía, y es que no hay nada que frustre más a un usuario que
una página web por la que no pueda navegar, y probablemente
termine por confundirles o enfadarles. Además, un exceso de
anuncios puede terminar agobiando y enfadando a tus visitas.
http://www.marketingdirecto.com/wp-content/uploads/2011/09/leaves-a-
website1.jpg

• Krug, Steve. Don’t Make Me Think. A Common Sense Approach to Web

Usability
It is about human-computer interaction and web usability. The book's
premise is that a good software program or web site should let users
accomplish their intended tasks as easily and directly as possible.
Krug points out that people are good at satisficing, or taking the first
available solution to their problem, so design should take advantage
of this.
Página  52  

http://web-profile.com.ua/wp-content/uploads/steve-krug-dont-make-me-think-second-
edition.pdf
• Leech, Joe. The myth of the page fold: evidence from user testing
As web professionals, we all know that the concept of the page fold
being an impenetrable barrier for users is a myth. Over the last 6
years we’ve watched over 800 user testing sessions between us and
on only 3 occasions have we seen the page fold as a barrier to users
getting to the content they want. In this article we’re going to break
down the page fold myth and give some tips to ensure content below
the fold gets seen.
http://www.cxpartners.co.uk/cxblog/the_myth_of_the_page_fold_evidence_from_us
er_testing/

• Mercovich, E. Ponencia sobre Diseño de Interfaces y Usabilidad

Cómo hacer productos más útiles, eficientes y seductores. La
intersección entre factores humanos, diseño gráfico, interacción y
comunicación.
http://www.nosolousabilidad.com/articulos/diseno_educacion.htm#sthash.bQVNHLL
x.dpuf

• Moreno López, Lourdes. Guía para la creación de documentos PDFs

accesibles a partir de un procesador de texto
Consejos de cómo crear un documento adobe pdf accesible a partir
de un documento Microsoft Word accesible.
http://sphynx.uc3m.es/~lmoreno/ConsejosComoCrearPdfAccesibleApartirWordAcce
sible.pdf

• Neoteo. Número áureo: belleza matemática

Un número nada fácil de imaginar que convive con la humanidad
porque aparece en la naturaleza y desde la época griega hasta
nuestros días en el arte y el diseño. Es el llamado número de oro
(representado habitualmente con la letra griega ) o también sección
áurea, proporción áurea o razón áurea.
http://www.abc.es/20100415/ciencia-tecnologia-matematicas/numero-aureo-
belleza-matematica-201004151848.html

• Nielsen, Jakob. Be Succinct! (Writing for the Web)

Reading from computer screens is about 25% slower than reading
from paper. Even users who don't know this human factors research
usually say that they feel unpleasant when reading online text. As a
result, people don't want to read a lot of text from computer screens.
http://www.nngroup.com/articles/be-succinct-writing-for-the-web/
Página  53  
• Nielsen, Jakob. Break Grammar Rules on Websites for Clarity
Web writing differs from print writing to emphasize scannability. Some
grammar rules are worth breaking if they improve fast comprehension.
http://www.nngroup.com/articles/break-grammar-rules/

• Nielsen, Jakob. Bylines for Web Articles?

Should you say who wrote the content on your site? Sometimes yes
(for credibility), sometimes no (for brevity). And rarely in mobile.
http://www.nngroup.com/articles/bylines-for-web-articles/

• Nielsen, Jakob. Fight Against “Right-Rail Blindness”

As an adaptation to information overload, web users have trained
themselves to divert their attention away from areas that seem
unimportant or look like advertising. When designed well, sidebars
can effectively increase content discoverability and usability.
http://www.nngroup.com/articles/fight-right-rail-blindness/

• Nielsen, Jakob. Flash: 99% Bad

Although multimedia has its role on the Web, current Flash technology
tends to discourage usability for three reasons: it makes bad design
more likely, it breaks with the Web's fundamental interaction
style, and it consumes resources that would be better spent
enhancing a site's core value.
http://www.nngroup.com/articles/flash-99-percent-bad/

• Nielsen, Jakob. Homepage Real Estate Allocation

Websites spend too little homepage screen space on content of
interest to users and fail to utilize modern monitor sizes. And? It’s
worse now than it was 12 years ago.
http://www.nngroup.com/articles/homepage-real-estate-allocation/

• Nielsen, Jakob. Horizontal Attention Leans Left

Web users spend 69% of their time viewing the left half of the page
and 30% viewing the right half. A conventional layout is thus more
likely to make sites profitable.
http://www.nngroup.com/articles/horizontal-attention-leans-left/

• Nielsen, Jakob. How Users Read on the Web

Página  54  

They don't. People rarely read Web pages word by word; instead,
they scan the page, picking out individual words and sentences.
http://www.nngroup.com/articles/how-users-read-on-the-web/
• Nielsen, Jakob. Infinite Scrolling Is Not for Every Website
Endless scrolling saves people from having to attend to the
mechanics of pagination in browsing tasks, but is not a good choice
for websites that support goal-oriented finding tasks.
http://www.nngroup.com/articles/infinite-scrolling/

• Nielsen, Jakob. Mobile Content: If in Doubt, Leave It Out

Writing for mobile readers requires even harsher editing than writing
for the Web. Mobile use implies less patience for filler copy.
http://www.nngroup.com/articles/condense-mobile-content/

• Nielsen, Jakob. Really Break Grammar Rules on Websites: Part Two

Deviating from old writing guidelines makes digital content seem very
fresh!!
http://www.nngroup.com/articles/really-break-grammar-rules/

• Nielsen, Jakob. Seniors as Web Users

Users aged 65 and older are 43% slower at using websites than users
aged 21–55. This is an improvement over previous studies, but
designs must change to better accommodate aging users.
http://www.nngroup.com/articles/usability-for-senior-citizens/

• Nielsen, Jakob. Serif vs. Sans-Serif Fonts for HD Screens

Decent computer screens with pixel densities of 220 PPI or more lead
to new usability guidelines for on-screen typography.
http://www.nngroup.com/articles/serif-vs-sans-serif-fonts-hd-screens/

• Nielsen, Jakob. Usability 101. Alertbox: Current Issues in web usability.

How to define usability? How, when, and where to improve it? Why
should you care? Overview defines key usability concepts and
answers basic questions.
http://www.nngroup.com/articles/usability-101-introduction-to-usability/

• Nielsen, Jakob. Usability ROI Declining, But Still Strong

The average business metrics improvement after a usability redesign
is now 83%. This is substantially less than 6 years ago, but ROI
remains high because usability is still cheap relative to gains.
Página  55  

http://www.nngroup.com/articles/usability-roi-declining-but-still-strong/
• Nielsen, Jakob. Usability 101: Introduction to Usability
How to define usability? How, when, and where to improve it? Why
should you care? Overview defines key usability concepts and
answers basic questions.
http://www.nngroup.com/articles/usability-101-introduction-to-usability/

• Nielsen, Jakob. Website Reading: It (Sometimes) Does Happen

When web content helps users focus on sections of interest, users
switch from scanning to actually reading the copy.
http://www.nngroup.com/articles/website-reading/

• Pardo, David. Las más populares guías de usabilidad web para la

evaluación heurística
Guías de Usabilidad web: ¿qué contienen estás guías? Estos
manuales contienen unas pautas que debemos tener siempre en
cuenta o tener cerca e ir comprobándolas cuando analicemos o
evaluemos la calidad de nuestro sitio web en términos de usabilidad.
Esta evaluación puede ser realizadas en cualquier etapa de creación
de un sitio web, en la fase de planificación y en las validaciones
durante todo el diseño y proceso de desarrollo y es realizada por
expertos en usabilidad. Por esta razón a dichas evaluaciones se les
denomina evaluación heurística o evaluación por expertos.
http://www.mediatics.es/20120913-las-mas-populares-guias-de-usabilidad-web/

• Toub, S. Evaluating Information Architecture: A Practical Guide to

Assessing Web Site Organization
This white paper explores the why's, what's, and how's of evaluating a
web site's information architecture.
http://argus-acia.com/white_papers/evaluating_ia.pdf

• Vásquez Olcese, César. Psicoterapia Gestalt: conceptos, principios y

técnicas
Gestalt es un término alemán, sin traducción directa al castellano,
pero que aproximadamente significa "forma", "totalidad",
"configuración". La forma o configuración de cualquier cosa está
compuesta de una "figura" y un "fondo". Por ejemplo, en este
momento para usted. que lee este texto, las letras constituyen la
figura y los espacios en blanco forman el fondo; aunque esta
situación puede invertirse y lo que es figura puede pasar a convertirse
en fondo.
Página  56  

http://www.psicologia-online.com/colaboradores/cvasquez/gestalt.shtml
• Wikipedia. Convenciones generales sobre el armado de títulos propuesto
por Wikipedia
Esta página contiene las convenciones de títulos de aplicación en
Wikipedia, especialmente los criterios para darle un nombre o título a
un artículo o varios.
http://es.wikipedia.org/wiki/Wikipedia:Convenciones_de_t%C3%ADtulos

• Wikipedia. River (typography)

In typography, rivers, or rivers of white, are gaps in typesetting, which
appear to run through a paragraph of text, due to a coincidental
alignment of spaces. The rivers can occur regardless of the spacing
settings, but are most noticeable with wide inter-word spaces caused
by full text justification or monospaced fonts.
http://en.wikipedia.org/wiki/River_%28typography%29

• World Wide Web Consortium (W3C). Mobile Web Best Practices 1.0 - Basic
Guidelines. W3C Recommendation:
This document specifies Best Practices for delivering Web content to
mobile devices. The principal objective is to improve the user
experience of the Web when accessed from such devices. The
recommendations refer to delivered content and not to the processes
by which it is created, nor to the devices or user agents to which it is
delivered. It is primarily directed at creators, maintainers and
operators of Web sites. Readers of this document are expected to be
familiar with the creation of Web sites, and to have a general
familiarity with the technologies involved, such as Web servers and
HTTP. Readers are not expected to have a background in mobile-
specific technologies.
http://www.w3.org/TR/mobile-bp/#OneWeb

• World Wide Web Consortium (W3C). Pautas de Accesibilidad al Contenido

en la Web 1.0.
Estas pautas explican cómo hacer accesibles los contenidos de la
Web a personas con discapacidad. Las pautas están pensadas para
todos los desarrolladores de contenidos de la Web (creadores de
páginas y diseñadores de sitios) y para los desarrolladores de
herramientas de creación. El fin principal de estas pautas es
promover la accesibilidad. De cualquier modo, siguiéndolas, se hará
la Web más asequible también para todos los usuarios, cualquiera
que sea la aplicación de usuario que esté utilizando (Por ejemplo,
navegador de sobremesa, navegador de voz, teléfono móvil, PC de
automóvil, etc.), o las limitaciones bajo las que opere (Por ejemplo,
entornos ruidosos, habitaciones infra o supra iluminadas, entorno de
Página  57  

manos libres, etc.). Seguir estas pautas ayudará también a que

cualquier persona encuentre información en la Web más
rápidamente. Estas pautas no desalientan a los desarrolladores en la
 utilización de imágenes, vídeo, etc., por el contrario explican cómo
hacer los contenidos multimedia más accesibles a una amplia
audiencia.
http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-
19990505_es.html#toc

• World Wide Web Consortium (W3C). Visual Presentation — Understanding

SC 1.4.8:
The intent of this Success Criterion is to ensure that visually rendered
text is presented in such a manner that it can be perceived without its
layout interfering with its readability. People with some cognitive,
language and learning disabilities and some low vision users cannot
perceive the text and/or lose their reading place if the text is
presented in a manner that is difficult for them to read.
http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-
presentation.html

• Wroblewski, Luke. Web Form Design: Filling in the Blanks.

Luke Wroblewski draws on original research, his considerable
experience at Yahoo! and eBay, and the perspectives of many of the
field's leading designers to show you everything you need to know
about designing effective and engaging Web forms.
http://rtsnance.com/ui15/pdfs/day-one/wroblewski-wksp.pdf

Página  58