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:


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 ] 

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?

What do you guys think? I'm really stuck on what to do.

  • You tagged this C# and Javascript, but didn't mention what UI library are you using. Is it ASP.NET? Or something else, like Winforms or WPF? – svick Mar 9 '12 at 20:15
  • 1
    Also, maybe this would be better on ux.stackexchange.com. – svick Mar 9 '12 at 20:17
  • @svick I don't have enough rep to add a backbone.js tag. I was unaware of that exchange site, thank you. – asawyer Mar 9 '12 at 20:18
  • 1
    That shouldn't stop you from mentioning it in the text of the question. – svick Mar 9 '12 at 20:28
  • I'm voting to close this question as off-topic because it should go on ux.stackexchange.com – Kilian Foth Jun 4 '15 at 14:55

Right. This should really be on UX, but I'll tell you where I think you're going wrong.


The user has no particular concept of left-hand values or nodes. Those are based inside your implementation approach to the problem.

The user has a task to complete. You need to consider what they will generally try to do (the use-case in UML or "user story" in agile), and build your UI around them accomplishing that task in the minimal number of actions.

For example, when you shop online, you don't deal with Secure Socket Layers, Network Encryption or the structure of Amazon's databases or php scripts.

  • You put your shipping and payment details into a page and hit enter. You check the order and hit "Confirm"
  • Once you've done that once, the next time you want to do it, the process is optimised to reduce the number of payment steps you need to perform by loading your details already, so you just click to confirm.
  • You can even skip the confirmation step with 1-Click, so it's literally "find thing. press button. await delivery"

This is the approach you should be taking. Check what your user is trying to achieve. What do they load up your application and/or webpage to try and do, in the most general terms (e.g. Make a claim, organise a set of claims, handle a claim), and go from there.

If you get stuck with this approach, the UX people can help you, but always think "user interaction", not "ui interaction with backend".

|improve this answer|||||
  • 1
    No, this isn't a UX question at all. It should be on UX if the OP is asking what should be happening on the front end to provide the best user experience, not if they're asking for technical advice about how to do something. – JonW Mar 9 '12 at 22:22
  • 1
    @JonW, I don't see that the OP is asking for technical advice on how to do something. He's asking for advice on the UX. – Winston Ewert Jan 28 '13 at 7:38

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