El diseño que te hará perder clientes

Hoy os voy a enseñar cómo hacer un diseño web que acojone y ahuyente a cualquier incauto al que se le ocurra entrar a la página de tu hotel para realizar una reserva.

El primer ingrediente para tan ansiado cóctel pasa por colocar un mensaje en rojo nada más entrar como si se tratase de una página porno (o en este caso un burdel) y uno deba confirmar ser mayor de 18 años.

Web Hotel con mensaje rojo

Para continuar, pondremos un mensaje como éste del que muestro un extracto:

La dirección del Hotel La Residencia, se reserva el derecho de establecer jurídicamente las denuncias que sean menester ante los Tribunales y competencias legales que corresponda contra cualquier empresa que ilegalmente publique en Internet alguna crítica de nosotros a través de presuntos clientes que dicen haber estado en nuestro establecimiento. Estas empresas – generalmente agencias de viajes de dudosa legalidad-y a efectos de captar clientes de una manera delictiva, no dudan en publicar y evaluar sin control las críticas que les llegan de nuestro Hotel. (…)

Y sigue. Ya que nuestro objetivo es que el cliente además de pensar que ha entrado en la página de un burdel piense “qué coño tendrá esta gente TAN MALO que hasta amenazan con denunciarte si lo cuentas”.

Y por si con esto no tiene suficiente, cuando entre en la web mostraremos unas curiosas hormigas recorriendo la misma para que el cliente capte ya desde el inicio la esencia de nuestro hotel y lo confortable del mismo… vamos, como ir al camping eh.

Hormigas recorriendo la página

Y lo rematamos con fotos a lo visillera 2.0 mostrando un perro en una silla y las múltiples obras de arte alrededor del propietario, que mi duda es, ¿está promocionando el Hotel o a si mismo?

¿¡Pero quién ha diseñado esta página por dios!? No voy a comentar otros detalles como diversos textos por encima de imágenes o divs rotos en Firefox porque quizás son menos obvios y tras lo visto esos detalles pasan desapercibidos…

Fuente: Menéame

Los SEOs son como las suegras

Leyendo el blog de Ismael El-Qudsi me encuentro con un post en el que publica esta frase: “Los SEOs son como las suegras: están genéticamente preparados para buscar defectos, que luego no aplican en su propia “casa”…

En mi opinión, la frase es bastante acertada y considero que eso sucede por dos motivos:

El primero, que un SEO ha de justificar su sueldo y saber venderse, por lo que si no encuentra posibles mejoras en un site daría la sensación de que “no aporta nada”.

Por el otro, si el site está bien hecho, habrán sabido buscar el punto de equilibrio entre marketing, usabilidad y SEO. Pues mientras que marketing preferirá incluir imágenes muy vistosas y montones de complementos, usabilidad preferirá un concepto minimalista, práctico e intuitivo, pero lo peor es SEO, que no aporta nada al usuario y tan solo incluye basura para indexarse en buscadores.

En una página correctamente diseñada se buscará el punto de equilibrio entre todos estos factores, de forma que exista una imagen corporativa y se incluya la estrategia SEO buscando no perjudicar en exceso la experiencia del usuario.

Por este motivo ninguna de las 3 facetas estará desarrollada al 100% en una web bien hecha, y cualquier experto en SEO, usabilidad o marketing te hallará posibles mejoras, otra cosa es que esas mejoras rompan o no el equilibrio y vayan o no en detrimento de otras características a tener en cuenta al diseñar un sitio web.

Coherencia en el diseño

A grandes rasgos, se trata de evitar que el usuario tenga que pensar en cada momento cómo hacer lo que quiere, y para evitarlo lo mejor es que las cosas siempre se hagan de la misma manera, así, aprendido una vez, aprendido para siempre.

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.
Continue reading Coherencia en el diseño

Dirigir la atención del usuario con los colores

Vamos a diseñar nuestra web y dudamos entre usar azul, rojo, rosa, amarillo… ¿que será mejor? ¿Y si le pongo los bordes rosa fucsia? Seguro que llamaría la atención y nadie se olvida de mi web…

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:

Plantillas de ejemplo

Continue reading Dirigir la atención del usuario con los colores

Cómo crear un theme de wordpress – Parte 1

Aunque normalmente y dada mi falta de originalidad para ciertos temas (además de mi mente excesivamente analítica) prefiero coger un theme gratuito y editarlo a mi gusto, me he decidido por investigar cómo crear desde 0 (bueno, desde 0,5) un theme de wordpress.

Resulta bastante sencillo y no supone un gran coste, pero para poder explicarme con más comodidad y hacer artículos menos densos prefiero hacerlo en 2 o 3 partes, de forma que separe unos temas de otros. De esta manera, pasaré a explicar cómo crear y configurar un theme y qué archivos son necesarios, los estilos que deberíamos incluir, los archivos que deberíamos editar y por último algún truco más avanzado. Empecemos.

Continue reading Cómo crear un theme de wordpress – Parte 1

Posicionar en Google nuestro nombre a través del logo

En algunas ocasiones sucede que tenemos que escoger entre poner una imagen o un texto, para empezar, es recomendable poner siempre que se pueda textos para posicionarse mejor en Google y para que cargue más rápido la página, pero, si por ejemplo queremos que nuestro titulo de cabecera o las opciones del menú tengan un tipo de letra especial o con efectos, existen varias opciones:

Opción A: Meter texto y fastidiarse, lo simple es mas efectivo y si el cliente se queja le hablamos de la moda minimalista.

Opción B: Metemos imagen y nos olvidamos de Google, ¿pero quién narices querría indexar su propio nombre de empresa en Google?

Opción C: Metemos una imagen, metemos también el texto y usamos un truquillo en CSS para ocultarlo sin que afecte al posicionamiento.

Para hacer esto último simplemente nos aprovecharemos de 2 propiedades de CSS, una de ellas es el background, que nos permite colocar una imagen de fondo en una capa, la otra es el text-indent, que nos permite colocar la sangría del texto (incluso en negativo) y hacer que el mismo se esconda. Pongo un ejemplo:

<div style="background: url('../images/logotipo.gif'); text-indent:-2000px; width:400px; height:90px; overflow:hidden;">El nombre de mi web</div>

Como lo de colocar una imagen de fondo parece muy básico, centrémonos en el text-indent, el valor es negativo y desplazaría el texto fuera de la capa de forma que el mismo no pueda verse, si el usuario visualiza la página con el CSS activo verá la imagen de fondo en la cabecera, si por el contrario navega sin visualizar el CSS (como hacen los buscadores) lo que se mostrará es el texto, y no la imagen, ya que si el CSS no está activo la propiedad background tampoco cargará la imagen.

Esta solución me parece una de las más limpias y eficientes que hay para este tipo de problemas, de forma que puedas colocar junto al logotipo el nombre de la empresa y posicionarte mejor en Google sin afectar al diseño y sin tener que utilizar trucos en javascript que tienden a crear problemas.