Archivo de la categoría: Desarrollo web

Artículos que se refieren a diferentes aspectos del desarrollo de sitios web.

Otra forma de contar historias

Varias veces en este blog hemos hablado de cómo aparecen y se desarrollan nuevas formas de contar historias que generan experiencia entretenidas para quienes consumen esos contenidos.

Volvemos a ese camino con una publicación hecha la semana pasada por The New York Times (requiere suscripción) que usa texto, fotos e imágenes animadas (casi videos) para dar cuenta de una característica que la crítica de espectáculos Amanda Hess descubrió a través de hacer un recuento de las películas de Meryl Streep: su uso dramático de los lentes. Sí, lentes, de sol, ópticos, de cualquier tipo. Con ellos actúa, revela, esconde y presenta más de lo que cabe en la pantalla.

Para ello va entregando argumentos y gracias a un acertado uso del CSS (en particular flexbox), se van desplegando imágenes que van apoyando su historia. El texto no son más de 5 mil caracteres (o sea, dos carillas tamaño carta) que son presentadas en pequeños fragmentos de no más de 250 caracteres, que aparecen rodeados de cuadros con imágenes relativas a lo que se va contando.

Naturalmente, se hace un uso muy interesante del tamaño de pantalla, por lo que la historia se va adaptando al dispositivo que tenga la persona que lo está mirando y por ello pasa de tres columnas de imágenes en tamaño escritorio, a dos columnas en tamaño móvil.

La pantalla de inicio de la historia que une texto e imágenes, vista en el computador.
La pantalla de inicio de la historia que une texto e imágenes, vista en el computador.
La pantalla de inicio de la historia que une texto e imágenes, vista en un celular.
La pantalla de inicio de la historia que une texto e imágenes, vista en un celular.
El relato se presenta en una caja con un fragmento de la historia, no más de 200 caracteres.
El relato se presenta en una caja con un fragmento de la historia, no más de 200 caracteres.

Lo que me parece más atractivo de este formato es que la autora no escribe menos, sino que una cantidad equivalente a lo que ha hecho en columnas anteriores y la diferencia está en la presentación y la manera en que se van presentando los fragmentos, ayudando a lectores acostumbrados a una cantidad de texto estilo Twitter o Instagram. En este sentido, la adaptación es clave y hace que la entrega de información gane y ofrezca una mejor experiencia.

Es decir, todo lo que un escritor quiere respecto de sus textos.

Todo lo que tenemos que decir sobre UX desde Latinoamérica

Marta Sylvia del Río desde México y Freddy Linares desde Perú cumplieron esta semana una tarea larga y no exenta de dificultades: juntar en un libro las historias y recomendaciones de 41 profesionales de 19 países de Latinoamérica sobre cómo generar productos centrados en la persona.

Así fue como surgió «UX Latam: historias sobre definición y diseño de servicios digitales» en el que tuve la oportunidad de colaborar en el capítulo «La transformación digital y la UX» junto a Eleonora Acosta, de Veneuela, y Daniel Mordecki, de Uruguay.

La portada del libro con la experiencia de los diseñadores de experiencia de usuarios en Latinoamérica.
La portada del libro recién presentado.

En la Introducción, Marta explica que «hace ya varios años que, en pláticas informales con colegas profesionales de UX de distintos países, surgían dos ideas recurrentes. La primera: los latinoamericanos necesitamos colaborar más. La segunda: existen muchos casos de éxito que no están documentados. Año tras año, decíamos «debería existir un libro», quizá solo a modo de deseo, para cuando hubiera algo de tiempo. Fueron cuatro o cinco años en los que fuimos madurando la idea».

En la descripción del libro se plantea que «la experiencia de usuario es un componente fundamental en el diseño de servicios. Hoy, debido a la pandemia y a la masificación del acceso a internet móvil, se requiere con más urgencia de productos digitales sencillos, rápidos y consistentes para los ciudadanos. No obstante, a veces las instituciones no dedican tiempo ni asignan los recursos adecuados para asegurar que estos sean exitosos con los usuarios. Este libro comparte historias y recomendaciones de 41 profesionales de Latinoamérica sobre cómo generar productos centrados en la persona».

Lo mejor que tiene el libro es la inclusión de casos de éxito, en la que se cuentan las historias de empresas y organizaciones en las que se lograron verdaderos avances gracias a proyectos que sacan provecho de la disciplina de la UX. También, el hecho de que se ofrece una descripción muy vívida de la disciplina y sus características, lo que servirá de un punto de partida muy concreto para quienes se están iniciando en la disciplina. Por último, para situar en el mapa los nombres de muchos colegas y referentes de la región.

Por lo tanto, es una enorme oportunidad y les animo a descargar y leer. Por cierto, por acuerdo de todos los autores y editores, este libro es de descarga gratuita desde el sitio web de la Universidad del Pacífico de Perú.

¿Cómo se mide la calidad de un sitio web?

Cuando escribí mi libro sobre los 100 Elementos que debe tener un sitio web (2018), me obsesioné con buscar métodos y herramientas para medir diferentes aspectos de un sitio web con el fin de mejorar su desempeño en diferentes aspectos.

Si hubiera tenido a la mano el paper que publicó ayer Alejandro Morales (que va en camino a ser Doctor en Comunicaciones) en España, todo habría sido tan diferente y simple.

Con el título de «Calidad web en medios digitales: revisión bibliográfica sobre métodos e indicadores de evaluación general y atributos de confianza» hace una revisión por todos los autores relevantes del tema y enumera todas las dimensiones en las que se puede hacer la revisión, incluyendo una serie de indicadores a tener en cuenta. Gran trabajo que ya está disponible.

La imagen muestra un gráfico con una lista de los indicadores de calidad más citados en las publicaciones revisadas.
Lista de los indicadores con más citas en las publicaciones revisadas.

¿Por qué los enlaces son azules?

Me encantó esta historia que apareció esta semana en el blog de Mozilla y que responde la pregunta del título.

Mediante una investigación larga y con muchas pantallas como ejemplo, la diseñadora de interacción Elise Blanchard revisa la historia de diferentes aplicaciones para descubrir de dónde y cuándo apareció se tomó la decisión de que los hiperenlaces debían ser de color azul.

Por ejemplo, cuando nace el navegador Mosaic en enero de 1993, el primero que se usó para navegar la web, los enlaces ya eran azules. Por lo mismo, relata que «para entender realmente el origen y la evolución de los hipervínculos, hice un viaje a través de la historia de la tecnología y las interfaces para explorar cómo se manejaban los enlaces antes de los monitores en color y cómo las interfaces y los hipervínculos evolucionaron rápidamente una vez que el color se convirtió en una opción».

Con ejemplos de pantallas, con los nombres y fechas de las aplicaciones (alerta de spoiler desde aquí) llega hasta las aplicaciones de los años 80 para descubrir que en el Windows 1.0 de 1985 se subrayaban los enlaces, se usaba el color azul para destacar objetos de la interfaz y el hover para ciertas acciones.

La imagen muestra dos pantallas de Windows 1.0, con las ventanas de la zona de Ayuda.
La imagen muestra la zona de Ayuda de Windows que se creaba con un lenguaje de marcado.

En una nota personal puedo contar que uno de mis primeros trabajos relacionados con el mundo de las publicaciones digitales ocurrió a comienzos de los años 90 cuando tuve que documentar software y escribir sus manuales; como derivación de lo mismo, aprendí a desarrollar el espacio de Ayuda que se desplegaba al presionar F1. Ese fue mi primer encuentro con algo equivalente al HTML, en el que comenzaría a trabajar en el 95.

Volviendo al relato de Elise Blanchard, cuando sale Windows 3.1 en abril de 1992 se emplea el azul para diferentes aspectos relacionados con la interacción, como por ejemplo, para marcar el color del ícono que hubiera sido seleccionado.

Por ello, el momento exacto llega en abril de 1993, cuando en una nota a la versión 0.13 de Mosaic se informa:

La imagen muestra la información de la bitácora de cambios de Mosaic se refiere a los colores de enlaces.
La información de la bitácora de cambios de Mosaic se refiere a los colores de enlaces.

Desde allí en adelante y hasta la llegada del CSS y su reinterpretación de cómo mostrar la interacción, el azul fue un elemento normal para los enlaces, tal como el hecho de que estuvieran subrayados y que cambiaran de color una vez que la acción se había producido, para marcar el cambio de estado.

En su conclusión, ella explica:

Creo que la verdadera razón por la que tenemos hipervínculos azules es simplemente porque los monitores en color se estaban haciendo más populares en esa época. El producto Mosaic también se hizo popular, y los hipervínculos azules le acompañaron. Mosaic apareció en una época importante en la que el soporte de los monitores en color estaba cambiando; el estándar era que los hipervínculos utilizaran texto negro con algún tipo de subrayado, estado hover o borde. Mosaic optó por utilizar el azul, y eligió portar su navegador para múltiples sistemas operativos. Esto ayudó a que Mosaic se convirtiera en el navegador estándar para el uso de Internet, y ayudó a consolidar su interfaz de usuario como el lenguaje por defecto para interactuar con la web.

Google premia la experiencia del usuario

Esto está pasando mientras escribo así que hay que dejar un tiempo para ver las consecuencias. Se trata de los cambios que está haciendo Google para premiar/castigar a los sitios web que ofrecen una mejor/peor experiencia a los usuarios. El premio es que apareces más arriba en la página de resultados, respecto de los demás sitios que califican para esa búsqueda. En esta imagen se ve lo que están mirando:

La imagen muestra las diferentes señales que Google acumula de los sitios que indexa para ver su lugar en la página de resultados.
Las diferentes señales que Google acumula de los sitios que indexa para ver su lugar en la página de resultados.

¿Qué se mide? Según lo que anuncia Google en los dos posts que ha publicado del tema aquí y acá se incluye:

  • La velocidad de carga del grupo de contenidos más extenso o LCP, del que se informa: «Para brindar una buena experiencia de usuario, los sitios deben esforzarse por tener Largest Contentful Paint de 2.5 segundos o menos. Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el percentil 75 para cargar páginas, que se segmenta entre dispositivos móviles y equipos de escritorio».
  • La velocidad de interacción o FID «mide el tiempo desde que un usuario interactúa por primera vez con una página (es decir, cuando hace clic en un enlace, pulsa un botón o utiliza un control personalizado impulsado por JavaScript) hasta el momento en que el navegador puede comenzar a procesar controladores de eventos como respuesta a esa interacción». Google pretende que «los sitios deben esforzarse por tener una First Input Delay de 100 milisegundos o menos».
  • El Cambio Acumulativo del diseño o CLS ayuda a cuantificar la frecuencia con la que los usuarios experimentan cambios de diseño inesperados y lo explican así: «¿Alguna vez ha leído un artículo en línea cuando algo cambia repentinamente en la página? Sin previo aviso, el texto se mueve y perdiste tu lugar. O incluso peor: estás a punto de pulsar un enlace o un botón, pero en el instante antes de que aterrice su dedo, BOOM, ¡el enlace se mueve y termina haciendo clic en algo más! La mayoría de las veces, este tipo de experiencias son simplemente molestas, pero en algunos casos, pueden causar un daño real». Añaden que se produce un cambio de diseño cada vez que un elemento visible cambia su posición de un fotograma renderizado al siguiente y se espera que los sitios tengan una puntuación CLS de 0.1 o menos.
  • Que esté disponible para celulares o Mobile friendly.
  • Que sea un sitio seguro (con https)
  • Que no se muestren objetos que afecten la vista de la página (como los popups que uno cierra antes de ver de qué se tratan).

A cada uno de estos aspectos en Google les llaman «señales» y sirven para alimentar su algoritmo de posicionamiento. Así que a esperar y ver qué ocurre. Ya estamos avisados.

Sernac descubre «dark patterns» en el comercio electrónico chileno

Ha sido todo un descubrimiento, que espero que tenga un efecto duradero y real, el que ha hecho el Servicio Nacional de Consumidor a través de un informe que denuncia la existencia de «dark patterns» (patrones oscuros) en el comercio electrónico chileno.

Se entiende como tales a «las estrategias que usan las empresas en los sitios web y aplicaciones para incentivar u obligar a los consumidores a hacer cosas que no quieren, como, por ejemplo, comprar un determinado producto o registrar sus datos personales».

En el comunicado, el Sernac señala que los «dark patterns» pueden tomar múltiples formas. Por ejemplo, las señales de urgencia y escasez cuando se realizan compras por internet, presentando mensajes como «últimas unidades»; «sólo por pocas horas»; banners con contadores de tiempo; y notificaciones de actividad donde aparecen «pop ups» que indican cuántas personas han visto la misma publicación o cuántas personas han comprado el mismo artículo, entre otras prácticas.

De hecho, junto con dar cuenta de esta situación, entrega la lista de los más frecuentes y muestra en qué sitios se están utilizando, lo que se ve en la siguiente imagen:

La imagen muestra una tabla con los pos patrones oscuros y quiénes los usan según el Sernac.
Los patrones oscuros y quiénes los utilizan, según el Sernac.

Asimismo, se dio a conocer que los tipos de patrón oculto más detectados fueron las acciones forzadas (30 tiendas), seguidas de las señales de urgencia y escasez (23 tiendas) y testimonios dudosos (18 tiendas) presentes en la muestra.

Es importante tener en cuenta que los patrones oscuros son un tema del que se comenzó a hablar desde que fueron definidos por Harry Brignull en 2010 bajo el nombre de diseño engañoso y, de acuerdo a lo que se plantea en el blog de Torres Burriel su efectividad se debe a que «utilizan en gran medida técnicas del neuromarketing y se aprovechan de cómo los usuarios perciben la información, así como de las suposiciones que hacen al navegar por un sitio web o aplicación».

Finalizo con la opinión entregada por la empresa IDA en este tema, ya que representa muy bien lo que veo en este tema:

El uso de Dark Patterns es una mala práctica siempre. Si hacemos buen UX deberíamos ser capaces de diseñar procesos basados en información, óptimos para las personas que usarán después ese producto o servicio. Esto implica comprender las expectativas, limitaciones y brechas de los usuarios con nuestro negocio antes de diseñar. Y, luego, ofrecer soluciones óptimas que permitan el uso correcto, consentido y respetuoso de ese producto o servicio.

Garrett analiza la UX actual: ¿en qué nos equivocamos?

Jesse James Garrett es un nombre que no requiere presentación en el campo de la Experiencia del Usuario. Pero si fuera necesario explicar quién es, habría que decir que su diagrama de cinco capas y su posterior fundamentación, a través del libro «Elementos de la experiencia del usuario«, son la base sobre la que se fundamenta la práctica de la UX.

A quienes hemos seguido su trabajo, nos parece habitual que cada cierto tiempo patee el tablero y nos diga que todo está mal. O que llame a sospechar de la calidad de lo que se está haciendo. Lo hizo el 2000 cuando mediante su trabajo separó aguas entre quienes sostenían que la Arquitectura de Información era suficiente e introdujo la necesidad de diseñar la interacción dentro de un mismo proceso de desarrollo de sitios web. Volvió a hacerlo 2002 cuando le dio la bienvenida a la comunidad del Diseño de la Interacción y dijo que no teníamos que decidir quién era más puro, si ellos o los arquitectos de información para obligarnos a trabajar juntos. Y vuelve ahora con un artículo publicado recientemente, para decirnos que la UX está cayendo en un error enorme al trabajar de manera ágil.

Aunque suene hereje (sus propuestas anteriores sonaron siempre así), Garrett plantea derechamente que al trabajar con métodos ágiles sólo se cumple con usar la etiqueta UX, pero no cumplir con lo que busca el diseño de la experiencia del usuario.

Yendo directo al punto, Garrett dice que «centrarse en la UX sólo para hacer productos permite a las organizaciones marcar la casilla «UX» sin tener que lidiar con el desorden que a veces se produce cuando se contrata a personas encargadas de hacer preguntas que nunca se han planteado, preguntas para las que los líderes senior pueden no saber las respuestas, o no querer hacerlo. La fábrica prefiere las piezas intercambiables y reemplazables.»

Allí agrega que «en la UX básica es donde se producen las cosas que hacen las personas a la que de verdad le interesa la UX: las percepciones humanas, la exploración colaborativa, la experimentación creativa». Por lo mismo, explica, para los nuevos practicantes en este campo se produce una discrepancia entre el sueño y la realidad: «Cuando se les vende la UX en la escuela como una actividad noble y creativa, llegan al mercado de trabajo y se encuentran con puestos en los que toda posibilidad de nobleza y creatividad se ha eliminado en nombre de la generación del producto».

Si lo entiendo bien, Garrett llama a hacer un cambio y volver a lo que importa: que la UX se dedique a lo que sabe hacer bien, que es resolver problemas más allá del producto, las situaciones que se entienden sólo cuando se hacer verdadera investigación.

De allí que también plantee que «el descontento parece aumentar cuanto más tiempo lleva alguien en este campo: Cuanto más veterano y experimentado es un experto en UX, más probable es que se pregunte si la realización de los valores centrados en el usuario es posible en el capitalismo».

Todos los oficios del contenido para la web

IDA es una empresa a la que quiero y admiro, porque allí trabajan muchos de mis amigues que se han dado maña en sostener, a puro esfuerzo y ganas, un espacio de innovación y desarrollo ligado a la experiencia de usuario.

Tienen un blog en el que habitualmente entregan contenido de calidad y esta vez han hecho un trabajo muy interesante a través de la publicación de la «Guía de UX Content«, un e-book de 87 páginas, en la que se explica de manera detallada todos los oficios relacionados con el desarrollo de contenidos para espacios digitales.

La portada del libro recién publicado por IDA.

Además establece diferencias entre los diferentes términos que se han usado en los últimos años para describir lo que se hace con los textos en la web, separando entre estrategia de contenidos y UX Writing por ejemplo, y explicando de manera precisa los diferentes roles que aparecen como son Content Strategist, UX Writers, Content Designers, Narrative UX, UX Technical Writers, Content Lead y Content Manager. No cabe duda que el tema de los contenidos nace en un contexto de habla inglesa y que a raíz de eso todos estos títulos aún no tengan traducción local, pero, tiempo al tiempo, ya llegará un buen nombre en cada caso.

Los propios autores lo explican al comienzo del libro:

El UX Content es un abanico amplio de formatos y soportes. Es el llamado a la acción de un botón, un disclaimer, el asunto de un correo o la descripción de un producto o servicio. Es todo aquel contenido que nos ayuda a establecer una relación con los usuarios, al tiempo en que nosotros, con él, los ayudamos a resolver sus necesidades y cumplir sus objetivos.

Por supuesto que les invito a descargar y leer. Hay mucho que aprender en estas páginas.

Aplanar la curva: una tarea mundial

Escribo desde mi casa, gracias a que mi oficina está en modo remoto desde el martes pasado. Además de hacer lo que corresponde a mi trabajo, este tiempo me ha permitido avanzar en varios temas en los que he estado involucrado, en particular en temas de visualización de datos.

Por eso, me ha parecido fantástico que sea un gráfico nacido desde esta disciplina, lo que está dirigiendo el esfuerzo mundial en relación con cómo enfrentar la pandemia del Covid-19.

El gráfico que destaca la importancia de “aplanar la curva”, nace de un paper científico del año 2017 que se refiere a la importancia de las intervenciones no farmacéuticas en una epidemia. En simple, muestra que en una epidemia se debe retardar el número de infectados para evitar que colapsen la capacidad del sistema de salud del país en el que se produzca la enfermedad. No se trata de evitar que se contagien, sino que las medidas que se tomen ayuden a que lo hagan en números que puedan ser atendidos y que no queden personas sin atención.

Gráfico que muestra la primera versión del concepto
Gráfico original, incluido en el paper del año 2017 del CDC

Una nueva versión de este gráfico fue presentado a través del artículo “Covid-19 is now in 50 countries, and things will get worse” de The Economist el pasado 29 de febrero, en el que, entre otros temas, se destacó lo que el paper presentaba y la necesidad de tomar medidas para evitar que el contagio avanzara sin medidas para ser detenido en forma efectiva.

Esto ocurría mucho antes de que la Organización Mundial de la Salud declarara esta enfermedad como una pandemia, lo que ocurrió el día 11 de marzo.

Gráfico de The Economist que destacó la curva.
Gráfico presentado por The Economist en su edición del 29 de febrero.

Sin embargo, como suele ocurrir, el mismo día en que la edición de la revista mundial se daba a conocer, Drew Harris, profesor de Salud Pública en Philadelphia le hizo una modificación que es la que permitió que el gráfico cumpliera con mayor eficiencia su intención comunicativa.

A través de una publicación en Twitter, el gráfico apareció con una línea que muestra el límite de la capacidad del sistema de salud. Los que quedan fuera, explicaba, ya no pueden ser atendidos en el hospital: “Es la diferencia entre encontrar una cama y ventilados en la Unidad de Cuidados Intensivos o ser tratado en una carpa instalada en el estacionamiento”.

Gráfico con la línea que muestra la capacidad de atención del sistema de salud local.
Este es el gráfico que publicó en Twitter el profesor Drew Harris, con la línea demarcatoria.

Gracias a este esfuerzo colectivo (investigadores, divulgadores, analistas) este gráfico ha permitido que en todo el mundo se entienda cuál es la tarea que hay que realizar en estos días, en particular en los países de América Latina, en los que estamos viendo con espanto lo que pasa en Europa por no detener a tiempo la enfermedad. Varios diarios le han dedicado su atención, como en NYT y El País.

No hay mucho más que hacer que quedarse aislado y evitar los contactos: distancia social (en un próximo post hablaremos de eso) y tener el cuidado de ser portador del contagio. Lo grave es que, por las características del virus, nadie puede estar seguro de no ser la causa de más problemas. De hecho, nadie puede sentirse seguro, así que lo que corresponde es seguir las instrucciones que los especialistas de salud están entregando.

Sólo les deseo salud y que pasemos bien por esta experiencia.

Pase, está en verde

Esto me pasó en a calle en Santiago y aunque no tuvo repercusión alguna, sigo pensando en lo mal que actué.

Fue así: estaba a pasos de cruzar la calle con el semáfoto peatonal recién cambiado a verde, cuando una persona ciega que iba en mi misma dirección, preguntó al aire, a quien fuera pasando (en este caso, yo): “¿Se puede?”.

Mi respuesta rápida fue: Sí, está en verde. El y yo avanzamos y cruzamos la calle, fin de la historia.

Salvo que seguí pensando hasta hoy, varias semanas después, qué mala fue la respuesta.

Si lo miramos en el contexto, la respuesta resolvió la situación, ya que infundió la confianza adecuada para que la acción de cruzar se ejecutara. Pero el código utilizado (la referencia a una luz de color) me dejó pensando en qué pudo haber significado para esa persona.

Lección para la siguiente oportunidad: la respuesta tiene que ofrecerse en un código que sea claro para quien recibe la información, no sólo para quien la entrega.