Alpha's Manifesto

A black and white figure's thought-hive

Universal Principles of Design

Referencia de conceptos básicos de diseño

Universal Principles of Design es un libro más que recomendable sobre conceptos de diseño en general: no se limita ni al software ni al diseño de productos físicos. De hecho, ni siquiera se centra tanto en el diseño como en los conceptos que están detrás de los buenos diseños, a quienes les da la atención principal.

(Read more →)

Barras de progreso y velocidad aparente

La gran diferencia del detalle

Indicando progreso

Hemos visto como a través de los años las interfaces de los sistemas operativos y las distintas aplicaciones (también las web) han evolucionado y cambiado radicalmente su aspecto visual. Muchos más colores, formas redondeadas, animaciones y feedback que nos indica qué está pasando a cada momento.

Uno de los elementos que más cambio ha tenido son los indicadores de progreso. Desde las líneas que giraban simulando un progreso, usando los caracteres -, /, | y \ en una consola, hasta el uso de caracteres Unicode con barritas que se iban llenando, hasta las hermosas interfaces de hoy de colores y animaciones.

Cabe aclarar que los indicadores de progreso vienen en dos sabores. Uno de ellos es el indicador de progreso indeterminado, el cual indica que hay un progreso ocurriendo de fondo en nuestra aplicación, pero sin indicar qué tan cerca estamos de terminar esa operación. Muchos de estos hemos visto en Youtube y distintas páginas que hacen uso de ajax. Wikimedia tiene una linda galería de estos, pero para ejemplo, aquí tienen uno:

Loader

El otro tipo de indicador es la barra de progreso propiamente dicha. Esta barra es el concepto básico que indica un límite en donde el trabajo ha sido terminado y nuestra posición respecto de completar esa tarea. Una búsqueda en Google Images devuelve muchas, muchas imágenes para saber de qué estamos hablando, y mejor aún, PrettyLoaded es un sitio (Flash) con una galería continua de pre-loaders que reutilizan este concepto con distintas formas.

Progress bar

Jugando con la mente

Ahora, asumiendo que una tarea siempre tarda el mismo tiempo, el indicador de progreso puede hacer una diferencia en la velocidad aparente que como usuarios percibimos, y podría ser bien la diferencia entre cancelar una descarga que signifique una compra o esperar unos pocos segundos más. Esta velocidad percibida es también llamada velocidad aparente, y si bien está relacionada a la velocidad real, hay otros factores que pueden hacerla aparentemente mayor o menor.

La velocidad aparente se encuentra afectada por muchos factores, como bien publicó Anthony, de UXMovement, en el artículo llamado How to Make Progress Bars Feel Faster to Users. A diferencia de muchos artículos que se encuentran en la internet, este está respaldado por estudios de la gente de Carnegie Mellon University, de los Laboratorios de Investigación de AT&T, y de la Universidad de New York. (Los links están al final del mismo.)

Las características que mencionan aquí son las siguientes:

Animación en sentido contrario

Una característica de las nuevas interfaces ha sido la capacidad de entrelazar imágenes en estos mismos indicadores. Muchas veces es una forma de demostrar que la aplicación sigue funcionando aunque la barra de progreso mantenga su posición, de la misma forma que el caracter que giraba nos indicaba también que el programa seguía funcionando. Sin embargo, el tipo de animación también puede tener un efecto sobre la velocidad aparente del progreso general.

Y lo que han descubierto es que cuando esta animación se mueve en sentido contrario a la dirección de progreso de la barra, la sensación de velocidad es mayor.

Utilizar pulsaciones frecuentes

Los indicadores de progreso (tanto barras como indeterminados) pueden hacer uso de pulsaciones como parte de la animación. Esto es más común en las barras de progreso, en donde todo el color de la barra es cambiado por un momento y vuelve a su estado normal, repitiendo esta acción cada tanto tiempo, dando la sensación de una pulsación.

Los estudios demostraron que mientras más frecuentes son estas pulsaciones, mayor es la velocidad aparente. Por supuesto, puede que no resulte agradable al ojo del usuario si es demasiado frecuente. Un truco extra también mencionado es que a medida que nuestra barra está avanzando, la frecuencia de las pulsaciones puede ir aumentando, también generando la sensación de un aumento en velocidad, incluso aunque realmente no sea tal.

Acelerar el progreso

Supongamos por un momento que el progreso de nuestra tarea es fijo, y que cada tantas unidades de tiempo, siempre tendremos tantas otras unidades de avance en nuestro progreso. Mantener esa monotonía de avance es, si bien realista, no la mejor opción para dar la sensación de progreso. Según mencionan los estudios, incrementar la velocidad del progreso hacia el final genera una sensación de menor tiempo insumido en la tarea en general, incluso aunque los tiempos suma sean los mismos.

Recuerdo haber leído que entre Windows Vista y Windows 7, este había sido uno de los cambios de interfaz en el momento de copia de archivos, a pesar que la estrategia de copia de archivos no había cambiado, y la diferencia era notable. Desafortunadamente, no logro encontrar el artículo en donde originalmente leí eso.

Evitar pausas al final

La pausa final, que ocurre muy comunmente si se está haciendo un procesamiento al final de la tarea, arruina la sensación completa de velocidad que el proceso había ganado. Por supuesto, seguramente estemos en un punto en donde el usuario ya no decide cancelar la acción, pero con ella hemos logrado arruinar la sensación de un proceso rápido que el usuario sentía. Esta puede ser la diferencia entre volver a usar nuestro sistema o no en un futuro, así que cuidado.


Los estudios originales son:

Soy un zorrinito con progreso.

Colección de libros sobre UX

Libros obligatorios de lectura sobre UX

Otra de las joyitas rescatadas de los foros de User Experience, es la pregunta sobre libros de lectura obligatoria de user experience y diseño de interfaces. El listado es más que completo y sorprendentemente vasto.

Este es el listado de libros, según la cantidad de votos de la respuesta que lo contiene (asumo que podríamos decir, más aceptado a menos aceptado):

Más que suficiente para entrenarnos en este aspecto.

Soy un zorrinito lector.

Pruebas con VS11: Día uno

Comenzando a explorar lo que la beta nos ofrece.

Comencé como un proceso de autocapacitación mi investigación personal de las características que Visual Studio 11, todavía en Beta, nos ofrece. Pretendo documentar mi experiencia personal porque si bien no va a ser una buena indicación de cómo es el producto, puede que detecte muchos pequeños problemitas o cosas que estarían buenos tener en cuenta, al menos prepararse para ellos. Conociendo mi suerte, estoy seguro de que algo voy a romper.

Instalación

VS11 Install screenLo primero que tengo que comentar es la instalación. La interfaz está mucho más refinada, pero más allá de eso, es un poco más oscura en el sentido en que no tenemos mucha información sobre qué está pasando. No he tenido problemas con la instalación, pero imagino que debe ser más complicado de hacer troubleshooting si ocurriera algún error. Por último, la instalación toma su buen par de horas, quizá extendiéndose hasta cuatro o cinco. Si tiene que bajar los updates de internet, es lo suficientemente inteligente como para hacerlo en paralelo mientras otra cosa se instala, así que tener una conexión pobre no debería ser un problema a menos que fuera muy acotada.

Mi instalación terminó sin problemas excepcionales. Una característica rara que me ocurrió en una de las dos máquinas que la instalé (solo en una) es sobre un paquete que debe continuar la instalación. Como varias de las instalaciones de VS, a veces es requerido un reinicio hasta que se pueda continuar la instalación. La forma en la que el instalador se asegura continuar luego es poniendo una entrada en el registro para volver a correr la próxima vez. Resulta que en mi caso, ese ejecutable se inició pero nunca se quitó del registro. Nunca supe si ejecutó correctamente o no porque ese ejecutable en particular parece no tener interfaz. Tras cada reinicio que yo hacía, el ejecutable volvía a pedirme permiso (ya que es un archivo bajado de internet).

Ese se encuentra aquí, algo que futuros visitantes pueden encontrar muy útil para diagonsticar problemas:

"C:\ProgramData\Package Cache\{a3c0442e-f8f7-4089-ac77-1e0c50901f63}\vs_ultimate.exe" /burn.log.append "C:\Users\<User>\AppData\Local\Temp\dd_vs_ultimate_<timestamp>.log" /uninstall /quiet -burn.related.upgrade

Por el comando que ejecuta y deja en el archivo de log, parecería ser un servicio de updates y de rollout de nuevas funcionalidades agregadas. Si estoy en lo correcto, no deberían preocuparse ya que VS tiene su propia plataforma de updates. Lo que yo hice es simplemente quitar eso de mi inicio. No he visto complicaciones hasta ahora.

Interfaz, UI y UX

Lo primero que voy a probar es hacer algo parecido a mis tareas diarias.

Mi primer sorpresa es la elección de colores que tuvieron con el entorno. En general, todo grisáceo y de colores muy uniformes. Es fácil ver el texto pero no lo es tanto como el contraste que proponía el blanco sobre azul de la versión anterior. Es difícil distinguir las ventanas sobre el fondo, especialmente si no tienen contenido. Cada tanto los mensajes de diálogo pierden ese estilo y vuelven al estilo normal que tienen las ventanas de Windows, dejando ese feo sabor del cual todos se quejan de la suite Adobe, en donde el programa realmente desentona con el entorno en el que está corriendo.

Recordemos nuevamente que está pensado también para Windows 8, con lo que mi apreciación podría ser equivocada, pero no lo he probado aún. Esa es otra historia y probablemente otra serie de posts.

VS 11 UIComo pueden ver en el screenshot que tomé, también optaron por eliminar los colores de los menúes contextuales, específicamente les muestro el de Intellisense, el cual me parece una pésima decisión. La habilidad de distinguir propiedades, métodos, clases, enumerados y campos por color a simple vista era una bendición. Las selecciones de arriba siguen siendo dropdowns anque parezcan desaparecidos, y los íconos más el gris claro/gris oscuro/negro de toda la sección derecha lo hace difícil de acostumbrarse. Creo entender la intención: esta pantalla nos concentra, sin duda, en el código, y eso definitivamente debería ocurrir.

El entorno completo parecer ser más rápido y responsivo, sospecho que estará utilizando la misma tecnología de async que el nuevo framework ofrece. ¿Recuerdan el cuadro de diálogo de Add Reference, que fácilmente detenía todo unos minutos hasta recuperar el listado de assemblies? Sigue tardando, pero ya no significa un problema, el entorno sigue respondiendo como si nada estuviera ocurriendo de fondo.

VS 11 Error listUna muy buena adición que encontré es la capacidad de filtrar errores desde el listado de errores de compilación. Esto nos permite dar un paso adelante, cuando ya estamos acostumbrados a determinados errores causando otros, pudiendo concentrar nuestro esfuerzo en solucionar esos primero. Como pueden ver además, el filtro funciona para cualquier campo, lo cual resulta totalmente natural.

VS11 Unit Test ExplorerDesafortunadamente, parece que esta característica no se comporta de forma consistente en todas la ventanas. Otra que me interesa que vean es la ventana Unit Test Explorer, otra que estaremos viendo muy seguido, más todavía si trabajamos con TDD. En este caso la búsqueda sólo funciona con el nombre de las pruebas y uno debe presionar enter para aceptar la búsqueda, cuando en la anterior ya con sólo filtrar podíamos ver nuestro filtro aplicarse.

Esta ventana, sin embargo, tuvo un rediseño visual algo importante y me agrada el cambio. En las versiones anteriores los detalles de una prueba se encontraban separados de la prueba en sí, esto hará mucho más fácil poder ver qué pasa con cada una de las pruebas, y asumo que su output también aparecerá aquí.

Parece que otra característica que tampoco nos dejará muy contentos es algo que estaba siendo muy aclamado. Cualquiera que reconozca la frase “Expression cannot contain lambda expressions” sabe de qué estoy hablando. Así es, esa frase sigue presente y nos sigue molestando aún en esta nueva versión. Por favor, espero que la versión final del IDE agregue esto porque es una funcionalidad que puede salvar horas y horas de desarrollo.

VS11 Quick Watch

Desafortunadamente alguien ha decidido que agregar coloreado al texto que tipeamos ahí fue más importante, y terminamos con una versión algo buggeada de texto formateado (como pueden ver en la imagen anterior, ambas decepciones juntas). No es realmente nada tan terrible como algo que no funcione, pero muchos queremos poder efectuar un .Where() para no tener que pasar por más de 200 elementos en un enumerable.

En otra de mis pruebas descubrí que existe algo llamado Parallel Watch, que básicamente es una ventana de watch que nos permite ver valores de una misma variable a lo largo de distintos threads. Supongo que esto puede volverse confuso ya que distintas intancias de una misma variable son en realidad distintas variables e instancias no-thread safe son en realidad la misma variable. Eso o yo me estoy perdiendo algo del concepto de trabajar en paralelo. (Si algún lector tiene algo que aportar, es bienvenido.)

Dispuse la siguiente prueba para verificar su funcionalidad, y como sorpresa extra, encontré que puedo editar el código mientras está ejecutando, algo que anteriormente sólo ocurría en determinados casos. Me trajo un poco de satisfacción (aunque no tanto como me habría dado poder usar lamdbas en el quick watch.)

Desafortunadamente mi prueba no resultó muy exitosa, ya que al elegir una ventana de watch para poder ver, el siguiente mensaje se hace presente (les dije que algo iba a romper):

VS11 Parallel Watch Error

Creo que de todos momentos puedo estar en el camino equivocado, ya que en la ventana de Parallel Tasks nada aparecía. Seguramente tenga algo que ver con la nueva característica de async tasks de .NET 4.5.

Es un muy buen punto de partida para retomar mi investigación, ya que mi tiempo se acabó por hoy.

La diferencia entre UX y UI

Una imagen tiene menos de mil copos de cereal

De parte de Design.org me llega una ingeniosa representación infográfica de Ed Lea, quién plasmó diferentes conceptos de diseño e interfaz en ejemplos visuales con un plato de cereal.

El post pueden verlo en The Difference Between UX and UI: Subtleties Explained in Cereal.

Me gustaría incluso jugar a extender la analogía (y  necesito ayuda de ustedes, lectores, para eso). Estas son algunas ideas que se me ocurrieron:

  • Software as a Service: Restaurant.
  • Platform as a Service: Refrigerador.
  • Infrastructure as a Service: Cocina.
  • Marketing: Publicidad de cereal.
  • Presentación: Caja de cereal.

¿Qué más se les ocurre?

Soy un zorrinito cerealero.

6 desastres causados por interfaces de usuario pobre

Are you sure you want to cancel explosion? [Ok] [Cancel]

Encontré hace poco este link y realmente quería compartirlo. El artículo, en inglés, se titula 6 Disasters caused by Poorly Designed User Interfaces, y si bien el artículo proviene de Cracked.com, – que bien sabemos no se trata de una fuente periodística – da muy buenos ejemplos de cómo una interfaz de usuario mal diseñada realmente tienen consecuencias.

Soy un zorrinito mal diseñado.

Link del día: La usabilidad ha muerto!

Títulos amarillistas si los hay, MD ha compartido con nosotros este link de la gente de ForoAlfa, un grupo que habla sobre la usabilidad en su forma teórica, y eso es en general de lo que trata este artículo. El artículo, también bajo el título de La Usabilidad ha muerto. ¡Que viva la usabilidad! habla de cómo la web actual (y los que trabajamos en el software en general) ha degenerado el concepto de usabilidad.

Según dicen (y si lo entendí correctamente), la teoría sobre la usabilidad se desarrolló como una serie de medidas y patrones que permitía que las interfaces pudieran dialogar con un usuario y mantener una conversación fluida. Hoy cuando hablamos de usabilidad hablamos de la forma en la que se mueven las pantallas, cuánto se ve y cuánto no se ve, cómo se scrollea, cómo pasan las imágenes y los colores que usamos. Por supuesto que está relacionado, pero no conserva la idea pura original de lo que es usabilidad.

En mi opinión el artículo no llega a una conclusión definitiva de cuál sea el problema y qué habría que hacer para solucionarlo, sino que nos cuenta esta historia y nos hace pensar un poco más allá de lo que vemos en el día a día sobre conceptos que quizá estamos demasiado acostumbrados a manejar.

Soy un zorrinito inusable.

Link del día: Firefox 4 + Mozilla demos

Ayer salió a la luz la versión definitiva de Firefox 4, y en unas 24 horas ya logró tener más de 6 millones y medio de descargas. Un navegador popular, sin dudas. Podemos bajarlo y al mismo tiempo ver el movimiento en tiempo real de descargas a través de Firefox 4 Download Stats.

Cabe aclarar que Firefox 4 viene totalmente renovado, al menos en su interfaz gráfica y mucho de su funcionamiento interno. Las características que Firefox siempre ofreció permanecen ahí, y hay varias otras más. Por otro lado, su interfaz es mucho más limpia y minimalista (parece que todos los navegadores están siguiendo una tendencia que Chrome marcó) y por supuesto, soporta muchos de los nuevos estándares que se están desarrollando para la nueva web.

Fue de casualidad, gracias a un post en Twitter, en donde encontré un dashboard de ejemplos y características de HTML5 y tecnologías relacionadas, llamado HTML5 & Friends, en donde podemos ver muchas de las nuevas características en funcionamiento, y tener una explicación pequeña que podemos extender. Por otro lado, la web de Mozilla Demos (llamada Web O’pen Wonder) contiene muchos ejemplos e implementaciones de las cuales podemos aprender.

Soy un zorrinito actualizado.

Link del día: IE6 Countdown

Alguna vez mostré un link sobre un script para sitios web llamado IE6 Upgrade Warning, la idea del mismo es forzar a que los usuarios tengan que actualizar su navegador web para continuar en la navegación del sitio, y que si este script se hacía lo suficientemente conocido, podríamos contar con una internet un poco más actualizada.

Resulta que no dio tanto resultado como quisieron (a pesar de que el proyecto sigue activo hasta estos días), pero Microsoft ha puesto cartas en el asunto. Sí, Microsoft mismo ha determinado que debe existir una cuenta regresiva para la existencia de Internet Explorer 6, y dicha cuenta regresiva forma parte de la campaña de publicidad de Internet Explorer 9. Su sitio central se llama Internet Explorer 6 Countdown.

Me llegó la noticia a través de MicroSiervos, y como bien ellos dicen: si los propios creadores de la herramienta piden que se deje de utilizar, por algo será necesaria la muerte de este software. Yo no lo dudo: más allá de los chistes que se pueden hacer sobre los problemas que da, el tenerlo que tener en cuenta al momento de crear aplicaciones web significa un gran lastre que arrastrar, y un impedimento para el avance de las tecnologías web.

Dicho sea de paso, Internet Explorer 9 está ya disponible en su versión final para ser descargado, en el sitio de Beauty Of The Web. Tiene una interfaz renovada (agradable a mi gusto), buena velocidad, un buen manejo de JavaScript y soporte de HTML5. Esa fue una primera mirada rápida y me agradó.

Soy un zorrinito actualizado.

Link del día: Patrones de pantallas

En un artículo de Added Bytes me encontré linkeado esta colección de patrones de pantallas, llamada 12 Standard Screen Patterns, del blog de Designing Web Interfaces. Esta gente se dedica a postear información muy interesante sobre cómo hacer más fácil e intuitiva, a la vez de innovadora, la experiencia usuario-máquina a través de distintas visualizaciones, herramientas, técnicas y aproximaciones.

En este caso, se trata de una colección de pantallas que amoldan la información de acuerdo a las acciones que se quieren realizar sobre la misma. Por ejemplo, la disposición de una página de búsqueda no será para nada parecida a la de un formulario (incluso aunque técnicamente, la búsqueda sea un formulario), o de un wizard. Para más información al respecto, aquí tenemos otro listado de patrones de diseño visual.

Para que el mundo mobile tampoco se quede afuera, acá hay un artículo sobre iPhone Application UI Design Patterns, con algunos consejillos sobre cómo diseñar visualmente una aplicación para estos teléfonos.

Por último, la página de Paul Hibbits está llena de recursos sobre usabilidad y diseño de interfaces. Hay una sección en especial sobre los patrones. Muy interesantes y completos para ver.

Soy un zorrinito user-friendly.