Diseños y prototipos centrados en el usuario

Ahora, en el auge del usuario como centro de los sistemas, vemos por internet cada vez más manuales baratos y gurús de la usabilidad que nos dicen como tenemos que poner nuestros formularios o cómo maquetar el texto. Poniendo reglas generalistas que supuestamente tienen que valer para todos.

Pero el hecho, es que cada sistema, cada aplicación o máquina/aparato tiene unas reglas de usabilidad totalmente distintas. Incluso en aplicaciones y páginas Web, donde la consultora “guay” es la que vende al cliente que sus sistemas cumplen AA, realmente lo único que tienen es una serie de patrones que intentan seguir hasta que se les pone delante el IExplorer 6… Y eso por no hablar de las grandes consultoras, donde por supuesto la usabilidad es en lo último que se piensa.

Pero… si a mi me habían dicho que me leyera unos manuales y aplicara lo que pone en mis diseños… y que hiciera las cosas como para que mi abuelita pudiera navegar por mi sitio Web….

MAL! ¿Por qué vas a diseñar tu sistema apto para que navegue tu abuelita por él si nunca lo va a hacer? Posiblemente, para quitar funcionalidades a tus verdaderos usuarios. Al final lo único que hacemos es ponernos a aplicar estándares y verdades a medias que alguien dijo alguna vez, sin pararnos a pensar si son lo que realmente necesitan los usuarios finales de lo que vamos a crear.

Seguimos quedandonos en el diseño centrado en el sistema, aunque camuflado. Veamos las principales diferencias:

Diseño centrado en el sistema

  • ¿Qué es lo más fácil para la plataforma?
  • ¿Como puedo llegar al mejor resultado con las herramientas / dinero / tiempo de que dispongo?
  • ¿Qué partes encuentro más interesantes para poner más esfuerzo como programador / diseñador / analista / cualquier_otro_rol?

Diseño centrado en el usuario

  • ¿Quién es el usuario?
  • Su contexto
  • Su trabajo
  • Sus necesidades
  • Sus tareas
  • ¿De verdad conozco al usuario?

En general, la mayor diferencia está en la descolocación de términos. En una, un buen trabajo implica un cliente satisfecho y en la otra un cliente satisfecho implica un buen trabajo ¿Adivináis cual aplica a cual?Pero bueno, podemos intentar dar solucinoes a todo esto…

El Dr. Saul Greenberg da algunas pistas…

  • No hacer caso de la intuición
  • Las entrevistas no son precisas y no se llevan actas correctas ni se llega al “quid” de la cuestión
  • El diseñador no llega a conocer al usuario lo suficientemente bien para responderse a todas las preguntas que le surgen durante el proceso, y hace suposiciones.
  • En ocasiones el contacto es con intermediarios, o con directivos, y no con el cliente final. Se llega a una relación de “teléfono estropeado”.

Las recomendaciones son, convertir al cliente en un usuario activo y crítico. No un mero receptor de servicios. La metodología de la programación extrema incluye al cliente dentro del equipo de desarrollo (por mucha locura que esto pueda parecer en España, parece funcionar fuera de nuestras fronteras), y un continuo trabajo de prototipado, aumentando la fidelidad del mismo poco a poco (incluso un prototipado “Mago de Oz” en el que una persona simula ser el sistema) y ya… Si realmente solucionamos los problemas de diseño antes de la primera iteración estaremos ahorrando mucho dinero y trabajo, amén de tener un cliente mucho más satisfecho.

Uno de los mayores errores de las grandes consultoras es pensar que lo más importante es un sistema muy seguro y estable, despreciando el diseño. Pero lo cierto es que si el cliente piensa que es “feo” o dificil de usar, pensara que el resto es una auténtica patata, y nuestra aplicación-para-todo, será una aplicación-patata. Y por cierto, esto es aplicable a cualquier campo de la ingeniería y, supongo, arquitectura (algún arquitecto puede corregirme).
En un post posterior hablaré de los prototipos.

Modificado: Me he tomado la libertad de traducir un gráfico de Saul Greenberg que resume bastante bien la evolución de los prototipos y del diseño centrado en el usuario:

Interface Design and usability engineering

(click para ampliar).

Y para terminar, la guinda la puede poner Dilbert.

dilbert_hci

Lista de software gratuito

Aunque es del 5 de noviembre y va con retraso, enlazo a un post de pero que blog en el que recopila una enorme colección de software gratuito, para prácticamente cualquier necesidad que alguien pueda tener con el ordenador.

Disfruten del enorme listado.

Para ampliar el artículo, y si sois linuxeros, o queréis empezar a serlo, un listado que a mi me resultó de mucha ayuda en aquella época en la que solo usaba al pinguino. Tabla de reemplazo de software linux - windows

También disponible en wikilibros.

Rescatando… Tutoriales Web y autoformación

Otro rescate más
——————

En el mundo de la informática confiar toda tu formación a lo aprendido en el instituto o universidad es un suicidio profesional. Si tuvieramos que sobrevivir exclusivamente con lo que aprendemos en las clases, muy mal iva a ir el mercado de los ordenadores.

Salen lenguajes nuevos cada dí­a, software distinto, opciones, hardware diferente, cosas para probar, etc…. Nos creamos a nosotros mismos como “geeks” porque tenemos que estar pendientes siempre de lo nuevo, de lo último, tener todos esos gadgets fantásticos y modernos que nos harán la vida más sencilla, etc…

En fin, sin irme del tema. El caso es que una persona que trabaja con el ordenador (ya sea desarrollador o diseñador) tiene que estar siempre en continua formación, y no creo que la solución sea apuntarse a caros masters y cursos….

Y entonces… ¿donde nos seguimos formando? ¿Dónde aprendemos esos nuevos conocimientos? Pues donde siempre, en nuestra gran base de datos de conocimiento…

Los tutoriales y videotutoriales que podemos encontrar por internet son una fuente inagotable de conocimiento. Podemos encontrar de casi cualquier tema, y nos ayudarán a convertirnos desde un lego, hasta un maestro en la materia.

Hace unos días, hicimos en abycom una prueba para contratar a un técnico, y una de las preguntas era ¿Cuál consideras que es el mejor método para la formación durante el periodo profesional de un técnico? y por supuesto, consideramos mejor a los que nos indicaron tutoriales y cosas similares de autoformación.

Y antes de despedir el artí­culo, os dejaré unos cuantos enlaces a tutoriales y videotutoriales que podrían ser interesantes:

Illustrator
Photoshop
Flash
Ajax matters (toda la información y formación sobre ajax)
3D Max
Learning Maya
Videotutoriales de todo tipo
Google Search Tips
Programación y desarrollo web

Y bueno, esto son solo algunos de los ejemplos que hay por ahi, pero si queremos una verdadera colección de tutoriales, no tenemos más que usar google, o el emule. Tendremos, de todo.

Herramientas de trabajo - I - Diagrama de Gantt - Gantt Project

Voy a escribir un hilo de posts en los que voy a ir comentando por encima las herramientas que uso en mi trabajo cotidiano, desde el análisis hasta la implementación de un desarrollo de software, y voy a hacer una pequeña reseña de las aplicaciones que utilizo. Es posible que alguien le saque utilidad, o que me de ideas para usar algún software o metodología mejor.

En esta primera ocasión vamos a hablar de algo que generalmente no se hace en consultorías pequeñas, pero que si todo el mundo lo utilizara, los proyectos llegarían a buen puerto en más ocasiones. Si bien es cierto que los proyectos informáticos pocas veces cumplen las expectativas de plazos (aunque esto es más común en grandes consultoras), con herramientas de gestión podemos intentar minimizar estos problemas, y SOBRE TODO, aprender de nuestros errores.

Quizá uno de los mayores problemas a la hora de presupuestar un proyecto, es saber cuántas horas te va a llevar, cuánto personal especializado vas a necesitar y qué recursos materiales vas a usar (muy importante si tienes que compartirlos entre varios proyectos). Lo habitual en una pequeña PYME de desarrollo, es hacer un boceto a mano calculando las horas a bote pronto y haciendo un presupuesto precioso después de añadir un cierto porcentaje de riesgos a la cantidad final (eso el que lo hace), pero con esto no obtenemos ningún feedback real. No conseguimos analizar a cada trabajador (o recurso) por separado, ver en qué áreas son más eficientes o como responden a la presión. Tampoco tenemos una forma fácil de mejorar proyecto tras proyecto nuestras previsiones. Quizá la primera vez que pensamos en el tiempo que se tarda en montar una base de datos con determinadas características, podamos pensar… ¡5 horas! y luego en realidad son 10 (ó 2!), o mejor aún, que si lo hace uno de nuestros empleados tarda 3 horas y si lo hace otro tarda 8.

Este tipo de cosas, que en sitios pequeños son sobradamente conocidas, cuando empiezan a surgir más proyectos y viene más gente diferente, se empieza a hacer complicado, por eso desde mi punto de vista una buena herramienta de gestión es MUY importante.

¿Cómo gestionar un proyecto? Pues una de las formas más extendidas y quizá útiles en el desarrollo de software son los diagramas de Gantt, por la simpleza que tiene a la hora de poder ver de un plumazo toda la extensión de un proyecto y sobre todo, de poder llevar un seguimiento ordenado y que te permita preveer retrasos (ver la línea crítica por ejemplo).

La herramienta más conocida para esto es el MS Project, que tiene una gran cantidad de opciones que en la mayoría de las ocasiones no vamos a utilizar, sin hablar del coste que tiene. Por eso yo suelo usar uno mucho más modesto, gratuito, y libre. GanntProject.

En general nos permite crear nuestros diagramas y asignares tiempos, recursos y lo más importante, restricciones. Es decir, la tarea B no puede empezar antes de que se acabe la A, o la tarea C tiene que empezar justo al mismo tiempo que la B. A priori esto nos da una imágen de la fecha posible de finalización del proyecto, y cuando se va haciendo el seguimiento nos indica (y nos permite guardar “instancias en el tiempo”) de como va evolucionando. Si la tarea A se retrasa, también lo hará la B, y consecuentemente la C. Con esta información delante, la toma de decisiones es mucho más fehaciente a la realidad y en general, sabemos mejor lo que hacemos, en lugar de ir a tontas y a locas.

Algún ejemplo:

Otra variante que se puede utilizar en combinación, es el diagrama de Pert. Quizá es más complicado de realizar, ya que implica ciertos cálculos estadísticos, y desde mi punto de vista no ofrece la misma información de forma rápida que el de Gantt, sin embargo el Gantt Project si que os ofrece una pequeña implementación muy simple del diagrama de Pert.

Es una aplicación de código libre escrita en Java, y la comunidad que existe alrededor, creando plugins es bastante grande. La capacidad de exportación también está muy bien, pero sobre todo, está en continuo desarrollo.

Traducción literal de ¿Porque usar Gantt Project? En su web:

  • Características básicas buenas (y en aumento!). Las funcionalidades que tiene son suficientes para la mayoría de la gente (recuerda que el 80% de los usuarios de MSProject usa el 20% de sus numerosas opciones).
  • Fácil aprendizaje. No necesitas enormes manuales para empezar a trabajar con GanttProject. Si está familiarizado con la notación de tareas, asignaciones y dependencias, se convertirá en un experto en GanttProject en un par de horas.
  • Precio excelente. Las herramientas de gestion de proyectos comerciales cuestan una gran cantidad de dinero. GanttProject es gratuito para cualquier propósito.
  • Multiplataforma. GanttProject es una aplicación Java y funciona en Windows, Linux, MacOSX y otros sistemas operativos que soporten Java.
  • Código Libre. Puede tunear o modificar GanttProject para sus necesidades, implementar características que falten, añadir sus propios informes, etc.

Yo no lo habría explicado mejor! Esta es la página para descargar GanttProject. Alternativas? OpenWorkbench

MooTools Physics simulations

Obviamente, es muy complicado estar a la última de todos los avances, librerías y frameworks que salen al mercado, y mucho más hacerlos funcionar bien a todos a un nivel decente, pero RSS y la blogosfera ayudan un poco.

Y este ha sido el caso con MooTools. Aunque sabía que existía, yo siempre he usado prototype, pero al ver el lanzamiento de la nueva versión de moofx en solo 3kb me he puesto a indagar un poco. (Aunque moofx también es válida para prototype).
Creo que es imprescindible que la web de una librería traiga ejemplos de lo que puedes llegar a conseguir con ella. De otra forma podrías gastar cantidades enormes de tiempo para al final no conseguir tu objetivo. Por suerte mootools tiene una página de demos que, aunque no demuestra toda la capacidad de la librería, tiene cosas interesantes, como el simulador físico.

Me he enganchado a la pelotita, intentando engañarle para que no simulara alguna acción concreta, y no he podido… Asi que me ha llamado la atención, en cuanto tenga un poco de tiempo intentaré destriparl al mootools un poco.

Formas de reclutamiento activo

Durante mi estancia en Barcelona, he tenido que recorrer la línea 3 (verde) unas cuantas veces, y esta es, precisamente la que lleva hasta el campus de la Universidad de Barcelona y de la Politécnica, por lo que es una línea recorrida por miles de estudiantes a diario.

No es nada nuevo que el metro es uno de los lugares donde la publicidad es más efectiva, porque además, permite hace una distinción del público objetivo en función de la parada o línea en la que estemos (la publicidad en esta línea 3 no es la misma que la línea 5, por ejemplo).

everis_addPero lo que más me ha sorprendido ha sido la campaña de reclutamiento que ha puesto la consultora everis en la parada de Zona Universitaria, en la que hacen un llamamiento a todas aquellas personas con iniciativa, arriesgadas, emprendedoras, etc… vamos, que hasta me han entrado ganas de enviarles el curriculum! Y es impensable que en Valladolid, por ejemplo, se gasten tal cantidad de dinero en una campaña para reclutar gente ¿Dónde está la diferencia? Pues simplemente en la forma de tratar el sector de las TIC y el personal involucrado, y la comparación entre Madrid o Barcelona y Valladolid, es similar si comparamos las dos primeras con alguna gran ciudad europea.

Efectivo Curso de AJAX

Cursos de AJAX hay muchos, o más bien tutoriales o manuales rápidos, pero no deja de ser un concepto complejo, que si no estás habituado cuesta empezar con él.

Decirle a un programador de toda la vida, acostumbrado a su C++, o su Java para aplicaciones de escritorio, que tiene que cambiar su mentalidad como programador, es dificil, pero con las herramientas que hay por ahi, se puede conseguir con el suficiente esfuerzo.

El manual en cuestión está en programación Web y aunque se centra sobre todo en el objeto XMLHttpRequest, es bastante útil para ir empezando.

Una vez tengamos eso, podemos ir a http://www.ajaxmatters.com donde tendremos una oleada de información, manuales, libros y demás que no es cuestión de repetir aqui.

Mi recomendación, y el libro que mandamos leer a toda la gente que quiere trabajar con nosotros:
Ajax in Action

Rescatando…. Colección de aplicaciones Web para trabajar mejor

Hace unos meses, al cambiar el nombre de la empresa, dejamos de lado el dominio, guardamos todos los datos, pero nos faltaron los artículos del Weblog, que si bien muchos no importaba, había algunos interesantes…

Gracias a la caché de google, he podido recuperar este.

Es posible que algo este desactualizado, pero en general supongo que seguirán siendo útiles.

Las aplicaciones Web son un elemento muy a tener en cuenta para la gestión de prácticamente cualquier cosa, desde proyectos, recursos humanos, calendarios, noticias, weblogs, etc… Muchas veces nos quedamos solo con el phpnuke y el mambo, pero en realidad hay bastantes mas a tener en cuenta.

Lo bueno de todas estas aplicaciones es que puedes vender a un cliente un sistema dinámico de calidad, con muchos servicios incluidos, por un precio relativamente bajo, basando tus esfuerzos en personalizarselo al cliente y enseñarle a usarlo, así como al mantenimiento.
Aquí os presento una lista de algunas de las que más me han gustado, o parecen tener más utilidad. Cada una tiene equipos de desarrollo más o menos grandes, y van creando módulos y plugins interesantes. Algunas de ellas entran en varias de las categorías, y tienen usos que ni siquiera he podido analizar. En general todas estas aplicaciones pueden aportarnos bastante rendimiento a nuestro trabajo. En muchas de ellas, podemos ver demos en OpenSourceCMS, una página donde poder probar estos sistemas antes de instalarlos.

Además de todos estos, tenemos una serie de aplicaciones online, muchas de ellas pertenecientes al famoso software social, que también nos pueden ser de bastante utilidad.

- Remember the milk: To-Do list, con posibilidad de compartir, exportar y enviar tareas a los demás de tu grupo.
- Basecamp: Gestión de proyectos. Version limitada gratuita, y para más proyectos de pago, muy interesante y con bastantes servicios integrados.
- Writely: Editor de textos colaborativo online, muy completo
- Flickr: Galería de imágenes para subir nuestras fotos.
- del.icio.us: Los favoritos ahora registrados por marcadores (tags) y online, para no perderlos cada vez que formateamos.
- Netvibes: Página de inicio configurable con distintos módulos para que sea la que nosotros queramos.
- Digg: Noticias de varios sitios que pueden ser votadas para aparecer en la página principal. Y su hermano en castellano, menéame.
- CalendarHub: Calendario online compartido
- Bloglines: Como lector de feeds, o agregador de noticias RSS, RSS2, Atom… Aunque yo personalmente uso feedness.
- Y por supuesto… Gmail

Por otra parte, las empresas de hostings llevan tiempo ofreciendo algunos de estos sistemas que he comentado arriba, con un sistema de instalación bastante fácil. En nuestro caso, hospedaje y dominios usa el instalatrón, con el siguiente software de instalación en un solo click:
- Blogs / CMSs: B2evolution, pivot, wordpress, feed on feeds, coranto, drupal, joomla, mambo, ocportal, php-nuke, postnuke, xoops.
- Comunidades / Foros: phpMychat, phpBB, simple machines forum, XMB Forum, Advanced Guestbook, Mediawiki
- E-commerce: phpAdsNew, CubeCart, osCommerce, phpCoin, phpShop, phProjekt, Crafty syntax live help, sugarCRM
- Archivos / galerías: Aardvark topsites, sitebar, directory, coppermine, phplinks, phpMycounter
- Otros: CaLogic calendar, flat calendar, webcards, contact form, advanced poll, phpesp, simple roll, simple recommender, search engine project.

CheckBoxes y Radiobuttons con estilo

Cuando se diseñan aplicaciones Web con un diseño relativamente diferente a los estándares (cosa no muy dificil de ocurrir en proyectos Web2.0), uno de los mayores quebraderos de cabeza es como conseguir que los formularios sigan el mismo estilo y queden cohesionados con el resto de la imagen de la plataforma.

Puedes cambiarles el color de fondo (con mejor o peor resultado según el navegador), puedes darles borde, maquetarlos de una forma un otra, pero los radiobuttons siempre serán un circulo blanco con un puntazo negro en el centro, y los checkboxes siempre serán cajas horrendas con un “tick” negro.

Lo cierto es que existen varias soluciones para esto por internet, incluso el cómo hacerlo por nosotros mismos, pero el código que nos ofrece Chris Erwin es el que se me antoja más sencilla, rápida y ligera. Con solo uans pocas líneas de código, transformaremos nuestros formularios del pasado en unos preciosos elementos de interacción con el usuario, perfectamente integrados en nuestro diseño, y la mar de bonitos! Pero sobre todo, funciona tanto en Firefox como en IE.
Estilizado de Checkboxes y Radiobuttons

Qué será este weblog?

Desde hace tiempo me resistía a escribir un weblog (prefiero llamarlo weblog a blog), por que realmente no creia que pudiera contar nada que no se estuviera contando ya en otros. De hecho, diariamente leo unos cuantos, y nunca me ha parecido de recibo copiar el contenido que otros trabajan.

Si bien en ocasiones si que me han entrado ganas de ampliar un tema, escribir algo de lo que no había encontrado nunca nada, o tener, una forma de comunicarme un poco más rápida de lo habitual. O un sitio donde cualquier persona que quiera saber algo de mi, pudiera, de un vistazo rápido conocerme, saber a qué me dedico o cuales son mis pasiones.

De modo que los recientes cambios en mi vida, que contaré en otro post, han hecho que busque montar (de una vez) mi propio weblog / blog / bitácora… y tratar de contar algo al mundo, o a quien lo quiera leer.

He decidido montar dos grandes categorías, Personal y Profesional, y que cada uno entre donde más le interese, pero aviso que en las categorías profesionales hablaré de ordenadores, de diseño web, programación, nuevas tecnologías y demás en un tono un poco más técnico, y en la categoría personal meteré cosas que me gustaría que mis amigos y personas más cercanas conocieran ahora que estaré más lejos de ellos.

De modo que…

Agáchense y cúbranse!