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
1 Comment

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 😉

29/04/2014
by Ricardo Barra
2 Comments

Cómo bajar o disminuir el peso de una o varias imágenes de forma online

Mucha gente aún no sabe cómo optimizar imágenes para que se vean bien pero pesen menos. Es frecuente ver correos electrónicos que no llegan a destino por contener imágenes adjuntas muy pesadas, entonces muchos recurren a servicios como Dropbox o Google Drive para subir imágenes que el destinatario pueda descargar.

Esto genera tres problemas:

1. Subir imágenes pesadas a la nube es algo que puede quitarte mucho tiempo
2. La gran mayoría de las veces el receptor no necesita las imágenes en tan alta calidad
3. El espacio en los servicios mencionados no es infinito y muchas veces se hace insuficiente

Para ahorrar tiempo y aliviar el trabajo de quienes constantemente tienen que enviar (y recibir) imágenes pesadas, existe la alternativa de optimizar las imágenes o fotografías para que luzcan tan bien como la original pero pesen mucho menos. Además, se pueden procesar imágenes en lote (batch image processing): optimizarlas, redimensionar, rotar, aplicar efectos, cambiar el formato, todo con unos pocos clics.

Lo bueno es que existen servicios de procesamiento por lote de imágenes que operan directamente en la Web, es decir, no se necesita instalar ningún programa. Si bien hay decenas de software que sirven para esto, tales como Gimp, Photoshop, Fireworks, High Quality Photo Resizer o XnConvert, yo les recomiendo el servicio gratuito PicResize.

Veamos cómo funciona:

1. Entrar a http://picresize.com
2. Para editar sólo una imagen, hacer clic en “Browse” y elegir la imagen que deseen procesar.

Elegir imagen para procesar

En este caso trabajaré con una imagen que pesa 8,28 Mb. Si tuviésemos que enviar 10 imágenes como ésta, el correo pesaría unos 90 Mb y casi ningún servicio de correo aguanta ese envío.

3. Elegir la imagen y hacer clic en “Continue” (continuar)
4. Luego de cargar la imagen, en la pantalla siguiente tenemos la posibilidad de cortar, rotar, voltear, achicar en algún porcentaje, ponerle bordes y efectos, enfocar, blanco y negro, etc. Para este caso sólo usaré dos opciones: “Resize your picture” (redimensionar) y “Save as” (Guardar como).

Opciones para redimensionar imagen5.    En “Resize your picture” voy a elegir “Custom Size” (tamaño personalizado). El “Width” (ancho) lo dejaré en 1024 pixeles y el “Height” (alto) lo dejaré en blanco para que la imagen se adapte, siga siendo proporcional y no se deforme.

Redimensionar con tamaño personalizado
6.    Luego, si se trata de una imagen fotográfica o con muchos colores (la gran mayoría de los casos), sugiero siempre usar JPG como formato y calidad “Better” en la sección de “Save as” (Guardar como).
7.    Presionar I’m done, Resize My Picture!”
8.    ¡Listo!

Ahora tenemos una imagen de 1024 x 428 pixeles, que pesa tan sólo 115 kb!! La anterior medía 11812 x 4936 pixeles.

Proceso terminado
Por último podemos ver la imagen (view image), volver a editarla (resume edit), guardarla en el computador (sabe to disk), y compartir en redes sociales como Flickr, Twitter, Pinterest, etc. (save to web).

Precaución: esta imagen se queda sólo unos minutos en los servidores, por lo que no dejen pasar mucho tiempo antes de descargarla.

Ahora, para editar varias imágenes a la vez, por lotes, hay que ir al link que dice “Batch resize” o hacer clic acá: http://www.picresize.com/batch.php. En este caso hay que presionar “Add files” (añadir archivos), luego seleccionar las imágenes manteniendo presionada la tecla “Control”, presionar “Upload” (subir), y seleccionar un nuevo tamaño para todas las imágenes (“Choose new size for all pictures”). Nuevamente elegir “Custom size” (tamaño personalizado), puede ser 1024 ó 1600 pixeles de ancho, el alto se deja en blanco, elegir JPG como formato y darle al botón “Batch Resize!”.

En breve ya estarán redimensionadas. Por último hay que descargarlas donde dice “Download Zip File of your resized pics”. Descargar ese archivo comprimido y ¡listo! Ya lo pueden enviar por mail 😉

Listo el procesamiento por lotes

25/03/2014
by Ricardo Barra
0 comments

Problema de accesibilidad en ventana de bloqueo de Windows

Hace días pensaba en un gran problema de accesibilidad, en Windows, que afecta a personas con algún grado de discapacidad, como aquellos que tienen sólo un brazo o que padecen algún problema de movilidad reducida.

Me imagino que todos conocen la pantalla de bloqueo de Windows:

Pantalla de bloqueo de Windows

Como podrán apreciar, para salir de esa interfaz hay que presionar tres teclas al mismo tiempo: Control, Alt y Suprimir. Para una persona que no tenga dos brazos (o dos manos) debe ser una tarea muy compleja, entonces pensé que Microsoft debe haber diseñado una forma de facilitar este proceso. Puedo estar equivocado pero al parecer dicha solución no existe.

Para hacer la prueba, bloqueé la pantalla de un computador con Windows 7. Si se fijan bien, abajo a la izquierda hay un botón que sirve justamente para configurar opciones de accesibilidad. Busqué entre las opciones y hay una alternativa que dice “Escribir sin el teclado (Teclado en pantalla)”:

Teclado en pantalla

Al aplicar, me apareció un teclado virtual:

Teclado virtual en Windows

Con el mouse, seleccioné las teclas Control + Alt + Suprimir pero no pasó nada. No pude desbloquear la pantalla… ¿de qué sirve entonces ese teclado si ni siquiera puedo entrar al sistema?

Tal vez haya una opción de desbloquear de manera más simple, sin tener que usar dos manos, pero yo no la encontré. ¿Alguien tiene la solución?

01/02/2014
by Ricardo Barra
3 Comments

Por qué el gobierno y el sistema educativo DEBEN preferir software libre

Hoy he considerado necesario dedicar unos minutos para explicar, a través de 3 sencillos ejemplos, por qué el Estado y el sistema educativo tienen el DEBER de preferir software libre.

Este tema da para mucho más pero esta vez sólo describiré algunos escenarios que demuestran que somos un país esclavo de tecnologías privativas.

1. Aún hay sitios web y aplicaciones que sólo funcionan bien con Internet Explorer. Para usar ese navegador, estoy obligado a usar Windows, y para usar Windows tengo que obligadamente gastar decenas de miles de pesos. Si una institución gubernamental decide construir sistemas a los que sólo se puede acceder utilizando una tecnología privativa (que además es mala y cara), me convierten, como ciudadano, en esclavo de ese navegador.

Lamentablemente eso sigue ocurriendo mucho en Chile, debido a la clara ignorancia de muchos jefes de informática.

2. En mi anterior trabajo, quisimos rediseñar el sitio web corporativo. El problema fue que para migrar los miles de contenidos, necesitábamos el modelo de datos del sitio. La empresa que construyó el administrador de contenidos se negó a entregarnos el modelo de datos, con lo que el costo de la migración se hacía altísimo, ya que la única solución era contratar a un ejército de personas que trabajaran todo el día transfiriendo contenidos de forma manual.

Entonces depender de una tecnología propietaria es someterse a una verdadera esclavitud tecnológica, lo cual termina perjudicando a los usuarios finales: los ciudadanos.

3. Cada vez más países están promoviendo el software libre como norma y el software privativo se utiliza sólo de manera excepcional. Supongamos que un estudiante universitario chileno se gana una beca para ir a trabajar a Italia. En ese país, están migrando a LibreOffice, por lo que el estudiante, que estuvo toda la vida obligado a usar Microsoft Office, tiene serios problemas para trabajar. Las malas políticas tecnológico-educativas en Chile lo hicieron dependiente de una sola tecnología. Que quede claro y suene fuerte: es como si lo hubiesen drogado durante toda su vida y ahora no puede salir de esa especie de adicción. Es como depender de un medicamento, a la fuerza. ¿Les parece correcto?

Dicho todo lo anterior, puedo afirmar con propiedad que el Estado chileno es esclavo de tecnologías privativas. El Estado somos todos: tú, yo ellos. Finalmente: las decisiones de las instituciones gubernamentales -que en su mayoría prefieren usar software privativo en vez de software libre- convierten a Chile en un país donde reina la esclavitud tecnológica.

¿Vale la pena luchar por cambiar este escenario? Claro que sí.

29/10/2013
by Ricardo Barra
0 comments

Cómo hacer que un tweet se borre automáticamente después de un tiempo definido

Antes de comenzar debo pedirles disculpas por todo el tiempo que ha pasado desde la última vez que escribí en mi blog, pero han sido meses muy agitados, con un cambio de ciudad incluido, por lo que espero ir retomando el ritmo de publicación dentro de muy poco tiempo. Además, espero mostrarles un completo rediseño de este espacio de aquí a comienzos del 2014 😉

En esta nueva entrega de Placer Digital les voy a enseñar cómo hacer que un tweet expire, se borre o se autodestruya automáticamente después de un tiempo especificado por ustedes, que puede ser definido en minutos, horas o días.

El truco es sencillo y muy útil para ciertas ocasiones, como por ejemplo cuando queremos publicar un cupón de descuento que sólo durará algunas horas; o tal vez en caso de que queramos publicar anuncios clasificados por un corto período de tiempo.

Los invito a seguir estas instrucciones para que aprendan el arte de hacer que uno o más tweets se borren después de un periodo definido de tiempo.

1. En primer lugar deben ingresar al sitio web Twitterspirit.com (la aplicación también se conoce como Spirit for Twitter o Spirit a secas).

2. Ahora hagan clic en el botón que dice “Get Spirit”, como se puede apreciar en la imagen de abajo

Twitter Spirit

3. En la página siguiente, debes iniciar sesión y/o autorizar a la aplicación para que se conecte con tu cuenta de Twitter. Yo siempre recomiendo tener Twitter abierto al momento de conectar una nueva aplicación.

4. ¡Listo!

¿Cómo funciona? Muy simple. Basta con usar hashtags. Por ejemplo, si quieres que un tweet se borre en 10 minutos, debes poner el hashtag #10m. Para que se borre en 5 horas sería #5h, y #3d para que expire en 3 días.

De esa forma, el tweet que contenga el hashtag se borra cuando tú decidas, independiente de si publicas desde la web (Twitter.com) o desde tu smartphone o teléfono.

15/07/2013
by Ricardo Barra
0 comments

Novedades en Twitter: aumenta tu seguridad, elimina la publicidad y sube videos con Android

Hace algunos días Twitter lanzó servicios nuevos e incorporó algunas mejoras para brindarle más seguridad a los usuarios. Revisemos paso a paso las novedades.

Vine para Android. Como ya muchos saben, hace un tiempo que los usuarios de iOS pueden subir videos de corta duración (6 segundos) a Twitter y ahora es el turno de Android. Los invito a descargar la aplicación oficial de Vine para Android para que puedan hacer mini videos como éste:

Mejoras en la seguridad. Ahora puedes agregar un segundo control o verificación en el inicio de sesión para asegurarte que nadie más tenga acceso a tu cuenta. Para eso debes añadir y confirmar un número de teléfono y dirección de correo electrónico, similar a lo que ya tiene Gmail. ¿Cómo activar este doble registro? Es muy simple, pero debes vivir en uno de los países que encontrarás acá 🙁

Publicidad. Twitter quiere mejorar la forma en que nos entrega contenido publicitario. Mientras ellos experimentan nuevas formas de publicidad, tú como usuario puedes deshabilitar los famosos tweets pagados. Para serles muy honesto, no sé realmente si éstos se deshabilitarán o lo que ocurre es que Twitter no nos ofrecerá publicidad especialmente orientada de acuerdo a nuestros intereses. Para desactivar esa publicidad, deja sin marcar la casilla que dice “Contenido promocionado” en la configuración de tu cuenta.

Si alguien tiene más información al respecto, agradezco desde ya los comentarios.

Follow

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

Join other followers: