Poor UX - can't tab and very unclear how to edit values in tokens

[citypaul]

To give you some context, I was using the new beta version for weeks convinced it was not possible to edit values in the payload at all.

Today I re-read the page and it clearly says you can generate new tokens, so I decided to really hunt around and try to find out if and how this is actually possible.

To my amazement, I discovered these are apparently tabs:

But I had NO idea.

To really get an idea for how poor this UX is, I asked a few developer friends in a slack that I go in to go to the beta version of the site and see if they could figure out how to edit a token.

It took nearly an hour of back and forth before anybody figured out how to do it. People were debating whether I was trolling them and it was even possible.

What's more, somebody else pointed out that you can't actually tab into the tabs at all - they are bullet points in the markup and don't have the correct accessibility in terms of aria tags.

Please work on the design to make it more obvious that these elements are tabs, and make it possible to actually tab into them with the keyboard.

The design is not clear at all right now. Very few people are going to figure out that those elements are tabs in their current form. You need to make it more obvious.

[keithdanielll]

Now that you have gone thru it, could you please write a handbook how to use the new UI, because I am still lost.

[SmallhillCZ]

Went here to complain that they dropped the editing functionality and if it was not for your comment, wouldn't find out about the tabs :D

[jongwuk]

The new design of jwt.io is sleek, but the addition of the JWT Decoder and JWT Encoder tabs isn’t very intuitive at first glance. They don’t really look or feel like clickable tabs. It might help improve usability if there were clearer visual cues—like a hover effect, underlines, or some form of active/inactive state—to make it obvious that these are interactive elements users can switch between.

Just a small UX suggestion to help first-time users quickly understand how to navigate between decoding and encoding.

[districtvr]

Hello Team and @DanOnCall , Has someone found the resolution to the issue of how to edit payloads?

[nbrendler]

I read all the replies and still didn't realize this was a tab 😆 Click the red area.

[keithdanielll]

NOW I get it !!!!!!!!!!!!!!! Haha! Thank you!

[districtvr]

Thanks @nbrendler , I got it.