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
- Good UI or icon for “go back to Master”?
- Any other suggestions and other points of views on the responsive part?
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.
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
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.
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.
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
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?
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.