por Omar Benyakhlef | Diseño de páginas web, Usabilidad
Diseño web a 1 columna, diseño web a 2 columnas y diseño web a 3 columnas… ¿qué diferencia hay?.
A continuación vamos a analizar la arquitectura de una home hecha a 3 columnas. Este dipo de diseño web lleva mucho tiempo implantado y aún se siguen haciendo nuevos diseños de sitios con esta fórmula.
Vamos a ver los pros y los contra que tienen este tipo de webs:
(más…)
por Omar Benyakhlef | Usabilidad
Desde los orígenes del diseño de páginas web, la barra de scroll ha sido tema de debate para numerosos foros. Siempre se ha dicho que el usuario no hacía scroll, y que todos los diseños debían de estar en función del primer pantallazo que recibe el usuario, antes con la resolución mayoritaria de 800x600px y ahora con 1024x768px.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Usabilidad
El uso de fuentes, como diseñador web, queda bastante limitado por tener que usar las fuentes «tipo» que el usuario tiene instaladas en su máquina. No vamos a entrar en este artículo en scripts especiales para poder usar otras fuentes.
Ahora gracias a las CSS y cada vez más, el usuario podrá tener la opción de decidir el tipo de letra con el que quiere ver nuestra web.
Decidir el tamaño de letra es muy importante a la hora de diseñar nuestra web, sin embargo hay que ser conscientes de que un mismo tamaño de letra no se ve igual por ejemplo, en Windows que en Mac. En un Mac, la resolución por defecto es de 72 dpi, mientras que en Windows es 96 dpi. (más…)
por Omar Benyakhlef | Usabilidad
Si el diseño de una web está mal pensado, podemos acabar transmitiendo a los usuarios un mensaje totalmente equivocado. No solo debemos considerar al usuario, también debemos ser capaces de transmitir qué tipo de mensaje está emitiendo la web.
A continuación os dejo 10 consejos que espero os sean de utilidad. (más…)
por Omar Benyakhlef | Usabilidad
¿Son efectivos nuestros diseños?. Quizás la respuesta esté en un estudio realizado por Poynter Institute Este instituto hizo un seguimiento a 46 usuarios, evaluando el seguimiento de sus ojos al entrar en diferentes webs. El estudio se llama Eyetrack III, y los resultados fueron los siguientes:
- Página de inicio – los ojos se fijaban primero en la parte superior izquierda, de ahí ya empezaba el viaje al resto de la página hacia abajo. Se observó que los titulares provocaban mayor reacción que las fotografías
- Tipografía y titulares – En este estudio se vio que las tipografías más pequeñas incitan al enfoque (leer palabras), mientras que las de mayor tamaño provocaban el escaneo de la página, y más cuanto mayor sea este texto de gran tamaño.
Una de las reacciones más curiosas fue la aceptación del usuario, cuando el título estaba seguido en el mismo renglón por un pequeño texto, siendo estos del mismo tamaño y con la única diferencia de la negrita en el título. Cuando el titular era más largo que el texto y estaban en distinto renglón, el usuario se limitaba a mirar los titulares. Subrayar los titulares también desanimaba a los lectores a mirar el texto. En promedio un titular tiene menos de un segundo de atención del usuario, por lo que para titulares largos es esencial colocar en primer lugar las palabras más atrayentes.
- ¿Cómo crear puntos calientes? – los ojos escanean las partes más bajas de la web (de lo que podríamos llamar primer pantallazo), para comprobar si hay algo que haga merecer la pena usar el scroll. De nuevo esto indica la importancia de los titulares llamativos.
- ¿Dónde colocar el menú de navegación? – Se hicieron pruebas con webs con navegación superior, a la izquierda e incluso en la derecha. Sorprendentemente tuvo muy buena aceptación esta navegación nada convencional, quizás por la novedad, pero sin duda la preferida fue la superior.
- Artículos y estilos de escritura – los párrafos más cortos superan con creces en la atención del usuario. Los párrafos largos parecen desestimular la atención. También tuvieron mayor aceptación los artículos a una única columna. Igual que en las páginas de inicio, las fotografías tuvieron un valor secundario a la hora de captar el interés.
Un dato muy relevante fue que al colocar un párrafo introductorio en negrita, el 95% de los usuarios lo leyeron casi por completo.
- Publicidad – vuelve a ser la mejor posición el margen superior izquierdo. Los anuncios más integrados en el diseño y formato de la página tienen menos rechazo. La publicidad con textos fue vista con mayor atención. El tamaño si importa, evidentemente los de mayor tamaño ganaron la partida a los pequeños sellos ubicados en la columna derecha del site.
- Tamaño de las imágenes – tal y como sucede con la publicidad, las imágenes de mayor tamaño atrajeron más la atención e hicieron que los usuarios se tomasen más tiempo en mirarla. El tamaño robapáginas (unos 200×200 px) fue observado por más del 50% de los usuarios. También se demostró que existe una gran tendencia a hacer clic sobre las imágenes.
- Multimedia – se observó que los mensajes referentes a hechos, nombres o lugares, eran mejor recordados cuando habían sido vistos como texto, sin embargo, la información conceptual era mejor recordada en formato multimedia.
Virtual hosting hace el siguiente resumen:
- El texto atrae más la atención que las imágenes.
- El movimiento inicial comienza en la esquina superior izquierda.
- Posteriormente el desplazamiento se realiza hacia la derecha y hacia abajo.
- Rechazo hacia los banners.
- Rechazo hacia tipografías extravagantes.
- Escribir los números como números y no en letra.
- El tipo y el tamaño de la fuente influye al usuario.
- La descripción inmediata al título influye a la hora de seguir leyendo.
- En general sólo se explora una pequeña porción de la página.
- Formatos de párrafos cortos incitan la lectura.
- El formato de una única columna frente a múltiples columnas.
- Los anuncios reciben mayor atención en la zona preferida del usuario, margen superior izquierdo, y cuando están situados junto a los artículos de mayor interés.
- Las imágenes grandes y limpias, llaman más la atención.
- Los encabezados se llevan la mejor parte.
- Las listas llaman mucho la atención del usuario.
- Los espacios en blanco favorecen la atención.
- Los menús funcionan mejor en la parte superior de la web.
En fin, muchas de estas apreciaciones parecen obvias, pero otras llaman poderosamente la atención. En cualquier caso creo que es un documento que ayuda mucho a la hora de diseñar una página. Espero que os sea útil.
por Omar Benyakhlef | Diseño de páginas web, Usabilidad
El trabajo de un diseñador, es el de comunicar, por eso mismo es muy importante saber el por qué las cosas adquieren significado.
Como siempre, los estilos y las modas marcan al diseñador web a la hora de enfrentarse a la pantalla en blanco, pero esas modas no pueden estar por encima de nuestra labor de comunicadores.
Cuando hablo de comunicación, hablo de unos fundamentos esenciales a la hora de plasmar una idea:
- Vocabulario .- hay que tener muy en cuenta a quien va dirigida la web, las lineas, colores y texturas se tienen que adaptar a ese target. Las lineas y formas angulares, por ejemplo, dan fuerza, velocidad o masculinidad, así como las redondeadas generalmente se asocian a suavidad, tiempo lento o feminidad.
- Gramática .- el equilibrio, la armonía y la distribución de los textos es muy importante, ayuda a transmitir un contexto y a manipular las sensaciones del usuario.
- Contraste .- el contraste sirve para manipular la atención del usuario, definimos jerarquías e incluso dibujamos los diagramas que el usuario debe de seguir en su lectura de nuestra web. El contraste es opuesto a la tónica general, es decir, no podemos pretender meter todo en negrita, porque no resaltará ante nada, habremos creado un simple «pegote».
Ese contraste lo podemos encontar en un cambio del tamaño de la fuente, en una textura distinta, en una desalineación respecto a los demás, en una forma distinta, en el color o en la posición. No hace falta ponerle luces a una idea para que resplandezca sobre las demás.
Un diseñador no puede dar por sentado lo que para un usuario lo es. Tenemos que estar pendientes de esas pequeñas cosas que no son apreciables (algo subliminales) pero que consiguen resultados sorprendentes.
El diseñador tiene que tener en cuenta muchos aspectos que no tienen por qué ser conocidos para el usuario, por ejemplo, que para el usuario occidental, la forma de leer una web es de izquierda a derecha, teniendo una gran relevancia el área superior izquierda, esto simplemente significa que hay zonas de la web suficientemente poderosas, y que por lo tanto no es necesario tener que destacarlas tanto como otras que resultan más inaccesibles para el usuario.
Otro ejemplo es que la lectura se produce en diagonal, de la zona superior izquierda al inferior derecha, este es uno de los motivos por los que tengamos que poner los botones importantes del formulario abajo y a la derecha. Un periódico es un claro ejemplo de cómo diseñar una web de contenidos, por sus jerarquías, contrastes,…
En conclusión, lo que quiero decir o explicar en este post, es que el trabajo de un diseñador web no se limita a hacer un icono bonito, eso es seguramente lo menos importante de su trabajo. Por eso mi indignación al ver los diseños que veo por la red y sobre todo mi indignación por la supeditación a la que estamos sujetos, por esos «gurús» que solemos tener por jefes y cuya única meta es demostrarnos lo buenos diseñadores que son, porque ya se sabe… «todos estamos capacitados para opinar de diseño» 😉
