Skip to content

Improve admin panel user experience regarding title links and order of actions#9496

Merged
ahukkanen merged 11 commits intodecidim:developfrom
i-need-another-coffee:feature/remove-link-from-title
Sep 14, 2022
Merged

Improve admin panel user experience regarding title links and order of actions#9496
ahukkanen merged 11 commits intodecidim:developfrom
i-need-another-coffee:feature/remove-link-from-title

Conversation

@roxanaopr
Copy link
Copy Markdown
Contributor

@roxanaopr roxanaopr commented Jun 28, 2022

🎩 What? Why?

Based on discussions from #9400 we need to remove all the links from every admin listing pages and make sure that we have "preview" and "edit" actions. After further discussion in this PR, it was realized that we actually need the admin links but we just have to standardize the behavior and make the links behave consistently within the admin panel.

This PR implements two changes to the admin panel:

  1. Standardizes the order of actions across all views where we have tables with action icons on the right side
  2. Standardizes the behavior of the admin panel title links to make the admin user experience consistent and not to "throw" the user outside of the admin panel while they are browsing it

📌 Related Issues

Link your PR to an issue

Testing

Describe the best way to test or validate your PR.

📋 Checklist

🚨 Please review the guidelines for contributing to this repository.

  • CONSIDER adding a unit test if your PR resolves an issue.
  • ✔️ DO check open PR's to avoid duplicates.
  • ✔️ DO keep pull requests small so they can be easily reviewed.
  • ✔️ DO build locally before pushing.
  • ✔️ DO make sure tests pass.
  • ✔️ DO make sure any new changes are documented in docs/.
  • ✔️ DO add and modify seeds if necessary.
  • ✔️ DO add CHANGELOG upgrade notes if required.
  • ✔️ DO add to GraphQL API if there are new public fields.
  • ✔️ DO add link to MetaDecidim if it's a new feature.
  • AVOID breaking the continuous integration build.
  • AVOID making significant changes to the overall architecture.

📷 Screenshots

Please add screenshots of the changes you're proposing
Description

♥️ Thank you!

@roxanaopr roxanaopr force-pushed the feature/remove-link-from-title branch from 54d878c to 734efdc Compare June 29, 2022 17:04
@roxanaopr roxanaopr force-pushed the feature/remove-link-from-title branch 2 times, most recently from 7a0f356 to 74c8205 Compare July 1, 2022 08:34
@roxanaopr
Copy link
Copy Markdown
Contributor Author

roxanaopr commented Jul 1, 2022

@andreslucena I have a question regarding this link with moderation path:
Screenshot from 2022-07-01 17-30-46

If I have an user (moderator) with only those permissions: allowed_to? :read, :moderation, process: process
how he can access moderation page? Because the "edit" action will not appear.

See scenario from decidim/decidim-participatory_processes/spec/system/admin/invite_process_moderator_spec.rb

Also, another issue is with decidim/decidim-proposals/spec/system/admin/valuator_manages_proposals_spec.rb because proposal's title will not point to /manage/proposal page (/admin/participatory_processes/proc1/components/10/manage/proposals/6)
Screenshot from 2022-07-01 18-34-29

@roxanaopr roxanaopr force-pushed the feature/remove-link-from-title branch from 74c8205 to f236c43 Compare July 1, 2022 14:40
@roxanaopr roxanaopr force-pushed the feature/remove-link-from-title branch from f236c43 to c3543bc Compare July 1, 2022 15:35
@carolromero
Copy link
Copy Markdown
Member

Hi @roxanaopr, that's a good point.
The consistent option that comes to mind is to add an icon for these roles. In the case of moderators, we could use the flag icon.
A different case is the valuator role, which as it is a permission associated to the proposals component, it should only be shown when a space has this component:
image

There are two aspects to take into account:

  • This will appear for all admins.
  • It will be a temporary change, until we do the admin redesign, and therefore will probably only be active in one release.

It is worth saying that we are not 100% happy with this solution, we are open to other options if anyone wants to chime in.

@roxanaopr
Copy link
Copy Markdown
Contributor Author

Hi @carolromero ! This might be a good approach for those cases, Thank you!

@roxanaopr
Copy link
Copy Markdown
Contributor Author

roxanaopr commented Jul 12, 2022

@carolromero For proposals listing page, we already have "comment-square" icon
Screenshot from 2022-07-12 18-50-38
I think that we sould use another icon for "Valuate" action

Maybe we can use something like this?
Screenshot from 2022-07-12 19-02-47

@roxanaopr roxanaopr force-pushed the feature/remove-link-from-title branch from db31136 to d4a7d43 Compare July 12, 2022 16:45
@carolromero
Copy link
Copy Markdown
Member

@roxanaopr we've chosen the comment icon because it is actually the one used to evaluate the proposals (answers, private notes and valuation are done through the same view).

@roxanaopr
Copy link
Copy Markdown
Contributor Author

@roxanaopr we've chosen the comment icon because it is actually the one used to evaluate the proposals (answers, private notes and valuation are done through the same view).

@carolromero But it will be ok to have duplicate comment icon? One for "Answer Proposal" and one for "Valuate"
Screenshot from 2022-07-13 16-08-59
Screenshot from 2022-07-13 16-08-48

@roxanaopr roxanaopr force-pushed the feature/remove-link-from-title branch 2 times, most recently from 66d0270 to f8c40b3 Compare July 13, 2022 15:39
@roxanaopr roxanaopr force-pushed the feature/remove-link-from-title branch from f8c40b3 to 539a2c2 Compare July 13, 2022 16:26
@carolromero
Copy link
Copy Markdown
Member

Hi @roxanaopr we wouldn't duplicate it, to valuate a proposal you would normally access it through the same answer option (which includes the valuation if it is enabled). Does this make sense?

@roxanaopr
Copy link
Copy Markdown
Contributor Author

Hi @roxanaopr we wouldn't duplicate it, to valuate a proposal you would normally access it through the same answer option (which includes the valuation if it is enabled). Does this make sense?

Hi @carolromero ! So "answer proposal" action will also play the role for "Valuate" action because both are linked to the same page, right?

@carolromero
Copy link
Copy Markdown
Member

So "answer proposal" action will also play the role for "Valuate" action because both are linked to the same page, right?

@roxanaopr that's correct! 😊 In the end the valuator's role is to, in addition to assigning an economic valuation, review the proposals in general and eventually also leave a response.

@roxanaopr roxanaopr force-pushed the feature/remove-link-from-title branch from 4ddcdd6 to 92e6c33 Compare July 14, 2022 10:47
@roxanaopr roxanaopr force-pushed the feature/remove-link-from-title branch from 92e6c33 to f324284 Compare July 14, 2022 14:24
@ahukkanen
Copy link
Copy Markdown
Contributor

ahukkanen commented Jul 19, 2022

I have tested this locally and technically everything looks as was requested by @decidim/product. But I'd like to propose some changes if @decidim/product would consider these.

This is already great start but I think with very minor changes we could make it better by ordering these buttons consistently in every view. I think it wouldn't require any other changes than changing these orders.

Order of actions

After testing this, UX wise it is still super confusing that these buttons come in different orders in different parts of the admin panel. The main and most important principle of UX design is consistency and users will struggle when they don't find the same button always at the same place.

Below are some examples of the current orders (using this PR):

  • Generic
    • Components listing:
      image
    • Categories:
      image
    • Attachments and attachment collections:
      image
    • Scopes:
      image
    • Scope types & Areas & Area types:
      image
  • Pages:
    image
  • Templates:
    image
  • Participatory spaces
    • Processes:
      image
    • Assemblies:
      image
    • Initiatives:
      image
    • Votings & Consultations:
      image
    • Conferences:
      image
  • Components
    • Accountability:
      image
    • Blogs:
      image
    • Budgets:
      image
    • Debates:
      image
    • Elections:
      image
    • Meetings (whoosh 😰):
      image
    • Proposals:
      image
    • Sortitions:
      image

So I would assume that while the user is in the admin panel, their primary action is always to stay within the admin panel. My assumption (based on my own use cases) is that I primarily want to either:
a) Edit the item in the list
OR
b) Get one level deeper in the UI (e.g. budgets component) in multi-dimensional UIs

So my suggestion would be the following primary order:

  1. Edit action is always the first in the list, even in the budgets component (if we want to be consistent because in accountability I generally don't want to drill deeper primarily but more often I want to edit the item)
  2. If list action is available (e.g. budgets, accountability), that comes always as the second
  3. The third (or second) is the "preview" eye icon which lets you see the item in the participant view
  4. The fourth (or third) is the "publish/unpublish" check/uncheck icon which publishes/unpublishes the item (if you think logically, edit -> preview -> publish)
  5. (other actions in consistent order)
  6. The second last (or the very last) is the permissions button
  7. The very last item is always the remove button when it is available, otherwise permissions

What do you think @decidim/product?

Title links

Also, I would still like to repeat my comment from #9400 that I really think we need to have the title link where it actually makes sense, i.e. where it links to the relevant / most used view in the admin panel. I would myself decide between the "most used" based on this:

  • When the component has a "drill down" option (i.e. accountability, budgets), it would drill one level down
  • Where the component does not have a "drill down" option (most other places), it would go to the editing view but never outside of the admin panel (within the admin panel you should stay within the admin panel unless you specifically decide to go out of there, i.e. click the "eye" icon to preview)

I understand that this has been already discussed at @decidim/product but I just want to emphasize this point that I find it very confusing that we cannot click the list titles.

I have been following many end users closely when they browse the admin panel and they intuitively always click the title of the item to select that item. But the confusing part is that they are taken to the participant view when they were not expecting that.

So I think the title links are important but they just need to point to the correct place. Another point to support this would be the consistency factor that I think it will be confusing after the upgrade when titles no longer have links in them. This will raise many questions.

By as said at #9400, my opinion doesn't really matter here as I'm not the one deciding about these. I just wanted to bring this up really clearly, at least I've said it publicly.

@carolromero
Copy link
Copy Markdown
Member

@ahukkanen thank you always for taking the time to argue your point of view. Your opinion does matter and your feedback is always valuable ❤️.

Order of actions

Regarding the order of the actions, I agree that consistency can be improved, paying attention especially to the more cross-cutting actions. And I also agree with the position logic, placing first the most frequent actions, such as editing.

My ordering proposal, though, differs a little from yours. In this document I've mapped all the actions of the spaces and components in the order I'd place them (I just left the blanks to scan more quickly which actions are repeated the most):
https://docs.google.com/document/d/1pmCvRo9A-KQMiDL2Yh1SYvdo3yiFi9DHcePnkK5qbLE/edit?usp=sharing

The main difference from what you propose is that the preview action is placed more towards the end. Since the link to the frontend disappears from the titles, I find it easier to locate if it is placed second to last, rather than in the middle of other options that can vary a lot depending on the component.

In the document I marked in red the actions that were still need to be added and that I understand that Roxana has already added.

My hesitation now is, considering that the redesign of the admin panel will start in a couple of months, is it worth the effort? (I don't know how much work it is to reorder the actions and add the missing ones).
I leave it to your discretion, @roxanaopr and @ahukkanen.

Title links

About the title links, I see that indeed it is better to keep the links to the titles and have them take you either to edit or go down a sub-level (and I really apologize on this one because I talked offline with Andrés about this but I had missed the comment where this was pointed out).
image

The trade-off is to sacrifice some consistency, since as @andreslucena comments here, some resources will not have links, such as meetings or debates created by participants.

But overall it would be a better solution, because in addition to what Antti says, this way we would not have to add extra actions (moderate and valuate) depending on the permissions that the admin has, right?

Again, I understand that the previously agreed upon changes have already been made, so please feel free to ignore this feedback if you think it is not worth the effort, as this change will most likely only be in version 0.28.

@roxanaopr
Copy link
Copy Markdown
Contributor Author

@ahukkanen Can you please take a look if the new changes are according tot the latest requirements?

Copy link
Copy Markdown
Contributor

@ahukkanen ahukkanen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work on this one @roxanaopr ! This is definitely one of the greatest changes I've ever seen done in Decidim user interface so far. This brings much needed consistency to the admin panel and makes the admin users' lives much easier. Thank you very much for making all these changes! 🙇 🥳 🎉 🥇

With the current changes the only thing I'd like to change is the budget title links which I think should link to the budget project listing as I added the comment below.

A couple of other parts I found under the general "Settings" section that I think we could address here:

  • Settings -> Scope types -> The scope type title should link the edit view.
  • Settings -> Areas -> The area title should link the edit view.
  • Settings -> Area types -> The area type title should link the edit view.

Other than these parts, everything works and looks great to me!

There are some thing I could argue against, such as changing the position of the "publish" / "activate" button for components and process steps but it is now in the logical order that we discussed before that the actions come in the order which seems logical for the admin user to complete the configuration steps. E.g. the admin first edits the process steps after which they publish it.

I think this last part may just be something that I'm used to from the current UI. Maybe after using the new order for a while I would get used to it. It just seemed a bit weird to me testing through these changes as I've used to the publish button being the first button in the list.

@roxanaopr roxanaopr requested a review from ahukkanen September 8, 2022 13:55
Copy link
Copy Markdown
Contributor

@ahukkanen ahukkanen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work on this one @roxanaopr and thank you very much for your awesome efforts regarding this!

As you may have noticed already, the generators specs are currently broken because of Doorkeeper update yesterday. PR #9785 should fix this issue once we get it merged. I will wait for that PR to be merged before merging this one to keep the build green.

@ahukkanen ahukkanen merged commit be06e03 into decidim:develop Sep 14, 2022
@roxanaopr
Copy link
Copy Markdown
Contributor Author

@ahukkanen Thanks for merging it! :D Do you know where those changes will be seen on nightly?

@ahukkanen
Copy link
Copy Markdown
Contributor

@roxanaopr This PR is now running at nightly. It has been configured to build in the morning, not in the night - a bit misleading for sure. 😄

It will likely be changed to run during the night time in Europe.

entantoencuanto added a commit that referenced this pull request Sep 15, 2022
* develop: (24 commits)
  Add develop index to the documentation (#9666)
  Fix initiatives components (#9633)
  Fix conference speaker avatars (#9643)
  Update `rokroskar/workflow-run-cleanup-action` GitHub action to v0.3.3 (#9750)
  Fix character counter for the WYSIWYG editor (#9680)
  Fix posting comments before the initial load has run (#9614)
  Fix parallel tests port in use (#9661)
  Split parallel test coverage reports into their own folders (#9686)
  Improve admin panel user experience regarding title links and order of actions (#9496)
  Fix title and description too long in initiatives spec sometimes (#9648)
  Fix API GraphiQL system spec with newer ChromeDriver (#9642)
  Add missing character on code block (#9798)
  Fix hidden error messages on the registration form (#9625)
  Add documentation about configuring ActiveStorage / dynamic file uploads (#9777)
  Add documentation section about customizing cells (#9622)
  Fix hashtags not recognized at the beginning of the string (#9616)
  Fix version pages showing a HTTP 500 error when the version does not exist (#9615)
  Fix multitenant organizations stats cache (#9605)
  Prevent the account edit route through Devise (#9611)
  Fix iframe disabling producing invalid HTML (#9685)
  ...
eliegaboriau pushed a commit to eliegaboriau/decidim that referenced this pull request Oct 25, 2022
…f actions (decidim#9496)

* Remove links from every title from admn listing pages and include preview and edit actions.

* Adjust tests based on new functionality

* Add 'Moderate' and 'Valuate' actions

* Fix unit tests

* Remove extra 'Valuate' action from proposals listing page

* Adjust order of actions in listing pages from admin dashboard

* Fix election tests after rearraging action icons

* Add links to edit view or sub-level view in admin listing pages

* Adjust links from budgets listings

* Add links to settings' listing pages
@alecslupu alecslupu deleted the feature/remove-link-from-title branch June 14, 2023 06:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add hyperlink to title in admin dashboard meetings listing

3 participants