2

This part of my app will be for managers who need to approve the working hours of their employees.

A manager will get a overview(1) with all the hours they need to approve, also hours from employees that are missing, disapproved or recently approved are on this list. By default every employee is a row in this table with some basic information: Week number, Name, Working hours (3).

What I'm trying to make
I want managers to be able to change what kind of data they see in the overview table. Some might want to also see the the department of the employee, or the billable hours for that period.

What I have now
When selecting the settings-icon(4) a modal opens with the available presets(2) (I want to keep it this way, managers should not be able to fully customize everything). When selecting a preset(4) a preview(5) of the row is shown at the bottom with a legend. The legend numbers only show up in the selected preset.

My Question
I'm not sure that the way I display the presets and the preview element that this is clear for users. What do you think? How can I make it clear that in the modal(2) the user can customize what they see in the overview(1).

enter image description here

1
  • Do you have an indication that users struggle with picking another view? How did you arrive at this conclusion? E.g., are there tickets asking for this feature (although it's there), or did a usability test uncover this issue? If not, what exactly are you worrying about? If so, there should be additional information (text in the tickets, remarks by testers) to tell you what's the problem. I don't see anything clearly problematic here. Commented Jun 13 at 12:54

2 Answers 2

0

It's also not clear to me. There are two mixed concepts: setting and editing. If you don't clarify these two options, either together or separately, the concept of editing will never be clear.

There is the edit/settings icon but I don't think it's entirely clear. On the other hand, in your app I think the option to edit is not mandatory, the user can only access it to view.

enter image description here

Icon from stock.adobe.com

I know that it may not be the intention, but the most accessible and understandable option for any type of user, even though the modal window is editable by default, is still to include the edit, save and discard changes buttons.

2
  • Thanks Danielilo for your response. So if i understand correctly your feedback is about changing the wording and the icon to make it more clear what a user can do in the modal? You feel like the modal itself (presets and preview) are fine like this?
    – Awesom-o
    Commented Jan 20, 2022 at 12:11
  • – changing the wording and the icon – it's an option, but I don't think it will be clearly understandable for every user. In these cases, I think the clearest option is still to include the buttons to edit, save and delete changes in the modal, despite the type of design.
    – Danielillo
    Commented Jan 20, 2022 at 12:18
0

The screen is part of a bigger application.
Maybe place the settings icon in the gray area, at the height of the toggle - then it may be clearer what it is intended for The title could be named "Edit Display settings".
The pattern of opening a modal to change some settings is used quite often, so it should be clear.

For the buttons: for which platform are you designing this? Please consider existing design patterns/guidelines (also of the application).

Regarding preview: It is quite far away from the selection. I'd show it beneath the badges - you probably will need the numbers any more which again reduces complexity.

In general, instead of assuming what users understand or do not understand, test this. It is not difficult and gives you insight into what works or does not work.

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.