CiviCRM Aesthetics and Usability

Google Summer of Code 2008 project (in partnership with Joomla!)

Introduction

"CiviCRM works great, but its visual design and layout could be better. Joomla! has great aesthetics and usability which would greatly benefit CiviCRM."

Constituent relationship management is a set of process and supporting technologies used to acquire, retain and enhance constituent relationships. CiviCRM is a constituent relationship management system designed to meet the needs of grassroots groups. It is an open source project coordinated by CiviCRM LLC. The project website is http://civicrm.org/

CiviCRM is open and freely downloadable. It can be used as a Standalone product, or integrate into the CMS (Content Management Solutions) solutions provided by Drupal or Joomla!.

The purpose of this document is to provide definition to the aesthetics and usability of CiviCRM. CiviCRM needs its own distinct design, but also to integrate into Drupal and Joomla!. An unique identity provided by a strong design that integrates into the navigation as well as the individual pages will improve the quality of the entire product.

Standards for Aesthetics

Aesthetics is the concept dealing with what makes some *thing* beautiful or pleasing. Applying the term to CiviCRM means defining what makes it attractive to its audience.

1. Identity

An identity that is portable and easy to use within the different installation options is vital. While use of the CiviCRM logo seems an ideal solution, the risk of overwhelming the end user is present.

A simple approach, mimicking just the text from the logo, with the word 'civi' bold followed by CRM in normal typeface, would aid brand identity while minimizing risk.

2. Menu Layout

A consistent top menu across platforms and screen resolutions is necessary. The average user's screen resolution is 1024 X 768, yet consideration is needed for those browsing at less than full resolution.

The layout of the menu needs to start with a base resolution of 800 x 600 and work out. A horizontal menu set at 600 pixels can be flexible for the user and fluid to accommodate wider resolutions. This works with the limitations on space caused by integration into Drupal and Joomla!, allowing CiviCRM to achieve a visual cohesion with both CMS systems.

3. Home Page

While the Standalone of CiviCRM is less limited, allowing CiviCRM to reside within an integrated environment (whether on Drupal or Joomla!), limits the home page design. The best solution is to create a fluid and flexible design for all three installations that incurs minor changes between environments.

The home page needs to reflect the environment it is integrated in while maintaining its own basic identity.

 4. Sub-pages

The sub-pages are unique as they not only need to mimic the home page, but provide more specific information. Commonly used functions must be clearly accessible. The sub-pages should maintain the visual cohesion established on the home page.

 Sub-page menus must mimic the home page menu while presenting more detailed, sub-page specific information.

5. Special Considerations

CiviCRM's visual look must gracefully handle all major browsers with additional support for deprecated versions. CiviCRM needs to reflect its integrated environment and maintain its own basic identity.

Special consideration must be given to the end user and any themes used. CiviCRM needs to cooperate with the end user and any visual changes that have been instigated by the end user.

Standards for Usability

Usability is defined the ease as of which a user can interpret and respond to information. 

1. Menu

CiviCRM requires a compact and fluid navigational menu. The menu should allow the user the ability to customize the menu through the reordering and/or removing of options.

CiviCRM should utilize a horizontal menu that requires a minimal amount of screen real estate while maintaining readability.

3. Home Page.

The initial home page needs to follow the lead of the top menu, providing the user with a tight, visually consistent experience across platforms. The home page also needs to take technological limitations into consideration.

Additionally, the home page should mimic any thematic changes made by the end user.

4. Sub-pages

Sub-pages need to extend the standards set for the home page. Additionally, sub-pages need to present page specific information in a clear manner that doesn't conflict with the horizontal top menu.

Introducing the concept of modules to allow customization and swappable components would help. This could be achieved through something as simple as a color picker for the modules or a more complex user assembled puzzle piece approach to the template.

Care must be given to address these needs while maintaining any thematic changes implemented by the end user.

5. Special Considerations

CiviCRM needs to be usable on all major browsers as well as any deprecated, but still widely used browsers (for example, Internet Explorer 6).Consideration also is needed for an end users' browser preferences in regards to script blocking, image blocking and text size.

CiviCRM also needs to gracefully handle any possible accessibility issues arising from the use of screen readers, scanning software and other methodology.