4

I have an application which edits Heirarchial data.

Consider Level 1 items of Projects, Users, etc.

Now lets just consider Project for the sake of simplicity, and Projects are really driving this conundrum.

Project
  +-Job
  |   +-Tool Assemblies
  |   |   +-Edit Assembly
  |   +-Activities
  |   +-Invoices
  |   +-Edit Job
  +-Budget
      +-Vendors
          +-Vendor #1 Prices

The story for editing the assembly is:

  1. Select Projects
  2. Choose a project from a list of projects
  3. User is presented with a of project level items (Jobs, Budget, etc)
  4. User selects Jobs to see the list of jobs for that project.
  5. User is presented with a list of jobs.
  6. User selects a jobs.
  7. User is presented with job level items (assemblies, activities, etc)
  8. etc.

I want the user to know that assembly 50, is part of Job 10, which is part of Project 'Beta', at all times. The user will spend most of their day performing various tasks withing that Job. Closing the application/site, and opening again should bring the user back to that Job they were previously at, so when re-open the application/site they need the visual that they are in Project Beta/Job 50/. This is the context for all the actions the user performs.

Breadcrumbs would be the traditional way of solving this likely:

Project Beta -> Job 10 -> Assembly 50

This would show the user their current context. But I am trying to envision how they change jobs? projects?, etc. A tree would answer those questions, but I find a tree instantly makes the application feel more complicated....

Basically I am trying to envision the simplest way to represent to the user what context they are operating under (e.g., Project Beta -> Job 99, or Project Beta -> Job 99 -> Invoice 77, etc).

edit: I removed the comment about bread crumbs feeling dated. I am not a UX expert... or even very good at it, that is why I am here to get help.

  • Did bread crumbs get a bad rap when I wasn't looking? – plainclothes Nov 18 '15 at 21:02
  • Are you talking about breadcrumbs or a tree structure here? – Mervin Johnsingh Nov 18 '15 at 21:23
  • edited to remove my unfounded thoughts on bread crumbs. I am not sure whether breadcrumbs, tree, or something else makes the most sense here, that is why I am here. – sheamus Nov 18 '15 at 21:48
  • These are interesting ideas and suggestions. It is really hard to mark an answer in this forum, as design is a pretty subjective thing. All of these suggestions have helped me, but not ready to call one an answer. I have upvoted all that helped. I want to digest this info for now. – sheamus Dec 1 '15 at 14:53
4

First of all you can choose from more UI options to show and navigate through hierarchies. Additionally to breadcrumbs and tree view there are e.g.:

  • menus and submenus navigation (traditional and ring menus)
  • nested labels (allowing more hierarchies)
  • column navigation (like in OSX Navigator)
  • path navigation (like in Windows explorer)

enter image description here

I believe in UX you should ask some more questions in order to choose the right approach, such as:

  • How much does an user need see the whole trail, where he is?
  • Is the "Projects" really the root of hierarchy for my user role? Or are there different hierarchies based on the user roles?
  • How often does an user need to switch and which levels?
  • Which part of the trail is the most important to see the whole time? Which are less important parts?
  • Can I split the trail navigation and put the parts on different places? (e.g. 2 levels on aside navigation, level 3+ into the top). If yes, why?

Hope this helps to point somewhere :)

  • I believe Windows gets this very wrong. Adding an auxiliary interface to breadcrumbs creates a secondary ideology and introduces a split workflow that can lead to confusion. Explorer already has a simple interface for choosing sub-directories (the main icon view). It doesn't need a secondary interface that does exactly the same thing. I would argue that unless your overall UI prevents it, clicking on one of the breadcrumb points should simply take you back to that step or action, not provide its own auxiliary interface, unless the selecting is the main interface. – devios1 Nov 23 '15 at 20:29
  • Well, I put here the Explorer's path navigation just to give other ideas. Moreover I have a different opinion. This secondary approach seams to be useful for powerusers (who know why they want to click on expansion arrows). – Radek Nov 23 '15 at 21:22
  • It can indeed work well in complex environments, such as debugging a DOM tree for example, but I would argue that in most situations the added complexity is not worth it. – devios1 Nov 23 '15 at 21:42
  • 1
    I confirm for the complex environments. I would even say it depends on the amount of structural data within the levels. – Radek Nov 23 '15 at 22:15
2

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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