Detail back to Master. List, arrow, close or another icon?

Now my previous html structure is more responsive. Which means that on smaller screens the detail section is opened over Master. This rises the question what icon to use for making it clear how you can go back to Master.

Here is the live responsive version

Questions:

  1. Good UI or icon for “go back to Master”?
  2. Any other suggestions and other points of views on the responsive part?
1 Like

I mean, it sort of depends I think on what is going to eventually be on the “Master” section.

Is Master going to be a list of things? If so, that icon might be sufficient as is. Like if Master is going to be a UL with a bunch of stuff, and the Detail won’t, the icon represents Master accurately. It’s more about association than a definitive “use this”.

It would be easier to offer advice if your working example showed real sample data.

As it stands, l found it quite confusing, because the two pages look very similar, but require clicking/tapping in different areas. That might not be an issue with the “real” page, but I can’t tell from what you’ve posted.

1 Like

As @TechnoBear said that’s very confusing and I just couldn’t work out where I was at all (and you only have two items).

Especially when I resize my window (as I do all the time) then Details suddenly disappear!! Where’s it gone? I’m sure it was there? maybe it’s at the bottom, or in the hamburger as usual happens? How many elements do I need click to find it. Sorry, I’m off somewhere else now as you made me look silly :slight_smile:

Instead I would change the smaller screen to a ‘tab type’ design so that you have the two links on the top and the current one highlighted and therefore no ambiguity.

(icon) Master (icon) Detail

You could even then color code panels and tabs to match or anything similar.

Mystery meat navigation’ is a pet hate of mine.

1 Like

Thank you for your input. I have now changed the test to more “tab type”. Did I understand you correct?

The context is about 95 percent this.

Not quite :slight_smile:

I would have preferred this type of structure:

As it stands currently I don’t know if I’m on Master or Detail and why would I click detail to go to master (and vice versa)? Maybe it’s just me :slight_smile:

2 Likes

I have now worked some more withe master-details and I am not quite there yet. I think a “back arrow” will be more user friendly. Thoughts?

Live preview

I’m only on a mobile at the moment but that seems to work better now.

I’ll have another look tomorrow when I’m back on the desktop. :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.