Cómo: copiar al portapapeles en la web
Como escribiré muchas guías de código y artículos que contienen fragmentos de código en esta aplicación web progresiva, es esencial tener cubiertas las siguientes tareas que el usuario necesitará:
- gran legibilidad del código
- acción simple y clara para copiar el código encapsulado
Ese es el resultado final que se requiere para ejemplos de código útiles. Pero, ¿puedo mejorarlo?
Mejorando el compromiso
Para subir de nivel la funcionalidad de copiar al portapapeles de mi aplicación, pensé en cómo hacer que el clic en el botón de copiar fuera más divertido, ya que una experiencia de usuario agradable (UX) tiene el agradable efecto secundario de aumentar la participación.
Se me ocurrió lo siguiente: ¿qué pasa si la aplicación "responde" de una manera similar a un chat cada vez que el usuario copia en el portapapeles? La experiencia sería instantáneamente más personal. Utilizando un lenguaje arrogante y sarcástico, los mensajes proporcionados también tienen un carácter único.
Echemos un vistazo al resultado final:
I'm a code example, sort of.
Click on the button in the bottom right corner to copy.
Como puede ver, la jerarquía es como tal de arriba a abajo:
- Imitación de una ventana nativa con controles de ventana
- contenido
- acciones (al momento de escribir, solo la copia al portapapeles)
La implementación
Siempre que el usuario copia el código en el portapapeles, se muestra una selección aleatoria de una matriz predefinida de fragmentos de texto durante un breve período de tiempo. La selección aleatoria se genera para cada ejemplo de código. Para reducir la complejidad, no se garantiza que el texto sea único en el alcance del artículo. Sin embargo, dado que hay bastantes cadenas para elegir, las colisiones tienen una probabilidad baja.
¡Y eso es todo! Espero que te guste esta pequeña mejora de UX para acciones de copiar al portapapeles, ¡tal vez también te haya inspirado para los cambios de UX en tu propia aplicación!
- Tom
