Как: скопировать в буфер обмена в Интернете
Поскольку я напишу много руководств по коду и статей, содержащих фрагменты кода в этом прогрессивном веб-приложении, важно, чтобы были охвачены следующие задачи, которые потребуются пользователю:
- отличная читаемость кода
- простое и понятное действие по копированию инкапсулированного кода
Это нижняя строка, необходимая для полезных примеров кода. Но могу ли я его улучшить?
Повышение вовлеченности
Чтобы повысить уровень функциональности моего приложения по копированию в буфер обмена, я подумал о том, как сделать нажатие на кнопку копирования более увлекательным, поскольку приятный пользовательский интерфейс (UX) имеет приятный побочный эффект - повышение вовлеченности.
Я придумал следующее: что, если приложение «отвечает» в стиле чата всякий раз, когда пользователь копирует данные в буфер обмена? Опыт мгновенно стал бы более личным. Используя высокомерный и язвительный язык, предоставленные сообщения также имеют уникальный характер.
Посмотрим на окончательный результат:
I'm a code example, sort of.
Click on the button in the bottom right corner to copy.
Как видите, иерархия такова сверху вниз:
- Имитация родного окна с элементами управления окном
- содержание
- действия (на момент написания, только копирование в буфер обмена)
Реализация
Всякий раз, когда пользователь копирует код в буфер обмена, на короткое время отображается случайный выбор из предопределенного массива текстовых фрагментов. Случайный выбор генерируется для каждого примера кода. Чтобы уменьшить сложность, не гарантируется, что текст будет уникальным в рамках статьи. Тем не менее, b / c есть довольно много строк, из которых можно выбирать, коллизии имеют низкую вероятность.
Вот и все! Надеюсь, вам понравится это небольшое улучшение UX для действий копирования в буфер обмена, возможно, оно вдохновило вас на изменения UX и в вашем собственном приложении!
- Tom
