Wednesday, July 1, 2015

gui design - Breadcrumb or tabbed form or best of both?


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.



Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...