User friendly Navigation on Single page WebApp with several overlays

Question

I am developing an angularjs App. There are lots of data entities ( eg photographers) displayed in a list. By clicking on one you get Detail data displayed in an overlay. There are links to other detail-overlays in there to. So you can navigate directly from a photographer Detail overlay to an photographer-institution Detail overlay and further on.

At some point the user will ask himself something like "how do I get back to the photographer Detail I opened first?". For now, it is possible to navigate back using the browsers back button. But that seems not obvious enuogh to me.

First I thought of something like a breadcrumb, which we used decades ago. As this seems a little oldfashioned and they could get very long too, I wondered if there are other ways solving this problem? Any patterns or working examples?

Answer 1

Well, you already noticed the issue with no testing whatsoever. That means a lot. To the very least, that you need to look for another approach.

I'm not sure why the photographer's info opens in an overlay, but assuming there are good reasons to do it (and remember: you should always use overlays sparingly) , you should NEVER connect overlays with other content in overlays, this is a very bad user experience.

To be honest, what you consider old fashioned is, without a doubt, your best option. However, depending on how these entities connect with each other, you may find other ways to do it, maybe even with a more original or modern look, but in order to do this, you'll need to define the Information Architecture for your site. The fact that you mention that breadcrumbs could get very long tells me the problem lies in IA rather than UI, so try putting it all in paper and see how it all connects in a logical way