I'm designing a dashboard for a web app that also allows API access. I got stuck while designing the API keys screen (used to generate .. well, API Keys).

See, there are 2 different states for API keys: live and test.

There are also 2 different types of keys: public (client side) and secret (server side).

That's 4 permutations so far.

A user can also have multiple API keys per account, which means if they had 2 sets of keys for two different clients .. that amount to a total of 2 x 4 = 8 keys.

Oh, and the user may need to force a key to expire if it's been compromised .. so there needs to be some sort of expire function thrown in there .. or perhaps a refresh option to regenerate the affected key.

Here's what I've sketched so far:

API Key interface for 1 set

This works for just 1 set of keys (the 4 types). Would love your suggestions on how to extend this (or improve it) to cover different sets of keys for multiple API clients.

Edit: Version 1 (Inspired by Benny's answer below)

The keys are grouped by client, similar to the way Facebook groups the login session by device type. Would love feedback / suggestions on ways to improve this.

enter image description here

  • 1
    You could organise it into two sections. The first would be current keys - just a plain text list of every current key, grouped by type, with a refresh button next to each to regenerate it. The second section is where you generate new keys.
    – ArtOfCode
    Jul 25, 2014 at 19:56
  • @ArtOfCode thanks! I'm having trouble visualizing that .. mind including a quick sketch / screenshot? Thanks Jul 26, 2014 at 8:03
  • 1
    done. See answer below.
    – ArtOfCode
    Jul 26, 2014 at 21:09

2 Answers 2


This is an answer based on my comment above. Looking at it from a user's POV, I'd like it if each section was clear and it was easy to read and understand what I can do where. That gives me that idea that you could organise your page into two main sections: current keys (categorised) and generate new keys. Here's a mockup of said design:

Mockup http://riversparrow.co.uk/images/uxmockup01140726.png

I think this solution makes it clear what keys you have and what type they are, and makes it easy to generate new keys. You could also add your 'refresh' button by every item in the list of current keys to make regenerating keys easy. However, consider that regenerating keys is going to take some server time, so you may want to limit the amount of regeneration a user can do.

  • Thanks. I suppose differentiation between the different apps is inferred from the changing text labels correct? Jul 27, 2014 at 6:26
  • Yeah. I suppose you could group them again by app, but that might result in the space looking a bit too crowded.
    – ArtOfCode
    Jul 27, 2014 at 8:14

This may be altogether wrong, so don't mind it in that case. But I like the way you can control your sessions in facebook (on the URL https://www.facebook.com/settings?tab=security&section=sessions&view).

There you have control over where you're signed in, when to end it or keep it going. It's not the same as your problem, but having a list like this makes it more useful even if you're dealing with security keys.

enter image description here

  • Thanks Benny .. Just thinking out loud, I can see how that arrangement can inspire an improved version where the keys are grouped by client. Checkout the edit on the question. Jul 25, 2014 at 18:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.