2

I've got a tab list where I have a menu and a tab close button. I've positioned the close button as shown in the image.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Is this a good practice? Or else what is the optimum way of positioning such a button in a tab view. Please note that there is a hidden menu indicated using the three dot inside that tab button. Any suggestions on this?

  • I can already see this causing a lot of frustration due to the Overflow menu button placed on the right just below the close button. If you notice, a lot of people might be already accustomed to Chrome's close tab button. You might as well piggyback on that mental model of the user. I would recommend you to try a different functionality for the overflow and replace it with the close button. – Swapnil Borkar Aug 11 '16 at 5:46
  • I thought of doing that but, I'm stuck with the overflow menu. Any idea on the overflow menu positioning.? – Imesh Chandrasiri Aug 11 '16 at 5:50
  • You could have it on the left in place of the Favicon. – Swapnil Borkar Aug 11 '16 at 5:51
  • 1
    You might have to conduct a few observations for that. As of now I'm basing all my answers upon how browsers do it. Edge browser has a loading indicator to the left of the tab name, Chrome has Favicon. You do not have Favicons in your tabs so might as well use that estate up for the Overflow menu. – Swapnil Borkar Aug 11 '16 at 5:55
  • 1
    Since you haven't shared much about your UI here's some vague alternavite - You could free up some space by moving the overflow menu to the content of the tab. If this is an option clearly depends on the functionality the overflow menu contains. If you can burden the user with one additional click to reach the menu you will have plenty of canvas (I guess) to place the menu, and enough canvas to place the close on the tab. – Mx. Aug 11 '16 at 7:56
1

The three dots look like a drag and drop handle. When you have a menu opening, you could explore using a dropdown arrow pointer instead.

0

As per the discussions I had in the comments, I decided to implement my solution as following.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • if the tab name interactive ( i.e. i can click on it ) then this solution will not work, as there is a conflict of functionality. Tap vs. Close. However, if the Tab Name is non interactive then I suppose it is ok, although visually it is not appealing. I would put "X" outside of the tab name box on the right side and not in a circle but rather in a square box. – Stanley VM Aug 12 '16 at 13:40

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.