Sergio Gago

¿Cómo llegar al usuario? ¿Cómo conseguir recurrencia? Hacer que una vez ha visitado tu web, vuelva…. es un tema complicado que no es vanal en absoluto.

Personalmente soy más de crear contenido de calidad que invite a volver a través de indexación o de necesidad (menéame no manda boletines a sus usuarios…), pero si que es cierto que en ocasiones hay que llamar a la puerta y recordarles que estamos aquí.

En estas situaciones, lo ideal es poder elegir si queremos una edición HTML o texto plano. En la primera, nos podemos trabajar mucho más el diseño y hacerlo acorde con nuestro site, incluso pensar en términos de usabilidad.

Visto en webéame, llego al blog campaing monitor, donde ponen ejemplos de newsletters bastante interesantes.

Me quedo con:

Dedicado a la chica de los pushes, JJ-bane de emagister

Un trabajo realizado desde Microformática, blog dedicado sobre todo a los microformatos y a la Web semántica, que me atrevo a traducir, ya que me parece muy interesante a tenerlo incluso como “chuleta” a la hora de codificar. El resto del blog es muy intersante.

Elementos

a

Cada etiqueta ‘A’ define un ancla en la página a ser referenciada, interna o externamente.

abbr

Indica un término abreviado

acronym

Indica un acrónimo

address

Este elemento se puede utilizar para ofrecer información de contacto de un documento o partes de un formulario.

blockquote

Se usa para citas de bloque (elemento de bloque)

cite

Citas o referncias a otras fuentes (elemento de línea)

code

Identifica un fragmento de código fuente informático

dfn

Par indicar el definiendo de un término concreto.

div, span

Elementos de bloque y línea respectivamente, que junto con los atributos ‘id’ y class’ son el mecanismo habitual para generar la estructura de documentos.

dl, dd, dt

Listas de definición, creadas con el elemento ‘DL’. Generalmente van en parejas de término / definición (aunque puedan tener muchos otros usos). El término se da con el elemento ‘DT’ y es de línea. La descripción se da con el elemento ‘DD’ que es de bloque.

del, ins

INS y DEL se usan para marcar secciones del documento que han sido añadidos o borrados respecto de otras versiones del documento (control de cambios).

em

Indica énfasis. (Usado por lectores de pantalla, al igual que strong).

h1 .. h6

Elementos de cabecera, describen el tema del que se habla en la sección que introduce. Tiene niveles del 1 al 6.

kbd

Indica texto que será introducido por el usuario.

ul, ol, li

Listas ordenadas y no-ordenadas. De hecho no están definidas en la especificación. Pueden contener elementos ordenados, sin orden o definiciones.

p

Representa un párrafo (Y se debe cerrar! < / p >)

q

Se emplea para citas cortas (de línea) que no requieran cambio de párrafo.

samp

Indica una salida de prueba para programas, scripts, etc.

strong

Indica un énfasis más fuerte.

var

Indica una instancia, variable, atributo o argumento de programa.

Atributos

alt

Para agentes de usuario (navegadores) que no pueden mostrar imágenes, formularios o applets, especifica un texto alterrnativo.

class

Asigna un nombre de clase o set de clases para un elemento para propósito general en los navegadores.

cite

El valor de este atributo es una URI que designa un documento o mensaje fuente. Está pensado para apuntar a la información que explica por qué un documento se ha cambiado.

datetime

El valor de este atributo especifica cuándo ha sido cambiada la información

id

El atributo ID asigna un identificador único para un elemento par propósito general de los navegadores (document.getElementById)

lang

Especifica el lenguaje base de unos elementos, atributos o contenido textual.

longdesc

Especifica un enlace a una descripción larga de la imágen.

rel

Especifica la relación entre el documento actual con el documento enlazado por el atributo href.

rev

Se usa para describir un enlace inverso desde el ancla especificada por el atributo href al documento original.

title

Ofrece información sobre el elemento para el que se aplica.

En su artículo no ha incluido elementos que tengan que ver con tablas o formularios, ya que en la mayoría de las ocasiones no nos ofrece contenido semántico. También concreta que, obviamente, estos elementos y atributos solamente son semánticos cuando se usan apropiadamente.

Continuamos con la disección de la página de un libro de Amazon, The Stolen Child.

Si estás perdido, lee primero la parte 1.

Spotlight reviews

Por supuesto, la comunidad que hay alrededor de Amazon, creada a base de tiempo y esfuerzo es un gran apoyo, pero el hecho de tener “Críticas Destacadas”, con la posibilidad de valorar las críticas y de leer otras que haya escrito la misma persona, da mucho que decir. Recordemos que nos fiamos mucho más de lo que nos diga un amigo, familiar, o incluso un desconocido por internet, que de todas las palabras de la editorial. Además, nos agrupa a los autores en función de qué puestos ocupan. “Top 50 reviewer”, “Community Forum”, etc…

Customer Reviews

Por supuesto, también hay espacio para el resto de opiniones (que no todas), y a cada una (incluidas las destacadas) podemos decir que nos ha sido útil o no, incluso hacer un comnetario de la opinión. Esto sirve para el automantenimiento del sistema.

Customer Discussions

Las discusiones de los clientes, actualmente en fase beta, son una especie de foros embebidos propios para el producto, donde se puede hablar desde la idoneidad del libro para una persona, hasta discusiones sobre la propia historia, conclusiones, etc… Algo muy interesante para avivar la recurrencia. Yo compro el libro en Amazon, y cuando le he terminado, VUELVO, para hacer una valoración y participar en la comunidad. Probablmente, en ese ciclo, compre otro libro.

General Forums

Forma parte del mismo bloque que los foros específicos del producto, pero dándonos la posibilidad de ver los foros generales sobre otros temas que nos puedan interesar. Venta cruzada, vaya.

ProductWiki: Product information from our customers

El wiki, otro elemento eminentemente social. Un espacio donde cualquier pueda escribir lo que quiera, y editar lo de otros. Un espacio para poner lo que cada uno quiera (siguiendo las especificaciones de Amazon, claro). La página de producto de la Wii tiene uno.

Listmania!

Cada uno nos podemos crear la lista de la compra que queramos, con nuestros gustos. Esas listas pueden ser compartidas y mostradas aquí. Es una forma de ver “otros productos relacionados”, pero en lugar de ser aconsejados por el algoritmo de Amazon, lo serían por los propios usuarios.

So You’d Like to…

Esta parte no la conocía, y me ha encantado de verdad. En función de lo que estás viendo, y quién eres, es posible que quieras… Y ahí metemos nuestra guía. Por ejemplo, en la página de la Wii, podemos ver una guía de como comprar un regalo para un niño, o como comprar una consola…

Your Recently Viewed Items

El estilo de navegación de Amazon es rápido, llevándonos de un producto a otro casi sin darnos cuenta. Y de hecho está pensado así, para que Amazon pueda ver exactamente cuales son tus preferencias. Pero tenemos que saber donde estamos. Aquí necesitaban una herramienta similar a las migas de pan, pero aplicada al producto. Pues nada mejor que poner el historial de las páginas de productos que hemos ido viendo.

Look for similar items by category

El título lo dice todo. Varias opciones de categorías similares en las que podemos encontrar productos de nuestro interés.

Look for similar items by subject

Algo parecido a lo anterior, pero tratando con el tema del producto. En la imágen vemos algunas como ficción, fantasía y literatura. La ventaja aquí es que son “checkboxes” y podemos seleccionar todas las que queramos para conseguir la búsqueda más eficiente. I.e: Quiero literatura de ficción fantástica y con pianistas.

Zona de banners

Amazon ha crecido mucho, hasta el punto de vender muchas muchas cosas. Con este apartado totalmente contextualizado, hacen una venta cruzada con las ofertas del momento, intentando captar la atención del cliente.

Feedback

La opinión de nuestro visitante es MUY IMPORTANTE, y siempre tiene que tener clara la forma de contactar con nosotros, independientemente de que sea una felicitación, un consejo, error o lo que sea. Nuestro profesor el el visitante, el usuario, y si le escuchamos con atención sabremos bien por donde ir.

Otras opciones y buscador

Opciones generales para el usuario, como tracking de pedidos, políticas de envío y devoluciones, algunos elementos de ayuda, y lo más importante, el buscador al final de la página. En una página tan larga, es imprescindible darle la opción de reiniciar el proceso (volver a buscar y ver la información de otro producto) sin mucho esfuerzo.

Your Recent History

Una forma de ver lo último que hemos hecho, pero no solo de productos, sino de cualquier elemento dentro de Amazon. Guías, foros, búsquedas, Wikis, etc… Volvemos a las migas de pan, adaptadas a Amazon, y explotadas al extremo. Es nuestro pequeño mapa de navegación por el sistema.

Otras: Inside this book, Citations, Accesories

En algunos productos podremos ver dentro del libro, hojear algunas páginas, portada, etc… En otros ver algunas citas a otros libros o blibliografías, y en algunos, sobre todo aparatos, nos ofrece accesorios. Si vamos a comprar una consola, lo ideal sería que nos ofreciera mandos y algunos juegos.

————————————

Es una página REALMENTE LARGA y poca gente se la lee entera, de hecho, las tradiciones del diseño Web nos indicaban que cuando una página era muy larga lo mejor era partirla en varias y hacer un paginador. ¿Por qué aquí es diferente? Pues porque absolutamente todo el contenido tiene que ver y está indexado en la misma página, y la mayoría de los elementos se relacionan entre ellos. Amazon busca una navegación lo más parecida a una tarde en el fnac. Perderse entre los libros, sumergirse dentro de la librería, buscando que te ofrezcan algo para leer, algo que te llame la atención y sea de tu interés, y eso… lo consiguen perfectamente.

Conclusiones, mayor peso a la inteligencia social, a los comentarios de los usuarios, a lo que la gente tiene que decir. A la indexacion y a la navegacion. Amazon es consciente de que pocas veces un usuario encuentra lo que busca a la primera, y le tenemos que ayudar en la medida de lo posible, incluso tenemos que enseniarle qué es lo que le gusta!

Por cierto, no he leido ese libro. XD

No estaría diciendo nada nuevo a nadie, si pongo a Amazon como el baluarte del comercio electrónico, del b2c, de la web 2.0, de la sociabilización y la inteligencia colectiva, y en general, de lo que tiene que ver con la mejora de las ventas a través de internet (long tail incluido).

Esto es, además de por una estrategia de negocio excelente y digna de imitar, por un trabajo de usabilidad y de estudio de mercado tremendo, hasta el punto en que cada parte de la página está más que pensada. Asi que vamos a diseccionarla. Es posible que sirva a alguien como ejemplo a tener en cuenta y opciones que se podrían utilzar en nuestras aplicaciones Web.
Para ello he elegido un libro de muchas ventas, suficientemente famoso y con visitas y revisiones, de forma que podamos
ver todos los módulos en activo. The Stolen Child de Keith Donohue. Asi que allá vamos:

Cabecera principal

La cabecera de Amazon siempre ha sido objeto de copia y deseo. Fue de los primeros en implementar un menú superior a base de pestañas que funcionara correctamente. Y ha sabido mantenerlo bien a pesar del enorme crecimiento horizontal que ha tenido como portal. Tenemos por supuesto el buscador junto con las opciones de encontrar regalos y A9 Web Search. Hace uso de tooltips para lograr una navegación más fluida y no ocupar demasiado espacio en menús.

Datos básicos, selección de formato.

Los encargados de la usabilidad de la página de producto de Amazon se preguntarían… ¿Qué es lo principal que un cliente necesita saber sobre un libro? Primero, en grande, la portada, con posibilidad de verla en grande, incluso ver páginas de dentro del libro (alguien dijo una vez que nunca compraría por internet porque no puede hojear…). Luego nos pone el títulod el libro y el autor con enlace para ver más títulos. La valoración y el número de ellas, y por supuesto el precio con sus descuentos. La disponibilidad, imprescindible para la decisión de compra, y por otra parte la adaptación a fechas señaladas.

Want it delivered Friday, January 5? Order it in the next 4 hours and 38 minutes, and choose One-Day Shipping at checkout.

Por supuesto, esto solo funciona dentro de los EEUU.
La opción de libros usados permite conseguir algunos títulos en buen estado por un precio menor, y por último permitirnos elegir el formato que más nos guste, hardcover, paperback, audio, etc..

Barra lateral de opciones.

Los bordes redondeados denotan estética 2.0… Lo primer que vemos es “Add to Shopping Cart”, para aquellos que vayan a tiro fijo, y ya elegimos la cantidad. Si somos usuarios registrados podemos hacer un pedido de forma automática. Así están preparados para los clientes informativos que desean saberlo todo antes de comprar algo, y los clientes impulsivos que ven un producto e inmediatamente lo compran. El segundo grado de visibilidad en el sidebar se lo lleva “More Buying Choices”, donde nos permite vender de segunda mano nuestros propios libros, actuando Amazon de intermediario, y por último la botonera de opciones. Add to WishList fue una idea genial, en la que podíamos tener una lista de deseos y quien quisiera regalarnos algo lo tendría fácil. De la misma forma que “Add to Shopping List”. También nos permite tener una lista de bodas, de nacimiento de un bebé y como no, la recomendación a un amigo.

Video destacado.

Solo en algunos productos, podremos ver un video de alguna entrevista con el autor, o una presentación del libro, que puede ser muy útil a la hora de tomar la decisión de comprar un libro. Un ejemplo de la mezcla de servicios para un objetivo común.

Best Value

Aunque con este libro no se vea de la forma ideal, y suele ser más patente en libros de informática, sigue siendo importante. Esta opción es de las que más me gusta, ya que se adelanta al cliente entrando en el paso de la recomendación automática. Su cometido básicamente es recomendarte packs de libros que cuadren mejor juntos. Un libro de Ajax junto con una referencia de Javascript por ejemplo. Una biblia de PHP con un manual de MySQL, o los tres libros de una trilogía, por ejemplo.

Customers who bought this item also bought

Por favor! ayúdenme a conocer más cosas que me gustan. Sabiendo lo que otras personas con gustos parecidos al mío han comprado, me pueden dar una idea. ¿Alienamiento? puede ser, pero sin duda alguien a quien le guste Iron Maiden, tiene bastantes posibilidades de disfrutar con Judas Priest. Alguien que disfrute con el Señor de los Anillos, probablemente tenga algún relato de las Dragonlance.

Editorial Reviews

En el proceso de venta, contar con toda la información por parte del productor es crítico. Nadie va a saber más sobre el producto que él. Asi que nos pueden contar referencias en prensa, biografía del autor, una reseña o sinopsis del libro y críticas varias.

Product Details

Durante mucho tiempo, esta era la primera información que se ponía en casi todas las tiendas online. Número de páginas, ISBN, dimensiones, peso, etc… Hasta que se dieron cuenta de que eso no era nada útil. Si alguien ve un comentario de un usuario diciendo que es bueno, le dará igual que sean 200 o 300 páginas, o que pese 3kg. Esa es la razón por la que ha bajado su peso relativo en la página de libro.

Amazon Connect

¿Un myspace de Amazon? Algo parecido, pero centrado en sus productos. Puedes añadir los libros que ves o compras en tu “plog“, y hacer reseñas, incluso ver e interactuar con el autor. También nos indica otros libros que han participado en el mismo concurso que el libro que estamos viendo.

What do customers ultimately buy after viewing this item?

Sociabilización total. Nos indica qué porcentajes compraror qué, después de ver la página, y cuidado, digo ver no comprar. Nos dice: El 63% compraron el libro de la página (The Stolen Child), el 16% Water for Elephants, el 8%…, etc. Y tenemos enlaces directos a esos productos, con su valoración y precio. A esto se le llama venta cruzada.

Help others find this item, Tag this product, Customers tagged this product with

En general, los motores de búsqueda todavía tienen que desarrollarse bastante. La tendencia 2.0 de la folcsonomía, basada en tags o etiquetas ha añadido nuevas funcionalidades, pero esto tiene sus problemas. Hay veces que es necesario utilizar un Card Sorting, y lo mejor es que te lo hagan tus propios usuarios. Desde aquí Amazon nos da la posibilidad de ver los tags de otros usuarios e incorporar los nuestros propios, asi como ver cuánta gente ha compartido un tag determinado. Y relativo a ello, un buscador de productos basado en tags.

Are you the publisher or author? Learn how Amazon can help you make this book an eBook.

Para la iniciativa de la creación de eBooks. Si tienes los derechos sobre un libro determinado, ya que Amazon no siempre contacta directamente con la editorial, de esta forma, si estás interesado tienes una forma de acceder al servicio.

Rate this item to improve your recommendations

Por supuesto, si estamos registrados, podremos valorar el libro en cuestión, y esto se tendrá en cuenta en las búsquedas de otros usuarios. Es importante que digamos si lo tenemos o no, ya que esto pondera bastante la valoración.

Y hasta aquí por hoy, que ya se está haciendo un post suficientemente largo. Mañana la segunda parte.

Iba a escribir un artículo pidiendo disculpas por tener esto tan “abandonado”, pero he pensado que podía matar dos pájaros de un tiro, y publicar de paso uno de los artículos que tenía pendientes en la parrilla de borradores.

Tampoco hay mucho comentar, simplemente un enlace que desde que lo vi, se ha convertido en una gran fuente de información. Localhost80.
No recuerdo desde donde conseguí el enlace, pero recomiendo una navegación ardua por el sitio, es muy interesante. Desde PHP hasta SEO, pasando por usabilidad, manejo de errores 404, Ajax, startups, etc…
Pues eso:
http://localhost80.com/

La imágen corporativa, o resumiendolo a la mínima expresión, el logo, ya sea de mi web, empresa, asociación o lo que sea, es algo que todo el mundo sabe que es necesario… pero hasta que punto?

El proceso creativo unido a la comunicación, requiere de unos complejos estudios y de muchas entrevistas con el cliente, y con los clientes de nuestro cliente, para que el diseñador, sepa exactamente, qué es lo que tiene que hacer. Por decirlo rápidamente, aprender a usar el photoshop, es lo más fácil.

Pues bien, gracias al CDM de miel para el asno, he llegado a LiderLogo, una empresa, al parecer ubicada en los EEUU (según la cláusula octava de sus avisos legales se amparan solo por la ley de los Estados Unidos), y claro, no tienen datos de CIF ni razón social de la empresa que está detras. Si tienen, sin embargo, un teléfono en España. (Me pregunto cual será la legislación al respecto cuando tienes una página sobre unas oficinas en España y en español, pero en un servidor extranjero…)

Pero bueno, el caso es que tras un análisis de las condiciones de uso, y de la calidad de los trabajos, es normal que podamos comprar un logo por 127€.

Aunque no quiero poner capturas, ya que lo prohiben sus derechos de uso, me remitiré a una de sus páginas:
http://www.liderlogo.com/product_info.php?cPath=1_42&products_id=3395

Y después, a la página de la empresa Grupo Telecyl. ¿Parecidos razonables?.
En fin, 4 días tardan en desarrollarte la imágen corporativa, muy completa eso si, pero no creo que sea el logo de tu empresa, sino “un logo para tu empresa”, nótese bien la diferencia.

Venga! me uno a la moda del icono para marcadores sociales. Alex King, un nombre de referencia en el mundo WordPress ha creado un plugin que veis en acción en cada post de este weblog. Aunque tengo que configurarlo bien cuando tenga un poco más de tiempo.

En general se basa en tener un icono que englobe todos los iconos de marcación social que nos interesen. Enviar a digg, fresqui, meneame, delicious, etc… Asi que ya sabeis… Share It!

Aunque es una noticia ya trillada de meneame, he querido ponerla para matizar un poco el tema.

Sin duda son diseños excelentes basados en plantillas CSS, que vienen muy bien aprovechando el 10º aniversario que celebran en el W3C. Pero insisto. Un gran diseño no implica una gran página Web y existen una gran cantidad de parámetros que hay que tener en cuenta.

Ejemplo:

Un diseño excelente, muy innovador… pero yo me pierdo en la página. ¿Dónde está la frontera entre los “grandes diseños” que quizá en una revista o en un CD/DVD serían impresionantes, pero que en una Web hacen que se pierda todo por la borda?

No debemos olvidar que los sistemas Web no dejan de ser herramientas comunicativas Interactivas, y como tal, debemos facilitar esa interactividad, porque sino, hacemos una presentación flash, o montamos un video. Creamos un catálogo impreso o lo que queramos, pero ya no estamos diseñando una página Web.

Reconzoco que no es una tarea fácil para los diseñadores cambiar el chip, y convertirse en comunicadores bidireccionales, en lugar de meros emisores. Con algunos con los que he trabajado ha sido más fácil que con otros (por el CDM!), pero en general, supone llevar una tendencia totalmente diferente.

Por supuesto, hay algunos que realmente lo hacen bien:

Todos los diseños aqui.

API o Application Programming Interface no deja de ser, ni más ni menos, que una herramienta que nos ayuda a programar.

No me gusta linkar a otros artículos sin añadir algo de mi cosecha, completarlo o comentarlo, pero en este caso haré una excencpción ya que no se puede decir nada nuevo…

Desde aNieto2K: Las APIs que te harán rico

• Google Maps API [URL]
• Geonames.org [URL]
• OpenID [URL]
• MediaWiki API [URL]
• YouTube API [URL]
• Technorati API [URL]
• LastFM [URL]
• Del.icio.us [URL]
• FeedBurner [URL]
• Flickr [URL]
• Amazon E-Commerce Service [URL]

A la hora de desarrollar un sitio Web centrado en los contenidos, siempre surge el mismo problema. ¿Cómo los categorizamos?

Si dejamos de lado la teoría de la folcsonomía y sus tags, y nos centramos en las categorías estilo directorio habituales, nos encontramos con que existen ítems que deben estar en varios sitios, o que su categoría padre no siempre lo define a la perfección.

¿Muchas categorías y mayor definición, pero pérdida de la concentración y de la memoria a corto plazo del usuario, amén de la mayor cantidad de información que debemos conseguir que comprenda, o todo lo contrario? ¿pocas categorías muy generales, divididas a su vez en subcategorías y ganando complejidad con la profundidad?

Aquí entran varios factores, sobre todo en lo que a la arquitectura de la información respecta.

• Tres niveles es el máximo de profundidad para que un usuario pierda el interés. Y por supuesto, con la ayuda de las “migas de pan”. Indiquemos al usuario en todo momento donde se encuentra y cómo volver a cualquier otro punto del árbol.
• No más de 7 categorías a ser posible. El siete es un número “mágico” en la memoria de las personas, y es el máximo que estamos dispuestos a recordar, según dicen algunos expertos.

Por supuesto, estas dos “reglas” son muy abiertas, y todo entra en conflicto con el esfuerzo que queremos hacer que contraiga el usuario, en contraposición con el beneficio que va a tener después.

Entonces… ¿Cómo hacemos esta clasificación? Pues una de las mejores técnicas es el card sorting.

Englobando, se basa en hacer que un usuario objetivo haga el recorrido contrario al que realizaría habitualmente. Es decir, lo típico sería que entrara en Tecnología -> Informática -> Hardware, por poner un ejemplo. Bien, pues con el card sorting, le vamos a dar una serie de categorías y unas “cajas”. Estas cajas serán nuestros contenedores o categorías, y el usuario irá colocando en función de lo que más le parezca.

Buenas amigo! aquí tienes “Hardware”, dime dónde la colocarías.

Quizá unos la pongan debajo de informática y quizá otros lo hagan debajo de electrónica.

A su vez el card sorting puede ser abierto o cerrado. En el caso del cerrado, nosotros le preparamos las cajas con antelación. Es decir, decidimos qué padres habrá, y el usuario solo tiene que colocar los elementos. Y como os podéis haber imaginado, el formato abierto permite al usuario crear sus propias categorías.

Lógicamente, este método no funciona si las pruebas de usuarios no son en un número suficiente como para ser objeto de estudio, y hay un análisis posterior serio, que estudie los datos de forma concreta.

Si no tenemos demasiados usuarios, podemos hacer un análisis cualitativo, valorando a los usuarios de cerca y sacando conclusiones “en vivo”. Sin embargo, cuando el proyecto es grande, y el grupo de estudio es mayor, un análisis cuantitativo es lo más idoneo, pero esto va acompañado de gestión de datos, gráficas y estadísticas y probabilidades.

Existe software para ayudarnos a hacer esto más rápidamente. Personalmente el que más utilizo es Websort, que permite crear los grupos de usuarios, hacer cerradas o abiertas las pruebas y después ver las conclusiones. Otro software local es el CardZort.
Más información sobre Card Sorting:
Card Sorting: a definitive guide
What is card sorting?

Ni que decir tiene que esta técnica no es útil únicamente para aplicaciones Web. La categorización está en todos los sitios, y ahi donde esté podemos aplicarla. Desde la clasificación de nuestros MP3 a nuestra biblioteca .