2

I'm making a UX/UI for email service provider software and I'm stuck on how best to do the navigation/controls for this page style:

first, you view your email campaigns

second, you check a box next to the campaign you'd like to take an action on

third, you click "delivery view" to see your email delivery statistics, or "traffic view" to see things like the number of opens and clicks to your campaign, etc

then the user needs to either hit the back button, or use the breadcrumbs, to navigate back to that from whence they came.

question:

this seems bad to me and i can't really articulate why.

sticking buttons on top of a table to navigate to other pages just seems "wrong" and clumsy, and relying on the user to use the back button / breadcrumbs to navigate seems questionable too

what should i do here? i feel like i probably need an entirely fresh approach

Improve this question
1
  • Take a look at Inbox by Google. If you want to make an action on one element, the actions are shown by hover. If you mark multiple items, the actions appear in the header of the table. For your detailled view, you can stay on the same page and show them underneath (like inbox), since you don't have complex information to display.
    – Michael Schmidt
    Nov 19, 2016 at 10:55

2 Answers 2

Reset to default
1

I'm sorry I don't have a clear answer for you but here are some thoughts:

you check a box next to the campaign you'd like to take an action on

Those check boxes are implying that you can select multiple rows and perform some common action on them all, however, it seems like the 'Delivery View' and 'Traffic View' actions are for a single row only.

Consider removing the checkboxes if you dont have any 'multiple row' actions.

Secondly, you're currently enabling access to the 'Delivery View' and 'Traffic View' via the tabs. Tabs imply that the user can click on them and have the content underneath updated. However, it seems you are rendering a completely different page once the tab is clicked - I think this is why it feels "bad" to you.

Some thoughts on an alternative:

  1. Remove the tabs
  2. Follow @Devin's advice and make the 'Delivery View' and 'Traffic View' available via per row actions (e.g. links/icons)
  3. When the row action elements are clicked you could then take the user to a new page and provide a Back button (in addition to the user clicking the browser back button), or if the information is quite small you could expand the row down and show the details underneath, like an accordion.
Improve this answer
1
  • thanks for the reply! the checkboxes are indeed for multirow actions, you can change views for multiple campaigns at once. the delivery view and traffic view pages are pretty elaborate with graphs and stuff, the other data currently revealed via progressive disclosure with "expand all" in the table is pretty minimal by comparison. adding the views as per row actions would require a table redesign if i didn't use icons with tooltips - non-ideal imo. i'm currently thinking of using a single bootstrap split dropdown button which contains both "views" and "actions" with "expand" default
    – UserExperience
    Mar 24, 2016 at 7:31
0

While I think you should have some kind of "per row" action bar (with icons if space is an issue) this part of your problem that you're describing is easy to solve: simply use a modal or dialog so users can simply dismiss and close it after they see the information they're looking for.

Alternatively, you can expand the row and include the information under the non visible part of the row. You already have a button for that, so I assume you more or less had a similar idea

Improve this answer
1
  • we're trying to avoid modals wherever possible unless its for something like a simple confirmation box, but having a way to x out to the previous page is definitely a decent idea
    – UserExperience
    Mar 24, 2016 at 1:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.