? ?
avatar simbus82
simbus82
10 May 2021

Steps to reproduce the issue

Go to Users -> Manage

Expected result

Username or Name are the more visually relevant elements. Click on the name (or username) link is easy.

Actual result

image

  1. There are less than 2 pixel distance from name link and "add note" link area.
    Name link doesn't have a sufficient click area. There's no link for username.
  2. "add note" button steal all of visual priority of elements in this UI.
    "add note" is absolutely the less relevant (less used and less important for users management processes) element in this page.

image
Page show a really wrong "information": "add note" is the main actor of the page.

System information (as much as possible)

Latest 4.0 build

Additional comments

Some users list good UX examples:
https://dribbble.com/shots/7046861-Network-Management-Dashboard-UI-Design/attachments/47229?mode=media
https://dribbble.com/shots/6158106-Members-List-design-concept

avatar simbus82 simbus82 - open - 10 May 2021
avatar joomla-cms-bot joomla-cms-bot - change - 10 May 2021
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 10 May 2021
avatar simbus82 simbus82 - change - 10 May 2021
The description was changed
avatar simbus82 simbus82 - edited - 10 May 2021
avatar simbus82 simbus82 - change - 10 May 2021
The description was changed
avatar simbus82 simbus82 - edited - 10 May 2021
avatar simbus82 simbus82 - change - 10 May 2021
The description was changed
avatar simbus82 simbus82 - edited - 10 May 2021
avatar simbus82 simbus82 - change - 10 May 2021
Title
[4.0] [UX] Wrong element's visual priority in Users -> Manage
[4.0] [Atum] [UX] Wrong element's visual priority in Users -> Manage
avatar simbus82 simbus82 - edited - 10 May 2021
avatar simbus82 simbus82 - change - 10 May 2021
The description was changed
avatar simbus82 simbus82 - edited - 10 May 2021
avatar brianteeman
brianteeman - comment - 10 May 2021

"add note" is absolutely the less relevant (less used and less important for users management processes) element in this page.

That's subjective and based on your experience of using the site. It doesn't have to be the same for everyone. For example I use notes very very heavily on one site.

Not going to disagree that the ui can be improved though

avatar PhilETaylor
PhilETaylor - comment - 10 May 2021

"Add Note" has always had really bad UI :-(

I suggest

  • Remove the big blue button, and replace with a list select, and add a TOOLBAR button in the actions menu for Add Note
  • When a user HAS a note, have a new small icon next to their name (maybe right aligned) that serves as the hover and click point to view the note links, (Display note, list notes)
avatar PhilETaylor
PhilETaylor - comment - 10 May 2021

For example I use notes very very heavily on one site.

Then you should be using the User Notes extension, and not the Users extension for that, maybe the User Notes extension needs a better UI than just a list view so that it becomes more useable as the main extension to use for, er, User Notes instead of having its finger stuck into the Users extension in this page.

The big blue button is not in keeping really with any other view in Joomla

avatar chmst
chmst - comment - 10 May 2021

Just for information: In GSoC2021 feature enhancement, it is intended to make user notes as optional feature. This includes better UX here.

avatar PhilETaylor
PhilETaylor - comment - 10 May 2021

Optional? how?

avatar brianteeman
brianteeman - comment - 10 May 2021

big mistake. just because some people dont use it because they dont understand it

avatar brianteeman
brianteeman - comment - 10 May 2021

@simbus82 How about moving the note part to a column - similar to the permissions column?

avatar PhilETaylor
PhilETaylor - comment - 10 May 2021

Nooooo there simply is not enough room in this table for yet another column (and its padding), especially when 2fa is enabled :)

Already the username only gets about 5 chars room sometimes :-(

avatar brianteeman
brianteeman - comment - 10 May 2021

was just a suggestion

avatar simbus82
simbus82 - comment - 10 May 2021

@simbus82 How about moving the note part to a column - similar to the permissions column?

Something like this could be nice, but probably @PhilETaylor is right about space.
image

Or, imho, could be very useful to put these "tools" in a 3-point menu, i don't know about the accessibility, but it's used everywhere in big companies app too.
This is a good UI devolopment method that give us more freedom to add more contextual "tools and action" in the future.
image
Here we can add many functions like "add a note", "send a private message", etc.

avatar brianteeman
brianteeman - comment - 10 May 2021

Sorry I must have not been thinking correctly. My use of user notes is all done in the user notes component and not the users component

avatar chmst chmst - change - 11 May 2021
Labels Added: ?
avatar chmst chmst - labeled - 11 May 2021
avatar eopws
eopws - comment - 11 May 2021

Maybe add context menu which opens with the right mouse button and move the add note button there? Just suggestion.

avatar C-Lodder
C-Lodder - comment - 12 May 2021

Or just move it under the "Actions" toolbar dropdown, like every other action?

Untitled

avatar simbus82
simbus82 - comment - 12 May 2021

Or just move it under the "Actions" toolbar dropdown, like every other action?

For me ... it is the best solution!

avatar brianteeman
brianteeman - comment - 12 May 2021

Unfortunately that would be a loss of functionality.
image

The main being that you can easily see if there is a note for a user

avatar brianteeman
brianteeman - comment - 12 May 2021

How about a combination of the action dropdown as suggested by @C-Lodder and an icon(with link) to indicate if a note exists for a user

image

avatar PhilETaylor
PhilETaylor - comment - 12 May 2021

How about a combination of the action dropdown as suggested by @C-Lodder and an icon(with link) to indicate if a note exists for a user

er... tap tap, is this thing on, am I talking to myself here? hahaha

Image 2021-05-12 at 10 44 30 am

avatar simbus82
simbus82 - comment - 13 May 2021

I'm not familiar with the admin backend code to fix those functions related to UI, I don't think I can do a good PR :-(

avatar Quy
Quy - comment - 16 May 2021

Related #29509

avatar simbus82
simbus82 - comment - 7 Feb 2022

All the admins of our CMSs (customers above all) are asking me to remove that button from the user management (and permissions) from their 4.x websites because it is "literally unwatchable".
I am acting brutally with css to hide it (practically nobody uses the notes system) but obviously it is not a solution.
In Joomla 4.1 there is still this huge UI flaw.
Also the "Permission" button has the same problem.
image

There really isn't a CMS where is not used solutions like the Clodder/Brian/Phil proposal or better yet a context menu, or an hamburger at the end or at the beginning of the row. Never see so may buttons with label in the row of a list, it's discouraged from any UX perspective.

Example:
image

I hope this ugliness can be solved before Joomla 4.1 is released.
As I said, I can't do a PR for this problem, I don't have the skills.
We can't let the project stumble upon on these things :-(

avatar brianteeman
brianteeman - comment - 7 Feb 2022

I hope this ugliness can be solved before Joomla 4.1 is released.

Unfortunately not

avatar simbus82
simbus82 - comment - 1 Sep 2022

I hope this ugliness can be solved before Joomla 4.1 is released.

Unfortunately not

Joomla 4.3?

avatar simbus82
simbus82 - comment - 19 Sep 2022

@crystalenka you are great in UX, how can we correct this "crap" UI?

avatar crystalenka
crystalenka - comment - 20 Sep 2022

I'll add it to my list of things to look at. :)

avatar chmst
chmst - comment - 20 Sep 2022

@crystalenka you are great in UX, how can we correct this "crap" UI?

@simbus82 you can join the team and work for it.
What about making user notes as optional and add it on request like workflow? I agree that this button at this place is not a good solution.

avatar simbus82
simbus82 - comment - 20 Sep 2022

I am acting brutally with css to hide it (practically nobody uses the notes system) but obviously it is not a solution.
As I said, I can't do a PR for this problem, I don't have the skills.

@chmst i can only give advice (or can I tell my idea) on the User/Customer eXperience.
For example in many years and many hundreds of professional joomla website created, no administrators/managers have ever used the notes function once, so for me "notes" it's a removable function or manageable it like an installable plugin.
But the real problem is the UI and the visual priority of items in the page. That button is really visually wrong, I don't mind the function.

Apart from that, with Joomla 4 there is too much JS and too many compiled CSS for my code development skills.
So I can't be very helpful ...

Add a Comment

Login with GitHub to post a comment