Páginas WEBPáginas WEB

Te voy a decir Te voy a decir cuatro cosas sobre cuatro cosas sobre

USABILIDADUSABILIDAD

pello_altadill@cuatrovientos.org

UsabilidadUsabilidad ¿Qué es la usabilidad?¿Qué es la usabilidad?““Usabilidad es un atributo de calidad que mide lo Usabilidad es un atributo de calidad que mide lo

fáciles de usar que son las interfaces Webfáciles de usar que son las interfaces Web “ “

Se trata de facilitar la navegación a los Se trata de facilitar la navegación a los usuarios de nuestra página para que en usuarios de nuestra página para que en definitiva consigan de manera clara lo que definitiva consigan de manera clara lo que buscan.buscan.

Principios básicosPrincipios básicos Sentido comúnSentido común Experiencia de usoExperiencia de uso

Usabilidad: normas Usabilidad: normas básicasbásicas

Facilitar la Facilitar la legibilidadlegibilidad de los textos: tipos y de los textos: tipos y tamaño de letra, contraste texto/fondo, tamaño de letra, contraste texto/fondo, textos más cortos…textos más cortos…

Adecuada organización de las páginas: un sitio estructurado.

Navegación ágil: poco peso de las imágenes y ficheros vinculados, etiquetas, texto alternativo...

Accesibilidad: que la tecnología empleada no sea una barrera de entrada para nadie

Usabilidad: estándares Usabilidad: estándares WebWeb

Los enlaces de Los enlaces de color azul, subrayadoscolor azul, subrayados, y , y los ya visitados de color morado los ya visitados de color morado

Texto negro sobre fondo blanco o con Texto negro sobre fondo blanco o con buen buen contrastecontraste entre ambos entre ambos

Imágenes con texto alternativo Imágenes con texto alternativo El usuario puede modificar el tamaño del El usuario puede modificar el tamaño del

texto en su navegador para leerlo mejor texto en su navegador para leerlo mejor Emplear encabezados y subencabezados Emplear encabezados y subencabezados

para organizar el texto.para organizar el texto.

Ejemplo de contrasteEjemplo de contraste

Negro

sobre

blanco

Qué

color

más

mono

Usabilidad: usos Usabilidad: usos comunescomunes

Acostumbramos a leer de izquierda a Acostumbramos a leer de izquierda a derecha y de arriba abajo derecha y de arriba abajo

Entendemos mejor las cosas si se las llama Entendemos mejor las cosas si se las llama por su nombre más común por su nombre más común

El logotipo suele estar arriba a la izquierda El logotipo suele estar arriba a la izquierda La navegación se suele basar en colocar La navegación se suele basar en colocar

los ítems en un rail izquierdo, fichas los ítems en un rail izquierdo, fichas superiores o categorías centrales superiores o categorías centrales

El buscador tiende a figurar arriba y a la El buscador tiende a figurar arriba y a la derecha derecha

La ayuda aparece arriba a la derecha La ayuda aparece arriba a la derecha

Legibilidad y percepciónLegibilidad y percepción En una pantalla se leen mejor los En una pantalla se leen mejor los

tipos de letra sans-serif que los seriftipos de letra sans-serif que los serif

El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja

El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja

El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja

Legibilidad y percepciónLegibilidad y percepción El contraste entre texto y fondo influye en El contraste entre texto y fondo influye en

la legibilidadla legibilidad Los tipos de letra demasiado pequeños se Los tipos de letra demasiado pequeños se

ven y leen mal ven y leen mal El ancho de línea y los márgenes influyen El ancho de línea y los márgenes influyen

en la legibilidaden la legibilidad La ubicación de elementos como título, La ubicación de elementos como título,

imagen e introducción al texto es clave imagen e introducción al texto es clave para que los usuarios lean o no los para que los usuarios lean o no los aspectos importantes del texto aspectos importantes del texto

Los elementos Los elementos animados o parpadeantes animados o parpadeantes distraendistraen la atención del usuario la atención del usuario

Legibilidad y percepciónLegibilidad y percepciónNeuromante (en español) (1984), es una Neuromante (en español) (1984), es una

novela de ciencia ficción escrita por novela de ciencia ficción escrita por William Gibson. Fue su primera obra, William Gibson. Fue su primera obra, y es una de las pocas obras en haber y es una de las pocas obras en haber obtenido los tres premios más obtenido los tres premios más importantes en la literatura de importantes en la literatura de ciencia ficción: el Premio Nebula, el ciencia ficción: el Premio Nebula, el Premio Hugo y el Premio Philip K. Premio Hugo y el Premio Philip K. Dick. Neuromante es la novela Dick. Neuromante es la novela principal de la corriente denominada principal de la corriente denominada cyberpunk, y de ella beben la mayor cyberpunk, y de ella beben la mayor parte de trabajos que posteriormente parte de trabajos que posteriormente se han acogido a esta etiqueta.El se han acogido a esta etiqueta.El título proviene de la composición de título proviene de la composición de los términos; "neuro" (mental) y los términos; "neuro" (mental) y "mante" (sujeto o actor de "mancia" "mante" (sujeto o actor de "mancia" que significa adivinación y por que significa adivinación y por extension magia (ej: nigromante, extension magia (ej: nigromante, quiromante)). Así tenemos quiromante)). Así tenemos "neuromante" como traducción "neuromante" como traducción directa de neuromancer, el título en directa de neuromancer, el título en inglés.inglés.

Posteriormente Gibson prosigió la trama Posteriormente Gibson prosigió la trama de Neuromante en las novelas Conde de Neuromante en las novelas Conde Cero y Mona Lisa Acelerada Cero y Mona Lisa Acelerada formando entre las tres la llamada formando entre las tres la llamada Trilogía del Sprawl.Trilogía del Sprawl.

NeuromancerNeuromancerNeuromancer o Neuromancer o NeuromanteNeuromante (en español) (en español)

(1984), es una novela de ciencia ficción (1984), es una novela de ciencia ficción escrita por escrita por William GibsonWilliam Gibson. Fue su . Fue su primera obra, y es una de las pocas primera obra, y es una de las pocas obras en haber obtenido los tres obras en haber obtenido los tres premios más importantes en la premios más importantes en la literatura de ciencia ficción: el Premio literatura de ciencia ficción: el Premio Nebula, el Premio Hugo y el Premio Nebula, el Premio Hugo y el Premio Philip K. Dick.Philip K. Dick.

Origen del CyberpunkOrigen del Cyberpunk

Neuromante es la novela principal de la Neuromante es la novela principal de la corriente denominada cyberpunk, y de corriente denominada cyberpunk, y de ella beben la mayor parte de trabajos ella beben la mayor parte de trabajos que posteriormente se han acogido a que posteriormente se han acogido a esta etiqueta.esta etiqueta.

Origen del títuloOrigen del título

El título proviene de la composición de los El título proviene de la composición de los términos; "neuro" (mental) y "mante" términos; "neuro" (mental) y "mante" (sujeto o actor de "mancia" que (sujeto o actor de "mancia" que significa adivinación y por extension significa adivinación y por extension magia (ej: nigromante, quiromante)). magia (ej: nigromante, quiromante)). Así tenemos "neuromante" como Así tenemos "neuromante" como traducción directa de neuromancer, el traducción directa de neuromancer, el título en inglés.título en inglés.

Posteriormente Gibson prosigió la trama de Posteriormente Gibson prosigió la trama de Neuromante en las novelas Conde Cero Neuromante en las novelas Conde Cero y Mona Lisa Acelerada formando entre y Mona Lisa Acelerada formando entre las tres la llamada Trilogía del Sprawl.las tres la llamada Trilogía del Sprawl.

Convenciones: iconos y Convenciones: iconos y colorescolores

Rotulación y ayudasRotulación y ayudas Rastro de migas de pan

Inicio > Artículos > Usabilidad Inicio > Artículos > Usabilidad Correcta rotulación de los enlaces: Correcta rotulación de los enlaces:

deben identificar claramente el deben identificar claramente el destino. Nunca usar “pinche aquí” destino. Nunca usar “pinche aquí”

Imágenes que acompañen a enlacesImágenes que acompañen a enlaces

homehome Mapa de la web Mapa de la web

Menos es MásMenos es MásDate de alta en está web Date de alta en está web

y podrás disfrutar de y podrás disfrutar de una experiencia única una experiencia única de navegación para de navegación para compartir tus archivos compartir tus archivos multimedia y multimedia y convertirte en una convertirte en una estrella de la red. Los estrella de la red. Los pasos son muy simples pasos son muy simples solo tienes que pinchar solo tienes que pinchar aquí y rellenar 2 aquí y rellenar 2 formularios.formularios.

Pincha aquí ahoraPincha aquí ahora

¿No tienes cuenta?¿No tienes cuenta?

Crear cuenta

Organizando una WebOrganizando una Web

Card SortingCard Sorting

Pruebas de usabilidadPruebas de usabilidad Poner al usuario delante de la web.Poner al usuario delante de la web.

¡ Qué fácil ! ¡¡ Uaaarrgh !!¿Dónde está el

inicio?Mecagonsoput..

UsabilidadUsabilidad En resumenEn resumen

““NO ME HAGAS NO ME HAGAS PENSAR”PENSAR”