2

I am working on a huge system which is meant to provide internal user to manage products' lifecycle. Thus, it's like a complicated dashboard containing lots of information and data grid and functionalities.

One of the pages contained a toolbar including the following elements and a data grid (aka table) right beneath the toolbar.

1. External Links Clicking the link would make users be redirected to another page but still in the same system. 

ex: 
from "website.com/feature-one" to "website.com/feature-two"
or
from "website.com/feature-one?param=1" to "website.com/feature-one?param=2"

2. Action Clicking the action would affect the data grid, just like the common button we saw in most of the dashboard website/system.

ex: Add/Update something...etc.

3. Generate Report I think this is actually kind of action...but still something different since it won't affect the data grid but export/generate something from the related data grid

ex: Export to Excel/ Publish Sales Report

Therefore, I am suffering from how to provide all these functions on the same page at the same time.

This page was used to display the whole functions as an anchor style (just like the image below, I only changed the wording but not the appearance....yeah so old school right!)

enter image description here

(Also please imagine there is a huge data grid beneath these various functions.)

Here are some challenges I had already come up with:

  1. How to display all the buttons in only one line if the width of the browser isn't wide enough. (doesn't mean RWD is necessary, but still, have to take good care in case of the amount of the buttons being too many)

  2. I know one of the solutions is to go with the dropdown-button, but due to the previous appearance(attached on top), gather some of the actions in only one dropdown-button might cause users' confusion right Q_Q.

Please recommend some approach if you have any good or crazy idea, I would be very appreciated.....QQ Thanks!

Improve this question
5
  • How flexible can we be with the solutions ? Considering the design of the system might be old by the look of your example. Creating a solution that jumps out of the current framework of how things are done and look is usually bad idea in systems like these. Since it's a big intranet system Im going to assume your power users are used to certain ways of using the application.
    – Paran0a
    Commented Feb 20, 2020 at 12:21
  • 1
    @Paran0a Hi~thanks for your reply. yes, correct...it's an intranet application. About the flexibility you mentioned, improving the UI and creating a better solution are now my core mission, so that's why I asked for some suggestions.
    – Lora Lin
    Commented Feb 20, 2020 at 13:39
  • Do you have an example of how the data grid currently looks? i.sstatic.net/L22Hg.png is it something like this?
    – Paran0a
    Commented Feb 20, 2020 at 13:56
  • @Paran0a Yes, the data grid is quite similar to the image you attached and much more complicated. (BTW, each of the rows also provides context menu which contains many other actions for only single data specifically.) (Just like this image help.syncfusion.com/windowsforms/datagrid/…)
    – Lora Lin
    Commented Feb 20, 2020 at 18:22
  • I'm currently recreating some internal company apps, and yes big changes are needed and users are (temporarily) confused. But keep doing the right thing!
    – BreakingGnus
    Commented Jun 16, 2021 at 22:32

1 Answer 1

Reset to default
2

It seems like your current table is a cluster of right click functionalities per column , links, buttons and dropdowns.

I would assume that there is no structure or logic as to where actions are placed.

So I would advise you to first look into structuring your actions.

enter image description here

After that you can look into how you want to group them.

1. Action per column

Makes the most sense to leave it the way it is. If I want to edits a certain column value a simple right click action on the column itself works the best.

2. Redirects to different pages

For example if one of your columns is name of a product , it would make sense to make the name of the product as a link to the product detail page.

Any similar cases can be done in this way.

We can talk about additional links in my 3rd point.

3. Whole row actions

Here is where the things become a bit more complicated as you start running out of screen space. Exporting reports , creating new entries , deletion of rows ... Add in the additional links from the point 2 and you have no way of putting them all together.

Not having all of this in a single dropdown makes sense as you don't really solve any of your UX issues besides saving screen space.

My advice is to create a modal that you can open on each row. It will consist all other actions. For example.

enter image description here

I dont know all of your features so I can't structure them in a way they make sense so you will need to figure out this yourself.

Improve this answer

Your Answer

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

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