Usability Improvements

This is a forum to suggest new features for mojoPortal. 

This thread is closed to new posts. You must sign in to post in the forums.
3/16/2009 1:51:21 PM
Gravatar
Total Posts 4

Usability Improvements

I'd like to suggest a few improvements that will make the portal easier to use.

Firstly, please consider making all the form labels right aligned or place them above the form elements.  Also consider dropping the colons and placing the check box labels on the right of the check boxes.

Please see http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

Consider making the cancel buttons a link instead of a button to help avoid confusion and accidental clicks.

Finally, please please please please consider making the admin icons text links instead of icons.  I litterally have to use the mouse over text every time I use them.  They make me have to stop and think.  I realize there may be space constraints but I feel this is very important as they are currently so unintuitive.  People are not used to clicking on icons on the web and I think that unlabeled icons are starting to fall out of use because of their poor usability.

Thank you for the great software you've created and thanks for considering the ideas.

Bryan

3/16/2009 2:27:25 PM
Gravatar
Total Posts 4

Re: Usability Improvements

Another thing you could try is using the title attribute on the div tag to put a tool tip over the entire label and form element.  This could be used to put the text you currently have in the help system with the question mark icons and the lightboxes.  I do this on my forms at http://cooltext.com/Logo-Design-3D-Outline-Gradient and it works really well.

3/16/2009 2:36:18 PM
Gravatar
Total Posts 18439

Re: Usability Improvements

Hi Bryan,

Thanks for the feedback I will definitely consider these suggestions. 

I think the form alignment can basically be a skinning issue, I may need to add a css class to the inputs to make it easier to align them as you wish, there is already a css class on most of the labels so their alignment can be specified from css, but to make the label above the input I probably need to go through and add another css class on all inputs as that would enable you to put a "clear" on them to make them line up beneath the label. Right alignment I think could already be accomplished by editing the css. I agree about the colons and will make an effort to find them in resource files and remove them. I think they are used inconsistently anyway.

I think cancel links vs buttons is a good idea.

For the main 4 admin icons in the upper corner I will implement a configuration option so that it will be possible to make them "link only", but I think for some the icons are preferrable so I think it needs to be possible and probably even the default to use them as we do now, but I'm certainly willing to make it possible to configure it so its just text links. Those icons have rather long text for the tooltip currently,if you have any suggestions for English text for those I'd appreciate any suggestion for more brief text. My goal with the icons was/is to make them not affect the layout of the page, this will be difficult with long text links. My thinking has been that while these 4 icons present some initial useability issue, they are used often and once you know what they are for they become second nature and not impacting the layout is an advantage.

Other places in mojoPortal where we are using little gears and pencils I'm inclined to agree text links would probably be better.

Best,

Joe

 

3/16/2009 3:37:01 PM
Gravatar
Total Posts 4

Re: Usability Improvements

Hello Joe,

Thanks for the fast reply and I'm glad you like the suggestions.

For the links I'd suggest the following.

Admin Add Page Setup Page Edit Page

They kinda follow a verb-noun pattern almost like powershell. I'm not sure if setup or config is a better verb for the gear link. I think setup is a bit more formal and correct, as config is an abbreviation. I think you could still preserve or even expand the current tooltips by using an title attribute on the achor tag, but I'm not sure how much they would be seen.  The word page could be dropped from the last two links at the cost of a bit of clarity.

One other thing I noticed about the form labels is that the font size is a bit smaller than the normal text.  I think that probably makes it harder to read.

Bryan

3/23/2009 12:49:11 PM
Gravatar
Total Posts 4

Re: Usability Improvements

Hey Joe,

If I send you a patch for this will you commit it to the project?

Bryan

3/24/2009 2:33:59 PM
Gravatar
Total Posts 18439

Re: Usability Improvements

Hi Bryan,

If I like the implementation I will commit it. 

You can send it to me at joe dot audette at g mail dotcom

Be sure to mention in the email that you agree to contribute your patch under the same license as mojoPortal, Common Public License 1.0 aka CPL.

Thanks,

Joe 

4/5/2009 11:34:33 AM
Gravatar
Total Posts 18439

Re: Usability Improvements

Hi Bryan,

I just implemented this so in the next release there will be a new config option

<add key="UseIconsForAdminLinks" value="true" />

You can set it to false if you want text only links. I've labelled them as you suggested.

Best,

Joe

 

6/29/2009 12:55:17 PM
Gravatar
Total Posts 18439

Re: Usability Improvements

Hi Bryan,

As of release 2.3.1.0 I think I've got all the Cancel buttons changed to links and I also implemented example form layout with labels above the fields in the andreasvicklund-02 skin 

Best,

Joe

6/29/2009 3:19:51 PM
Gravatar
Total Posts 12

Re: Usability Improvements

Thanks Joe.  You're awesome!

I'll be sure to check them out as soon as I get a minute.

Bryan

7/9/2009 1:18:16 AM
Nux
Gravatar
Total Posts 183

Re: Usability Improvements

... and I also implemented example form layout with labels above the fields in the andreasvicklund-02 skin ...

Strange, I thought that was standard before this version, cause when you make a form with the wizard, all labels are above the input fields. I had to set the <br class="clear" /> on display none to have the labels near the input fields. So can you tell us what exactly is changed?

As for the icon issues: I think there are to much links and less icons . I rather use icons, since it makes the cms more modern and works quicker for me. But it is a good thing that you can choose which way you want to work.

Stef

7/9/2009 8:27:16 AM
Gravatar
Total Posts 18439

Re: Usability Improvements

Hi Stef,

Yes, in Form Wizard that layout has always been the default, I'm talking about the forms in mojoPortal, like site settings , user profile, edit forms of all kinds throughout mojoPortal. If you try out the mentioned skin and check out the various admin/edit pages you will see.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.