We have a list of words and phrases stored in a database that if a submitted article contains any one of them, we would automatically disapprove the article (and send the submitter an explanation). We're not banning articles. We are banning words and phrases.

Now, we have decided to keep all the terms, but assign banned/unbanned status to each one. (We don't want to delete something to regard it as unbanned.) Administrators would be presented with a UI that lists the banned words in tabular format.

In this table we want each term to have their current status indicated, possibly with an icon, possibly also via red/green coloring. We realize that there my be some confusion over whether the indication represents the current state vs representing an action to change the implied state (eg. does a tick icon on a button mean it is selected, or is it meant to be read as an invitation to select).

To Toggle or Not to Toggle? Once we have chosen the icons to represent each state, is it recommended to allow those icons to be clickable to toggle the banned/unbanned state? Or is it clearer to have command links (in conjunction with the icon), that is, "Unban" when the word is in the banned state, and "Ban" when the word is in the unbanned state?

What are some guidance to this kind of administrative UI?


2 Answers 2


I'm not sure an icon here would be better than simply using the word "Banned" or "Approved" along with red and green colors.

Also I would consider the word "Approved" here instead of "Unbanned." The reason is that it's a positive way of explaining the status. It's not banned. It's allowed. It's approved. The word "Unbanned", meanwhile, is a negative way of stating a positive state. This requires more mental work for users to think through what this means. It's not not banned. It's not not allowed.

That said, here's an example of how this might work:

Row Controls UI

Top Rows

  • You see the phrase in question highlighted along with some context.
  • Users are provided a "Read Full Quote" link to read the full article with the phrase in question highlighted. This phrase could be whatever you like.
  • A sort menu filter is provided to allow for easy sorting access if desired.
  • Phrases/Words which have been banned have their rows highlighted with a "banned" color. This assists with scanning the table for this specific type.
  • Phrases/Words which have been approved have their rows highlighted with an "approved" color. This assists with scanning the table for this specific type.
  • Rows which have been "Banned" or "Approved" have a phrase pre-pended instead of an icon.

Bottom Rows

  • These rows show a changed state. Now the top two rows have been selected.
  • With the top two rows selected, the "Approve" and "Ban" actions are now shown.
  • The OP doesn't mention an Approved status - not sure what you mean by it here? Mar 4, 2014 at 12:51
  • Approved = Positive way of stating "Unbanned"
    – Hynes
    Mar 4, 2014 at 13:08
  • Sorry, still not really understanding it. How come some rows in your table don't say Banned, but don't say Approved either? Mar 4, 2014 at 13:10
  • @vincebowdren I edited my answer to explain further what's going on in the wireframe example.
    – Hynes
    Mar 4, 2014 at 13:33

I am just wondering why you cant keep it simple and break down banned and un-banned words into two sections as how web blockers allow you to specify a blacklist and whitelist.

enter image description here

Here is another option where you can allow users to shift words between the two options

enter image description here

  • I don't think a whitelist/blacklist UI would work well here. When a banned word is unbanned, it is not moved to a different list - it is simply neutral, as if it had never been banned. Mar 4, 2014 at 12:49

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.