martes, marzo 24, 2009

Rastrea tu computador portátil robado con Prey

Vía alt1040

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía ALT1040 de Inti Acevedo el 24/03/09

prey-track-your-stolen-laptop De situaciones incomodas y que definitivamente son una desgracia pueden salir ideas realmente fascinantes. Cuando le robaron a Tomás Pollak en Chile su computador portátil, los ladrones casi pasan un mal momento. Tomas tenia algunas ideas para recuperar su maquina pero requería de un golpe de suerte, mucha astucia y que ocurrieran ciertas cosas en un determinado momento que dejaran un rastro en forma de número IP. Lamentablemente no pudo recuperar su computadora y sus datos, pero de la nefasta experiencia surgió una gran idea: Prey.

Creo que todos conocemos esa sensación de impotencia que nace cuando te roban algo importante (mucho más que el fierro los datos), y bueno, en mi caso simplemente me negué a dar por perdida la máquina y me empeciné en pillar a los responsables.

Semejante frustración de parte de Tomas fue canalizada en crear un pequeño programa que desde hoy en la tarde se convertirá en un gran dolor de cabeza para muchos ladrones en diferentes partes del mundo. Prey es una pequeña aplicación que recolecta información importante de tu portátil y la envía a un buzón de correo previamente definido. La idea es tener el programita instalado en tu computadora para que si algún día la roban, esta aplicación pueda enviarte información importante para que logres recuperarla. El programa corre en Mac OS y Linux.

prey-track-your-laptop-white-borderEntre la información que te envía Prey tienes: la dirección IP pública y privada de donde esté conectado el PC, el IP del gateway de la red que está usando para salir a Internet, la dirección MAC de la tarjeta o controlador de red por el cual esté conectado a la red, el nombre e ESSID de la red WiFi a la que esté conectado, en caso que lo esté, en caso que el PC tenga una webcam, una foto del impostor, una captura de pantalla del escritorio, para que veas qué está haciendo y otra información importante.

Lo que más me gusta a mi es la forma en que funciona Prey, cada cierto tiempo el programa se activa y busca en Internet una URL previa que definiste con anterioridad, si la URL existe, Prey activa la recolección de información y te lo envía a tu buzón. Si la URL no existe no pasa nada, el programa se activa nuevamente cuando se cumpla el nuevo ciclo. Si tu computador es robado, colocas un texto o algo en el URL que configuraste en su momento y la magia ocurre.

Ojala muy pronto podamos escribir sobre algunos ladrones capturados gracias al trabajo de Tomas. Muchas gracias por esta alucinante aplicación.

Enlace: Prey: Y rastrea tu computador robado | Vía: Twitter

Comparte esta anotación


 
 

Cosas que puedes hacer desde aquí:

 
 

Las etiquetas HTML más raras

Vía tu función

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía TuFuncion de manu el 24/03/09

Disponemos de un gran número de etiquetas HTML pero a menudo utilizamos sólo un pequeño porcentaje, no siempre con un "<div>" o con un "<span>" podemos solucionar todos nuestros pequeños problemas de HTML.

Vamos a ver 10 etiquetas raras, algunas de estas etiquetas no las conoceréis pero otra seguro que las usais a menudo, personalmente no conocía algunas... <abbr>, <address>, <acronym>.

Las 10 etiquetas más raras

1. <wbr>

Ajuste de línea condicional, es muy desconocida y su nombre es debido a la palabra "word break" o "word wrap", es muy útil cuando un texto es demasiado largo, esta etiqueta romperá la línea si lo considera necesario y añadirá un salto de línea, evitando el incómodo scroll horizontal.

2. <abbr>

Nos permite mostrar algún texto de manera abreviada, de tal modo que al aplicarle un "title" podremos ver su nombre completo al pasar el ratón por encima.

3. <label>

Debería acompañar a cada uno de los campos de un formulario, son muy útiles de cara a la accesibilidad de los mismos y en el caso de los "checkbox" y "radio buttons" son fundamentales.

4. <ins><del>

Suelen utilizarse juntas y su objetivo es remarcar las posibles revisiones de un texto tachando la palabra a omitir y subrayando la nueva palabra.

5. <address>

Esta etiqueta permite marcar direcciones en el HTML y ademas estilizarlas fácilmente con un simple CSS.

6. <acronym>

Parecida a <abbr>, nos permite definir la palabra/s etiquetada/s al pasar el ratón por encima.
<!--break-->

7. <optgroup>

Permite agrupar opciones dentro de un "select".

8. <cite>

Contiene una cita o referencia a otro recurso.

9. <fieldset>

Agrupa controles en un formulario. Esto permite agrupar temáticamente los controles de un formulario, haciéndolo más fácil de entender y rellenar para el usuario.

10. rel

El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML.


 
 

Cosas que puedes hacer desde aquí:

 
 

Academic Earth: el almacen del saber

Vía Microsiervos

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía Microsiervos de no-reply@microsiervos.com (Alvy) el 24/03/09

Academic-Earth

Academic Earth es un vasto almecén de sabiduría: una recopilación de clases y conferencias de las más prestigiosas universidades, profesores y expertos en todo tipo de disciplinas, desde astronomía a religión, pasando por informática, historia, física, filosofía, biología o medicina. Está todo en inglés pero… mirándolo bien sirve también de lección de idiomas con un pequeño esfuerzo. Los vídeos se pueden ver online o descargar. Hay tanto cursos completos como clases sueltas.

Entre otras cosas se puede ver una clase de astronomía en Yale titulada Por qué Plutón es un problema o, más entretenida todavía, la increíble clase Medición del Espacio y el Tiempo del alocado Walter Lewin, con su famosa práctica demostración de cómo funciona un péndulo, que parece sacada de aquel capítulo de Contact.

# Enlace Permanente


 
 

Cosas que puedes hacer desde aquí:

 
 

Misión a marte… con tu nombre

Vía Microsiervos

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía Microsiervos de no-reply@microsiervos.com (Alvy) el 24/03/09

Mars Science Laboratory ¡Puntos geeks! Send Your Name to Mars es una página donde escribir tu nombre para que sea enviado en una misión de la NASA a Marte en 2011, la del Mars Science Laboratory . Es gratis y cualquiera puede participar; el sitio es fiable porque es de la propia NASA (al menos si eres de los que cree que el hombre llegó a la luna). Enviar tu nombre al planeta rojo grabado en un microchip probablemente no tendrá muchos efectos prácticos en la historia del futuro, pero aumentará tu factor geek en el presente un zillón de veces, lo menos.

(Vía marciana: Fayerwayer, ¡nos vemos allí, Carlos!)

# Enlace Permanente


 
 

Cosas que puedes hacer desde aquí:

 
 

Bookscraper: estadísticas comparadas sobre literatura clásica

Via Microsiervos

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía Microsiervos de no-reply@microsiervos.com (Alvy) el 24/03/09

Bookscraper

Los amantes de las estadísticas absurdas estamos de suerte: Bookscraper, de los laboratorios del Times Online es una herramienta que sirve para comparar palabra por palabra algunas de las grandes obras de la literatura clásica y ver cuánto coinciden. En esta imagen, por ejemplo, se puede cómo que del vocabulario de 7.000 palabras de Frankenstein frente al de 3.000 palabras de El sueño de una noche verano, el 22 por ciento son los mismos términos.

Se pueden descubrir otras curiosidades como hicieron en Sopa de Ciencias, por ejemplo que la mitad de las palabras de El origen de las especies y 20.000 leguas de viaje submarino son las mismas.

# Enlace Permanente


 
 

Cosas que puedes hacer desde aquí:

 
 

Los mayores peligros para Internet

Via Microsiervos

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía Microsiervos de no-reply@microsiervos.com (Wicho) el 24/03/09

Traduzco, resumo y adapto de Top Internet Threats: Censorship to Warrantless Surveillance, una lista de los mayores peligros para Internet publicada recientemente en Threat Level:

  • Escuchas gubernamentales sin autorización. Esto algo que empezó a suceder en los Estados Unidos después de los ataques del 11-S aunque finalmente fue aprobado y autorizado por ley ante las presiones de las empresas de telecomunicaciones que se veían amenazadas con demandas de los usuarios. En Europa no parece que esto sea un problema, aunque cada vez hay más control sobre las comunicaciones en general, con una normativa vigente sobre la retención de datos.
  • Censura a nivel privado por parte de empresas que se dedican a modificar, por ejemplo, entradas de la Wikipedia que hablan de ellas o de sus empleados y que dan datos que no les convencen.
  • Censura gubernamental. Reporteros sin Fronteras habla de 12 países que restringen el acceso a Internet y que a menudo actúan contra sus propios ciudadanos por lo que publican en línea, pero a Arabia Saudí, Birmania, Corea del Norte, Cuba, China, Egipto, Irán, Siria, Túnez, Turkmenistán, Uzbekistán y Vietnam hay que añadir iniciativas extrañas en países supuestamente democráticos como por ejemplo la lista de webs que quiere bloquear el gobierno australiano.
  • Inspección Profunda de Paquetes: Esto consiste en analizar no sólo las cabeceras de los paquetes que circulan por la Red, sino también sus contenidos, lo que puede permitir desde dar distintas prioridades a estos hasta bloquearlos; curiosamente hablábamos de ello el otro día en un artículo sobre las dudas razonables a la hora de legislar las descargas en la Red.
  • Tarifas por tramos en los accesos a Internet, que aunque en principio podrían facilitar la conexión a Internet a aquellos con menos recursos en realidad parecen estar más bien pensadas para que los proveedores ingresen cada vez más dinero aprovechando que la demanda de ancho de banda no hace más que crecer. Además, Om Malik razona en Why Tiered Broadband Is the Enemy of Innovation que precisamente el disponer de conexiones con tarifa plana y sin límite de tráfico ha sido un importante motor de innovación en los servicios disponibles a través de Internet que podría verse frenado si los usuarios tuvieran que empezar a plantearse en qué y cómo usan su franquicia de tráfico mensual.
  • Las leyes de tres avisos que las distintas entidades de gestión de derechos de autor del mundo están intentando por todos los medios que se aprueben, aún a pesar de las dudas más que razonables que hay sobre su legalidad. De hecho, en Nueva Zelanda primero se aplazó la entrada en funcionamiento y finalmente se retiró una ley de este estilo, como se puede leer en Nueva Zelanda retira su 'ley de los tres avisos' contra el P2P, aunque en España se le están dando vueltas al tema mientras Francia ya debate la ley en la Asamblea Nacional, aunque con división de opiniones.
  • Abusos de la Digital Millennium Copyright Act. Aunque la DMCA es una ley estadounidense y como tal sólo se puede aplicar en ese país sus efectos nos llegan a todos, ya que a menudo se utiliza para obligar a sitios como YouTube a retirar contenidos, y no siempre de forma acorde al espíritu de la ley. Según Google, hasta un 57 por ciento de las peticiones que recibe para retirar contenidos fueron por parte de empresas que buscan atacar a competidores con esto y un 37 por ciento de ellas tan siquiera eran válidas en absoluto.
Me sorprende no encontrar en esa lista el peligro de que las operadoras de telecomunicaciones consigan terminar con el principio de neutralidad de Internet que asegura que todo el tráfico sea tratado por igual, sin que ello dependa de posibles acuerdos comerciales entre proveedores de acceso y otras empresas.

# Enlace Permanente


 
 

Cosas que puedes hacer desde aquí:

 
 

Buscar en Google Imágenes por colores

Via tufunción

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía TuFuncion de manu el 23/03/09

Google Imágenes permite ahora filtrar las búsquedas por colores, estos filtros se realizan mediante sencillas petiociones (imgcolor=red ó imgcolor=blue,red).

Por ejemplo si quisiéramos "buscar coches" accederíamos a la siguiente url:

http://images.google.com/images?q=coches

Sobre esta búsqueda podríamos aplicar el filtro que hemos completado añadiendo la cadena anteriormente citada, por ejemplo busquemos "coches rojos":

http://images.google.com/images?q=coches&imgcolor=red

Cómo estos filtros se aplican mediante un sencillo parámetro en la URL de la petición de búsqueda es muy fácil hacer un formulario que nos permita hacer búsquedas en Google Imágenes por colores:













<!--break-->
A pesar de que estemos hablando de esta funcionalidad la verdad es que las búsquedas de imágenes es una de las funcionalidades menos explotadas por Google, en este apartado es superada por Microsoft por ejemplo con Search.Live.com/Images, que dispone de una interfaz más cuidada y con bastantes opciones para filtrar imágenes, si navegas por la interfaz de Search.Live.com/Images te das cuenta que en ningún momento pierdes el acceso a la búsqueda original y siempre puedes acceder desde la barra lateral, algo parecido a lo que ha pretendido Google con su barra pero que no termina de convencer.


 
 

Cosas que puedes hacer desde aquí:

 
 

14 sugerencias para tratar bien a tus Followers en Twitter

via alt140

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía ALT1040 de Inti Acevedo el 23/03/09

Desde hace varios días que quería escribir una pequeña Guiá con consejos prácticos para tratar a tus seguidores en Twitter. Al final son 14 pequeños consejos para desarrollar mejor tu red de contactos en la red de microblogging. Vía Esquizopedia.

Comparte esta anotación


 
 

Cosas que puedes hacer desde aquí:

 
 

[Ask SM: CSS] Equal Spacing, CSS Font Replacement

Via Smashing magazine

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía Smashing Magazine de Chris Coyier el 23/03/09

This is our fourth installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we'll cover how you can distribute the horizontal space between elements evenly, how you can achieve maximum sides on images; you'll also learn best practices for CSS font replacement and answers to a couple of quickfire questions. If you have a question about CSS or JavaScript, feel free to reach me (Chris Coyier) via one of these methods:

  1. Send an email to ask [at] smashingmagazine [dot] com with your question.
  2. Post your question in our forum.
  3. Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier.

Please note: I will do what I can to answer questions, but I will certainly not be able to answer all of them. However, I hope you use the forums to post questions because that gives you the best opportunity to get help from the community.

Distributing the horizontal space between elements evenly

Antoine Nicolas writes:

Do you know how to perfectly and dynamically distribute objects horizontally in a container using CSS?

Hi Antoine, this is a classic example of something that is fairly difficult to do in CSS but probably shouldn't be. I have approached this problem in a number of different ways in the past. I have revisited it a little now, and I'll present what I believe is the best solution here.

equal distance

Let's review the specific goals:

  • The left-most object is left-aligned with its parent element.
  • The right-most object is right-aligned with its parent element.
  • All objects are equidistant from each other at all times.
  • The objects will stop short of overlapping each other as the browser window narrows (ideally).
  • The objects will not wrap down as the browser window narrows (ideally).
  • The technique will work in a fluid-width environment, even one that is centered.

The theory is that the first object will be left-aligned, and the rest of the objects will be right-aligned inside equal-sized boxes that take up the rest of the space. Here is an illustration of what I mean:

floaties

The HTML markup:

<div id="row"> 	<img src="images/shape-red.png"> 	<div id="movers-row"> 		<div><img src="images/shape-green.png"></div> 		<div><img src="images/shape-yellow.png"></div> 		<div><img src="images/shape-blue.png"></div> 	</div> </div>

The CSS:

#row {     min-width: 480px; }  #movers-row { 	margin: -120px 0 0 120px; }  #movers-row div { 	width: 33.3%; 	float: left; 	min-width: 120px; }  #movers-row div img { 	float: right; }

And here is a live demo.

Maximum Sides on Images

max side

J.J. Sylvia IV writes:

Is there a way to determine the dimensions of an image being displayed and change the <img width="" /> setting based on the overall width? Sometimes I have images with a really large height, and I need them to be displayed with a much smaller width than other images.

I talked with J.J. a little more about this to clarify the problem. The problem actually relates to height: you have a lot of images, and all of them have different dimensions. You could set a max-width to make sure they keep their ratio and all get squeezed to the right width, but that leaves "jagged" heights. In other words, when you control only the width, you get the benefit of maintaining the image ratio, but you cannot control the height and may end up with very tall images screwing up your layout.

So how do you control both the height and width while maintaining ratio? We will need to lean on some JavaScript because we have to perform some calculations. As I happen to be a jQuery guy, we'll use that. jQuery is a good choice here anyway, though, because we need to target every single image on the page and do stuff do it, and jQuery makes that very easy and rips through the job.

The best route is to turn this into a plug-in, which will make it a very easy call, as well as allow it to be chained and all that good stuff. We'll call it "maxSide". It looks at each element it calls on and figures out which dimension is larger. If it's the width, it sets the width to the "maxSide" (with the pixel setting passed in). If it's the height, it sets the height to the "maxSide".

Here is the plug-in:

(function($) {     $.fn.maxSide = function(settings) {     // if no paramaters supplied...    settings = $.extend({       maxSide: 100    }, settings);     return this.each(function() {        var maximum = settings.maxSide;       var thing = $(this);       var thewidth = thing.width();       var theheight = thing.height();        if (thewidth >= theheight) {          if (thewidth >= maximum) {             thing.attr({                width: maximum             });          }       }        if (theheight >= thewidth) {          if (theheight >= maximum) {             thing.attr({                height: maximum             });          }       }     });	  };  })(jQuery);

Since we intend to call this plug-in with images, we need to make sure all of the images have loaded first. So, instead of calling it when the DOM is ready, like you see in most jQuery, we need to call it once the window has loaded.

$(window).bind("load", function() { 	$("img").maxSide({ maxSide: "100" }); });;

This may cause some unsightly flashes of large images… C'est la vie. If it's really really awful, you may wish to hide the images with CSS and only reveal them (with jQuery) after the plug-in has run.

Here is a live example of this plug-in at work.

CSS Font Replacement

@juliuskoroll writes:

I would like to hear font replacement via CSS explained by you guys.

Hi Julius, you got it! We all know we can include images on pages just by including an image tag like this: <img src="http://88.198.60.17/images/ask-sm-css/…" alt="…" />. That image can be anything. It can be a logo, a picture of a nice cup of tea, a puppy or even a line of text in a custom font acting as a header. If we want to have headers with nice custom fonts on our website, one option available to us is to just insert them in the page with <img .. /> tags. While this solution has no visual penalty, it has problems. The proper HTML tag to use for headers is the header tag (e.g. <h1>, <h2>, etc). This is best for accessibility as well as SEO (search engine optimization).

You may also be aware that CSS allows us to place background images on elements. This is what gives us the power to have the best of both worlds. We can use a proper header tag, but also use an image. The problem now is that the text within the header tag is sitting right on top of the image. We need to somehow hide the text so that only the image is visible. As it turns out, there are quite a few different ways to do this, and each comes with its own theory. I once did some reasearch on this subject and came up with Nine Techniques for CSS Image Replacement.

font replacement

The most popular method, in my experience, is known as the Phark method. While it may not be the absolute best method, it works and is very easy to understand.

HTML:

<h1 class="replace"> 	Smashing Magazine </h1>

CSS:

h1.replace { 	width: 350px; height: 75px; 	background: url("images/header-image.jpg"); 	text-indent: -9999px; }

Quickfire Questions!

Here are a few questions I wrote down from random sources. Like most Web design questions, they could be answered with a book. But instead, I'll answer them with a single sentence (or two) and a link!

1) Is there a way to make drop-down menus without JavaScript for IE 6?

Yes, there is, perhaps most famously done by Stu Nicholls of CSSplay, with his ULTIMATE CSS only drop-down menu.

2) Is there a way to get PNG transparency without JavaScript or HTC solution in IE 6?

To clarify, this means alpha transparency. Regular ol' transparency (think GIFs) works fine with PNGs without any hacks, even in IE 6. Most PNG hacks do indeed use JavaScript or HTC. The root of these techniques is to apply a proprietary CSS "filter" called "AlphaImageLoader" through the "behavior" attribute in CSS. Some of these fixes are incredibly easy to implement, but if you want to avoid them all together, it is a little-known fact that Fireworks can save PNG-8's with alpha transparency.

3) Is there a way to remove the "Click to activate this control" message for some versions of IE with Flash content?

Yep, inserting Flash objects on your page with SWFObject clears up this issue.

4) Is there a way to have alternate sidebars in WordPress?

Sure, if you have a special page template that you want to display a different sidebar other than your regular one, you can do that. The default WordPress function that calls the sidebar looks like this:

<?php get_sidebar(); ?>

It may look like a magical WordPress function, and I suppose it is, but all it does is grab the sidebar.php file from your theme and plop it in. That's it. So, instead, duplicate that sidebar.php file, call it something like sidebar-alternate.php and call it from your special page template like this:

<?php include (TEMPLATEPATH . '/sidebar-alternate.php'); ?>

That does about the same exact thing. You can use that same bit of code to include any file from your theme folder.

5) Can you style "alt" tags using CSS?

The "alt" attribute for elements is only ever displayed if (for whatever reason) the element to which it is applied cannot be rendered. This is most common for <img .. /> elements, but also for <area> elements and optionally for inputs (because they can sometimes be images). So, the only reason you'd ever see "alt text" is when an image link is broken or you are browsing the Web intentionally without images (e.g. using accessibility software).

The answer is yes, you can style "alt" text CSS. Simply apply text styling CSS attributes to whatever element it is. I think this is a rather clever idea actually. Images are very eye-catching on Web pages, so when an image is unavailable, why not replace it with very descriptive and eye-catching text.

It seems a little weird, but:

img {    color: red;    font: italic 200% Georgia, Serif; }

This will sure make that "alt" text pop!

(al)


© Chris Coyier for Smashing Magazine, 2009. | Permalink | 53 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,


 
 

Cosas que puedes hacer desde aquí:

 
 

5 Universal Principles For Successful eCommerce-Sites

Via Smashing Magazine

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía Smashing Magazine de Jeff Olson el 23/03/09

When was the last time you called customer support because you were having problems checking out online? Probably never! Cart abandonment rate is at around 60%, and most of it happens before the user even begins the checkout process. Sometimes, convincing your customers to trust you is your biggest challenge.

There is no "Consumer Trust for Dummies," but as eCommerce designers, we need to focus on some fundamentals. The following topics may seem as obvious as walking into a seven-foot Wookie, but rest assured you will find plenty of websites with a mouth full of fur.

1. Paint Your Pictures At Home

Make the logo bigger

If your core demographic is women between the ages 35 and 65 who have an annual income of $60,000+, you would treat them different than the 18- to 25-year-old male demographic. First and foremost in e-tail: forcing your visitor to think is a bad idea. When creativity stops being subjective and can be measured by a dollar amount, making sure you're designing for the customer is a no-brainer.

Years ago, I had an SVP of DotCom tell my team, "You can go home if you want to paint pictures." And for the rest of the day, I couldn't wait to get there so that I could make sure the next morning his inbox was full of expletive material illegal in most counties. After calming down, I realized he was right. All along, what he was telling us was simply to design for the customer and not ourselves. This was a challenge for designers working in an eCommerce corporate atmosphere but a very important lesson to learn.

2. Good UX Is Like A Perfect Movie Score

give the user an experience

Build brand loyalty to gain patient, forgiving customers for a lifetime. For instance, Apple's customer loyalty exceeds all other brands with an unusual cult following. Apple lovers forgive the company when it makes mistakes and zealously defend the company's products and reputation.

How do you make your customers trust you this much? The answer is to give the user an "Experience." It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are "using" it. It's a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you.

Like the perfect score to a film, a good user experience is unobtrusive and transparent to the consumer because "it just works." The Apple model will not work for everyone, but I often find myself challenged with a W.W.J.D. moment. Ask, "What would Jobs do?" and then look at other websites for inspiration.

3. eCommerce UX Pitfalls To Avoid

can't we all just get along

Just because a website is usable, does not mean customers will use it. Usability and user experience are in the same family, but more often than not user experience is the forgotten child. There are key areas in which the two must co-exist. Below are suggestions for some areas where websites should spend as much, if not more time, on the user experience.

Product Detail page

The product detail (PD) page is where some retail websites drop the ball. Too much focus is put on the design and usability of the home page, and that effort does not continue through to the rest of the website. More of the user's time is spent on the product detail page than any other. Here, you need to offer customers all of the information they are looking for but present it in an intelligent way as well.

example of no-click zoom from endless.com

A few recent trends on eCommerce websites are "no-click" alternate images and swatches. A user simply has to roll over an image, without clicking, to get immediate feedback. The same approach can be used to zoom in to the image. Other UX options for the PD page are smart fields that let users know they still have to perform a required action before proceeding, without getting a typical error message.

don't forget to select a size

The Checkout Process

Much like the PD page, the checkout process is a critical piece that engages the customer on a somewhat intimate level. However, unlike the PD page, where customers want to spend time to make sure they want what they are looking at, the checkout process should have as few steps as possible. Too many steps and the customer feels trapped.

But too quick and they feel like they have lost control. For instance, asking for credit card information too soon will seem out of order and no doubt scare even the most seasoned online shopper into abandoning their cart. Hidden taxes and shipping costs will make them feel like you are trying to take advantage of them.

Security

Always making sure your customer knows that your website is secure and that their privacy will never be compromised goes back to the issue of trust. It does not take much effort to display a message telling your customers that they are safe in your hands; a footer link to your privacy policy is not always enough.

Page Weight

A page's weight is determined by its file size, by adding up every image, every line of code and anything that gets loaded when the user first hits the page. Libraries such as Scriptaculous, jQuery, MooTools and even Flash Shared Objects are often forgotten, but they all add to a page's "weight."

Some fascinating things are on the horizon for developers related to user experience and page weight. One notable development as of late was the release of Safari 4 Beta, which has support for HTML 5 media tags, CSS animation and CSS effects. As more and more of these features become standard in browsers across the board, we can look forward to offering users a better experience by using features directly in the browser.

4. The Value Of Content And Then SoMe

60 percent of all online adults use social media

We cannot talk about user experience without touching on content and social media (SoMe). In order to be profitable, eCommerce retailers need to engage customers with their content and use social media outlets within and outside their own websites.

93% of social media users believe a company should have a presence in social media, according to Cone, while an overwhelming 85% believe a company should not only have a presence in but also interact with its consumers via social media.

  • 60% of all online adults use social media.
  • 85% believe a company should not only have a presence in but also interact with its consumers via social media.
  • 56% of users feel a stronger connection with, and feel better served by, companies when they can interact with them in a social media environment.

qvc.com offers customers the ability to share and bookmark products from the product detail page

When a website such as Facebook, which just turned 5 years old in February, has an active user base of over 175 million people, it is easy to see the unlimited potential to increase your wallet share simply by giving your customers what they want. Some options are:

  • Give your customer the ability to add your website or product detail pages to websites such as Delicious, StumpleUpon, Digg, Twitter and Facebook.
  • Give them the ability to customize their experience on your website. These experiences can range from customizing the home page as they see fit to uploading their image to go beside their product reviews.
  • Create an RSS feed for your website. If your website has a blog or some other content area that changes regularly, give your customers the option to add it to their favorite RSS reader.

satisfaction survey results show consumers are willing to give their opinion

They say, "Content is king," but if you cannot account for your king's whereabouts, he needs to be beheaded. Your website's content is only as relevant as its success. So, test as much as you can. Some tests you can perform to get hard data include:

  • Website and email A/B testing
    Split your promotion views between your customers. 50% see version A, and 50% see version B. You can perform these tests for just about any purpose, but make sure your goals are clear before beginning. Figure out what you are trying to solve, and then move forward with the testing. From changing your website's navigation to simply testing the style of your promotion's copy, doing an A/B test will give you the relevant data you need to decide whether to update or remain the same.
  • Polls
    Polls are quick and simple but, depending on your pool of users, can give you mountains of data. To get more people to take your poll, consider giving some kind of incentive to participate. Some polls are fun to take, but if you're asking, "Which brand of television is better?" and not, "Who's hotter, Jessica Simpson or Britney Spears?" then you may want to think more carefully about how much the feedback is worth.

5. Using Type And Color To Influence

What does that say?

Using color and typography is nothing new to designers. Using them in eCommerce is not much different. When designing for a retail website, your client is the customer. You are trying to convince thousands, tens of thousands, even millions of potential customers to click on your promotion and buy whatever you are selling. Consider the following.

Can It Be Read?

Most designers love to play with typography: twisting, shaping and contorting letters and word to obey your every whim, forming a beautiful masterpiece of skill and beauty. However, if your customer is not an artist, chances are they won't get what you're doing, and you've just lost a sale. Up front and to the point messaging is not always the answer either.

Consider using fun copy as an alternative. For example, if you sell banjos, instead of saying, "Shop New Banjo Supplies," you could say, "Add More Twang to Your Thang." As stated earlier with regard to designing for the customer, this depends a lot on what your target demographic is.

Apple.com home page promotion of the new iPod Shuffle shows the impact of clever typography

Can It Be Red?

No big surprise, red is the color of choice for error messages. But consider this when thinking about the user experience. What color does Target.com use for its error messages? Makes you think, right? Good! By the way, it uses red, too. The point is to consider alternatives. If your company has red in its brand, and the website has a lot of red as well, consider another color. You're trying to get the user's attention, so blue text with an alert icon could work just as well.

Consistency in Type: Stylistically and Creatively.

Making sure your headers, sub-headings and body copy are consistent across your website is easy. Making sure your website has a well-defined style guide is not. A style guide requires a lot of patience and care and is never complete. A website's style guide should be a living, breathing document that continues to grow as your company and brand grows.

There is nothing wrong with this. As you find certain styles that perform better than others, find a way to add them to the guide. This document, depending on the complexity of your brand and the size of your website, could potentially be split into two separate documents: a creative style guide and a copy style guide. Each guide serves a different purpose but live together harmoniously.

Inspiration and Sources

Designing for the user experience in eCommerce is a multi-faceted puzzle. Some solutions work across the board, and some are specific to your website alone. The good news is that finding the solutions that best fit your particular needs is the most challenging and rewarding work a designer can do. It takes a rare breed to fully appreciate the value of the user experience, and if you are part of it, I hope this article and these resources give you as much pleasure as they have given me.

About the Author

Jeffrey David Olson is a Sr. Art Director at HSN.com. HSN.com ranks in the top 30 of the top 500 Internet retailers, is one of the top 10 trafficked e-commerce websites, and has more than a quarter million unique users every day. Jeff is currently finishing up a complete home page redesign and starting redesigns of the product detail and checkout pages. He is also the author and owner of 30 Minutes of Nonsense, a brand new blog where he writes his personal opinions about professional topics.

(al)


© Jeff Olson for Smashing Magazine, 2009. | Permalink | 18 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,


 
 

Cosas que puedes hacer desde aquí:

 
 

Poemas de amor - Darío Jaramillo Agudelo

Vía "Descarga cultura" de la UNAM

 
 

Enviado por luishernando a través de Google Reader:

 
 

 
 

Cosas que puedes hacer desde aquí:

 
 

LocalizaTodo, localizador de recursos en Google Maps

via microsiervos

 
 

Enviado por luishernando a través de Google Reader:

 
 

vía Microsiervos de no-reply@microsiervos.com (Nacho) el 23/03/09

Aviones en vuelo en LocalizaTodo
Aviones en vuelo en LocalizaTodo.com

Vorian nos pasó el enlace a LocalizaTodo, un mashup que muestra sobre los mapas de Google Maps y Google Earth la posición de diferentes recursos tales como aviones en vuelo, barcos y regatas, estaciones meteorológicas, avisos de navegación, puertos deportivos... con información relativa.

La captura de arriba muestra aviones en vuelo. Pulsando sobre el avión muestra información de ruta y compañía. También es posible buscar aviones por el número de vuelo, e incluso enlaza con fotos de cada avión en Airliners.net. Abajo, situación de estaciones meteorológicas e información de las mediciones (temperatura, viento)

Aviones en vuelo en LocalizaTodo
Estaciones meteorológicas en LocalizaTodo.com

Si se dispone del plugin Google Earth en el navegador web se puede devidir la pantalla para que a la dereche muestre cartografía tridimensional, con relive y más posibilidades de vistas y movimientos por el entorno.

Entrevista a José María Dávalos, autor de Localizatodo en el diario Faro de Vigo, donde cuenta un poco cómo se obtienen algunos de los datos visualizados.

# Enlace Permanente


 
 

Cosas que puedes hacer desde aquí: