CiviCRM Community Forums (archive)

*

News:

Have a question about CiviCRM?
Get it answered quickly at the new
CiviCRM Stack Exchange Q+A site
This forum was archived on 25 November 2017. Learn more.
How to get involved.
What to do if you think you've found a bug.



  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Developer Discussion (Moderator: Donald Lobo) »
  • UX guidelines: Consistent use of ">>" in button captions
Pages: [1]

Author Topic: UX guidelines: Consistent use of ">>" in button captions  (Read 1257 times)

TwoMice

  • I post frequently
  • ***
  • Posts: 214
  • Karma: 16
    • Emphanos
  • CiviCRM version: Always current stable version
  • CMS version: Drupal 7
UX guidelines: Consistent use of ">>" in button captions
October 04, 2010, 12:12:14 pm
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
Please consider contributing to help improve CiviCRM with the Make it Happen! initiative.

Dave Greenberg

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 5760
  • Karma: 226
    • My CiviCRM Blog
Re: UX guidelines: Consistent use of ">>" in button captions
October 04, 2010, 06:21:04 pm
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
Protect your investment in CiviCRM by  becoming a Member!

TwoMice

  • I post frequently
  • ***
  • Posts: 214
  • Karma: 16
    • Emphanos
  • CiviCRM version: Always current stable version
  • CMS version: Drupal 7
Re: UX guidelines: Consistent use of ">>" in button captions
October 04, 2010, 07:26:05 pm
Hey Dave,

Thanks for the info -- very helpful.

- TM
Please consider contributing to help improve CiviCRM with the Make it Happen! initiative.
Pages: [1]
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Developer Discussion (Moderator: Donald Lobo) »
  • UX guidelines: Consistent use of ">>" in button captions

This forum was archived on 2017-11-26.