Mejora de usabilidad para Firefox 4: Aumentar el tamaño de los botones de cortar, copiar y pegar [es] [en]

“El 20% de nuestro tiempo con una suite de productividad lo pasamos usando las opciones de copiar y pegar…”

Twitter de MSBlogspain

El tamaño de los botones de copiar, pegar y cortar en el nuevo menú de Firefox 4 es muy pequeño. Si el porcentaje de uso de estas funcionalidades es similar en Firefox al que tienen en Office su tamaño debería ser mayor.

–0–

“20% of our time with a productivity suite we had using the options to copy and paste …”

Twitter de MSBlogspain

The size of the buttons to copy, paste and cut on the new menu of Firefox 4 is too small. If the percentage of use of such features in Firefox is similar to that of Office then its size should be larger.

Office Word: Tamaño de los botones de pegar, cortar y copiar

Firefox 4: Menu with cut, copy & paste buttons

Firefox 4: Prototipo nuevo menú de Firefox incrementado el tamaño de los botones de cortar, copiar y pegar

Firefox 4: Prototipo nuevo menú de Firefox incrementado el tamaño de los botones de cortar, copiar y pegar

--

 

Simular procesos de interacción y animar interfaces con Microsoft Visio

Nota:

Si no te has leido el primer libro de la trilogía de Milleniun “Los hombres que no amaban a las mujeres” y tienes pensado hacerlo, cosa que te recomiendo, sáltate los párrafos entrecomillados que vienen a continuación y sigue leyendo más abajo ya que la cita es un pasaje importante del mismo:

–0–

“Kurt Nylund había hecho en total dieciocho fotografías desde la ventana de la segunda planta de Sundströms Herrmode. En diecisiete de ellas, se veía a Harriet Vanger.

Harriet y sus compañeras de clase llegaron a Järnvägsgatan justo en el mismo instante en que Kurt Nylund empezó a hacer fotografías. Maikel estimó que las fotos se hicieron en un lapso de unos cinco minutos. En la primera, Harriet y sus compañeras estaban bajando la calle en dirección al fotógrafo. En las fotos que iban de la dos a la siete se las veía de pie mirando el desfile. En otra, ya se habían desplazado unos seis metros más abajo. En la última, posiblemente sacada un poco más tarde, el grupo ya había desaparecido.

Mikael agrupó una serie de instantáneas en las que cortó a Harriet por la cintura y las manipuló hasta conseguir el mejor contraste posible. Las guardó en un archivo aparte, abrió el programa Graphic Converter y activó la función diaporama. El resultado fue similar a una película muda entrecortada, con saltos de fotogramas, donde cada imagen se mostraba durante dos segundos.

Harriet llega, imagen de perfil. Harriet se detiene y mira calle abajo. Harriet vuelve la vista hacia la calle. Harriet abre la boca para decirle algo a su amiga. Harriet se ríe. Harriet se toca la oreja con la mano izquierda. Harriet sonríe. De repente, Harriet, con la cara en un ángulo de unos veinte grados a la izquierda de la cámara parece asombrada. Harriet abre los ojos de par en par y ha dejado de sonreir. La boca de Harriet se convierte en una fina línea. Harriet fija la mirada. En su cara se puede leer… ¿qué? ¿Tristeza, conmoción, enfado? Harriet baja la mirada. Harriet ya no está.

Mikael volvió a pasar la secuencia una y otra vez…”

–0–

Una de las herramientas fundamentales que utilizamos hoy día cuando diseñamos una web o una aplicación web o móvil, son los prototipos.

En contraposición a ellos, uno de los documentos de trabajo más comunes que se han estado utilizando principalmente hasta hace muy poco tiempo para producirlas (y que se siguen utilizando y son necesario para muchas otras cosas) han sido los funcionales que describen textualmente de manera detallada las páginas, la estructura y funcionalidades, los casos de uso, así como los procesos de interacción que se dan cuando el usuario interactúa con determinadas partes de la interfaz mediante diagramas de flujo.

No obstante, aunque los funcionales son muy importantes de cara al desarrollo back, carecen de la fuerza descriptiva y aclaratoria de los prototipos desde un punto de vista de usabilidad, tanto para visualizar de forma óptima cómo ha de ser la interfaz, dónde tienen que ir exactamente sus elementos y cómo se interrelacionan, como para visualizar los procesos de interacción que se dan en la web o aplicación de una manera más satisfactoria.

No es lo mismo colocar un literal encima de un campo input de texto, que situarlo al lado. No es lo mismo tampoco ponerlo a la izquierda o a la derecha, o elegir uno u otro orden de aparición. No es lo mismo agruparlos visualmente mediante una “caja” o línea que los rodee, que dejarlos al “aire” en una región abierta por la que fluya la mirada sin barreras utilizando la mera alineación de los mismos a izquierda, derecha, arriba o abajo, para que queden relacionados mediante la aplicación de algunos de los principios básicos de la Gestalt.

Y tampoco es lo mismo leer una descripción textual de cómo funciona un elemento de una interfaz, que visualizarlo mediante prototipos en los que se ve de manera gráfica su comportamiento (por ejemplo, la secuencia de agregar un producto a un carrito de la compra en una tienda electrónica).

Esta es una de las razones por las que me gusta tanto Microsoft Visio para prototipar.

Porque entre otras cosas, permite simular una suerte de “animación de la interfaz” yendo más allá de la mera narrativa visual estática del espacio y del tiempo del papel que Tufte explica de manera brillante en su excepcional “Envisioning Information”.

En la novela de Millenium “Los hombres que no amaban a las mujeres”, uno de los personajes centrales, Mikael Blomkvist, ordena una serie de fotografías tomadas en breves intervalos durante un tiempo de cinco minutos y luego los reproduce en una secuencia animada con un programa informático en el ordenador con el fin de poder obtener una determinada historia o secuencia completa de acontecimientos que reflejan las fotografías.

De manera análoga y en lo que al diseño de interacción se refiere una de las claves para explicar interacción es la animación de la interfaz como si de una película se tratara. Con Visio se puede recrear esta animación creando “n” prototipos en los que en cada uno se presente un estado distinto de uno o varios componentes de la interfaz y visualizándolos sucesivamente hacia delante y hacia atrás mediante una función de Microsoft Visio que para mí me resulta imprescindible y que utilizó de manera habitual y automática cuando trabajo:

la tecla F5 de previsualización a pantalla completa de la página

En un archivo de Visio con, por ejemplo, 30 prototipos presionando F5 y utilizando las teclas de avanzar o retroceder podemos realizar una simulación virtual animada de un proceso  para mostrárselo al cliente o a los desarrolladores. Además, podemos exportar el archivo a un documento PDF para verlo con Acrobat Reader que permite hacer lo mismo.

Un ejemplo: la secuencia de imágenes de la interacción con un buscador de manera estática y lineal en las imágenes, a continuación, y de forma animada abriendo el PDF del enlace y usando las teclas de avanzar – retroceder página:

Animar interfaces con Microsoft Visio

Aunque los prototipos nos cuentan una narrativa y dicha narrativa se puede apoyar (y se apoya cuando trabajamos) en descripciones textuales al margen y llamadas mediante círculos a las mismas, fijaros en la fuerza descriptiva que transmite un PDF en el que el cliente puede “animar” la interfaz:

Animar interfaces en Microsoft Visio (PDF)

Podéis abrir el archivo y utilizar las teclas de avanzar – retroceder para visualizar la interacción.

El siguiente vídeo es una propuesta de rediseño para las tabs de Firefox que presenté en su día a uno de los primeros Concept Series de Mozilla Labs (os recomiendo verlo a pantalla completa con resolución Full HD que es como mejor se aprecian los detalles). La captura la hice con Camtasia y es una sucesión de 120 prototipos previsualizados a pantalla completa:

En un trabajo normal no se debe llegar ni mucho menos a semejante grado de detalle porque los cambios que se quieran realizar son muy costosos en tiempo y esfuerzo. Para nuestro día a día, lo ideal es hacer un único prototipo para cada estado de interacción de un componente. En plan casero, con las teclas de avanzar retroceder página podemos controlar manualmente los tiempos para acelerar o retardar la animación y si deseamos algo más profesional, podemos editarlo posteriormente con un editor de vídeo:

El prototipado en papel está muy bien para simular los procesos interactivos y testear las cosas de manera rápida, a bajo coste y en un estado inicial, con el fin de comprobar si funcionan correctamente o si existe algún problema serio de usabilidad. Está metodología además, es muy útil y práctica para algo más formal y trabajado dado que, además de tener la posibilidad de animar la interfaz, podemos generar directamente un documento entregable en PDF.

Es fantástico poder enseñar directamente en pantalla y mostrar de forma animada a los compañeros de desarrollo y al cliente cómo van a funcionar las cosas.

El equipo de UX de Mozilla utiliza la comparación de múltiples pequeños usando imágenes estáticas. Ponen todos los estados de interacción de un componente en una misma y larga imagen. Al lado de cada uno de ellos se acompaña una descripción textual que lo explica.

El siguiente es un ejemplo del funcionamiento de Ubiquity en la barra de Firefox para un futuro comando “Shop for” al que se le aplican modificadores (por cierto, acabo de descubrir que Flickr permite descargarse la imagen en el formato original en que la subió la persona que creó el archivo y que en este caso se puede editar directamente en Fireworks :D

Ubiquity - Shop for comand + modifiers. Prototipo original de Aza Raskin

Ubiquity – Shop for comand + modifiers. Prototipo original de Aza Raskin

Si os animáis, me gustaría conocer vuestra opinión y vuestras metodologías de trabajo acerca de cómo hacéis para simular la cinestesia -la animación-, los movimientos y las transiciones- con las que tenemos que bregar cada vez más. Prototipos, tipología de notaciones para describir elementos y tiempos que uséis, cómo indicáis los estados de interacción etc.

--

 

Tab Candy o la evolución de los sistemas operativos según Mozilla

Hay hitos que marcan puntos de inflexión en la Historia de la World Wide Web.

Tab Candy es uno de ellos

Por fin Mozilla está enseñando los dientes ante los apabullantes movimientos de sus competidores, especialmente de Chrome y de Opera, y su acelerado ritmo de desarrollo.

Y lo hace con estilo. Con una derrochadora muestra de creatividad, innovación, talento y diseño logrando que las novedades que presentan terceros navegadores parezcan no tener más que un carácter meramente anecdótico.

Tab Candy es mucho más que un simple add-on. Es el primer vistazo que nos permite echar Mozilla a lo que puede ser la base de la nueva generación de sistemas operativos que se nos vienen encima. Una generación de sistemas que se van a caracterizar por:

  • Ser ubicuos: Podremos utilizarlos en cualquier momento, desde cualquier lugar con conexión a Internet. En lo que respecta a Firefox además de la versión para PCs, laptops y notebooks, está disponible para móviles la versión para Nokia, y en beta, para Android.
  • La independencia de dispositivo: Podremos usarlos en, y con cualquier tipo de dispositivos, cada versión adaptada a las características del hardware correspondiente.
  • Estar centrados en la Nube: Ser sistemas operativos nativos de, y concebidos para  la World Wide Web.
  • Estar sincronizados y ofrecer escritorios virtuales: En el momento en que el dispositivo correspondiente tenga un punto de conexión con Internet la sincronización será automática y transparente para el usuario. Los documentos, las fotografías, las canciones, los libros se almacenarán en la nube en un espacio personal de cada individuo. Mozilla acaba de lanzar Firefox Home que permite sincronizar con el iPhone el historial, los bookmarks y las pestañas que estén abiertas en el ordenador o dispositivo de sobremesa. Por otra parte Sync, es un proyecto que se ha graduado en los Labs, que permite sincronizar toda la información personal entre navegadores instalados en diferentes equipos. En el momento actual y según declaran en la página del proyecto está sufriendo cambios de interfaz de usuario para su plena integración con Firefox 4.
  • Ser la identidad digital. Lo estamos viendo en las últimas distribuciones de las diferentes versiones de Linux y lo vamos a ver en Firefox. El sistema operativo tiende a perder su carácter de sistema operativo (y por ende su nombre rémora de una época caracterizada por centrarse en el software y no en las personas) para convertirse en un sistema personal. El reto será gestionar la privacidad de la persona, su identidad digital, y aquí, Firefox tiene mucho que decir.
  • Ser sociales:  Centralizarán la gestión de toda la actividad digital social de la persona. Una persona – un navegador – un mundo de relaciones sociales. Permitirán gestionar las redes sociales en las que estemos inscritos. En este sentido, insisto, es extraordinariamente excitante lo que puede llegar a surgir de una red social descentralizada, no controlada por nadie como puede llegar a ser Diaspora, y su posible y futura integración con Firefox. En el momento actual Mozilla está desarrollando Contacts, una extensión que permitirá gestionar los contactos personales de distintas redes sociales como Facebook o Yahoo.
  • Herramientas de comunicación: Una de nuestras principales actividades como seres humanos que somos, es la comunicación. Los nuevos sistemas operativos tenderán a integrar de forma nativa y gestionar todos los servicios y herramientas de comunicaciones que usemos:
    • A corto plazo la comunicación que mantenemos a través de blogs, servicios de microblogging, correo electrónico, feeds, podcasts y vídeos.
    • A medio plazo: la comunicación con terceros mediante voz y vídeoconferencia, y la integración de servicios como la televisión o la radio.

    En este sentido, la apuesta de Mozilla para Firefox se llama Raindrop. Es un módulo que permitirá gestionar de manera conjunta el mail, los feeds y los servicios de microblogging como Twitter. Asimismo Thunderbird antes o después terminará igualmente integrándose en Firefox.

  • Plataforma de Software como Servicio en un primer momento: Las aplicaciones ya no se instalarán ni en el dispositivo, ni en el sistema operativo. Las aplicaciones residirán en la nube. No obstante y de cara a cuando no haya conexión con Internet, es llamativo el desarrollo en el que desde hace ya unos cuantos años lleva trabajando Mozilla llamado Prism. Éste módulo permitirá idealmente utilizar las aplicaciones de la nube en local aun cuando no exista conexión con la Red.
  • Herramientas de productividad en un segundo momento: Las aplicaciones como tales tenderán a evolucionar e integrarse de forma nativa e invisible con los navegadores. El futuro es Ubiquity. La barra de navegación se va a convertir en una línea de comandos o línea de lanzamiento de interacción. La barra de navegación pasará a ser el punto para comenzar a escribir un mail, buscar un libro, añadir un contacto a nuestra agenda, etc. Será una interfaz líquida que presentará una apariencia distinta de acuerdo al servicio invocado.  Lo que se venderá, o alquilará, o explotará mediante modelos freemiun basados en economía de escalas y en la Larga Cola serán servicios o funcionalidades. Para entender cuál puede ser el nuevo modelo de negocio que puede emerger es recomendable leer el artículo que publicó en su día Aza Raskin sobre la línea lingüística de comandos y el nuevo paradigma de interacción.
  • Ser gratuitos. Los beneficios no vendrán del software como producto per-se. El software será un medio para la venta de productos físicos o de terceros productos: gagdets, ordenadores, etc, o vendrán derivados de la explotación y comercialización de funcionalidades concretas invocadas a través de la línea de interacción, de la explotación de datos estadísticos del uso de los mismos, de la explotación de los datos de las búsquedas que realicen los usuarios o, simplemente serán sistemas operativos basados en desarrollos de software libre u Open Source.

Firefox se está convirtiendo paulatinamente en un sistema operativo ubicuo y en la nube. Así, es interesante observar la evolución natural que está sufriendo su interfaz, comparándola con el sistema desktop por excelencia de hoy día: Windows.

Éste es el escritorio de Windows 7:

Windows 7 - Escritorio

Ver imagen ampliada en Flickr

Esta, la interfaz de Firefox 4  Beta 3:

Firefox - Beta 3

Llama la atención las similitudes que pueden establecerse. En Firefox 4 se está dando literalmente la vuelta a la interfaz de Windows 7. Quizá no de manera consciente e intencionada pero sí de forma natural conforme evoluciona el producto.

Tanto en el sistema operativo de Microsoft como en el navegador existe un botón principal que da acceso a las operaciones más comunes:

Windows 7 - Boton de inicio

Botón de inicio de Windows 7

Windows tiene una versión centrada en el dispositivo de hardware local, en las herramientas de productividad (ofimáticas, tratamiento de imágenes, hojas de cálculo, etc) y en el ocio y entretenimiento local (mis imágenes almacenadas en mi disco duro, mis canciones almacenadas en mi disco duro… una concepción opuesta a la tendencia actual del mercado que es la de consumo del ocio bajo demanda -música, vídeos y películas- mediante streaming, y de la gestión de la identidad y de la vida digital centrada en la World Wide Web).

Por otro lado, no ha sido hasta la llegada de Vista cuando han incluido un box que facilita la búsqueda directa de programas y archivos en el ordenador local, o el lanzamiento de aplicaciones. No obstante no está integrado con la World Wide Web ni orientado a facilitar la búsqueda en la misma. Los resultados se abren en el explorador de Windows y no amplían el rango a la Web en caso de ser necesario o requerido por parte del usuario, algo que debería cambiar en próximas versiones de Windows.

En cuanto a Firefox 4 Beta 3 y a su botón de inicio, tiene una visión netcentrica orientada puramente a la gestión de las páginas web, del navegador y de la navegación realizada en una sesión concreta:

Firefox 4 - Beta 3 - Boton de inicio

Botón de inicio de Firefox 4 Beta 3

Mozilla reserva estas funcionalidades para el botón de inicio mientras que planea una Home Tab o suerte de “escritorio” como pestaña que se abra al comenzar la sesión en Firefox y que contendrá accesos directos a las aplicaciones en la nube más utilizadas por el usuario, contactos, historial de navegación, etc.

Esta aproximación es similar a la de otro gran jugador que está por llegar a la vuelta de vacaciones, Chrome OS, aunque en este caso parece que el botón de inicio tendrá la misma apariencia que el resto de pestañas de aplicaciones en línea.

Llama la atención la imagen del avatar del usuario presente en la esquina inferior izquierda junto a su dirección de mail ¿nombre personal en el futuro?, y el botón para deslogarse o cerrar la sesión. Ello implica que en cualquier dispositivo sea nuestro o de terceros, en el que esté instalado Chrome OS podremos nada más logarnos, disfrutar de nuestro sistema operativo personalizado, documentos, música, etc.

Botón de inicio de Chrome OS

No obstante y aun cuando constituyen avances significativos, con Tab Candy se está dando un nuevo paso en su conceptualización e interfaz:

Tab Candy es un metaescritorio. Algo parecido a los “Espacios” -Spaces- y al Expose de Leopard aunque no igual.

En su interior se crean lo que Aza denomina espacios de trabajo que no son sino agrupaciones o grupos de pestañas realizadas por el usuario de acuerdo a sus propias necesidades y a su forma de organizar y categorizar la información del mundo (cada uno, tenemos una visión particular y diferente que adquirimos en base a nuestras experiencias, nuestro conocimiento, vivencias cotidianas etc. El conocimiento que evoca un ítem en la mente de una persona y las asociaciones que realiza con otras entidades informativas son propias de cada uno y diferentes de las de los demás. Por ende, un buen sistema de recuperación de información debería facilitar la creación de forma natural de estas agrupaciones para cada usuario. Tab Candy lo hace).

Tab Candy de Firefox - Nuevo sistema operativo de Mozilla

Ver imagen ampliada en Flickr

La disposición espacial de los espacios de trabajo según quiera el usuario (puedo reordenarlos y asignarles la posición que quiera arrastrándolos donde le parezca oportuno) y la organización de las pestañas en los mismos, facilita su posterior búsqueda y acceso. Adicionalmente el usuario podrá nombrar los grupos como desee y, en el futuro, personalizar su apariencia, guardarlos, compartirlos con terceros, etc.

Por último, en la parte inferior tenemos disponible un acceso rápido a las últimas pestañas abiertas por el usuario.

Tab candy es un metaespacio informativo que va más allá de la metáfora actual de los escritorios de los actuales sistemas operativos y quizá lo más interesante, es que subsume en sí la World Wide Web. Es un prototipo funcional que convierte en realidad parte de la visión del Zoom World de Jef Raskin: una interfaz de zoom inmersivo cuyos únicos límites eran los de la World Wide Web.

Una posible, bellísima y potente visualización de la Red hipertextual de redes por excelencia, con un extraordinario potencial.

Tab Candy es algo nuevo y fresco. Firefox está tendiendo a convertirse en un sistema operativo personal, en la nube.

Por fin.

Y tenía que venir, como no, por parte de los chicos de Mozilla y de la innovación colectiva de los Concept Series. Bien por Aza y por el equipo de Experiencia de Usuario de Firefox y Mozilla Labs.

Con este post, esta casa cierra por vacaciones hasta septiembre. Disfrutar del verano, sed malos todo lo que podáis y a la vuelta queridos lectores, nos reencontramos.

--

 

Switch to our mobile site