Presenting access codes on a website with limited formatting options?

Question

I am making a game that has a free demo and a full version. When you are playing the free demo, you can enter an access code to unlock the full version.

My issue is, when users go to the webpage with the access codes on it, I'm getting a lot of messages about how the access codes don't work. Here's a screenshot of the page:

The codes below are in this format:

version = access code

As an example, let's say you want to unlock the full version of v0.15.00. Below, you'd find "v0.15" in the list, then copy "Foo Bar Baz" (without quotes) into the game's Access Code text box and click submit.

Access Codes

v0.16.xx = This is the second access code. L33T!

v0.15.xx = Foo Bar Baz

Above this is a picture of my game showing how to get the version number. People don't seem to be having trouble with that part. Here are the mistakes I'm seeing:

1. People copying the whole line
2. People copying one of many words in the access code. I suspect that was just a boneheaded move on my part though, as the latest code starts with the phrase "This is the second..." Next release, I won't be making that same mistake.

It's worth knowing that the phrase in the example surrounded by quotes isn't bolded. I'm going to try that and see if it makes a difference, but I think there is a much better way to present these access codes than I'm doing it.

It's worth noting, it is important to show previous versions and I need to update this list every month with a new line.

I asked a user who struggled, and they suggested I present the access codes like this:

------------------------------------
access code goes here
------------------------------------

That sounds like a good idea to me, though I don't know where I would put the version number. Maybe embedded in that first dotted line? With that uncertainty, I decided to ask on here to get some opinions from people who are much smarter about UX than I am.

Important context: It is an HTML game. The access codes are on a Patreon page, so I think that means I have limited HTML features. It uses a WYSIWYG editor that lets me bold text and italicize it or create a link or list or image. Maybe I could have a link go back to the game and fill in the access code, but the game can be played online or downloadable, and I don't know how that could work in the latter. Either way, it wouldn't know how to take you back to where you were because I can't pass a usable parameter from the game to Patreon.

Also worth noting that Patreon doesn't use a monospaced font, and its editor doesn't allow me to change the font. I bring this up because one of the answers suggested an ASCII table. Here's how the generated table looks with a monospaced font:

+--------------+---------------------------------------+
| Game Version |              Access Code              |
+--------------+---------------------------------------+
| v0.16        | This is the second access code. L33T! |
| v0.15        | Foo Bar Baz                           |
+--------------+---------------------------------------+

But here's how it looks on the website:

For what it's worth, a table that looks like this in ASCII:

  Game Version                Access Code               
 -------------- --------------------------------------- 
  v0.16          This is the second access code. L33T!  
  v0.15          Foo Bar Baz     

Looks like this on Patreon:

That's still misaligned, but maybe it's good enough to get the job done?

Answer 1

If the user copies the entire line or copies one of many words, it's showing that the solution is not the right one or the user needs another type of action to do. In this situation, the best solution is to force the user to do nothing.

Check how Fontawesome.com make this when the user needs to copy the icon html code:

• When hovering a text appear

• When clicking the text changes to copied

The user only read and click.

Try it here

Answer 2

I assume there is little you can do to change the codes for versions that are already published. So my recommendation is to make changes going forward. If possible, you maybe want to get a new version out ASAP, even if the only change is a new access code format. You really don't want to be losing potential "customers" in the meantime.

Access Code Format

First thing you need to do is review your process for creating access codes. While having sentences might seem fun, it just adds confusion for you users (as you have found out).

I would suggest using something like an auto-generated GUID. It really doesn't matter much, just ensure that it is a single string with no whitespace characters.

Web page format

As you have little control of the website hosting these codes, I would suggest you go with something simple like a table format. This will add clarity for exactly which parts of the text is the code and which parts are not. As you have suggested, make the code BOLD so it stands out from any other text.

Something like this:

Note that I added some examples of what a GUID code might look like going forward, as you can see, there is a lot less confusion about what part to copy.

Answer 3

Look for access codes in a known format

Instead of making your users provide the right input, let them provide it however they want to, and then just ignore whatever isn't necessary. For example, if your key is a UUID, just use a regex to detect UUIDs and verify it. That way, it doesn't matter if the user pastes extra information. If they paste multiple codes, you could just try every one that they provide—if the key space is large (which is definitely true for a UUID), testing multiple keys will have an inconsequential effect on security.

Answer 4

As a workaround:

1. Tell the gamers to install a userscript manager add-on in their browser(s) if they haven't one already anyway. I strongly recommend Tampermonkey, also for Chrome.

2. Create a userscript that injects JS/CSS/HTML into your Patreon page which adds there what is:

   1. shown in @Danielillo's answer herein,
   2. used at &what;:

   i.e. click twice (1.) or double-click (2.) on the access code to copy it to the clipboard.

3. Store the script in a public SCM repository that supports RAW format display (download actually) which allows for a two-click installation since the userscript manager jumps in on download of *.user.js resources.

   Describe the process there.

   See my JANITOR – Java API Navigation Is The Only Rescue for an example.

4. Describe this process on the Patreon page, too.

It has to be mentioned that the script has to be adapted, and updated by the gamers, every time Patreon changes those part(s) of the DOM that is/are relevant for the script.