Coherencia con otras webs

Es una de las bases de la usabilidad, si las webs de tu misma temática colocan un botón con forma de triángulo en donde pone “Ir a caja”, y tu decides que ese botón sea cuadrado y ponga “Realizar pedido”, es posible que el usuario pierda un par de segundos buscando el botón triangular al que está acostumbrado. Si los usuarios se han acostumbrado a algo a través de otras webs de tu misma temática, copia esos “estándares” y facilitarás la vida al usuario. Ejemplo: El icono de RSS en los blogs o el de Compartir.

Coherencia del color

Los colores nos dan información sobre relevancia, tipo de mensaje, opciones añadidas, etc. Para evitar confundir al usuario lo más importante es que toda la web siga la misma línea cromática, pero además, a esto suele ayudar mucho que nuestra web no parezca el arco iris: escojamos 1 o 2 colores y diseñemos en base a eso, un color en distintas tonalidades puede dar mucho juego, por lo que normalmente con 2 colores, además del blanco y el negro, basta.

Coherencia de los botones o enlaces

Si decides que los botones normales sean azules y los importantes (eliminar, nuevo, comprar) de color naranja, asegúrate de cumplir siempre este esquema y no demasiados colores o formas. Siguiendo la coherencia con la World Wide Web, los enlaces deberían ser azules y subrayados para ser más fácilmente identificables.

Coherencia de la tipografía

Sencillo, si usas Arial, usas Arial, y no 7 tipos de letra distinto según el bloque de texto o la página en que me encuentro. Salvo casos como títulos o secciones muy especiales, un mismo tipo de letra debe predominar en todo el site, de lo contrario puede dar la sensación de que no hay orden o coordinación entre los distintos autores o departamentos.

Coherencia en la estructura

Puede que cada sección de tu site tenga unas necesidades distintas, pero intenta mantener una línea: cabecera y pie, logotipo, sidebar, bloque de contactar, botón de guardar,… son cosas que deben permanecer inalteradas a lo largo de la web aunque el contenido sea completamente diferente. Por ejemplo: un listado de productos o una descripción de producto con foto y características son bastante distintos, pero ambos deben llevar la misma cabecera, logotipo, sidebar y pie de página.

Otro apunte: si el botón de “guardar” normalmente está abajo a la derecha, asegúrate de que siempre se cumpla ese esquema, y no hagas como Microsoft, que te lo cambia de sitio para que te diviertas en su juego “la búsqueda del botón guardar“, muy divertido según creen ellos, una putada según opinamos algunos.

Coherencia en las nuevas versiones

Ya sé que pido un imposible, pero si a tu empresa llega un nuevo diseñador con nuevas ideas y pretende cambiar el diseño, debería tener en cuenta todo lo anterior, que si te fijas, es contrario a la innovación. La coherencia dice: monotonía. La innovación dice: se rompedor. El usuario pide monotonía.

Si en tu site tenéis que cambiar el diseño de arriba a abajo, podéis hacerlo por fases, primero cambiando los colores, para que el usuario se acostumbre a la nueva información cromática, luego la estructura, manteniendo la posición de las funcionalidades más importantes (guardar, comprar, …) y finalmente estas últimas, de forma que el usuario no se pierda y no tenga que volver a aprender lo ya aprendido (las personas mayores os lo agradecerán).

Todos quienes hemos montado alguna web hemos pasado por ese proceso alguna vez, ¿qué color elegir? ¿Porqué no puedo poner naranja fosforito de fondo? Bueno, algunas cosas parecen obvias, pero otras no tanto. Voy a intentar ordenar algunas ideas respecto a este asunto en un post:

Cuando diseñes una web, lo primero que tienes que pensar es en cuál es el objetivo de la misma, y a partir de ahí, intenta dirigir al usuario hacia ese objetivo. Por ejemplo, pongamos que haces un blog por hobbie y lo que quieres es que los usuarios lean lo que escribes. Te pongo dos ejemplos de diseño:

En el primer ejemplo, vemos como las zonas que no queremos que llamen la atención tienen colores grisáceos, poco llamativos, dejando el blanco para la zona del blog en que irá el texto, lo que facilita la lectura al usuario (cansa menos la vista leer sobre fondo blanco). En el segundo diseño hemos mantenido el blanco para el texto, pero en un arrebato de originalidad le hemos colocado algunos colores mas llamativos.

Fíjate en el segundo diseño, ¿hacia donde se te van los ojos? Lo mas probable es que a cualquier sitio menos al contenido, ya que el blanco llama menos la atención, y ahora, fíjate en el primer diseño, aunque la cabecera llame algo la atención, tus ojos seguro que tienden hacia el blanco. ¡Caray! ¡Pues eso es lo que yo quería! Parece que no es tan difícil después de todo…

El truco consiste en poner los colores más llamativos en la zona objetivo, partiendo de que si tenemos texto éste debe ir sobre fondo blanco (salvo algunas excepciones), si nuestro objetivo fuera llevar al usuario a la barra lateral podríamos usar el amarillo del segundo diseño, si en cambio el objetivo es llevar el usuario al texto, hemos de usar colores menos brillantes que el blanco para el resto de la página.

Ejemplo práctico

Veamos ahora un ejemplo, el Blog de racingpasión utiliza un fondo rojo oscuro, lo que le da personalidad y nos hace recordar el rojo tan característico de Ferrari. He cogido este ejemplo precisamente para mostrar cómo se puede mantener la usabilidad y la libertad creativa al mismo tiempo. El rojo, aunque llama la atención, está en una zona desértica, sin contenido, distrae al usuario 1 segundo al entrar pero éste enseguida sabe que ahí no hay nada y dirige su mirada al contenido, sobre fondo blanco. Fíjate en que aunque es un diseño muy arriesgado y agresivo, luego lo suavizan colocando el resto en gris oscuro, para evitar mas distracciones de las que ya genera el fondo, y de paso darle un aire ferrarista de F1.

window.open('url to open','window name','attribute1,attribute2') 

En realidad, ese código tiene fallos, a saber:

• Los navegadores sin JavaScript no podrán abrir la página.
• No se indexará igual de bien en los buscadores, y algunos crawlers, no lo sabrán recorrer.
• Al pasar el ratón sobre el link, no podremos ver la página destino en la barra de estado.
• El usuario pierde la opción de hacer click derecho para abrir en una nueva ventana, pestaña o copiar la ruta del enlace.
• El usuario pierde la opción de agregar la página a favoritos en el menú emergente del enlace.
• Por último, las etiquetas “a” tienen una razón de ser especificada en el W3: “A link is a connection from one Web resource to another“, por lo que utilizarlo para que nuestro texto tenga una apariencia pero funcione a través del onclick no es la mejor forma de seguir el estándar.

La forma correcta de abrir un pop-up es la siguiente:

<a href="./index.html" target="_blank" onClick="window.open(this.href,
this.target, 'width=300, height=400'); return false;">Abrir pop-up.</a>

De esta manera, el enlace es un enlace normal que enlazará de forma correcta bajo cualquier circunstancia y, además, en las condiciones mas habituales funcionará de la forma en que queremos nosotros: abriendo un pop-up.

Fuente: No sólo usabilidad.

Conforme avanza el juego dejamos de controlar una única criatura y controlamos toda una sociedad o civilización que va evolucionando tecnológicamente y haciéndose mas fuerte hasta conquistar el mundo e incluso viajar al espacio. Si os interesa, podéis probar la demo para crear criaturas.

Lo que ya no me ha gustado tanto es el precio, y es que al parecer el juego costará 46,95€ en tienda, que pica un poco, pero pica más si tenemos en cuenta que en Estados Unidos saldrá a la venta por 49,99$, que pasado a euros y con el euro a casi 1,5$ son 33,90€, una diferencia de 13,05 euros.

Lo peor es que si lo compras en la web te sale incluso más caro (cosa poco comprensible dado que se ahorran los costes de transporte y la comisión de los vendedores), e incluso en web también te sale más caro si eres europeo, 49,95$ (33,88€) para la versión de Estados Unidos y 56,95€ en Europa, una diferencia de 23,07 euros.

Es posible que todo esto sea debido a un tema de impuestos, pero dado que la cosa huele un pelín mal, no estaría de mas un comunicado por parte de la empresa para aclarar si consideran a los europeos distintos a los estadounidenses en un sentido poco agradable. Por cierto, que esto no sólo sucede con Spore, también con otros videojuegos, de poco sirve ser el segundo mercado potencial…

Otro punto a mejorar es su página web, que en estos días ha estado mas tiempo caída que en pie, y teniendo en cuenta que el juego incluye una opción para jugar online (o compartir tus criaturas online) lo hace más que preocupante, de hecho, este tema de los precios lo he visto en su foro, pero tendré que mostraros la caché de google porque su web está caída.

Actualización: He mirado en 2 tiendas y lo tenían por 60€ y 63€, así que lo voy a dejar estar y ya si eso juego al Guild Wars, que todavía no tengo el rango máximo de la Vanguardia de Ébano.

No quiero alargarme mucho, por lo que colocaré aquí únicamente las características básicas de los colores principales cuyo significado o forma de afectar a una persona puede ser tenido en cuenta para muchas cosas, tanto a la hora de vestir (ponte una camiseta naranja y verás como te llenas de energía) como a la hora de diseñar un web (no te recomendaré el negro con amarillo…).

Bueno, sé que hay mas colores pero estoy un poco cansado así que lo dejo aquí, por cierto, ¿cuál es tu color preferido?

Guiar al usuario
Aunque hay muchos diseños usables y ergonómicos, me decanto por dar oxigeno al usuario y guiarle al contenido relevante, esto se consigue no saturando de contenido el Blog, dividiendo el Blog en bloques, dando mas relevancia y luminosidad a las entradas y menos a las barras laterales o colocando un buen margen y espaciado entre bloques.

Separar entradas
Un error común que yo considero que tienen los Blogs es no separar las entradas correctamente, te encuentras mucho en que el pie de entrada del post anterior y la cabecera del siguiente se juntan hasta el punto de no saber si la opción de “comentar” pertenece al de arriba o al de abajo.

Seguir estándares
Y no me refiero a Isos, sino a fijarse en qué hacen la mayoría de Blogs, qué espera encontrarse en consecuencia el usuario y dónde deberías poner las cosas para que él ya sepa dónde se encuentran. Está muy bien innovar, pero si inventas demasiado el usuario no encontrará algo tan útil como el “comentar” y te perderás opiniones muy útiles.

El tocho post
Suele suceder que los amantes de la lectura -también de la escritura- escriban posts de 15 párrafos, eternos, interminables… pero Internet no funciona así, la gente quiere algo, y lo quiere YA! Aquí sobran las introducciones, hay que ser 3 veces mas conciso, mas directo, ir al grano. Un post de mas de 6 párrafos es mejor dividirlo en 2 partes, piensa en escribir sobre subtemas en vez del gran tema, o en hacerlo por capítulos. Como norma general, los post de mas éxito tienen entre 3 y 4 párrafos, mas de 6 es un suicidio, muy bueno ha de ser para que alguien se atreva a leerlo.

Mismo largo para los post
Siguiendo la lógica de antes y para darle cierta coherencia al Blog, es bueno usar la etiqueta “more”, permite que todas tus entradas ocupen en vertical aproximadamente lo mismo y que el usuario a simple vista ya sepa dónde empieza y termina una entrada, le resulta mas usable, mas fácil de averiguar, sin tan siquiera verlo, dónde encontrar tu siguiente escrito. Además, permite que se muestre parte del siguiente post mientras lee la actual, de forma que si no le interesa la presente quizás le llame la atención la entrada previa.

Ancho de las entradas
Aunque es bueno dar cierta anchura para que te quepan ciertas imágenes (yo tuve este problema cuando estaba en Blogger), cuanto mas ancha es la línea mas le cuesta al usuario hacer el cambio de linea visual, más ha de forzar la vista y concentrarse, por ello las entradas estrechas son más cómodas, pero si son muy estrechas el escrito puede parecer muy largo.

Podría hablar de muchas mas cosas a nivel de usabilidad en los Blogs, pero esto se haría demasiado largo, prometo volver a dar mas consejos en adelante, mientras tanto, ¿que tal si comentáis alguno que consideréis imprescindible?

Como podéis leer ahí, el motivo de crear la sección ahora responde mas a SEO que otra cosa, ya que el PR parece llegar a los 6 meses cuanto antes lo indexe Google antes cobrará relevancia, no obstante, ya se encuentra en primera página para la búsqueda de manual de usabilidad.

Primeramente quiero intentar cerrar el manual de seo, que aunque podría añadir muchas mas cosas sigue siendo un manual básico de iniciación, quizás mas adelante haga una ampliación del mismo.

En el manual espero poner los consejos para crear una web usable y sencilla, de forma que cualquier usuario sea capaz de encontrar lo que busca de forma rápida y cómoda. Aveces nos encontraremos con que el seo interfiere en este objetivo, y también veremos como el diseño mas vistoso no es el mas usable, mientras que diseños mucho menos atractivos son mas intuitivos para el usuario.

Mostraré también los estándares de usabilidad web que han ido formándose a lo largo de los años y explicaré a mi manera lo mismo que Nielsen y Krug intentan a través de sus libros. Espero que el manual os guste, mientras tanto, podéis ver el índice de un proyecto que empezaré en unos meses.

Nos vemos!