1

I have a feeling this answer will depend on everyone's opinions and which design spec they follow. However, maybe it will give me a broader perspective.

I have a "panel" (as best as I can describe). It so happens to contain tabs in this instance, but may not always. It sits in my sidebar, but again, should be able to sit anywhere.

It's similar to the gaming.youtube.com example attached with the suggested/comments tabs and pane.

What is this called in GUI? A panel?

I tend to think so but then I see lots of examples of panels like this which are kind of like cards: http://foundation.zurb.com/sites/docs/v/5.5.3/components/panels.html

But is this just one example of a panel which has the fundamentals of: "Panels are often used to section window (browser window in my case) contents to ease visual organization."

gaming.youtube.com

  • I agree that panel is the best word to name what you are describing. But I would call that specific panel in the sidebar of your screenshot a "playlist". Particularly because it has that autoplay toggle which means it will play each video one by one. – Kodos Johnson May 23 '17 at 6:29
  • Yeah I agree with the playlist. The playlist is also only 1 tab though, the other tab is comments. So to combine both of those components into one, lets say its called "playlist-comments" you'd get playlist-comments-panel. Panel being the most important part of the name I want to get correct. – Rhys May 23 '17 at 6:35
  • I think "panel" would be good. However I think it might be a good idea to use a more general name. Like "video-sidebar-panel". That way if you add or remove tabs later, you don't have to change the name of the panel. I would put a more specific name on each individual tab. Like "playlist-tab" or "comments-tab". – Kodos Johnson May 23 '17 at 6:53
  • Yeah absolutely, totally agree with making it generic, was just a quick example above. Cheers! – Rhys May 23 '17 at 6:55
  • @Rhys Just wondering in your design system/library whether you have the concept of nested panels. If so, then what's the difference between a panel and a container from your perspective? – Michael Lai May 23 '17 at 9:14
1

I agree with your reasoning that "panel" is the best name for the UI element that you are describing.

The specific element shown in the sidebar in your screenshot is a "playlist" and it is one tab of the panel in the sidebar.

I think you could use "panel" in your name. I think it might be a good idea to use a general name. Like "video-sidebar-panel". That waym if you add or remove tabs later, you don't have to change the name of the panel. I would put a more specific name on each individual tab. Like "playlist-tab" or "comments-tab".

At the end of the day though, it is up to you how you or your organization names those elements.

Here is a link to a related QA that might be helpful: What's the difference between cards, panels, and tiles?

  • I was going to comment that the names given to (or still used for) UI components seem to be rather subject to the platform and design system, and looking at the questions that you references (and that I realized was my own attempt to seek some clarification on this issue a while back) I guess we are still not really closer to an answer. – Michael Lai May 23 '17 at 9:13
0

"Tabbed panel" distinguishes it from non-tabbed panels, accordion panels, etc.

  • Thanks! Only thing I'm not sure about is putting tab in the name. Panel contains the tab and panes. If in the gaming.youtube they drop the comments (or in my case the need to have tabs) then I am left with tab in the component name. Having said that, if there was a specific component which handled tabs in a panel for you to pull in I can see that working. If you decided to drop the tabs in that instance, you would have to change component, rather than edit in my instance, which is fine too. My question was more referring to the "panel" part of the ui but thanks for the input! – Rhys May 24 '17 at 4:51

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.