User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am interested in defining and maintaining the concept of groups in an html page.


  • The user define the group of english speaking language countries.
  • Then assign to this groups all countries that are english speaking.
  • The user can see all available groups and assign/modify them.

Is there some standard design for such kind of page in a functionality?

share|improve this question
Sounds like a card sorting exercise. There are multiple sites that provide the function online that you could review. – Evil Closet Monkey Feb 12 '14 at 20:52
@EvilClosetMonkey:I am not sure what is the term "card sorting". I am interested mainly in "capturing a group". What are these sites you are referring in case you are talking about the same thing and I am missing the point? – Jim Feb 12 '14 at 20:56
@EvilClosetMonkey:I found online what you mean.No, this is not what I am looking for. My needs are really simple – Jim Feb 12 '14 at 21:37
Could you give another example? I'm interested in the problem but need more to work off of. – Mayo Dec 10 '14 at 14:47
Have you considered inverting the model? Instead of putting users in groups, why not put tags on users? This sight has an excellent example of tagging which you encountered when you created this question and put it in the "categorization" and "grouped-list" ...groups. – Henry Taylor Dec 10 '14 at 17:20

This is exactly the kind of process that, because there's so much room to play around, results in multiple solutions that could all be considered reasonable. You might not find a "standard design". You should just use the simplest version that you will work for you.

Take a look at RBAC (Role-Based Access Control) products. RBAC systems, for managing users by assigning them roles and access levels, will have a lot of the UI constructs you are looking for. i.e. create a group (role) and assign items (users) to that role.

I've worked on a basic RBAC we built for internal use. I've provided an overview in the wireframes below.

There's not a lot to it. The key design decision we made was to go with the "layered page" approach to interacting with existing groups. i.e. in the last wireframe below, the user has clicked to edit a group. In this case, the group appears as a "page" layered on top of the main list UI. This is a pattern we borrowed from the Basecamp project management app. The user can interact with the group and get back to the page beneath by either clicking the 'X' or the title of the deeper page (i.e. 'Groups') which has become a link.

You can achieve quite a lot with a carefully applied mix of page layers and modal dialogs.


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
Unless I am missing something, this doesn't really show how a user would select options to add/update/remove items of a group. – Ken Jan 9 '15 at 15:49
I'm not sure what you mean by "select options to". Adding/Updating/Removing is relatively obvious. Adding is done via text links. Editing and removal are done via the pencil and trashcan icons. These could also be text links, or buttons. – dennislees Jan 9 '15 at 19:06
If you want me to mock up every instance of every screen, I think you'll find my rates are very reasonable ; ) Seriously though, of course the system doesn't add items. This stage of the mockup shows an instance where a group exists that already has had items added. This is common technique in wireframing. It's permissible to skip ahead and assume things providing there's enough information to work things out using a little imagination, and in this case I think there's more than enough. – dennislees Jan 9 '15 at 20:52
There's no debate here, just your needling pedantry wrapped in a too-transparent layer of mildly insulting sarcasm. Mildly insulting sarcasm, however, does seem to be a common theme on this site, so it might be appropriate for me to wrap up by saying; Thanks for your input @Ken! The world is a better place now you've told me what's what about the dangers of skipping steps when providing free help for strangers on the internet. In studying your answer to question I've also realized a better strategy is to avoid concrete answers, and to start talking about missing business cases instead. – dennislees Jan 10 '15 at 15:27

Does this information already exist?

  • If you're not talking about a quiz, consider using an existing data store to prepopulate your UI. Pulling data on a country's primary language from the CIA World Factbook would help.
  • Something like the Google Earth API can provide the geocoding and user interface allowing you to select territories and to visualize geographical information.
  • On your examplie, it would be interesting to see capability to go back in time to visualize the migration of languages over a geographic area over time.

Define the taxonomy or relationship between these items. Is there nesting in the relationship between territories or are there relationships between languages across countries and dialects that should be presented when depicting the item?

What kind of information is important to a user, and when an item is selected, is it moved from one container to another or is it mirrored?

This is important as the existence of and relationship between these members and groupings can dictate how the user interacts with their representation.

share|improve this answer

Written in user-story form: User-defined Groups

The fact that it we are dealing with countries doesn't even matter since it is user-defined and subjective.

  • As a user I want to organize items in groups that I define so that ___ (add business case)
  • As a user I want to see a list of options so that I can select a subset of them to organize them with a label of my choosing.
  • As a user I want to see groups so that I can ____ (business case, again).
  • As a user I want to update groups so that I can change categorization.
  • As a user I want to delete groups so that I can change categorization.
  • Etc.

(There are probably more but omitted for the sake of brevity)

The main usability issue is showing the user all the options so that they can make their own judgement about what they want to include. Work hard not to hide options. If there are many, then you might need to make general default categories first. Hiding too many options upfront will impede their decision making process. Do your best to let them decide effectively.

REF: Wikipedia, Creating User Stories

Note: I don't know the reason you are building this that is why the business case is assumed.

share|improve this answer

1) Identify your audience (the "user").

2) Learn their goals and which categories they want. Use the language they use as labels.

3) Make a database. This is more technical than UX. Node.JS and MongoDB are good.

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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