Sergio Gago

Hace unos días, Alejando Karpich “Karpicius” me pidió que le diera mi opinión sobre el futuro de la educación virtual, algunas de sus implicaciones, y los elementos a los que más atención prestaba a la hora de elegir un LMS (Learning Management Systems).

El hecho de escribir junto a Yussef Hassan, o Carlos Neri ya me pareció suficientemente interesante, asi que aquí os dejo un enlace al pequeño texto que escribí sobre la situación actual de la educación online, las problemáticas y el futuro, y que resume lo que opino al respecto.

La colección de artículos en si misma, es muy interesante.

Este es un tema en el que llevo pensando cierto tiempo, en parte gracias a Josep M., compañero de trabajo, con el que estoy haciendo ahora una muy productiva labor de arquitectura de la información y usabilidad en un proyecto.

¿Cómo ofrecer al usuario la posibilidad de elegir SU provincia con la máxima usabilidad? (Atención que hablo de su provincia)

Pues bien, a priori tenemos dos modelos básicos: La lista desplegable y el mapa, teniendo cada uno muchas variantes diferentes, y sus propios problemas y más. Estudiemos qué hacen algunos de los portales líderes en España (que se basan en la selección de provincia):

Idealista.com
Portal dedicado a la inmobiliaria. La navegación está basada en desplegables de 6 alturas, de forma que en los dos primeros solo tenemos que seleccionar el elemento buscado, y en el tercero, la provincia propiamente dicha, será donde tendremos que bajar hasta encontra el elemento buscado.

paginasamarillas.es
No hay mucho que decir. La provincia es un desplegable estándar de un solo nivel (más de 50 opciones), y una localida de campo libre.

fotocasa.es
Otro portal inmobiliario. Precisamente estos son los que más hincapié deben hacer en la localización geográfica. Optan por un modelo similar a idealista para las opciones (alquiler, compra…), pero se basan en un modelo de mapas para la localización de provincia. El resto de pantallas están basadas totalmente en mapas también, por localidad y zona (incluso barrio en ciudades grandes). La navegación del mapa es sensible y nos va indicando el nº de inmuebles encontrados).
loquo.com
Quizá uno de los portales de anuncios clasificados con más visitas. Utiliza (si no me equivoco) localización ip para redirigir al usuario a la ciudad adecuada, ya que en este caso son los anuncios los que están localizados geográficamente.
Aun así, como barra lateral nos ofrece todas las provincias donde existe loquo, por si algo ha fallado o simplemente quermos buscar en otro sitio.

infojobs.net
Portal líder de empleo en España. Aquí, lógicamente, la función de seleccionar la provincia donde quieres trabajar, es imprescindible. En este caso tenemos un desplegable de un solo nivel. (Luego veremos que también hay que valorar el espacio disponible).

atrea.com
Otro portal inmobiliario, del grupo BBVA, quizá menos conocido que idealista o fotocasa, pero que alexa no le trata nad mal. En este caso ofrecen las dos posibilidades: Tres listas desplegables de un solo nivel, que se autorrellenan con el anterior: País, provincia, y localidad. Y mapa que añade detalle en función de lo que vayamos seleccionando

enalquiler.com
En este portal ya asumimos que solo vamos a alquilar, de forma que los tres desplegables de 7 niveles son para el tipo de vivienda, la provincia y el precio. Eso si, los primeros elementos que muestran son los que más viviendas tienen. Tratando de simplificar el uso al mayor porcentaje de usuarios.

laboris.net
Otro portal de empleo que usa dos desplegables de un nivel tanto para provincia como para categoría.

niumba.com
Niumba es un portal de alquiler de viviendas para vacaciones, por lo que las zonas con las que trabajan están muy localizadas. De hecho, permiten buscar por provincia o por zona (costas sobre todo), pero al igual que atrea, permiten una búsqueda por desplegables de un nivel, o una selección por mapa, que contextualmente nos dice dónde estamos y qué oferta hay en ese punto.

segundamano.es
Portal de anuncios de intercambio propietaria del grupo anuntis. En la home no nos ofrecen ningún buscador, sino una lista enorme de categorías y subcategorías, y ya dentro de una de ellas podemos seleccionar la provincia en un desplegable de un nivel.
compraventa.com
Otro portal de anuncios de compra venta, en cuya home en lugar de pedirnos la categoría nos piden la localización, con mapa o con listado de todas las provincias. Está claro que se centran mucho más en el lugar que en la categoría de anuncio.

Estos son solo algunos ejemplos de portales que comen todos los días cantidaes ingentes de tráfico, pero sin duda hay muchos otros (que si queréis podéis dejar en los comentarios).
El primer problema que nos encontramos está en cómo clasificar este elemento. Si estuviéramos hablando de nuestro menú propiamente dicho, se puede concluir que las listas desplegables están hechas para formularios, y que se deben buscar otros elementos.

Pero tampoco estamos hablando de un elemento de formulario propiamente dicho (al estilo tradicional, se entiende). Estamos viendo un elemento que se nos muestra desde la home de nuestra página, y que de su utilización depende el resto de la navegación en el sitio, vamos, con una criticidad demasiado alta para ser obviada, sobre todo cuando hablamos de portales que venden ítems centrados geográficamente.

Entonces, tenemos que tener en cuenta los siguientes factores:

• Espacio disponible y criterios:
  ¿Con cuánto espacio contamos? ¿Cuántos elementos más tenemos en la página? ¿Será el único modo de navegación o el usuario puede elegir otros criterios de búsqueda? Si nuestra búsqueda es impepinablemente por localización, quizá necesite más peso.
  Es importante también el dónde lo vamos a colocar, y los criterios anteriores que le hemos hecho seleccionar. Por ejemplo, si tenemos que elegir un tipo de vivienda, una provincia, luego un precio y luego introducir un término para buscar, probablemente pocos usuarios introduzcan ningún término, porque después de seleccionar tres ítems, es más fácil darle a un botón que pensar en un término:La búsqueda más crítica, deberá tener el máximo espacio y estar situada en un “hotspot” de nuestra página. El usuario debe captar la criticidad del elemento. Si hay varios elementos de búsqueda, dividámoslos, fuera frustración!

• Usuarios target
  ¿Quién es nuestro público? ¿Gente que quiere vender en su barrio? ¿Gente que busca un piso en cualquier provincia de España? ¿El público conoce bien su geografía? ¿Qué nivel tienen de internet? En general, la gente es lenta tecleando y buscando, por lo que tenemos que simplificar y adelantarnos a sus pensamientos.Si tu público conoce bien el mapa, puedes ponérselo, será más fácil que encuentren algo en un elemento conocido donde ven todos los ítems a la vez, que estar buscando en una lista. recuerda: hay pocos usuarios que sepan que en una lista desplegable, si das a la “v” te irá directamente a “Valencia”.

• Accesibilidad: ¿Cómo se verá sin JS o sin imágenes?
  ¿Qué va a ocurrir a nivel de accesibilidad? ¿Cómo se quedará tu página si la desnudas y la dejas sin JS? ¿Y sin CSS? ¿Tus mapas son en flash?Si usas tecnologías no estándar, ofrece alternativas a la navegación (aunque menos visuales). Si usas mucho javascript, o ajax, también. Haz pruebas de navegación desactivando todo esto a ver cómo aparece. Acuérdate de los lectores de pantalla y de las versiones HTML plano.

• Dispersión de los datos
  ¿Estás en todos los sitios, pero mucho más en unos que en otros? Si el 90% de tus usuarios entran en tu portal para buscar jamones, pónselo en portada.Si Madrid y Barcelona ocupan el 95% de tus ofertas de trabajo, pónles un atajo. Es cierto que supone “menospreciar” a los usuarios de lugares con menos oferta, pero se trata de llegar a un acuerdo.

• Profundidad de los datos
  ¿Cuál es el nivel de selección? ¿Comunidad autónoma? ¿Provincia? ¿Localidad? ¿Otras? ¿Variadas? Este es un problema típico en las inmobiliarias. Si busco Valladolid, podríamos englobar, capital, y provincia, como mucho algunos pueblos grandes de alrededor. Sin embargo en Barcelona tiene sentido ver por separado la capital, del Vallès, Sitges, etc… ¿Hasta donde profundizaremos en nuestro mapa?En primera instancia, el usuario debe ser “universal”. No tiene sentido que un usuario que aún no nos ha dicho si es de Madrid o de Barcelona, pueda escoger Alcobendas. Según bajamos en la navegación podemos ir dándole más opciones, siempre con la opción de “todas las localidades”. Esto también depende de la dispersión de los datos. ¿Tenemos 500 inmuebles en Barcelona y 2 en Terrasa?

Para finalizar y concluir, me sigo quedando con los mapas, siempre, teniendo en cuenta los factores de arriba. Además, existe otro factor que he comentado y que también es muy importante: Nuestra Web debe ser homogénea. Las búsquedas de provincia deberán ser todas iguales.

¿Experiencias? ¿Opiniones?

Llevo tiempo pegándome con las aplicaciones Ajax para conseguir hacerlas más accesibles.

Por una parte, el hecho de ser más dinámicas nos permite una interacción mejor, y si ésta está más cuidada, podemos hacerla mucho más compatible con muchos timpos de deficiencias, sobre todo visuales (a nivel cromático, por ejemplo). De hecho, no resulta dificil en una aplicación ofrecer un cambio cromático accesible, o un aumento del tamaño del texto.

El problema estaba en los lectores de pantalla, que hasta ahora parseaban la página al entrar (casi como un robot web), y cualquier actualización posterior no conllevaba a la lectura. Es decir, que al entrar en una Web, JAWS nos leería el primer contenido que nos encontraba, pero si cambiabamos cualquier cosa con innerHTML, el lector no se enteraría de nada, salvo que hiciéramos unos hacks poco recomendables.

Pues bien, leo en Sentido Web, que la gente de Juicy Studio ha estado trabajando en ello y ahora es posible dar más accesibilidad a nuestras Webs que usen Ajax. ¿How-to?

Primero estaría bien dar una pasada rápida a cómo funcionan los lectores de pantalla. En este artículo lo explican bastante bien, denotando los problemas con Ajax, y los modos de lectura.

JAWS utiliza un buffer virtual, que de forma normal, se actualiza de forma síncrona en función de las acciones del usuario. Pero al igual que Ajax lo que hace es “asincronizar” nuestra aplicación, también debemos “asincronizar” dicho buffer virtual, haciendo que nuestras llamadas al servidor también actualicen a JAWS (hablando rápido y mal).

Si vais a la página del artículo podéis ver el pseudocódigo que haría esto, bastante claro y sencillo. Al final, se trata de un hack o engaño al programa, pero que nos puede servir para cumplir nuestros objetivos de accesibilidad, y quizá una alternativa al formato “texto plano”.

AlphaWork services es una especie de google labs de IBM, donde desarrollar aplicaciones (sobre todo) Web punteras, e intentan innovar en la forma de mostrar la información que tenemos actualmente.

Uno de los últimos trabajos que he visto es el Many Eyes, una aplicación social para la visualización y preparación de información colaborativa. Es decir, que grupos de usuarios puedan representar de forma social la información que deseen usando varios tipos de gráficos, entre ellos evoluciones de tag clouds.

Recomiendo echar un vistazo al tour de la aplicación, donde podemos ver el potencial que tiene la herramienta.

Cosas similares se hicieron con Quintura, por ejemplo. También recomiendo la lectura del artículo de Yusef Hassan-Montero y Victor Herrero-Solana: Improving tag clouds as visual information retrieval interfaces, que ya se puso en un comentario de este blog.

¿Hasta donde pueden llegar las nubes de tags para las categorías? ¿Cuál es la utilidad real a nivel de usabilidad?

Veo en Denken Über una referencia al artículo original de Google Watch, sobre el experimento de estos últimos, cambiando la homepage de google al estilo yahoo.

Es cierto que en la homepage de google ya tiene todas esas funcionalidades, pero la GUI de yahoo me gusta mucho más. Creo que es mucho mas usable, y si tuviera las pestañas que si implementa ya sería excelente.

Leo en el blog de Jordi Castello un artículo en el que lo que más me ha gustado ha sido la imágen sobre la forma de generar valor a un producto o servicio informático, con la satisfacción del mismo.

Según el artículo que enlaza en Adaptive Path, al final todos nos estamos refiriendo a lo mismo. Por lo visto han preguntado a 800 profesionales del campo en cuestión, preguntandoles qué otras palabras utilizan junto con “user experience”.

Las 10 primeras son:

• 93 Usability
• 63 Consumer experience
• 28 User centered design
• 21 Customer experience
• 20 User interface
• 14 Interaction design
• 13 Information architecture
• 11 Design
• 10 Brand experience
• 10 User interaction

¿Qué palabras utilizamos en castellano par referirnos a la experiencia de usuario?

Me retracto de lo dicho en ejemplos de newsletters ayer, al ver esta noticia en Sentido Web: Lo que outlook 2007 no permitirá hacer con los mailings.

Parece ser que ahora usará el motor de Word para renderizar mensajes (si, ese mismo que te permitía hacer unas páginas Web estupendas).

• Se carga los background-image, tanto en html como en CSS.
• Adós a todo posicionamiento no “static”. Sin floats, nos quedamos sin columnas. ¿Será la vuelta al mundo de las tablas?
• Elementos de bloque mal especificados, los paddings y margenes ya no son lo que eran.
• Sin flash. (bueno, esto no es tan malo)
• No se pueden imágenes como viñetas de las listas no númeradas (tampoco es tan malo).
• No permite Gif animados (nunca los usé en mailings).

Interesante ver el mismo mail en Outlook 2000 y en Outlook 2007
Supuestamente, todo esto son motivos de seguridad, pero luego podremos embeber código activeX, o JS para hacer cualquier cosa… a saber. ¿Alternativas? Eudora, Thunderbird… y sino… Gmail con tu nombre de dominio.

El artículo original en SitePoint.

En esta entrega de las herramientas de trabajo para desarrolladores Web, vamos a entrar, no con un software, sino con una extensión sin la que ya no podría vivir.

Webdeveloper toolbar + DOM inspector (no os preocupéis, el firebug lo tengo para una entrega posterior).

Con el Web developer toolbar, tendremos una herramienta de testeo de nuestras páginas casi completo, a tiro de barra de herramientas. Muy fácil de usar y de aprender, y que probablemente nos sacará de más de un apuro a la hora de hacer la parte gráfica de nuestras Webs.

Haremos un repaso rápido a las opciones que tien:

• Disable: Desde aquí podremos deshabilitar las opciones más comunes, para ver el comportamiento de nuestra página en ausencia de estos sistemas, por ejemplo, Java, o javascript, colores o referers. Así, podremos comprobar si alguien sin javascript puede al menos acceder a nuestra información (navegadores de solo texto, lectores de páginas, motores de búsqueda, etc).
• Cookies: Cuando desarrollamos aplicaciones Web, es común que recurramos a las típicas “galletitas” para saber cosas del usuario. Desde este menú podremos, o bien deshabilitarlas, o bien añadirlas, eliminarlas, ver su código, etc.
• CSS: Para mi uno de los menús con más utilidad. Como de costumbre podemos deshabilitar los estilos y ver la página “desnuda”, podemos ver el código de las hojas CSS y sobre todo, centrarnos en algún elemento determinado. Pero lo más importante de todo es que nos permite editar el estilo de cualquier elemento “en caliente”, incluso de páginas que están online y no son nuestras!
• Forms: Desde aquí tenemos varias opciones típicas de formularios, comprobaciones de métodos de envío, prepopulado y modificación de algunos valores desde cliente.
• Images: El trabajo básico de las imágenes se reduce a: especificar bien los atributos “alt”, comprobar que el peso no es excesivo, y ver si hay superposiciones (entre otras). Desde aquí nos permite ir activando y desactivando opciones para comprobar los resultados en nuestra página (o en otras).
• Information: Este menú suele ser más útil para ver otras páginas que las nuestras (si lo hemos desarrollado nosotros, no nos dirá nada nuevo), o bien para depurar CSS, en esos momentos en los que te estás tirando de los pelos. Nos permite mostrar las anclas, claves de acceso (accesibilidad), tamaño en pixels de elemtos de bloque, orden de los DIVs y parentesco, información de los elementos (este último el que más me gusta, ya que saca un tooltip que cambia por donde tienes el ratón), y en general, toda la información relacionada con estilos y código Javascript.
• Miscellaneous: Aquí tenemos las clásicas opciones que no entrar en ningún sitio. Desde ver unas líneas guía muy útiles para maquetar, hasta limpiar todos los datos privados (caché, historial…) nuestros.
• Outline: A nivel visual, hay muchas ocasiones en las que es dificil ver realmente hasta donde llega una celda, o una capa determinada. Con outline podremos dibujar un borde bien grueso y rojo que nos marque los bordes de todos estos elementos, y así ver, por qué narices no conseguimos maquetar bien la página.
• Resize: Podemos modificar el tamaño de nuestro navegador a resoluciones determinadas para comprobar como navegarían, por ejemplo, los pobres de 640×480. También hay una opción de zoom.
• Tools: Desde aqui tenemos acceso directo a los validadores de la W3C, enlaces, y WAI (accesibilidad), además de poder abrir el DOM Inpector.
• View Source: Ver código fuente, pero con facilidades para ver el código de la página de un frame facilmente.
• Options: Opciones de configuración de la extensión.

Por otra parte, tenemos el DOM Inspector, imprescindible cuando nuestro amigo javascript lo manipula dinámicamente con appendChilds, innerHtMLs y compañía. Podemos ver el árbol jerárquico actualizado de la página que se muestra, con información de cada nodo, atributos, etiquetas, etc… y por supuesto, buscar dentro de todos los elementos, ver quienes son los padres y los hijos, etc… No se como hace tiempo pudimos desarrollar sin él. Nota: Al instalar Firefox, hay que especificar que quieres también el DOM inspector.

La Web developer, se puede descargar aquí.

¿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

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