Pubblicato
2009-03-02 06:55
We plan to make usability / UI improvements a major focus of the 2.3 release. We will be working on and putting up prototypes and mockups of many of these changes over the coming weeks - and will be looking for folks to give us feedback on them.
One area we're looking at is the "selectors" - lists of records - which appear throughout CiviCRM. These are used to list search results (lists of contacts, contributions, etc.) and many other records (profile fields, activity types, etc.). Currently a big part of the horizontal space for these is taken up by "action links" - Edit, View, Delete, Disable, etc. This can cause horizontal scrolling and limits the number of columns we can show / include in each row.
We've developed an alternate approach for this - where there is a single "action icon" on each row. Clicking on it gives you a list of available actions. You can see this approach here on our new trunk sandbox (where we will be showcasing lots more changes and "experiments" going forward):
Profile Listings
Please take a few minutes to try this out and give us your feedback / thoughts on this. Will it be helpful or confusing for users?
NOTE: For this "review" please just focus on the Profile listings in the main section of the page. Don't worry about the input box and "bar" above the page header - we're working on something else which we'll put forward in a separate blog.
Update:
Based on feedback we made few changes to Action link UI
Profile Listings
We have also implemented context menu for Contact Selector. So when you right click on contact selector rows, we show menu with commonly used actions.
Contact Search
Filed under
Comments
great idea, bad place to implement it. How many more columns would you really need on the profile admin page? I like having all those links right out in the open.
You should have the action menu appear on hover. Every time you require the user to click something new, you are probably DECREASING usability.
I'd also recommend thinking carefully about what the user is most likely to be trying to do when they visit a page. I'd say that 90% of the time, when I visit this page, I am going to 'View & Edit Fields.' So, that option should out in the open, not hidden in a pop-up
Better still, you could do away with the need for this page entirely for many uses. Follow Views 2 by having hidden configuration links on the actual Profile pages, that appear only for properly permissioned users. Generalized, the principle is, it's more usable to 'Configure how X works' from the page where I do 'X.' This can reduce 3 clicks & pages loads to one.
Also, The gear icon is not very helpful, IMO. Not sure what would be better for an icon, but I don't think there's anything wrong with the word 'actions.'
Matt [at] Ninjitsu Web [dot] com
Hi there,
I like these ideas. A couple of initial thoughts inspired by the 80:20 rule, which I am taking in this instance to mean "80% of a products usages involves 20% of its features" and therefore the 20% of used features should be easy to access, whilst the other 80% can probably be hidden from view by default thus simplifying the interface and increasing usability...
Have you thought of using two or three small icons next to each other? The first one or two would have the most common actions (edit, or view and edit) and the last one would be a drop down containing all others. This would still save space (provided the icons were compact enough) and would avoid the extra click that has been introduced in this prototype.
Also, implementing the drop down as a rollover which opens automatically on hover and automatically closes when you lose focus (e.g. you realised you weren't interested) would be another way of reducing necessary clicks.
Hope that helps :)
Michael
I vote for Michael's assessment. Some actions are so frequently used, they should be available without needing to hover or click to access a submenu, such as view and edit. You could place the most essential ones in the table (using icons to buy space), with the less frequently used ones available in the menu. I also agree that it should be visible on hover (with persistence so that it remains visible for some time when moused away) rather than when clicked.
I like where this is going though.
Hi,
My experience with "things" that open automatically, it being a drop down menu, a tooltip, a sub menu... is that they are a pain in the neck as long as they are anywhere near a "mouse path".
Having them opening because you go from one place to the other is by far more a problem than the additional click. From what I read on UI, it's not the click per se that is the issue, but the delay between the click and the result. If the click goes to another page that makes you wait until it comes, that's a pain, if it does whatever it's supposed to immediately, that's not an issue.
Happy clicking...
X+
This can be avoided with the jQuery hover-intent plugin:
http://cherne.net/brian/resources/jquery.hoverIntent.html
yay for working on usability!! it's a good idea, but adds clicking as others have noted.
an app-wide set of icons (with tool-tips) for the most common functions (CRUD mostly?) would be great. An ajax enable/disable toggle seems logical, and a dropdown for "advanced/infrequent" tasks.
another idea is what Gmail does:
- clicking anywhere on the line activates the default view/edit function (what you want to do 80% of the time)
- detailed action buttons for the listing appear just once at the top
- check boxes provide the manner of assigning the action to an item (or items, obviously)
I agree that View and Edit are too frequently needed to have to wait for a drop down to appear on click. In the absence of some examples of what else would be in this drop-down, it is cool but doesn't grab me at the moment.
The commitment to UI improvements is greatly appreciated!
I like the direction you all are headed in, it looks much cleaner. Here are some of my thoughts from looking at this page w/ my usability hat on:
Why not make the title link to the View / Edit action? (And it would be cool to make View and Edit the same thing as much as possible, maybe with Ajax fields that switch from static text to form input fields when you click on them or a little edit icon next to them. You could do that even in this selector view; so if someone clicks on a little edit icon next to the title, it switches to an Ajax form field to change it.)
You could also put a little Disable link or icon in the Status column; change it from "Active" / "Inactive" to using a green check mark icon or a red circle-with-a-line-through-it icon in that field. When you hover over it, it could say Active or Inactive. There could be a greyscale version of the other choice always visible so you can just click that to toggle its Active or Inactive state. In fact, you could even title that column "Active?" just to make it abundantly clear what's being indicated w/o using much space (assuming, of course, that those are the only 2 values possible there).
Also, is the ID necessary to know very often? Ideally IDs would never need to be known, but just used internally by the system (or at the very least they would only show up on a full view page, not the selector summary). Is it really that important of a value for the end users? If it's useful for helping them debug things, make it show up in a mouseover pop-up or something.
I'm also always a fan of having icons that represent the various objects in a system. So there should be a "Profile" icon and wherever you see it in the system, you know you're dealing with profiles. (Replace "profile" with just about any other noun you can identify in CiviCRM and it still applies). In this instance, that icon would sit in the upper-left corner right next to the section title (i.e. "CiviCRM Profile").
The ID is used regularly on the Joomla side. It is a required parameter to create a Joomla menu item that links to a profile, event and so on.
On the name, there is usually a link to the most common action (the view), so that's one shortcut for the by far most used action.
Two Suggestions for the other actions:
1) add a "contextual menu" (right click) on each row that open your action menu (where you clicked, not next to its icon)
http://abeautifulsite.net/notebook_files/80/demo/jqueryContextMenu.html
2) add an icon on the list for the common actions (edit,delete, disable) so that's easier to "scan" visually)
I'm thinking about how this might work with the results of a contact search. Particularly with the action selection on MULTIPLE contacts or ALL contacts.
I'm imagining having 1 action icon for the whole set of results, and for each contact in the result list there is a select-me check-box and an action icon.
I realize this isn't exactly on point, but it is inspired by what you're doing here.
Some custom forms for clients could benefit from the UI approach being sketched here. For example, a walk list print out in an election is used to gather voting intentions. It then needs to be data entered. Bringing up the same list in the same order via a profile with a single editable field for voting intention, or maybe another for likelihood to vote, would be ideal. Having the ability to indicate which fields are tab stops, and maybe even their order, is also crucial for data entry forms.
Joe Murray
Joe:
It would help us SIGNIFICANTLY if comments in future are very specific and focussed on the ongoing discussion/task. Tangential conversations should be had on the forums and/or their own blog post. All members of the advisory group have blogging privileges on civicrm.org
lobo
Use CiviCRM? Like CiviCRM? Then show your appreciation and <a href="http://civicrm.org/donate">donate to CiviCRM</a>
I agree with most comments. Just my 2 cents:
Make clicking anywhere in a row the default action (80%). Not just the name or id or some other part.
Keep the numbers of icons low. Too many icon and you forget what they mean. One icon for the rest of the actions is great.
Don't make the icon too small. Many of my users are little, old ladies. Literally!
This looks nice. Good work!
A small suggestion: put "Actions" as a column header as the gear symbol is not immediately understandable.
I think I agree that having edit out front is a good thing and I like the idea of putting it in the title. Another way is to have a column of actions like: "edit, view, more" where the more opens the pop-up menu.
I *love* the context selector (right click) on the contact result page. Great idea. Removes three clicks (contact > tab > action). Users will love it. And I think the more items link on the profile listing works great too. A good compromise to the comments provided.
Great job guys!
First: it's very good to think about usability improvements for CiviCRM!
For me it's strange that you need a right-click to access the context menu in the Contact Selector. Why is that? With right clicking I expect the standard browser functions (like: source, print, save as...), not actions form the website.
Left clicking on an arrow is much more logical to me. (like the profile listings)
I can agree with the things written above: direct access to the 1 or 2 functions most needed, and some kind of a list for alle possible actions for the record (based on a context menu).
I should put all the actions you can do for 1 record on the line as each record.
And put the actions you can do for more than one record above (and you first have to select one or more).
This is potential a long list (like now with the 16 actions in civi 2.2 for all or selected records) but I think CiciCRM is used in so many ways that there always will be someone to use the action.
Maybe it's good to make it possible to administer the view of possible actions. F.e. for now we don't use activity registration, mass mailings, mailing labels and households. Actions regarding this issues could be hidden in our setup.
Thanks for this improvements and good luck by implementing them!
Geert
Geert - Thx for your comments. We discussed on the team and mostly agree that sticking with left mouse click on a 'more actions' link is more "usable" than the right-click anywhere. Kurund is going to add that to the contact listings and then we'll post again so folks can try out both.
One advantage of leaving on the right-click option is that you can do it anywhere on the row - rather than being "forced" to move your mouse over to the 'more actions' link. However, over-riding the normal right-click behaviors provided by the browser might be a bad thing.