h1

Para que luego digan que no nos preocupamos por los usuarios

febrero 17, 2006

El año pasado, como algunos sabeis, tuve una asignatura llamada “Interacción con los Computadores” (IC) en la que me lo pasé como una enana. No quiero decir que fuera divertida, si no que al contrario que a muchos de mis compañeros, era una temática que me resultaba hiper-interesante.

Después de tanto lenguaje binario, bases de datos, organización de ficheros, lenguajes de programación y demás conocimientos estrictamente sobre ordenadores, descubrí que había algo que conseguía que nuestro mundo y el de los ordenadores no fueran disjuntos, había un puente entre ambos, y esta materia era la protagonista.

IC básicamente trataba de Cómo crear, organizar, planear, colocar, *ar… nuestras aplicaciones para que fuera lo más agradable, cómodo y provechoso para el Usuario. Pero claro, cuando en las primeras clases nos pusimos a escuchar hablar acerca de las partes del ojo humano y los conos que habitan en él, más que desorientados estábamos flipados: ¿Esto es informática o medicina? decían algunos. Ayyy… pobres xD

Me caló muchísimo. Y aunque los usuarios son la mosca coj*nera de nuestro gremio, trabajamos por, para y gracias a ellos. Bueno, a su dinero. Así que cada vez que creo algo, pienso como si yo fuera el usuario. Pienso en que sea intuitivo (y no difícil de manejar), en que sea agradable a la vista, en que esté organizado, que se distingan las partes, en que me puede estar leyendo un ciego… Hay cosas que consigo y cosas que no… algunas por diseño, y otras porque no sé hacerlo. Pero aún así hay cosas tan subjetivas, que es difícil que todo el mundo esté contento. Como el color negro-gris marengo de la página. Sé que hay gente que lo prefiere a un color claro, y sé que hay gente que al revés, y sé que hablando desde el punto de vista de la Interacción… debería ser más claro que oscuro. Pero resulta que el cliente principal para mi blog soy yo =P y si yo no puedo mirar mi página -porque lo claro me molesta más-, o no me gusta el diseño, mal vamos =P

¿Y para qué os cuento todo esto? Sé que tengo muchos lectores bloggers, al menos entre los que comentan, la mayoría. Y quiero compartir pequeños truquitos que el año pasado aprendí e investigué para hacer más accesibles y usables nuestras páginas. Así que sin más dilación… me dispongo a enumerar ^_^ Dando ya por sabido que el HTML está deprecated y que es XHTML+CSS lo que hay que utilizar en su lugar, empezamos:

Ordenadores antiguos:

No está de más ser un poquito considerados y solidarios con aquellos que siguen con su vieja computadora =)

– Preparar nuestra página para una resolución de 800×600. Aunque parezca mentira, esta resolución aún es común, y tener que andar desplazándote de derecha a izquierda quita las ganas de leer la página. El ancho máximo de body+sidebar por tanto (generalmente), ha de ser de *menos de* 800 píxeles, y el resto el fondo de la web.

– Utilizar los colores web. Como sabeis, los colores en hexadecimal se componen de 6 cifras, por ejemplo #54d8a2. Pues se suelen considerar colores web a todos aquellos que por repetirse en pareja se pueden reducir en tres cifras: #aadd77 -> #ad7 #22dd22 -> #2d2. Y así sucesivamente. Aunque este detalle es menos esencial =)

Accesibilidad según la W3C:

La World Wide Web Consortium es la asociación que se encarga de escribir los estándares sobre todo para web, que ya le hace falta orden a este caos… Estos son algunos de los consejos de la W3C:

– Texto correcto y sin abreviaturas. Tú puedes entender “Anche stba n l bar”. Pero apuesto a que un lector de páginas web para ciegos no puede.

– Identificadores de imagen. Es obligatorio incluir el atributo “alt” en las etiquetas de imágenes. Este atributo es el que describe la imagen, que es exactamente lo que lee también el citado traductor. Algo así como “Imagen: ‘Mi perro y yo’.” (alt=”mi perro y yo”)

– Los links. Prohibido el “aquí”. Esto es algo que me trae de cabeza, porque todo el mundo hace. Si os fijais, yo nunca pongo “Y hay otra página interesante aquí“, si no “y aquí hay otra página sobre flores silvestres“. Porque el link debe ir acompañado de una descripción coherente, que además ayudará en los buscadores.

– Las listas no han de ser caóticas. Aunque esto es de cajón de madera de pino =)

– Las medidas han de ser relativas en la medida de lo posible. Incrementos de tamaño de fuente en el CSS son claro ejemplo. Es mejor poner {font-size:xx-small;} que incremente o decremente según el tamaño de fuente con el que llega el visitante, que no obligar a 12px -por ejemplo- que a lo mejor resulta ser mucho más pequeño que el tamaño normal del ordenador de esa abuelita que te visita.

Tipografía:

– En web siempre sans seriff. Hay dos tipos de estilo de fuente. Seriff (las que tienen remaches en las puntas, como la Times New Roman) y Sans Seriff (o Sin Seriff, como la Arial). Está demostrado que en pantalla las Seriff dificultan la lectura, aunque en papel nuestra vista lea más relajada gracias a poder ayudarse de esos remaches.

– El fondo NO debe ser, como dijo Borja en su siempre recordado artículo sobre tipografía, de color blanco nuclear. Pues podemos quedarnos ciegos si estamos mucho rato leyendo en él. Siempre es más descansado un marfil, beige o color hueso, o cualquier otro color pastel, que el blanco más puro. ¿Por qué si no iban los ajedrecistas profesionales a jugar con tablas de color chocolate-café en vez de blanco-negro?

– El uso de las mayúsculas. Hagamos una prueba:

TIPOGRAFÍA EN LA WORLD WIDE WEB

Tipografía en la World Wide Web

¿Qué habeis leído mejor? El segundo ¿verdad? El ojo humano lee las frases mirando casi sólo la mitad superior de las letras. Por eso, enfatizamos mucho más una línea convirtiendo las iniciales en mayúsculas (e incluso haciéndolas más grandes), pues nuestro ojo las nota más que un montón de letras en mayúscula, que por cierto cuesta leer.

El Usuario y la Web:

Basados en un trabajo llamado Eyetrack sobre movimientos oculares de los usuarios frente a un monitor, creado e investigado por el Instituto Poynter, se puede analizar el porqué de la situación en la que los elementos debieran situarse en la página web. Esto que veis aquí es la trayectoria, el barrido de la primera mirada a una página web.

Trayectoria de la mirada

¿No reconoceis fácilmente la estructura de una web? =) En la parte de arriba título y descripción, después la información importante como el cuerpo de la web, y por último lo menos importante en la parte de abajo y la zona derecha, que es donde solemos poner el footer con autores y estilos y la barra lateral con links y otras informaciones que el usuario ya buscará si necesita.

Epílogo:

Fallo en muchas cosas, pero intento que al menos no sea en las cruciales, y poder ayudar cuando me piden opinión sobre la accesibilidad, usabilidad, look & feel, etc de una aplicación. Me parece muy interesante analizar las aplicaciones desde este punto de vista tan subjetivo y poco usual. Pero a veces, ya sabeis qué pasa… “Consejos vendo…”

Espero que haya alguien a quien estos consejos le vengan bien =)

Technorati Tags: diseño web

Anuncios

13 comentarios

  1. No sabía que existía el gris marengo :O. Para mi solo existen el gris oscuro, el más oscuro, el claro y el más claro. Anotaré el marengo en mi paleta mental 🙂
    Si haces las páginas con un ancho exacto de 800px la gente que tenga 800×600 tendra que hacer un poco de desplazamiento horizontal. Piensa que de los 800 tienes que quitar el ancho de los bordes de la ventana y el ancho de la barra de desplazamiento vertical.
    Discrepo en lo de las tipografías en parte. Los tamaños relativos así sin mas son demasiado relativos, relativos al navegador que use el usuario [ironia] y nooooo, no me refiero a la E azul esa grande que es tan buena y fantastica.[/ironia]. Lo que suelo hacer yo es poner un tamaño absoluto en el body (pongamos 14px) y luego en los elementos en los que quiero aumentar o disminuir el tamaño lo indico relativo a ese tamaño mediante “em”. (Explicación pa’ quien no lo sepa: 1em es equivalente al tamaño de letra utilizado. Si ponemos “2em” duplicamos el tamaño de letra y con “0.5em” lo reducimos a la mitad).


  2. Un artículo genial (como el resto de la página, ya lo dije), respecto a lo que comenta Al-x es cierto lo de la resolución pero en lo de la fuente creo que está equivocado, pero es mi opinión.

    Un saludo.


  3. Interesante lista, aunque siempre se pueden encontrar más y más fallos; tal vez demasiados.
    Es curioso porque, a pesar de los supuestos avances en los lenguajes de programación y todas estas historias, el interfaz del usuario se sigue llevando la mayor parte del desarrollo; supongo que es inevitable ya que cada información que capta el usuario (sea una entrada de datos o un texto leído), depende mucho del perfil al que va destinado.
    Por cierto, ya no solo ordenadores antiguos sino navegadores antiguos. En el trabajo tengo muchos problemas para visualizar los menús que aparecen a la derecha (o izquierda) porque tengo un explorer carraca (antiguo, vaya) que no reconoce las nuevas implementaciones. Y esto, en los CMS se paga.
    Hay otro detalle que quiero comentar algun día y que parece no dársele importancia, pero… ¿os habéis fijado de lo que cuesta en muchísimos sitios encontrar el enlace de la sindicación? O es que estoy perdiendo facultades, que todo es posible XD


  4. Curiosa la imagen de por dónde pasa el ojo… Sinceramente me parecía un poco extraña, pero la seguí y O_O es cierto!! el camino que seguía era casi casi ese… Increíble..

    Y respecto al comentario anterior, sí que resulta increíblemente difícil el encontrar el enlace de sindicación; al final siempre acabo pulsando ctrl+F dejándo que lo busquen por mi xD


  5. Si, las clases de IC eran muy curiosas, por ejemplo te enteras de cosas como que las sirenas de la policia son azules por que las celulas que perciben el color azul estan en la periferia de los ojos, lo que nos permite advertir la sirena aunque venga por detras o por un lateral!! La asignatura es interesante, sin duda.

    Respeto a tu blog, me gusta como está. Prefiero colores oscuros para el fondo y mas claros para las fuentes. Debo tener los ojos muy sensibles a la luz o así, porque no aguanto mucho en webs con fondo blanco, y eso que tengo configurado el monitor solo con 10% de brillo.


  6. @ Al-x: Muy bien observado, pensaba en “menos de” 800 px, pero no lo excribí =) Esta página por ejemplo tiene 770px de ancho. En los tamaños relativos yo tampoco lo sigo, cada vez que lo intento no me gusta el resultado en diferentes browsers, pero es lo que dice la teoría =) Gracias por la explicación añadida, seguro que a alguien le viene genial ^_^

    @ Underbyte: Podrías comentar por qué crees que está equivocado? Así no hay quien discuta =P

    @ Javier: Ese gravatar!! =P Qué razón tienes. Si tanto me gusta esto es porque exige Arte =) La respuesta del ser humano es siempre sorprendente e inesperada, por eso no hay una fórmula mágica para crear la perfecta interfaz, y por eso nuestras aplicaciones siempre vamos a poder mejorarlas =)

    Lo de los RSS estoy de acuerdo, pero espero que no lo digas por mí!! xD

    @ Lerdaknas: Y cómo hecho yo en falta un ctrl+f en la cruda Realidad!!! Necesitaría uno mil veces buscando movidas en los apuntes o libros xDD

    @ iscariot: Veo que atendías en clase ;P Y… genial… otro más para el club de los ojos sensibles =D

    besitos ^_^


  7. Ya quisiera más de una doctora de la Universidad de Deusto la mitad de idea que tú sobre fuentes…

    Zanx por la visita! Aunque ya sabes que me corto mucho en pubico, digooo en publico 🙂


  8. Realmente un artículo fantàstico sobre las precauciones que hay que tener para tu web. Mola porque haces referencia a las cosas mas importantes. Intentaré aprovechar este manual al màximo!! 😉


  9. La trayectoria esa del ojo, ¿será la misma para usuarios con alfabetos que no van de izquierda a derecha como chinos o árabes?


  10. @ Txus: Juas… Sí, ya he oído de burradas =)

    @ LmeWMon: Gracias 😀 Me alegro de que sea de utilidad ^_^ Aunque a ti no te haga mucha falta 😉

    @ Ajotatxe: Pues no sé… imagino que tendrá algo que ver y afectará, sí…

    =)***


  11. hola marta!!!

    yo tengo una duda que no se resolver… he cambiado mi formato del blog y he perdido lo de la lista de los links y ahora no se ponerla por que lo que dice la ayuda del blog no la entiendo!!! es que soy torpe en estas cosas. puedes decirme como se hace por favor de forma que yo lo entienda??? a ver si tu o iban me podeis ayudar… y me gustan tus consejos los pondre en practica… a la gente que no sabe como yo nos vienen bien.


  12. Ya te he enviado un mail Herika, mira bien, que como mi cuenta es de gmail, a lo mejor te lo envía a la basura o la carpeta de Spam o algo =)


  13. body{

    background-repeat:repeat-x;

    background-position: left top;

    background-color: #fff;

    }

    #cabecera{

    font-family: “Trebuchet MS”, Verdana, Geneva, Arial, sans-serif;

    font-size:18px;

    padding:10px 10px 0px 0px;

    text-align:justify;

    padding-left:180px;

    margin:0px;

    color: #3A4A5A;

    display:none;

    }
    #container{

    background-color: #e7e7e7;

    width:auto;

    line-height:1.2;

    }

    #menuizq{

    float:left;

    width:22%;

    background:#ECEFF1;

    display:none;

    }

    #menudcha{

    float:right;

    font-family: Trebuchet MS,”MS Serif”, “New York”, serif;

    font-size:12.5px;

    width:22%;

    height:auto;

    background:#e6e6e6;

    line-height: 150%;

    display:none;

    }

    div.contenidohome{

    width:100%;

    display:inline; /*bug Internet Explorer*/

    height:auto;

    text-align:justify;

    margin:0 0 0 0;

    padding:0 0 0 0;

    }

    ******************************************************
    http://www.azti.es

    Si algo me ha enseñado la experiencia en este mundillo es que los sitios web no se tiene que ver exactamente igual en todos los navegadores, sino que se tienen que ver Bien en todos.

    Animo, vas por el buen camino.

    PD: Los colores no los elegí yo



Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: