03/05/2017
by Ricardo Barra
0 comments

Sutil cambio en el ícono para adjuntar archivos en Gmail

¡Qué sutileza de Gmail! No sé cuánta gente se fija en estos detalles pero yo siempre los observo porque me llaman la atención y creo que constituyen pequeños aciertos de usabilidad que mejoran la experiencia del usuario, aunque sea de manera casi imperceptible.

Antes de redactar un nuevo correo en Gmail y adjuntar un archivo cualquiera, el botón para adjuntar es un clip. Un simple y discreto clip, nada más:

No hay archivos adjuntos

Sin embargo, cuando ya has adjuntado uno o más archivos, el ícono se transforma en una especie de carpeta con un clip. Es decir, Gmail indica, a través de esa sutileza, que ya hay un archivo adjunto y que puedes seguir acumulando más adjuntos.

Ya existe un adjunto

¿Lo habían notado antes? ¿Qué les parece?

09/11/2016
by Ricardo Barra
2 Comments

Google Local Guides detecta horarios de atención basándose en fotografías

Local Guides, de Google, es una comunidad global de exploradores (personas como tú o yo) que comparten sus descubrimientos en Google Maps. Es una comunidad colaborativa que va mejorando la experiencia de Google Maps gracias a la ayuda desinteresada de miles de colaboradores a lo largo del mundo, quienes descubren y agregan nuevos lugares en ciudades y pueblos, sugieren cambios, hacen correcciones y van ganando puntaje y beneficios.

Ahora que sabes en qué consiste Local Guides, te cuento que este servicio acaba de implementar una función que ayuda a publicar más rápido las modificaciones que uno realice, específicamente con respecto a los horarios de atención a público de algún negocio o local comercial.

Horario de atención

Si ves que un horario de atención está malo o desactualizado, puedes sugerir una edición a través de la aplicación móvil pero además Google está invitando a que saques una foto del letrero donde están publicados los horarios de atención, para que la modificación se realice de forma más rápida en Google Maps. Esto gracias a una tecnología de reconocimiento de texto que Google viene utilizando hace años en letreros y señalética.

29/07/2016
by Ricardo Barra
1 Comment

Cómo silenciar pestañas o páginas abiertas en Firefox

Una de las tantas razones por las que me gusta Firefox, las cuales he explicado previamente, es la funcionalidad que permite silenciar una página que esté abierta. Estos detalles son aciertos de usabilidad y experiencia de usuario. En este caso es bastante útil para “mutear” o apagar el sonido de alguna página abierta, llámese YouTube o cualquiera que esté emitiendo un sonido, sin tener que ir a esa página, hacer scroll, detener la reproducción, etcétera.

Aquí pueden ver la funcionalidad. Basta con hacer clic sobre ícono del parlante.

Silenciar Firefox

Silenciar Firefox

Cabe destacar que Safari fue el primer navegador en implementar esto y que en Chrome también se puede hacer pero de una forma innecesariamente más compleja: haciendo clic con el botón derecho sobre la pestaña y luego eligiendo la opción de silenciar.

 

20/06/2016
by Ricardo Barra
0 comments

Otro sutil acierto de usabilidad en Gmail

Siguiendo con mi serie de aciertos y errores de usabilidad en diferentes interfaces web o aplicaciones en general, he descubierto esta útil alerta que ofrece Gmail. Cuando escribimos un correo electrónico y vamos a enviar un archivo adjunto, nos advierte en caso de que se nos haya olvidado efectivamente adjuntar ese archivo.

Tal cual. Si en el cuerpo del mensaje escribes algo como para revisar la propuesta, debes abrir el archivo adjunto, y resulta que por error olvidaste adjuntarlo, Gmail nos avisa.

Alerta sobre archivo adjunto en Gmail

Es un acierto, una sutileza que puede ayudarnos a ahorrar tiempo 😉 Aquí pueden ver otros aciertos o errores de usabilidad de Gmail.

14/06/2016
by Ricardo Barra
1 Comment

OpenStreetMap: proyecto colaborativo para crear mapas libres y editables

Muchas veces debo viajar a ciudades más pequeñas y, al menos hasta ahora, Google Maps no tiene un registro completo de las calles o lugares de interés de esas localidades o pueblos. Generalmente necesito información acerca de calles o pasajes ubicados en sectores periféricos, lo cual simplemente no aparece en la herramienta geográfica de Google. Para eso existe una herramienta mejor: OpenStreetMap.

Se trata de un proyecto colaborativo (amo esa palabra), libre (cualquiera puede participar, en cualquier plataforma) y altamente editable. Tal como la Wikipedia es creada por los propios usuarios y cualquiera de nosotros puede crear artículos o editar información ya existente para corregirla o complementarla, OpenStreetMap permite que cualquier persona pueda crear calles, pasajes, lugares de interés (restoranes, plazas, empresas, edificios, monumentos, etcétera), o simplemente corregir y actualizar información en cualquier lugar de Chile y el mundo.

Hoy “navegué” en el mapa a la ciudad Tocopilla, de la Región de Antofagasta, y me di cuenta de que había un error de digitación en un alojamiento de la ciudad. Decidí crear una cuenta y hacer yo mismo la modificación. Era un error pequeño… un detalle. Decía descando en vez de descanso, pero quise probar la herramienta de edición de OpenStreetMap. Genial. Es muy sencilla, tiene un tutorial en español y en 5 minutos estás listo para hacer tus propios cambios. Aquí está el antes y el después:

OpenStreetMap con error de digitación

ANTES

OpenStreetMap corregido

DESPUÉS

Además, vean la cantidad de información sobre un sector de Tocopilla que entrega Google Maps:

Google Maps Tocopilla

Y ahora veamos el nivel de detalle que nos muestra OpenStreetMap:

OpenStreetMap-Tocopilla

¿Qué tal? Por esto y mucho más es que siempre promuevo el software libre y colaborativo 😉

24/05/2016
by Ricardo Barra
0 comments

Mejorar la usabilidad y experiencia de usuario es fácil

Muchas veces, los pequeños detalles son los que pueden producir grandes cambios en la experiencia de un usuario de una página web o en cualquier tipo de interfaz.

Hoy estuve buscando símbolos para usar en Twitter y me encontré con un sitio web que ofrece un montón de emoticones. Lo malo es que están todos demasiado juntos, muy apretados, y a ratos cuesta visualizar bien cada uno de ellos. Yo tengo buena vista pero hay personas para las que esta serie de íconos es realmente difícil de apreciar.  Fíjense en esta imagen:

Símbolos apretadosComo pueden apreciar, todos los símbolos están demasiado juntos entre sí, sin que realmente sea necesario. Decidí intervenir un poco las hojas de estilo en cascada (CSS) de esa página y darle más margen a los íconos. Miren el resultado:

Símbolos separados

¿Cuánto tardé en hacer eso? Menos de un minuto. ¿Cuánto cuesta mejorar la usabilidad y accesibilidad de una interfaz web? En este caso, prácticamente nada.

03/05/2016
by Ricardo Barra
0 comments

Cómo añadir una descripción o texto alternativo a una imagen en Twitter

Por fin Twitter añadió una funcionalidad que permite agregar una descripción a las imágenes, con el objetivo de que todos puedan entenderlas, incluyendo las personas ciegas o con alguna discapacidad visual. Bueno, tal vez algunos no puedan verlas pero al menos sabrán a qué se refiere cada imagen que los usuarios compartan en esa red social, siempre que éstos habiliten la función y sean lo suficientemente solidarios como para dedicar unos segundos a describir el contenido de una imagen o fotografía.

La descripción, o texto alternativo, permite incorporar un texto a una imagen de tal forma que se pueda explicar su contenido. La función, ya disponible en iOS (iPhone, iPad) y Android, tiene que activarse desde el menú de Configuración, donde dice Accesibilidad.

Menú accesibilidad

En el apartado de Accesibilidad, se encuentra la opción “Redactar descripciones de imágenes”. Esa opción debe estar activada.

Escribir descripciones de imagen

Para añadir la descripción, el usuario tiene que iniciar la escritura de un tweet e insertar una o varias imágenes. Al pulsar sobre la imagen, aparecerá la opción de añadir una descripción y, más tarde, una persona ciega o con deficiencia visual podrá acceder a ella con tecnologías de asistencia tales como los lectores de pantalla. ¡Claro! Las redes sociales son para todo el mundo, no sólo para algunos.

Añadir descripción

30/04/2016
by Ricardo Barra
0 comments

Juego en Google Chrome cuando no hay conexión a Internet

Descubrí esta interesante, creativa y lúdica pantalla de personalización que ofrece Google Chrome cuando no hay conexión a Internet. Estos detalles pueden parecer inútiles pero la verdad es que mejoran la experiencia de usuario de esta interfaz en particular. Muchas veces hay que esperar un buen rato sin conexión y qué mejor solución que esperar jugando. Todo un acierto de usabilidad y experiencia de usuario de Google Chrome. ¿Qué les parece?

12/01/2016
by Ricardo Barra
0 comments

Cómo auto completar frases o textos frecuentes en Outlook

Decidí escribir este tutorial para enseñar algo simple y muy sencillo de realizar, en este caso, en la aplicación Microsoft Outlook. ¿Te ha pasado que hay ciertas frases que escribes muchas veces al día o con gran frecuencia? ¿Te gustaría ahorrar tiempo al teclear frases, palabras complicadas, direcciones frecuentes, nombres y otros textos que utilices de manera cotidiana en tus correos electrónicos? ¿Cansado de escribir las mismas respuestas una y otra vez?

Por ejemplo, yo trabajo en el Ministerio de Vivienda y Urbanismo y muchas veces a la semana debo escribir, una tras otra, las 5 palabras que componen esa frase: Ministerio de Vivienda y Urbanismo. Afortunadamente, Outlook tiene una función fácil de usar para que, al comenzar a escribir determinada frase o combinación de palabras, la frase se auto-complete de manera rápida. Sigue estos pasos:

1. En Outlook, redactar un nuevo mail o correo.

2. En el cuerpo del mensaje, escribir la frase que quieras fácilmente auto completar. En este caso, usaré como ejemplo la frase “Buenos días querido equipo”.

Seleccionar el texto que se quiere autocompletar

3. Escriben la frase y la seleccionan.

4. Mientras la frase está seleccionada, ir al menú “Insertar”, elegir la opción “Elementos rápidos” y hacer clic en “Guardar selección en una galería de elementos rápidos…”.

Elementos rápidos de Outlook5. En el cuadro de diálogo que se abre, poner un nombre a la frase, elegir la galería “Autotexto” y aceptar.

Bloque de creación

¡Listo! La próxima vez que escriban un mail y necesiten escribir esa frase, basta con que comiencen a escribir los primeros caracteres de “Buenos días querido equipo” hasta que aparezca la opción de auto completar.

Ejemplo de autotextoEn ese momento presionas Enter y la frase se completa. Si no deseas que se auto complete, tal vez porque vas a escribir algo distinto, basta con seguir escribiendo. Esto puede ser muy útil para frases largas y repetitivas, así como para nombres complejos. ¿Qué otro uso le darías?

Por último, para eliminar o editar algún bloque de Autotexto, la mecánica consiste en ir nuevamente a “Elementos rápidos”, posicionarse sobre “Autotexto”, y hacer clic con el botón derecho sobre el mensaje a editar o eliminar, tal como lo muestra la siguiente imagen.

Editar o eliminar autotexto

Espero que les sirva en sus trabajos 😉

14/07/2015
by Ricardo Barra
2 Comments

2 pequeños pero útiles aciertos de usabilidad en Gmail

A continuación veremos otro acierto de usabilidad en una página, sitio o aplicación web, en este caso Gmail. Cuando estás leyendo o buscando correos en Gmail, es fácil perderse en ellos si el remitente es el mismo o tiene el mismo nombre, como se ve a continuación:

Listado de correos en Gmail

Muchos correos similares después de realizar una búsqueda

En un listado grande de correos con filas muy similares o idénticas entre sí, es útil tener estas dos ayudas visuales.

1. Aquellas dos líneas punteadas verticales que indican sobre qué fila o correo se encuentra posicionado el mouse, sin haber hecho clic aún. Claramente es útil pero podría y debería ser mucho más visible y contrastante aún.

Indicadador de sobre qué correo está el cursor

2. Al hacer clic en uno de esos correos, leerlo y luego volver atrás para buscar otro, es fácil perderse y no saber en cuál hice clic recién. Para eso, la interfaz de Gmail nos presenta una línea vertical de color azul. Esta es una excelente y sutil forma de saber que ese correo fue recién leído.

Correo leído

La barra azul indica que ese es el correo que acabo de leer

Detalles como éstos mejoran sustancialmente la usabilidad y experiencia de usuario de una interfaz web 😉

23/10/2014
by Ricardo Barra
1 Comment

Continua la guerra de los smartphones

Hace 3 ó 4 meses leí un ránking con los mejores celulares del mundo. El listado era el siguiente:

N° 19: BlackBerry Q10
N° 18: Motorola Moto E
N° 17: LG G Flex
N° 16: LG G2
N° 15: HTC One Max
N° 14: Samsung Galaxy S4
N° 13: iPhone 5C
N° 12: HTC One
N° 11: Nokia Lumia Icon
N° 10: Nokia Lumia 1020
N° 9: Nokia Lumia 1520
N° 8: Sony Xperia Z1S
N° 7: Samsung Galaxy Note 3
N° 6: Motorola Moto X
N° 5: Google Nexus 5
N° 4: Samsung Galaxy S5
N° 3: HTC One (M8)
N° 2: HTC One (M8) Google Edition
N° 1: iPhone 5S

Han pasado pocos meses y el mercado ya nos ha presentado nuevos modelos de las más diversas compañías y marcas. En ese momento, lo que me llamó más la atención fue ver más de uno de los celulares Nokia Lumia en este prestigioso listado. Se nota que los Lumia han sido todo un acierto, independiente de que Microsoft haya comprado la marca Nokia.

Hoy ya tenemos una nueva versión del Motorola Moto X, así como una nueva entrega del iPhone. Más allá de los ganadores -y dejando de lado los gustos personales-, creo que los ganadores con estas “competencias” somos nosotros, los consumidores. Mientras más competencia y movimiento haya en el mercado, mayor es nuestro abanico para poder elegir el dispositivo que más satisfaga nuestras necesidades.

Ha llegado la hora de dejar de lado los fanatismos por una u otra marca o sistema operativo, y elegir lo que simplemente nos acomode, tal como lo hacemos hace décadas con los automóviles y tantos otros productos.

Será interesante ver qué ocurre en distintos países con la entrada de los celulares con sistema operativo Firefox, de Mozilla, así como los que cuentan con Ubuntu (Linux). ¿Llegarán masivamente a Chile y Latinoamérica? ¿Qué opinan ustedes de los Nokia Lumia?

Si alguien tiene por ahí un listado similar pero de tablets, sería muy interesante de analizar 😉

17/06/2014
by Ricardo Barra
0 comments

Acelerar tu página web retardando la carga de ciertos contenidos secundarios

Cuando en una página web o blog hay muchos comentarios, cada uno de ellos tiene un avatar asociado. Cada avatar es una imagen distinta y si el post o artículo es popular, podemos tener decenas de imágenes al final de la página que retrasarán la velocidad de carga de ésta. Peor aún, como en esos casos hay que hacer muchas solicitudes al servidor (HTTP requests) para que cargue cada imagen por separado, eso puede impedir que se carguen antes otros elementos importantes para el aspecto de la página, tales como estilos CSS u otras imágenes.

Para acelerar la velocidad de carga de una página web y así ofrecer una mejor experiencia al usuario, existen formas de lograr que los avatares u otros elementos sean los últimos en cargar. Muchas veces no necesitamos que las imágenes de perfil de los comentaristas se muestren inmediatamente, ya que primero nos interesa leer el contenido principal. Puede incluso que ni siquiera necesitemos ver los comentarios.

Hay varias formas de retardar la carga de algunos contenidos. En esta página se exhibe un sencillo ejemplo en donde primero carga todo el texto y segundos después aparecen las imágenes.

Yendo un poco más lejos -y siempre tomando en cuenta que el objetivo es brindar una experiencia de usuario lo más rápida posible a nuestros queridos visitantes, ahorrando ancho de banda y entregándoles pronto lo que ellos buscan, dejando para después los “accesorios”- existe la posibilidad de ir cargando contenido a medida que el usuario va haciendo scroll hacia abajo, tal como lo practica muy bien Amazon.

En este tutorial (en inglés) aprenderás cómo ralentizar o mejor dicho lentificar la carga de algunos elementos en tus sitios web 😉

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: