I'm working on a game server, that will allow mods and plugins to be installed.

I'm also working on a creation kit, or content management suite (CMS), to aid in the design of various aspects of the game (such as graphics, sound mapping, NPC data, etc).

For example, let's say an NPC (non-player character) has: a location in the world, a direction they're facing, a name, and a sprite.

Then someone designs a plugin that allows NPCs to have a faction, or city that they're loyal to. Any crime potentially done within the city could have a negative impact on how that NPC views the player. This got me thinking about how I could design my CMS to be flexible enough to support different plugins.

In the initial state (without mods or plugins) there will be around 200 Npcs, 200 Items, 300 Objects, and 700 Other (which isn't pictured)

I have 3 different ideas on how to do this. For simplicity, let's assume that the cms will be in the form of a web application.

Option 1

CMS plugin developers (likely the people who wrote the plugin for the server) add a link to a new web page, that allows them to map an NPC to a specific faction. (similar to creation kit for Skyrim and Fallout) Option 1

  • +No additional code required from CMS (save for ability to add new form)
  • -Separate page/form for each plugin seems pretty heavy
  • -Number of distinct links increases potentially exponentially.

Option 2

Developers add on to the existing form with the fields they need for their mod. Option 2

  • +No additional code required from CMS (add scrollbar to existing form)
  • +Page for each part of a plugin not necessary
  • -Control must be scrollable (limited vertical screen real estate)
  • -Adds additional complexity to each form (all features may be added whether they're needed or not)
  • -Users have to scroll possibly through multiple pages worth of fields to get to the one they want

Option 3

A tabbed panel that auto expands. The last element would be a "+" tab (similar to a browser window). When clicking the "+" tab, a window would pop up asking them which feature they would like to add to that NPC, and would add a new tab specifically for that feature/plugin. Option 3

  • +Allows users to select only the data they want for an NPC
  • +NPCs can be distinct in the number of features/plugins they are affected by (only things that affect them are in the tabs)
  • +Lightweight (developer only needs to add contents of panel)
  • -Many mods/plugins would require horizontal scroll rather than vertical (possibly easier to get lost)

Is there another option that would allow an extendable UI in this manner?

  • 2
    Hi @Zymus. This is just my take, but I think the reason your question has had no activity since you asked, is because it's too broad. In fact, I'd suggest that if it didn't have a bounty attached, it would already have been flagged for closure for broadness (bounty questions cant be closed). The suggestion text in the case of a closure for broadness is "There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs."
    – dennislees
    Commented May 3, 2016 at 13:39
  • Only after careful reading of your question can a question be determined - "how I could design my cms UI to be flexible enough". Then you list what essentially amount to a list of specs for UIs. While this isn't technically an unaccpetable question for this site, it's in a format that requires a lot of work (reading, thinking, analyzing) to get anywhere with, and anyone taking a shot at answering this without a) having your subject knowledge, or b) engaging in a lot of communication with you, isn't going to give you answers that are anywhere the quality you want/need.
    – dennislees
    Commented May 3, 2016 at 13:45
  • For what its worth, here are a couple of suggestions. 1) Put some more work into this first - if you actually mocked up some of these UIs, you might end up answering some questions and generating more. 2) ask a more specific question - i.e. "here is a mockup. Here are my requirements. How can I make the UI meet my (flexibilty) requirements better?". And 3) Format your question for scanning - your current question needs to be read. I can't scan it and see if it's in my interest/strength area. A clear upfront question and section headings will help readers scan and decide more quickly.
    – dennislees
    Commented May 3, 2016 at 13:51
  • wireframes would help here, your requirements are too close to the detail to be generally understandable for people unfamiliar with game mods/plugins
    – Midas
    Commented May 3, 2016 at 16:30
  • 2
    @Midas updated with wireframes
    – user83018
    Commented May 3, 2016 at 17:14

6 Answers 6


You can combine options 2 and 3, to link the scroll position and which tab appears selected.
As in the Change active tab depending on scroll position answer.

Or you can use Miller columns as in Finder on Mac.

  • Not every Npc will have a faction, or need mod1 or mod2. Should they still be options then?
    – user83018
    Commented May 8, 2016 at 18:32
  • you can have leave an empty or disabled section/tab, with tooltip saying why it's not applicable..
    – Aprillion
    Commented May 8, 2016 at 21:39
  • The distinction is left up to the users. If they want it to be used, than they should be able to set it.
    – user83018
    Commented May 9, 2016 at 0:45
  • what is the additional question here plz? is it not possible to use an "Enable" chceckbox for example? checked or unchecked by default whichever makes more sense..
    – Aprillion
    Commented May 9, 2016 at 6:24

A fourth option would be an extra settings dialog for every plugin. But this would certainly be the worst option because it will separate the options.

Basically you have to take three numbers into account:

  • number of NPCs
  • number of MODs
  • number of options per NPC/MOD

Depending on what number is more likely to grow you will have to decide between your three options.

But I think the most flexible (independent of those numbers) and intuitive will be option three, because number of NPCs grows vertically, number of MODs grows horizontally and number of options grows in pages.

  • I've updated the OP; There would be, in the initial state (without mods or plugins), 200 Npcs, 200 Items, 300 Objects, and 700 other)
    – user83018
    Commented May 4, 2016 at 16:35

I think collapsible section on the right may be better. It makes it easier to read and see the different sections. Tabs are also limited in size and width. With a collapsible section you have more space for the title and purpose of each plugin. It can grow vertically dynamically.

  • I've updated the OP; There would be, in the initial state (without mods or plugins), 200 Npcs, 200 Items, 300 Objects, and 700 other)
    – user83018
    Commented May 4, 2016 at 16:35

It all depends on the number of things you might need to account for (scalability).

Another way to score this is based on efficiency:

  • Option 1 users can access everything with just one mouse-click. Nothing is hidden.

  • Option 2 users need to make 1 mouse-click and scroll the page to view everything. Some things are hidden until you scroll.

  • Option 3 users need to make 2 or more mouse-clicks (depends on how many mods/tabs) to view everything. Lots of things are hidden until you click a tab.

So my vote based on efficiency is option 1.

  • I've updated the OP; There would be, in the initial state (without mods or plugins), 200 Npcs, 200 Items, 300 Objects, and 700 other)
    – user83018
    Commented May 4, 2016 at 16:35
  • You should have mention that to start with:-) Using a tree control with 200 NPC nodes will have usability challenges, so you might need to think about Search facilities.
    – SteveD
    Commented May 5, 2016 at 9:04
  • Yes, that was my plan, and is a non-issue
    – user83018
    Commented May 5, 2016 at 14:38
  • options have similarly "hidden" properties - the attributes are hidden in option 1 until you scroll, then expand and then click second time in left menu, not a single click
    – Aprillion
    Commented May 7, 2016 at 9:28

Your best bet is Option 1. Let me address your concerns:

-Separate page/form for each plugin seems pretty heavy

Unless you can know for sure how many settings each plugin will have, giving an entire page seems to be the most flexible option. Furthermore, it creates a separation in the user's brain that seems useful: There is no interaction between each plugin's settings, and they are completely modular.

-Number of distinct links increases potentially exponentially.

"Exponentially" seems like it's overstating the case, here. Yes, they will increase, but only linearly, and you already have a way to toggle the visibility for each character and then scroll through the list.

Regarding your other options, I think the negatives far outweigh the positives. Option 1 seems like the only one capable of dealing with all of the unknowns with maximum flexibility.

  • I've updated the OP; There would be, in the initial state (without mods or plugins), 200 Npcs, 200 Items, 300 Objects, and 700 other)
    – user83018
    Commented May 4, 2016 at 16:36

Option 1 (with an unobtrusive bread trail) +/- Option 3 Tabs ex. Breadcrub " FooCMS->NPC->Brock " on the right side panel would have the details. But broken down in logical sections see CSS grid layout

Offering a logical flow of choices would be a great start. Think modern shopping cart. With the vast amount and variations of items one may drill down get an item, then find another item quickly. Endless scrolling/swipping would be torture.

Manipulating the dom to remove clutter or add more options - as choices are made - would be a huge bonus for users. Making it an SinglePageApp would be a breeze.

2 really good librays are RactiveJs and Vuejs -> "Tree View Example"

Your Answer

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