Given a predefined hierarchy of foods, a user while viewing a specific food on the back-end can add/edit text associated with that specific food, its parent, and its grandparent. Text for each level is optional, and can be left blank.

For instance, if they are viewing "Beef Wellington", they can add "Common for weddings." to the specific food, "It's whats for dinner." to the parent (Beef), and "Has high protein." to the grandparent (Meat). The text in the parenthesis shows sample text which they entered.

  1. Meat (Has high protein.)
    1. Beef (It's whats for dinner.)
      1. Beef Wellington (Common for weddings.)
      2. Beef Stroganoff (Great for a cold day.)
    2. Chicken (Very versatile.)
      1. Chicken Cordon Bleu (Nice and cheesy.)
      2. Chicken Marsala (Great with mushrooms.)
  2. Vegetables (Low fat.)
    1. Broccoli (null)
      1. Steamed Broccoli (Yummy!)
  3. Grain (Good carbs.)
    1. Rice (A cheap grain.)
      1. Fried Rice (null)

Now, when another user is viewing "Beef Wellington" on the front-end, they would see (not able to edit):

  • Has high protein.
  • It's whats for dinner.
  • Common for weddings.

And if that user views "Beef Stroganoff" on the front-end, they would see:

  • Has high protein.
  • It's whats for dinner.
  • Great for a cold day.

How should the back-end user be able to add and edit text for the specific food, its parent, and its grandparent while viewing a specific food?

EDIT. I don't necessarily like this approach, but this is one idea which might better communicate what I am trying to do.

enter image description here

  • 1
    You mean when editing Beef Stroganoff in the back-end, the user should be able to edit the text "Has high protein" for example? And does that affect Chicken too? Because I'm sure this is not what people expect when they edit a lower level item. Normally a child can override a property of a parent, not change it. – jazZRo Mar 16 '16 at 13:40
  • @jazZRo Yes and yes. I won't use words like "parent" and "child", but understand your concern. Thank you – user1032531 Mar 16 '16 at 13:46
  • Is the extra text all they are able to change when editing an item in this context? Are inline edits on the tree possible? If so, I'd go with that and add a non-editable text box to the side of the tree to show what a front-end user would see for the item selected in the tree. – Marjan Venema Mar 17 '16 at 7:11
  • @MarjanVenema Where would the inline edits go? How would it work with the non-editable text box? Thanks – user1032531 Mar 17 '16 at 12:27

On the back-end, you could handle this using an XML prop/config file that the back-end user could manually edit. The entire hierarchy would appear and the back-end user could add or edit attributes as necessary.

Or, to make it easier, implement a UI or console app so they can see the hierarchy and tag the level with the appropriate text. Something like this:

  1. Meat (Has high protein.) [edit link]
    1. Beef (It's whats for dinner.) [edit link]
      1. Beef Wellington [add tag link]
      2. Beef Stroganoff (Great for a cold day.) [edit link]
  • The back-end user is not technical, and can't deal with XML. Not sure how the UI/console app will work. Please elaborate. – user1032531 Mar 16 '16 at 14:13
  • Assuming login for the system is required, once logged in, the user would be marked with permissions not available to an average front-end user. These additional permissions would enable "authorized user" UI elements, such as a special page they can access in order to manage the hierarchy. Example: The back-end user logs into the UI. In the menu bar or username drop-down menu, there would be an option, Manage Food Hierarchy. They click that to go to the page where they could view the hierarchy and add or edit tags. – KD Martin Mar 16 '16 at 14:28

I'd consider two views in the backend:

1. A basic view (a visual view) similar to what KD Martin mentioned. E.g. editing only the given tree item within the tree by clicking the edit link. An example of something similar would be the way Wordpress handles Menu Appearance in their backend (admin system):

Wordpress handling of Menu Appearance

2. An advanced view (a text view) where you actually edit the code of the tree structure (can be pseudocode or whatever - think BBCode, or similar to what we have in the "Your Answer" textarea here on UX.stackexchange :)


From back-end perspective efficiency and speed are important factors, so to acomplish this goals, the fundamental is choice of specific structure of data (tree?, type of tree?, heap?)

if it will be tree:

enter image description here

From the designer perspective, it is important to create an interface so that at every level (level I, level II or level III, it is possible to create new branches based on existing needs patterns) eg.

it is also worth considering the issues of structuring and categorizing (should the types of food or names of meals (lunch dinner) be the primary category?)

  • Lvl 2: Dinner
  • Lvl 3: Meat
  • Lvl 4: Beef
  • Lvl 3: Vegetables
  • Lvl 3: Dessert

As for the properties of the added products visible on the frontend - these are the parameters of the model:

e.g. Beef (already (specific instance, not category - tree leaf):

  • type
  • quality
  • expiration date
  • protein factors (1-5)

, which are variables that can be edited at what level in a specific role. (e.g. a chef in a system can define dishes)

Then you can create relationships and conditions between levels and products. (here is the moew abstract level of programming architecture and concepts) (e.g. an abstract class for wedding products)

But how do you solve the problem?

At the beginning I would go on to analyze the problem and define the business and user needs, then on this basis, together with the programmers, iteratively created a prototype, then an interface and interface grinding.

If the process allows, it is also worth half-validating with the end user.

How should the back-end user be able to add and edit text for the specific food, its parent, and its grandparent while viewing a specific food?

Here is example screen: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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