Contextual sidebar and consistency

Question

I am designing a website service for coin collectors and have a question regarding navigation. The control flow is as follows:

1. User selects country (from map or an alphabetized list).
2. User selects a time period the beginning of which marks a currency reform (i.e. Germany - Third Reich 1933-1945).
3. User sees all different types of coins by face value (i.e. if selected country is US, user would see all types of one cent coins (Lincoln Cent, Union shield cent, etc.), then five cent coins and so on). Selects an type.
4. Sees detailed information about the type and sees a list of all issues (i.e. Lincoln cent: 1941, 1941-S, 1941-D, 1942, ...) with detailed information about each one.

Every page will have a breadcrumb, that shows the path to current page for navigation. I'm also thinking of adding a contextual sidebar to the left, that contains the previous page's items (i.e. if a user is in the detail coin type page, the sidebar would show a list of other types in the same period). Here is a simple visualization of the flow:

Arrows represent hyperlink destinations. Dark rectangles represent contextual sidebars. The shown breadcrumb would appear in the deepest page (coin type).

It would seem to me to be very useful (not needing a full page reload to choose another sibling). But wouldn't this be a bit overwhelming (especially for novice users)? I am also concerned about the consistency. Every sidebar would have its content laid out differently. I know that it's rather abstract at this point. But maybe you have any ideas how to improve on this?

Answer 1

I would approach this using a "Search and Filter" methodology. Your information architecture has multiple levels, but users don't think about content that way. They think more abstractly - as in, "What is the first thing I think about when searching for a specific coin". It could be a date, country, color, detail, text or inscription - or something even more abstract that only coin collectors would think about.

The caveat to that is, if you know that your users are specifically looking for coins based on country, date range or value, a sidebar with those options could work, but I don't feel like it's the best solution to this problem.

Here are some solutions:

1. Use a "Search and Filter" fluid interface.

Let users search for anything they want and filter the results based on the search criteria. You already know a handful of categories - country, value, period - so why not create metadata for each category and build pages that highlight those results? For example, build a list of country metadata (USA, Canada, Germany, etc.) and if any of those terms are included in a search, a custom page showing details for that country appears allowing users to easily drill down into more details. I wouldn't be able to say how that page looks, but I could imagine it including rare country coin details, popular coins from that country based on previous searches (or navigation), and filters to navigate further into coin details. This solution can easily be formatted for mobile, just have the filter options as a fly-out menu and organize the search controls in the header or footer, leaving the majority of the screen for coin details and deeper navigation.

2. "Filter and Collapse"

Use a similar filtering control but collapse panels after content has been selected, (for example, when a country is selected, collapse the left sidebar and show, "Germany" in a vertical orientation). This will allow multiple levels of filtering through data but take up much less screen space.

Overall suggestions/tips

1. Keep the breadcrumbs for desktop, remove them for mobile (or put them into a logical filtering fly-out menu)

2. Keep refining the interface based on usage statistics. Push popular content to the landing page, and refine the landing page based on navigation insights.

3. Try and empathize with the user. Think of how they would approach looking for coins and try and build an interface to suit their line of thought.

4. Implementing a decent "Search" feature may be overkill for this application, but it is one of the best ways to let users quickly find what they're looking for.

Answer 2

There are some ecommerce sites doing this. And yes, sometimes it is confusing whether they are suggested items or just the previous and next item.

Maybe just provide a previous and next arrow just like the detail view of a facebook photo within an album.

Answer 3

It seems to me that a traditional faceted search approximation will clarify the results.

No need for a breadcrumb since you're not really going deeper on a hierarchical structure. instead, you're lining up properties of the coins.

Offer from start all the contextual faceted options, to enable users search and explore the collection following their own path.

If specific Coins need to be nested along a period or property, you can add a Tag facet with all the specific tags for the visible coins.

Answer 4

This seems to me a bit overcomplicated. Maybe I am missing some point, but I rather would use a multiple navigation sidebar. I find this solution super easy to navigate with a very clear feedback about user position.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 5

@Crossfire, correct me if i'm wrong please, have a look at the mobile coin screen https://au.pinterest.com/pin/180284791312295679/

in addition, from the last screen (coin details), user also can drag back and forth to check 'previous' / 'next' coin screen. forgive me for not adding that screen. let me know if it works, thank you.

Answer 6

I noticed that you very much focused on web solution, without mentioning mobile.

In this case, focus on clear communication with the user. On web you have a lot of space for that, s allow user to pick THE solution they want, putting them together in a clear way. What I propose is a mixture of breadrumbs with links in the description and dropdown selection.

• Power users will have no problem with using dropdown filtering
• Whereas regular users, who do not feel comfortable with it, may utilise < Back button or breadcrumbs. Filtering of the results would happen through links embedded in the category description. Here these links include issues - 1999, 2001, 2008.

So if I was in Germany category, in the description I would see:

Germany

The first German coin discovered is dated for YYYY. There are also other interesting details about them, that are included here. Currency reform mark periods: Period1, Period2, Period3, ...

Of course, it is the best to test the approach you want to take before you decide.