11

We have a web application that allows users to query a database.
The results are returned in a breadcrumb style interface.

We brought this change in at a new version, and our users have been having problems adapting to the change. We provided some docco on how to use it, but the main issue is it is not self-intuitive enough.

I am now unsure on if we made the right decision on moving away from our original 2-level tab based form.

I have been getting some excellent feedback on a related question, which refers to how to best show the user that there are links to click to get further down the breadcrumb. A lot of that will be taken on board for the re-design.

Our data is spatial.
Users search using form based search (separate interface).
Results are returned in a separate panel.

  • A result-set can come from several layers e.g. Buildings, Parcel Boundaries
  • A layer has a default view, but also administrator may have designed additional layer views.
  • A singular result (we call these features e.g. a specific building) will have a default view. Again, the administrator may have designed additional feature views for it.

Here is the old panel:

enter image description here Results are in the left hand pane, split down into layers (folder icon).
Depending on if your clicking a layer or a feature within a layer, the layer/feature views will be displayed as tabs along the top of the right hand pane.

And here is our new Breadcrumbs interface:

enter image description here

Critical feedback:

  • options were clearly visible in the old tabbed panel are now hidden in the bread crumb
  • difficulty with multiple results = problems navigating back to the results, where as in the previous panel the selected features were always visible on the left hand side
  • To get to feature views, you had to double click rows within the middle pane. We have a tooltip pop up, but it is not obvious to do this.

I have been scratching my head trying to mock something up that combines the best of both and does not mean we have to do a massive U-Turn to use the old code (which has some other issues not related to usability). Here is what I have so far:

enter image description here

Really appreciate your advice on this one.
The Answer I need is some good advice on how to proceed to design an interface that the user will find easy to use.
It could be that I need to revert to the older code.

Hope the question is not too broad? If so, let me know how to adjust it via the comments.

Improve this question
1
  • A general observation - I looked at the documents linked you mentioned and, man, it's confusing. This is in large part because your app seems pretty sophisticated, but pretend you're a user who doesn't know this new UI. I'd contend that the documentation is pretty overwhelming (and could use more screenshots). Reflects on the uncertainty on how to make this UI work well.
    – Voodoo
    Dec 9, 2011 at 22:41

3 Answers 3

Reset to default
7

In the last mockup you are using a sort of popup menu to display a hierarchy. I think this is very confusing since the best way to show a hierarchy is a tree view... which you already have.

A question: what happens when you click "Layer Name 3" in the tree? Does it show a list with links Feature 1, Feaure 2, Feature 3,...? If yes, then here is my suggestion:

Keep it simple. Get rid of those popups, just make a classic breadcrum navigation.

When you click "Layer 3" in the breadcrum, the same thing happens when you click "Layer 3" in the tree.

enter image description here

Improve this answer
3
  • On other Q, we had this example of a hybrid approach which works well. ux.stackexchange.com/questions/12854/… We need that extra level to choose, for the various layer and feature views that can be made available.
    – jakc
    Oct 18, 2011 at 7:54
  • 1
    I don't think you do. Click "Layer Name (3) in the breadcrumb and the contents pane will show all the available options within "Layer Name(3)".
    – Bart Gijssens
    Oct 18, 2011 at 7:56
  • 3
    I really think you need to simplify. The art of creating usable UI is not to add UI, but to remove UI.
    – Bart Gijssens
    Oct 18, 2011 at 7:58
2

It's good to see that you are thinking through alternatives here. In doing that you need to keep in mind that if you provide two different ways of doing the same thing, you are going to add a lot of confusion. I would recommend you choosing one of them, but not both. Which one is the question.

The tree view is a classic way of showing a deep hierarchy, and matches what you seem to want to do here, but it has drawbacks of its own.

The breadcrumb like navigation that you are using could also work if implemented in a way that is clear to your customers. A fairly good implementation example is WoWhead, but their audience is probably fairly different from yours.

You need to do testing with your potential client base. It doesn't have to be hard and will give you a lot of insight. If you have a clickable wireframe or mockup just ask about 3 people to come and then ask them to pretend to perform a set task.

Improve this answer
1
  • The audience for wowhead would have some relevant characteristics in common - a fascination with numbers, data, and exploring how all that data connects, and finding specific nodes that match their particularly specialised needs.
    – Erics
    Oct 18, 2011 at 11:21
0

I find the drop down in each breadcrumb to be confusing. It signals that you can select a value for each breadcrumb, but that's not the case. It's a very funky way to do navigation.

The old way looks much clearer to me.

Improve this answer
1

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.