Cristian/Ocampo - Un blog sobre diseño, desarrollo hipermedia, programación y experimentos visuales

Hace unos días estube navegando dentro del directorio de la instalación de firefox, viendo su estructura y organización. Dentro del subdirectorio res/ encontré una serie de hojas de estilo (CSS) de la configuración por default del browser y que pueden ser modificadas para enchular un poco firefox y mejorar la experiencia de uso del software. Estos archivos son los que, de una forma, le dicen al browser de que forma interpretar y mostrar por defecto los márgenes, elementos de formularios, enlaces, etc.

El primer CSS que modifiqué fue el que da el estilo a aquella ventana que nos muestra el código fuente de los sitios que visitamos. El archivo se llama viewsource.css

Por ejemplo para cambiar el comienzo y final de las etiquetas hay que modificar las clases .start-tag y .end-tag. En mi caso cambié el purpura por rojo.

.start-tag {
color: red /*purple*/;
font-weight: bold;
}
.end-tag {
color: red /*purple*/;
font-weight: bold;
}

Los comentarios (X)HTML, encerrados en <!– –> nunca me han gustado como se ven con color verde y lo he cambiado por un tono naranjo.

.comment {
color: #FFCC00 /*green*/;
font-style: italic;
}

Otra cosa que he cambiado es el titulo y el valor de los atributos propios de cada etiqueta, como los titles y href en el caso de la etiqueta <a>, src y alt en <img> o los genéricos id y class, por dar algunos ejemplos.

.attribute-name {
color: #454545/*black*/;
font-weight: bold;
}
.attribute-value {
color: #2888D7/*blue*/;
font-weight: normal;
}

Solo con estas modificaciones se puede tener un nuevo estilo en la vista del codigo fuente.

Puedes ver comparación entre antes y despues

Los cambios que yo he hecho son solamente de colores, pero se puede cambiar las fuentes, su tamaño, margenes, padding, incluso bordes para diferenciar elementos del (X)HTML, que puede ser util para depurar código.

Se puede seguir jugando con todas las clases e identificadores que se encuentren, pero antes de hacerlo es mejor hacer un backup del archivo, en caso de cometer algun error.

La simple clara y limpia caja del iPod, re-diseñada por Microsoft

De la mano del crecimiento de la Web, la Usabilidad ha tomado cada ves más importancia, básicamente porque juega un papel fundamental en el ROI (Retorno de Inversión) en un sitio Web.

Primero que nada tenemos que entender una cosa:

Los personas que entran a tu sitio web quieren encontrar la información que necesitan, o hacer la compra que necesitan, en un minuto y no en media hora.

Si no logran su objetivo en un tiempo razonable, digamos unos 3 minutos, se van a otro sitio… y Chau! Venta perdida….. Fuiste….. Alpiste…..

Pero no solo quieren que sea rápido… también quieren que sea fácil.

Si encuentran muchas complicaciones, también se van a otro sitio…. y lo que es peor… posiblemente vayan al sitio de tu competencia.

Lamentablemente, la mayoría de los sitios web comerciales están pensados centrados en la necesidades de las empresas… y no en las de sus clientes.

Aceptalo… a nadie le interesa ver el logo de tu empresa en 3D, moviéndose por la pantalla con música de fondo…. Queda muy lindo… eso sí… pero ¿A tu cliente le sirve de algo?

Lo que realmente le interesa a las personas que visitan tu sitio, es el contenido que pueden encontrar y las cosas que pueden hacer en él.

Los sitios que tienen éxito son los sitios UTILES… y fáciles de usar.

Un sitio web Usable se diseña pensando en el cliente, para el cliente y muchas veces con el cliente…. Si, leiste bien… con el cliente, se lo hace participar del proceso de varias formas.

Los sitios web usables son simples, pero justamente esa simpleza hace que las personas que los visitan encuentren rápido lo que necesitan.

Los sitios web usables ayudan a las personas en los procesos interactivos, los ayudan a buscar información, los ayudan a comprar, los ayudan a informarse, los ayudan…. ese es el punto.

¿Que tiene que ver todo esto con el Retorno de Inversión?

Es simple.

Cuando vas a comprar a un negocio siempre hay un empleado que te ayuda, te responde las preguntas, te muestra los productos, etc… pero en internet es muy distinto.

Entonces, si para comprar un producto online hay que hacer 15 pasos, registrarse, etc, etc… es muy probable que muchas personas con intenciones de compra, abandonen el proceso antes de hacer efectiva la compra y vayan al negocio de la esquina…. lo mismo pasaría en un negocio si el empleado es un antipático o te trata mal ¿No?

Si en cambio, logramos que sean solo 4 o 5 pasos, si no los obligamos a registrarse si no quieren, si los ayudamos y los guiamos en el proceso mediante indicaciones claras y eficaces (tal cual lo haría un empleado amable) … el porcentaje de las personas que abandonan disminuirá drásticamente y por ende, venderemos más.

Una de los principales motivos por las que las personas compran online es ahorrar….

Ahorrar tiempo! (pensabas que era ahorrar dinero? nop… error… )

Obviamente hay otros factores que influyen, el producto que vendemos en sí mismo, el precio, etc… pero si la persona está decidida a comprar el producto, indudablemente la facilidad o dificultad que le presentemos en nuestro sitio tendrá mucha importancia.

Y si en mi sitio web no vendemos productos online?

Entonces estas desperdiciando un gran canal de ventas… ponente en campaña para vender online. Hoy mismo!

Ojo!… Igualmente podes ayudar a tu cliente… no solo mostrando los productos o servicios que ofreces… brindale cosas complementarias de tu producto o servicio, que le interesen a tu cliente.

Por ejemplo: Sos dueño de un de un Gimnasio y tenés tu sitio web… no te limites a mostrarle las fotos del gimnasio, los actividades, los horarios… ofrece recetas de comida saludable, dietas, información nutricional, rutinas de ejercicio, rutas para salir a correr… lo que se te ocurra… si no se te ocurre nada, pregúntale!

De ese modo, tal vez una persona que no es cliente de tu gimnasio entre a tu sito a ver esa información, que es mucho más interesante que las fotos de tu gimnasio (aceptalo)… y tal vez decida ir a tu gimnasio. Captas la idea…. es ayudarlo, no solo venderle.

Mejorá tu sitio Web!

El objetivo de este artículo es que te des cuenta que podes aprovechar mejor tu sitio web, podes obtener más consultas sobre tus productos o servicios… podes vender más…. y podes ayudar a tus clientes, o futuros clientes…

Simplemente haciéndolo más fácil de usar y más útil.

Artículo escrito por Pablo Impallari

Nos gustaría avisarles que se ha liberado un parche a la Web 2.0 para solucionar algunos errores menores e introducir algunas funciones interesantes. Aunque es una actualización menor, y no debería afectar su uso de la Web 2.0, por favor noten los siguientes cambios.

* Error 84318192-b: Hemos notado un error en el sistema de revisión automática de productos que ocacionó que estos queden estancados en el nivel beta. Por favor tengan en cuenta que muchos de estos proyectos son realmente versiones 1.0 (con algunos en versión 2.0).
* Error 84399290.3: Hemos también notado que el término Versión cuando se usa en aplicaciones basadas en internet es un poco tonto. No es que uno pueda desinstalar “Las Noticias” y utilizar una versión previa.
* Error Bug 84410000: El uso de nombres rebuscados para los productos no es un error, es una característica.
* Error 84435923: Se ha creado una enrome cantidad de aplicaciones basadas en el uso de mapas. Esto se debe a un problema de interferencia en la creatividad. Collares del choque se han distribuido.
* Error 85211006: Debido a problemas de derechos de autor y a un nuevo plan de patrocinio, el uso de Javascript y DHTML para modificar páginas se llamará “DR-BRONNERS”.
* Error 85732641: Pensamos en introducir un feed RSS para que informe el tiempo actual, pero decidimos que era demasiado tonto. Así que lo hicimos igual.
* Error 93242381: … BENEFICIO! (Si!, todavía estamos trabajando en ese.)

Alentamos a todos los usuarios de la web 2.0 a que actualicen a la versión 2.0.1 tan pronto como les sea posible.

Original: english
Traducción: español

The Layers of Design: the style layer