La llamativa identidad de la Copa América Chile 2015

Adentrándonos en el trabajo de diseño visual de este evento

Storm Thorgerson. El diseño sugestivo en la industria musical

Autor de increibles portadas de discos de bandas como Pink Floyd

Consideraciones de diseño gráfico en la creacion de un aula virtual.

Tips a tener en cuenta en el montaje de recursos educativos digitales

10 comparativas Vs Moodle

Alternativas LMS a tener presente

Diseño rígido vs diseño flexible

Importancia de la adaptabilidad de un sitio web a diferentes dispositivos

Autodesk rediseña su identidad

Con un cambio radical de su logotipo y nueva tipografía

martes, 15 de junio de 2010

Recuperar password desde phpmyadmin

lunes, 17 de mayo de 2010

Columnas, anchos de línea y legibilidad

Artículo publicado anteriormente en alzado.org


Resumen:

Los usuarios leen más rápido los textos con renglones de tamaño medio (60-80 cpl), que los de renglones cortos o largos. También son los de tamaño medio sus preferidos. Ello, junto a que sólo los lectores avezados leen mejor en dos columnas de texto que en una, sugiere que sigue siendo acertado utilizar el modelo de maquetación basado en tres columnas de elementos: barra de navegación, texto y opciones secundarias respectivamente. Esa maquetación funciona aún mejor usando márgenes e interlineado y, para resoluciones de pantalla de tamaño medio, empleando un ajuste líquido, que abarque todo el ancho de pantalla .


Introducción

Un aspecto importante a la hora de maquetar los contenidos de un sitio web es decidir cómo se ha de presentar la información textual para que su comprensión y legibilidad sean máximas. Además de los aspectos relacionados con la redacción y composión del texto es necesario que el texto se visualice adecuadamente para una correcta lectura. Para ello hay que decidir aspectos como el número de columnas de texto y el ancho idóneo de los renglones a emplear.
Además, hay que poder presentar los textos en monitores de muy alta resolución y, al tiempo, hacerlo compatible con dispositivos tipo PDA.


El ancho de línea

Según la Asociación para la investigación de medios de comunicación (AIMC) (PDF), más del 65% de los internautas españoles ya emplea una pantalla con una resolución superior a los 1000 pixels de ancho. Ante ello, hay que plantearse si tiene sentido seguir empleando renglones de tamaño medio como hasta ahora.
Cada vez es más frecuente encontrar resoluciones de hasta 1900 pixels de ancho. Un diseño líquido en el que los renglones de texto ocupen un ancho tan grande no parece, a priori, que mejore mucho la legibilidad.
Aunque los estudios empíricos con usuarios no son unánimes en cuanto al efecto de la longitud de línea en la velocidad de lectura y comprensión de los textos, sí que parecen resultar mejor los renglones de tamaño medio que los muy cortos o muy largos.
El problema que suelen ofrecer los renglones cortos es que la vista debe realizar frecuentes saltos de línea y eso resulta cansado. El problema para los renglones largos, en cambio, es que el ojo debe realizar un recorrido excesivamente largo y también termina por hacerse pesado.
Pese a ello, hay varios estudios que avalan la idea de recomendar renglones relativamente largos (de 80 a 100 caracteres por renglón) alegando que se leen más rápido que los renglones cortos (Duchniky y Kolers, 1983; Dyson y Kipping, 1998; ambos trabajos citados en Dawn, 2005). El propio estudio empírico de Dawn (2005) termina mostrando una ligera ventaja en rapidez lectora para renglones de 95 cpl.
Otros trabajos, por contra, aconsejan el uso de renglones de tamaño corto-medio. Tambien en Dawn (2005) se mencionan las aportaciones de Dyson y Haslgrove (2001) según los cuales los renglones de 55 cpl se leen más rápidos que los de 100 cpl (largos) o los de 25 cpl (cortos).
Un trabajo de García y Short (2002) (PDF) señala que los usuarios leen algo más rápido los renglonesdeentre60 y 80 cpl que otros más largos (100 y 120 cpl) o cortos (40 cpl).
También recomiendan renglones de tamaño medio Beaufort y Zwaga (1997) y Brooks (2003), para quien, citando a Bringhurst, el rango aceptable está entre 45 y 75 cpl (para una columna con letra serif) y el ideal en 66 cpl.
Un estudio anterior de Bernard et. al. (2002) con niños y adultos no fue capaz de encontrar diferencias significativas en cuanto a rapidez en la lectura y comprensión del texto relacionadas con el ancho de renglón. Pese a ello, a partir de los datos de satisfacción de los usuarios, dicho trabajo indicaba claramente que los usuarios adultos preferían la página con renglones de tamaño medio, frente a otros de tamaño pequeño y grande. Por su parte, los niños preferían los renglones cortos. Lo que sí quedaba claro, en todo caso, era que los renglones largoseran los menos queridos por los usuarios.
Fig. 1. Renglones largos Fig. 2. Renglones de tamaño medio Fig. 3. Renglones de tamaño pequeño
Texto con renglones de tamaños grande, medio y pequeño. Fuente: Bernard (2002)
En definitiva, aunque los estudios empíricos no son unánimes al respecto, es preferible usar renglones de tamaño medio (60-80 cpl) antes que los de tamaño largo o corto. Además, éstos son los preferidos de losusuarios.
Así, buena parte de esta recomendación está basada no sólo en datos de legibilidad y rapidez de lectura, sino también en las preferencias de los usuarios, es decir, una cuestión subjetiva. Ello quiere decir que, independientemete de que la usabilidad real se pueda ver beneficiada directamente por el uso de renglones cortos-medios, además hay que contar con el efecto añadido de la usabilidad percibida. Es decir, si consideramos la usabilidad percibida como un factor más de la usabilidad, hemos de inferir que una mejora de la usabilidad percibida repercutirá en una mejora de la usabilidad real. Es decir, si el usuario hace algo con satisfacción lo hace mejor que sin ella, con lo que ello posiblemente termine mejorando la usabilidad real.


Número idóneo de columnas

Por tanto, si los usuarios prefieren los renglones no muy largos, y éstos se leen algo mejor, cabría la posibilidad de que fuera una buena idea diseñar nuestra interfaz con varias columnas de texto. Así, especialmente cuando el usuario tuviera una gran resolución en su configuración de pantalla, se aprovecharía mejor el espacio disponible en pantalla. En realidad, los estudios empíricos al respecto no avalan esta idea.
Una prueba respecto a la lectura de textos periodísticos presentados a una o varias columnas, realizada con Eyetrack III (un dispositivo para detectar hacia dónde mira el usuario durante la realización de una tarea), detectó que las personas que realizaron la prueba leían (miraban) más detenidamente los textos presentados en una columna que aquellos dispuestos al modo de los clásicos periódicos impresos en varias columnas. Sin embargo, no termina de estar claro si el mayor detenimiento en los textos a una columna obedece a una simple cuestión de hábito de lectura online o si a su facilidad de uso (Ruel y Outing, 2004).
Por otro lado, respecto a las pruebas con Eyetrack III, éstas sólo miden hacia dónde mira el usuario. Es decir, el hecho de que un usuario mire detenidamente algo no quiere decir necesariamente que realmente esté conscientemente más pendiente de ello que de otra cosa que sólo vea con visión periférica, pero de la que tiene perfecta constancia (Germani, 2005).
Un trabajo de campo de Baker (2005) no consiguió resultados concluyentes sobre el número de columnas idóneo. Sólo teniendo en cuenta por separado los datos para lectores veloces y lentos consiguió apreciar que los textos a dos columnas justificadas son mejor aprovechados por los lectores veloces, tanto en cuanto a resultados de velocidad y comprensión como en cuanto a preferencias subjetivas. Por su parte, los lectores lentos obtenían mejores resultados con los textosen una única columna.
En esta línea, Nielsen recomienda emplear emplear una sola columna en los textos pensados para usuarios con baja habilidad lectora, aunque la recomendación también es válida para usuarios con baja visión u otras discapacidades:
“Streamline the page design. Place important content in a single main column, so users don’t have to scan the page and pick out design elements in a two-dimensional layout. This guideline also helps low-vision users and users of handheld devices (such as smartphones), which narrow the field”
Por tanto, parece que sólo cuando nuestra audiencia principal sean buenos lectores la página funcionará mejor con dos columnas. Otra posibilidad es dejarle al usuario la opción de que elija (fácilmente) si desea utilizar un estilo con varias columnas.


Maquetar el texto

Aunque nos decidamos por una maquetación que sólo incluya una columna para el texto, también influye sobre el resultado final del funcionamiento y legibilidad de la página cómo se disponga ese texto en ella.
De nuevo el factor subjetivo es el que inclina la balanza hacia una recomendación concreta. Bernard y Larsen (2001) emplearon 6 maquetaciones distintas para un estudio (diseño con ajuste líquido en ventanas grande y pequeña, diseño con ancho fijo y centrado con ventana grande y pequeña, y diseño con ancho fijo y alineado a la izquierda en ventanas grande y pequeña).
Los resultados de este trabajo mostraron que no había diferencias significativas entre las distintas maquetas en términos de precisión, tiempo o eficiencia. No obstante, las diferencias subjetivas favorecían claramente el diseño con ajuste líquido (definiendo los anchos en porcentajes en lugar de en anchos fijos, de forma que se ocupe toda la pantalla, independientemente de la resolución de ésta).
Parece, por tanto, que el modelo de buena maquetación propuesto para las páginas basadas en texto no se aleja mucho de lo que la costumbre nos viene mostrando día a día. De hecho, muchos de los estándar de facto que mejor funcionan lo hacen simplemente porque el usuario está acostumbrado a ellos, los conoce, no debe aprender gran cosa sobre la disposición de elementos y el sistema de navegación (Bernard, 2001; Adkisson, 2002).
Así, el modelo que mejor funciona es bastante clásico. Tres columnas para maquetación, y sólo una de ellas para el contenido (Thurstun). Es decir:
  • La columna central estará dedicada al contenido
  • La columna de la izquierda albergará la tabla de contenidos
  • La columna de la derecha contendrá enlaces funcionales (imprimir, suscribir, descargar PDF…)
Diseño líquido a tres columnas
Diseño líquido a tres columnas. Fuente: Bernard, 2001.
En resoluciones de pantalla no excesivamente grandes esta maquetación también permitirá combinar las dos características que parecen funcionar mejor en cuanto a ancho de línea y número de columnas, pues dedicamos sólo una columna al texto propiamente dicho y, además, el ancho de línea tendrá un tamaño medio.
Será necesario plantearse, no obstante, qué hacer cuando las resoluciones habituales de los monitores se sitúen en torno a 1600 pixels de ancho. Con esa configuración, una maquetación de este tipo orginará renglones de texto excesivamente largos.
Si se opta por limitar el ancho máximo del rengón para que no exceda de los 80-90 cpl (que parece ser el umbral máximo para una buena lectura) obtendremos pantallas con un enorme espacio en blanco en la parte derecha, lo que tampoco parece ser la mejor forma de aprovechar la capacidad del monitor.
Entretanto llega ese momento debemos ir pensando soluciones óptimas. De momento, para resoluciones inferiores a 1600 pixels de ancho y mayores de 800 pixels, una solución de compromiso puede ser no hacer renglones de texto más anchos de 90 cpl y aprovechar el espacio en blanco que quedará en la parte de la derecha para incorporar todas o parte de las ilustraciones que solemos incrustar dentro del propio texto. No obstante, si en algo nos interesa el diseño para todos, esa maquetación deberá ajustarse también adecuadamente en monitores de baja resolución.


Márgenes y extensión del texto

Podemos afinar aún más en el acabado de la maquetación si nos fijamos en otros dos aspectos formales relacionados con el texto y su legibilidad. Se trata del espaciado (márgenes e interlineado) así como la extensión de cada fragmento de texto.
Un estudio de Dyson y Kipping (1998, citado en Baker, 2003) afirmaba obtener mejores resultados de velocidad de lectura en textos paginados (divididos en múltiples pantallas con un pequeño fragmento de texto cada una) que con el texto completo en una sóla página (lo que implica usar la barra de scroll). Sin embargo, Baker sostiene, en base a su trabajo con usuarios, que usar el texto completo proporciona mejores resultados de velocidad de lectura, comprensión y facilidad de escaneo que el paginado, siendo, además, este formato de texto completo al que más acostumbrados están los usuarios (Baker, 2003).
En cuanto a la separación entre líneas y entre éstas y el margen, Chaparro et. al. (2004) advirtieron que incorporar cierto margen e interlineado reduce la velocidad de lectura, pero incrementa mucho la comprensión del texto, siendo mejores los resultados globales para los textos con interlineado y margen.


Múltiples Variables

Una de las razones por las que es difícil realizar estudios de campo que muestren claramente la mejor disposición del texto en una pantalla es que es difícil aislar el efecto de una única variable, como puede ser el ancho de línea o bien el número de columnas de texto.
Normalmente son múltiples las variables que influyen simultáneamente en la legibilidad de un texto, además de las citadas, como por ejemplo:
  • Percepción física
  • Tipo y tamaño de letra
  • Contraste texto/fondo y colores empleados
  • Ajuste del monitor empleado por el usuario
  • Complejidad del lenguaje del texto elegido como muestra
De este modo, la modificación inadvertida de alguna de estas variables durante el experimento puede modificar los resultados finales, sin que este efecto pueda apreciarse en el estudio.
Por ejemplo, la alteración de un detalle que a priori podría parecer insignificante, como es la distancia y ángulo exactos desde los que el usuario mira la pantalla, podría influir decisivamente en la perturbación de los resultados finales.
Cuando una persona se sitúa frente a una pantalla su mirada abarca un ángulo de 30º del campo visual horizontal, y el resto de lo percibido se hace de forma accesoria, como en segundo plano. Por tanto, en base a las leyes de la trigonometría, se puede calcular que, para una pantalla de proporción 4:3 (ancho:alto), la distancia de observación ha de ser de unas dos veces el ancho de pantalla. Del mismo modo, el tamaño idóneo de los caracteres para que sean observables a una distancia máxima se puede fijar multiplicando dicha distancia por 0.0067 (Martínez, 2002).
Obviamente, una ligera modificación de la distancia de observación puede modificar la percepción de los caracteres en pantalla, lo que podría alterar totalmente los resultados del experimento.
Este pequeño ejemplo nos muestra que la necesidad de que los estudios con usuarios para observar este tipo de cuestiones, además de hacerse con un rigor exquisito, contemplen la interdependencia de las múltiples variables que pueden entrar en juego. Ello, claro está, complica enormemente la realización de estudios, pero en cuestiones como las aquí tratadas, en las que no parece haber una prevalencia absoluta de ninguna de las opciones estudiadas, se hace altamente necesario.


Conclusiones

El hecho de que los usuarios leen ligeramente más rápido los renglones de tamaño medio (60-80 cpl) y que, además, son los de este tamaño sus preferidos, unido al hecho de que sólo los lectores avezados leen mejor en dos columnas que en una, nos sugiere que, de momento, es una buena práctica seguir utilizando el modelo más o menos clásico de maquetación. Este modelo utiliza tres columnas que contienen la barra de navegación, el texto y las opciones secundarias respectivamente.
Además, para resoluciones de pantalla de tamaño medio, funcionará aún mejor empleando un ajuste líquido, que abarque todo el ancho de pantalla.
La mayoría de estudios empíricos consideran los renglones de tamaño medio como los más adecuados, además, los usuarios prefieren éstos claramente frente a los de tamaño pequeño o grande. Por tanto, sigue siendo perfectamente válida la idea de utilzar renglones de tamañomedio.
Aunque el usuario lee algo más lento, con el uso de márgenes e interlineado se mejora considerablemente la comprensión de los textos.
Sólo para casos muy específicos, con pantallas a gran resolución y un perfil de usuario claramente tendente al lector veloz, parece aconsejable la maquetación con el área de texto distribuida en dos columnas, al estilo de los periódicos impresos.


Enlaces y Bibliografía:

  • 7ª Encuesta AIMC a usuarios de Internet.

  • Adkisson, P. Web Design Practices.

  • Baker, R. Is Multiple-Column Online Text Better? It Depends!. Usability News.7.2.2005.

  • Baker, R. The Impact of Paging vs. Scrolling on Reading Online Text Passages.Usability News. 5.1.2003

  • Beaufort, A. y Zwaga, H. Using Type: The Typographer’s Craftsmanship and the Ergonomist’s Research. Psychonomics Department. Utrecht University, The Netherlands. 1997

  • Bernard, M y Larsen, L. What is the Best Layout for Multiple-Column Web Pages?. Usability News. 3.2.2001.

  • Bernard, M. Developing Schemas for the Location of Common Web Objects. Usability News. 3.1.2001.

  • Bernard, M; Fernandez, M; Hull, S. The Effects of Line Length on Children and Adults’. Online Reading Performance.Usability News. 4.2.2002.

  • Brooks, T. INFO 424.Information Visualization and Aesthetics (2003)

  • Chaparro, B. et. al. Reading Online Text: A Comparison of Four White SpaceLayouts. Usability News 6.2.2004.

  • Dawn Shaikh, A. The Effects of Line Length on Reading Online News. Usability News. 7.2.2005.

  • García y Short. Legibility and readability on the World Wide Web.

  • García, J.C. La mujer del César. Usabilidad percibida. Úsalo.

  • Germani, M. Eye Tracking as Silver Bullet for Usability Evaluations?. Another Useful Blog.

  • Martínez, A. Percepción y legibilidad.

  • Nielsen, J. Lower-Literacy Users. Alertbox

  • Ruel, L.; Outing, S. Article-Level Page Design: What Matters Inside?.

  • Thurstun, J. Reading Home Pages.
  • miércoles, 24 de marzo de 2010

    Broadcast gratuito


    Ustream TV es una plataforma interactiva de emisión de video en vivo. Lo simple del sitio permite a cualquiera con una cámara, un ordenador y una conexión a Inrternet, poner video en stream a múltiples espectadores sin ninguna instalación de software.
     Los servicios de Ustream son completamente libres y soportados por los avisos en este momento.
    Ustream TV es un gran servicio para la gente que busca nuevo contenido de video online, como también para los emisores, que quieren un camino fácil para llegar a sus fans. Armado con solo una webcam, cualquiera puede ser una estrella en su propio show de TV.

     http://www.ustream.tv

    Visita el canal de nuestro blog

    http://www.ustream.tv/channel/tecnopensadores

    sábado, 20 de marzo de 2010

    Ilusión óptica

    Mira detenidamente la imagen:
    rIlusión Óptica de la dirección de giro

    Se dice que… si ves a la mujer girando en el sentido de las agujas del reloj estás usando el lado derecho de tu cerebro, (conocido también como emocional o creativo).
    Si lo ves en sentido contrario estás usando el lado izquierdo o racional.
    Solución: Concéntrate sólo en el pié de apoyo e intenta cambiar el sentido de giro.
    Puedes probar también cerrando algo os ojos o empezar viendo sólo los extremos de la imagen y continuar poco a poco.

    Perceptivas cerebrales

    La percepción es un proceso por el cual el individuo selecciona, organiza e interpreta los estímulos según sus deseos, necesidades y experiencias.
    Eso significa que la lectura que hacemos de una imagen - macrolectura - está estrechamente relacionada con la memoria y el aprendizaje .


    Explicación:

    La imagen de arriba vibra porque no somos capaces de resolver su incongruencia (una cara con cuatro ojos y dos bocas), lo que da lugar interferencias como ésta.




    Explicación:

    El sistema perceptivo humano tiende a economizar sus esfuerzos y no analiza uno por uno todos los detalles de la imagen para entenderla, tan sólo tiene en cuenta aquellos que contribuyen a una interpretación global correcta, desechando el resto.
    También nos resulta difícil interpretar la expresividad de las caras invertidas, - únicamente tenemos experiencia de ver caras situadas boca arriba, - por lo que el rostro inicialmente parece funcionar.
    Luego observamos que, en realidad, tal como está compuesto resulta monstruoso. Este aspecto se acentúa además porque nuestro sistema visual es especialmente sensible a pequeños cambios en los rasgos faciales.
    Resumiendo: nuestro aprendizaje moldea lo que vemos y lo que vemos influye en nuestro aprendizaje.

    jueves, 4 de marzo de 2010

    MotoRueda..


    Kerry McLean ha diseñado un curioso vehículo de una sola rueda, en la que el conductor se sitúa justo en el centro del aparato, que gira alrededor suyo. Pese a la aparente simplicidad del modelo, este Monociclo es capaz de alcanzar hasta 87 km/h .

    Su inventor, un persistente ingeniero llamado Kerry McLean, prefiere definirlo bajo el genérico nombre de Monociclo. Pero es evidente que no se trata de un monociclo cualquiera.

    A diferencia de los habituales entretenimientos circenses construidos a modo de bicicleta, la filosofía del Monociclo de McLean se basa en situar al conductor en medio de la rueda. Como si de un hámster se tratase, el usuario del Monociclo toma posición en su asiento y, una vez en marcha, la rueda girará alrededor suyo mientras él permanece prácticamente inmóvil.

    La lógica de funcionamiento de este ingenio es simple. La estructura metálica circular, con un motor acoplado, se une a la rueda exterior mediante tres o más cojinetes. Esto permite distinguir en el aparato dos círculos que giran de modo independiente . El motor hace girar la parte exterior permitiendo que el Monociclo avance, mientras que en el interior el 'habitáculo' del piloto se mantiene más o menos estable.

    Sin embargo, y a pesar de las prestaciones de su Monociclo, el propio McLean asegura que nunca se atrevería a entrar en una autopista a bordo de su rueda. Por miedo al resto de conductores, más que por otra cosa.

    Para quien sí quiera rodar de modo cotidiano dentro de su propio Monociclo, Kerry McLean ha desarrollado un modelo más popular y práctico, que desarrolla 5 caballos de potencia. La parte legal está solucionada, al menos en las calles de Michigan donde este vehículo puede circular clasificado dentro del sector de 'ciclomotores' .

    Kerry McLean no se plantea una enorme difusión y comercialización de su vehículo, ni crear una nueva moda. Sin embargo, no cierra la puerta al negocio y vende su Monociclo a todo aquél que se muestre interesado.


    Fuente: www.elmundo.es


    miércoles, 3 de marzo de 2010

    Andromujer, el futuro está aquí


    El primer androide femenino coreano ha sido revelado… y es muy atractiva. Mide un metro sesenta y pesa 50 kilos (unas medidas ideales). Su nombre es Eve Robot 1 y puede hablar, entender a sus interlocutores y hasta pestañear, además de usar todos sus encantos para mover los labios y mostrar expresiones faciales de los más sofisticados.

    Baeg Moon-hong, el director del programa, dijo que EveR-1 podría servir como guía en los museos, como recepcionista o incluso para narrar historias a los niños, todo gracias a más de quince motores que le permiten modelar su fisonomía a su antojo y su entorno.

    En efecto, puede interpretar los gestos de las personas que interactúan con ella y así, cambiar su estado de ánimo (espero que no sea irascible), y sentimientos como la tristeza, alegría, pena, enfado,… El primer androide femenino era japonés pero no podía mover. En cambio, éste puede mover la parte superior de su cuerpo, aunque de momento todavía no puede andar.


    Fuente: www.androidworld.com