Guía de usabilidad web by Juan Dimuro

Gu铆a de usabilidad web - Juan J. Dimuro (2014) Correcci贸n . Carolina Condado

Índice

Introducción

Concepciones básicas

Qué es la Usabilidad Entonces, ¿qué es la usabilidad? ¿Por qué es importante la usabilidad? Beneficios Para profundizar en estos temas: Interacción con el sitio La experiencia del usuario Navegabilidad En este contexto Pensar en móviles Técnicas Los usuarios no son adivinos (Convenciones) No dejarse seducir por la tecnología Menos es más No es escribir en papel Titulares Títulos seductores Uso de las mayúsculas sostenidas No cualquier tipografía Entre líneas ¿Se justifica Justificar? Entre la izquierda y la derecha Otros idiomas Son tablas tabulares Listas listas Enlaces, links, vínculos… Formularios En la paleta de colores Imágenes Fondos ¿Banners? Flash o no flash Audio y video Animaciones Menús desmenusados Be responsive ¿Violación de la Ley? Estética, usabilidad y emoción Consistente Ruido

6 6 7 7 7 8 8 9 9 10 12 12 13 14 14 16 18 19 19 21 21 22 23 23 23 24 25 28 29 31 31 33 34 35 35 36 38 39 39 40

Pop…! up Nuevas ventanas Si busca, encuentra PDFs Todo sobre el hover Navegación Sólo 3 clics Fresco y actualizado Cuando hay que cargarla El efecto cabecera El scroll no es maligno 404 Mensajes de error para humanos Materiales de consulta

40 40 41 43 44 44 45 45 46 46 46 47 48 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.

Página 5

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.

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? 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/

Página 6

¿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:

•

Usability 101: Introduction to Usability: http://www.nngroup.com/articles/usability-101-introduction-to-usability/

Página 7

http://www.alzado.org/articulo.php?id_art=39

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.

•

¿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?

•

¿Quieren mi opinión acerca de su sitio/del contenido?

Página 8

En esa búsqueda, los usuarios suelen hacerse las siguientes preguntas cuando acceden a una página:

•

¿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 Los usuarios casi siempre ojean velozmente (scan) las páginas web, leyendo palabras y frases sueltas, concretamente el 79% de 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

Página 9

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.

sistemas visuales, en psicología, en lingüística cognitiva y en diseño de productos. http://www.nosolousabilidad.com/articulos/eyetracking.htm

Página 10

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.

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.

Página 11

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.

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.

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

Página 12

•

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-thinksecond-edition.pdf

No dejarse seducir por la tecnología

Página 13

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.

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,

•

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 suficientemente descriptivo tanto para que nos identifique, como para que el usuario sepa de qué va y si se ajusta a sus expectativas.

Página 14

Así, es aconsejable seguir una serie de pautas a la hora de presentar la información:

•

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… El día inmediatamente anterior…

Frases de museo

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

Página 15

Estilo de pirámide invertida

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.

en inglés: What You See Is What You Get

Página 16

Sin embargo, y aunque su concepto es en origen sencillo, darles un uso adecuado no es algo conocido por todos.

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.

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

Página 17

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.

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.

Página 19

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.

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.

•

Serif vs. Sans-Serif Fonts for HD Screens - http://www.nngroup.com/articles/serifvs-sans-serif-fonts-hd-screens/

Página 20

Más sobre este punto:

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-visualpresentation.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.

Página 21

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.

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/

Martínez Diana, Julio. S/d. http://www.antipixel.com.ar/

Página 22

•

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

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

Listas listas

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 Primeros puestos del mundial de Sudáfrica:

Tabla desordenada Países finalistas del mundial de Sudáfrica:

1. España

Uruguay

2. Holanda

Holanda

3. Alemania

Alemania

4. Uruguay

España

Enlaces, links, vínculos… Los enlaces, vínculos, hipervínculos o hiperenlaces son elementos de un documento electrónico que hacen referencia a otro recurso, por ejemplo, otro 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.

Página 24

Regla fundamental: los enlaces se distinguen del resto.

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.

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 campos tiene el largo justo. Reconsiderando la formula, “menos es más”, cuando hablamos de formularios, menos es mucho... se debe tender a cero.

Página 25

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.

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.

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. 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

Página 26

En varias columnas

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.

•

Pueden tener consecuencias negativas al clicar en ellas de forma inesperada.

•

Generan ruido en la interfaz.

Página 27

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:

•

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-roideclining-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.

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/WAIWEBCONTENT-19990505_es.html#toc

Página 28

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.

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

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, ilustraciones, multimedia, etcétera.

Página 29

Imágenes

•

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 referencial, no presentar mucha complejidad (de ser así, por ejemplo un esquema, insertar una introducción o una nota aclaratoria de la misma).

Página 30

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:

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.

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. Prácticamente en la totalidad de los casos, su objetivo es atraer tráfico hacia el sitio web del anunciante.

Página 31

¿Banners?

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.

•

¿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

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:

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.

•

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.

10 Jakob Nielsen, “Flash: 99% Bad”, 2000. http://www.nngroup.com/articles/flash-99-percent-bad/

Página 33

Por otro lado, quienes consideran que abandonar la tecnología Flash es un error, sostienen:

•

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

•

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 automáticamente (existen excepciones como los slides, siempre que tengan la posibilidad de pausa)

Página 34

Veamos 5 cuestiones fundamentales a tener en cuenta:

•

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.

•

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 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.

Página 35

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ú:

•

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.

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, normalmente ayudados por javascript.

Página 36

Be responsive

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

Aprovechar los soportes 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

Página 37

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.

“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 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 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:

Página 38

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.

•

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

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

Consistente

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

Ese botón es parte integral de la navegación: sigue un vínculo, vuelve atrás; explora el resultado de un buscador, vuelve atrás… todos lo hicieron, hacen y harán.

Página 40

Si de una cosa está segura la Humanidad, es que todos los usuarios de Internet entienden a plenitud el botón "Atrás".

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.

•

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 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 41

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:

•

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

•

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 con un color diferente al del resto del texto).

Página 42

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:

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.

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 título, con una cita, con una lista, etcétera.

Página 43

PDFs

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

•

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 ser la única indicación para cumplir con cierto objetivo o para proponer interactuar con los elementos de una página.

Página 44

Veamos 3 cuestiones fundamentales a tener en cuenta para facilitar la navegación de los usuarios:

•

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

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

Página 45

Fresco y actualizado

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)

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 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.

Página 46

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.

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.

Página 47

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.

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.

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 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.

Página 48

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:”).

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.

Página 49

Redactar mensajes de error para humanos implica exponer breve y claramente el problema, motivos y posibles soluciones, con un vocabulario entendible y sencillo.

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-nuestrosojos-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 desarrollo Web. Este documento trata las consideraciones en el desarrollo de tales diagramas, delinea una simbología básica para

Página 50

•

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 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

Página 51

•

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-awebsite1.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. http://web-profile.com.ua/wp-content/uploads/steve-krug-dont-make-me-think-secondedition.pdf

Página 52

•

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-aureobelleza-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&#39;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 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/

Página 54

•

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. http://www.nngroup.com/articles/usability-roi-declining-but-still-strong/

Página 55

•

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. http://www.psicologia-online.com/colaboradores/cvasquez/gestalt.shtml

Página 56

•

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 mobilespecific 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 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

Página 57

•

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-WEBCONTENT19990505_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-visualpresentation.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