3

I need help/opinion with following case.

I have a typical Material Design screen with tabs like this:

enter image description here

I would like to provide edit button that would open edit screen for the current tab. Would it be ok to put it in the actionbar (toolbar)?

Like this: enter image description here

Edit icon should open screen with editable data of current tab (not all tabs). I am concerned because of the parent/child relationship (Title - parent, tabs - children)... Should I put edit button on every tab instead?

|improve this question
  • The button "edits" the tab? Could you elaborate this? – Alvaro Feb 2 '17 at 0:16
  • I edited my question to illustrate better what I mean.. My question is -> is it ok to have edit in the parent (action bar) that opens edit screen for a single tab? – daneejela Feb 2 '17 at 10:36
  • Sorry, but I still don't understand what does an edit button will do in this scenario. Normally there is a menu button that will display options from the current view and links to other pages of the app like a settings one that redirects to a settings page. Do you mean this? – Alvaro Feb 2 '17 at 11:09
  • Yes, menu button/menu action/icon in the toolbar.. Is it ok that that menu option opens screen with edit properties only for the current tab (not all tabs at once, as one would expect because of the "parent position" of the edit option on the screen? – daneejela Feb 2 '17 at 11:13
2

Since you are following Material Design guidelines to implement the screen, I'd suggest using a Floating Action Button in order to incorporate the edit button on the screen, i.e., in case you don't have any other primary action for your data. That way, the edit button would be more closely tied up to your tab's data than to the overall app (as implied by its placement in the app header).

|improve this answer
2

To give edit option on the topmost tab bar is not at all a good option because it might confuse user with the topmost tab bar properties. So the only option left is below the three tabs. Edit option below the three tabs can be a good option usability wise but it might create visual inconsistency in the page. So to make page more visually balance, either breadcrumbs or some other button can be a good option on the left side.enter image description here

|improve this answer
1

I would recommend placing the edit button above the tab bar, at the height of the heading (see the image below). This should make the whole interface cleaner and easier to navigate through.

enter image description here

|improve this answer
  • This is my first choice -but, I wonder if the user would expect that edit button there would open edit screen with editable properties for all tabs, not just the current tab? – daneejela Feb 2 '17 at 10:58
  • Most users will expect that button to open an edit mode only for what is on the screen, which is just the current tab. – Patryk Michalik Feb 3 '17 at 12:25
1

In my opinion a button that triggers an Edit action in the App bar is strange. To answer the less specific question, if an action button in the App bar can refer only to the current tab? I would say no, the App bar can contain App related actions and/or a Menu icon that opens a simple menu with links to other pages of the app (Help, Settings, etc.) or actions related to the current view (not links). So if your action is something related to the current view of the tab, for example Sort the items in an specific order then it is ok. If you need to open a settings page I suggest that the link opens a general settings page and then you can differentiate specific settings there.

Material design - App bar (emphasis mine):

Icons on the right side of the app bar are app-related actions. The menu icon opens the overflow menu, which contains secondary actions and menu items like help, settings, and feedback.

|improve this answer

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.