UX-Studie: in Zwischenablage kopieren

So entwerfen Sie eine Aktion zum Kopieren in die Zwischenablage in Ihrem UX

Gewusst wie: Kopieren in die Zwischenablage im Web

Da ich viele Code-Leitfäden und Artikel mit Code-Snippets zu dieser progressiven Web-App schreiben werde, ist es wichtig, die folgenden Aufgaben abzudecken, die die Benutzer benötigen:

  • gute Lesbarkeit des Codes
  • einfache und klare Aktion zum Kopieren des gekapselten Codes

Das ist die Quintessenz, die für nützliche Codebeispiele erforderlich ist. Aber kann ich das verbessern?

Engagement verbessern

Um die Funktion zum Kopieren in die Zwischenablage meiner App zu verbessern, habe ich darüber nachgedacht, wie das Klicken auf die Schaltfläche zum Kopieren mehr Spaß macht, da eine angenehme Benutzererfahrung (UX) den schönen Nebeneffekt hat, das Engagement zu steigern.

Ich habe mir folgendes einfallen lassen: Was ist, wenn die App beim Kopieren in die Zwischenablage chat-artig "antwortet"? Die Erfahrung wäre sofort persönlicher. Mit einer arroganten und bissigen Sprache haben die bereitgestellten Nachrichten auch einen einzigartigen Charakter.

Schauen wir uns das Endergebnis an:

I'm a code example, sort of.
Click on the button in the bottom right corner to copy.

Wie Sie sehen, ist die Hierarchie von oben nach unten:

  • Nachahmung eines nativen Fensters mit Fenstersteuerelementen
  • Inhalt
  • Aktionen (zum Zeitpunkt des Schreibens nur das Kopieren in die Zwischenablage)

Die Umsetzung

Immer wenn der Benutzer den Code in die Zwischenablage kopiert, wird für kurze Zeit eine zufällige Auswahl aus einem vordefinierten Array von Textschnipseln angezeigt. Die Zufallsauswahl wird für jedes Codebeispiel generiert. Um die Komplexität zu reduzieren, wird nicht garantiert, dass der Text im Rahmen des Artikels eindeutig ist. Aber b/c gibt es ziemlich viele Saiten zur Auswahl, Kollisionen haben eine geringe Wahrscheinlichkeit.

Und das war's! Ich hoffe, Ihnen gefällt diese kleine UX-Erweiterung für Aktionen zum Kopieren in die Zwischenablage, vielleicht hat sie Sie auch für UX-Änderungen in Ihrer eigenen App inspiriert!

  • Tom