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

I need to allow the user to create an binary tree. I have a Backbone Model populating properly from the database, the problem I am stuck on is how do I setup the ui elements in a way that is fairly easy to use?

The general idea is I want to create a boolean expression that contains logic and tokens. The tokens will be replaced later at runtime with appropriate model data when the expression is evaluated.

You end up with a final expression like this:

((({Claim.State})=(TX))||(({Claim.PolicyState})!=(UT)))

Ie, Evaluate to true if the State = TX or the Policy State is not UT

Each expression can be a terminating node, and will have a value, or will have no value, and the left and right will point to the next respective expressions and an Operator

The database structure looks something like this:

  1. State Check: Left: 2 Right: 3 Operator: OR
  2. State is TX: Left: 4 Right 5 Operator: Equals
  3. State not UT: Left: 6 Right 7: Operator: Not
  4. Claim State: Left: nil Right: nil Value: {Claim.State}
  5. Texas Literal: Left: nil Right: nil Value: "TX"
  6. Policy State: Left: nil Right: nil Value: {Claim.PolicyState}
  7. Utah Literal: Left: nil Right: nil Value: "UT"

I am imaging something like for the Above expression, making a panel with 3 select lists, and a Label above it:

---------------------------------------------------------------- 
Name: |State Check|                     [.] Value [0] Expression
            Left (Edit/New)   Operator Right (Edit/New) 
Expression: [ State is TX ]   [ Or ]   [ State is not UT ] 
(Save)
----------------------------------------------------------------

At this point I'm stuck. What should happen when say, the user wants to edit the left hand value? Do I open a new popup window to rerender the same form, just starting with 2 instead of 1 for the starting expression key?

Should I replace the existing form with the new values, and somehow keep track of where the user is in reference to the starting expression?

Maybe slide a new editor panel down below the current?

A few extra details:

  1. My users will be semi technical, the binary expression concept is understood, I just need a clean way to express the ideas.

  2. I'll be using a combination of backbone.js and jQuery with Underscore templates

  3. There is a c#/MVC3/sql08 backend

What do you think ?

share|improve this question
Same question as on Programmers.SE: Is there any particular reason they have to edit a binary tree, or is there another way to look at the problem? – Izkata Mar 9 '12 at 22:03
@Izkata Well I did add that my users will be technical. This is for a high level admin only form, and most likely will be done by a dev group. Is there a better way to look at the problem? Maybe? If I knew I wouldn't be asking the question. :( – asawyer Mar 9 '12 at 22:06
UX.StackExchange isn't the best place for this question. Come here if you want to ask what you should do on the front-end, and then programmers.SE (or appropriate coding SE site) to get advice on how to do it. Can you edit the question so it's not so much asking for technical advice but more for help with what it is you're looking to do and we can re-open the question. Thanks. – JonW Mar 9 '12 at 22:15

closed as off topic by JonW Mar 9 '12 at 22:16

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.