UX guidelines: Consistent use of ">>" in button captions

[TwoMice]

Hi All,

In designing a module that works closely with CiviCRM, I'd like to emulate the CiviCRM style as closely as possible.  I'm wondering if there are standard guidelines on how buttons are captioned, specifically about the ">>" prefix on some link/buttons. 

For example, on the contact page:

• The Contributions tab has link/buttons labeled "Record Contribution (Check, Cash, EFT ...) " and "Submit Credit Card Contribution" (without the >> prefix)
• The Events tab has a link/button labeled "» Submit Credit Card Event Registration  (with the >> prefix)

Is there any reason for the difference?

I'm guessing the answer is "not really, it just happened that way."  And there didn't seem to be much about UX/UI design in the developers section at docs.civicrm.org. But just in case: is there a guideline somewhere about this kind of thing?

Thanks,
TM

[Dave Greenberg]

Alan - We are making progress towards UX guidelines / consistency - but not really there yet. Some doc can be found on the wiki:
http://wiki.civicrm.org/confluence/display/CRM/Layout+Standards

... but some is already a bit obsolete :-(

Button "look and feel" is now standardized - most <input> form submit buttons are styled via a common template + css:
templates/CRM/common/formButtons.tpl

We've adopted jQuery UI icons and specific css to style "links" that we display as buttons (i.e. "Add Event Registration").
- Create actions use the + icon (for 'add').
- Edit actions use the pencil icon
- etc.

Code: [Select]

// example of add-icon
<a class="button" href="/dgg/d633/civicrm/contact/view/participant?reset=1&amp;action=add&amp;cid=101&amp;context=participant" accesskey="N"><span><div class="icon add-icon"></div>Add Event Registration</span></a>

You can find these icon classes defined in civicrm.css starting around line 2443 (in trunk).

The ">>" convention is deprecated except for multi-step wizards that have  Next and Previous actions. Since "Submit Credit Card ..." on Events tab is a "Create" action - it should use the add-icon. I'll fix that in trunk.

HTH
dave

[TwoMice]

Hey Dave,

Thanks for the info -- very helpful.

- TM