5

In most cases the data that applications, forms and so on work with is relative flat. It means that the objects representing the data are actually nothing more than a collection of key-value pairs - with the keys being some attributes/properties and the values the actual values. Something like this:

{
    firstName: John,
    lastName: Doe
}

In these cases there is usually an established mapping from this data to the UI elements which are used to represent, edit and create this data. For example if you were to write an HTML form where the user can write his first and last name you will (most probably) use two text fields - one for the first and one for the last name.

Of course data is not limited to only text but also numbers, boolean values and so on. But even then it is easy to find a suitable UI component.

Now let's say you have a more complex data. Some real object graph (that is, objects connected to each other). You can end up with something like:

{
    firstName: John,
    lastName: Doe,
    address: {
        street: Liberty Str 7,
        zipcode: 10000
    }
    company: {
        name: UX Ltd.
        founder: {
            firstName: Jane,
            lastName: Doe,
            address: {
                ....
            }
        }
    }
}

You see that this graph can become really complex. The complexity comes (partly) because of the fact that the values of the properties are no more simple data types (text, number, etc.) but are objects themselves. So you end up with some deep hiearchy.

The actual problem:

Now what I want to achieve is some user-friendly way to enable the presentation, creation and edition of such object graphs in my software. Please keep in mind that this is a desktop application and we have a limited set of UI components - let's say only these that are here can be used: https://www.eclipse.org/swt/widgets/

How would you go about this? Obviously there are some trivial cases like attributes with text or number values - where I can just take a normal text field. Even true/false values can be represented as (checked/unchecked) checkboxes. But what about these "deep hierarchies". The tree widget is the only one that somehow fits in this but I still don't have an actual idea how to combine it.

Summary: Given some object graph where each object has attributes and values (simple and complex), how would you present this to the user? What is a nice way to go when the value is indeed complex and is another object itself. I am looking for a way to map this information to one of the UI components I am allowed to work with.


If you are not familiar with the notation used above:

A very brief introduction about JSON:

With JSON one is able to represent objects in a format that is both human-readable and could also be easily parsed/interpreted by the computer. You can see an example here: http://json-schema.org/examples.html

Practically every object is a collection of attributes (keys) and their values. It is just that the value of an attribute could be rather complex - it can actually be another object, thus giving you the option of 'nesting' or creating deep hiearchies.

3
  • I have to say, I don't quite get it why is this put on hold. First of all the business logic has nothing to do with JSON as this is actually the data, the model. I (as a developer) am well aware of how to separate model, logic and UI - that is why I see my question as concrete enough - I want to be able to represent JSON objects with a limited set of UI components. And as my problem is related only to JSON objects I am just not sure that "... a useful UI independent of the content source" might help me here.
    – Anton
    Jan 30, 2015 at 10:22
  • 1
    I think I know where the confusion comes from. I edited the question, I hope it is better now. Web forms don't really help me, I am working on a desktop application so maybe not all of the UI components will match and maybe the usability guidelines are a bit different.
    – Anton
    Jan 30, 2015 at 10:55
  • Great improvement! Now I know what your after ;-) Jan 30, 2015 at 11:42

1 Answer 1

3

JSON really just structures data in containers - {} or []. So the question really is what ways can you find of showing structures in a containers.

I can't think of any more global container than a simple rectangle, and by using colours and some basic design elements, you can easily show a visual representation of the data. Here's a rough idea of what I mean structuring the data you gave as an example in the question. I've also added a list element which you left out of your example data.

enter image description here

2
  • Thanks for this. What about if the items in the array are also complex object? Would you follow the same pattern? And how about giving the user the option to edit things?
    – Anton
    Jan 31, 2015 at 16:13
  • @Anton Everything in JSON is encapsulated in what I've given above, and I'd suggest using it in a similar fashion. I also think that editing should be possible quite simply just by editing the content of each container.
    – JohnGB
    Jan 31, 2015 at 17:15

Your Answer

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

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