Support Joomla!
A stab at standards. CiviCRM: look and feel.
User Rating: / 3
PoorBest 
CiviCRM: Aesthetics and Usability
Written by Jon T. Volkman   

 Standards and Requirements

 

Currently, the base installation of CiviCRM lacks a cohesive look across different platforms. The Drupal, Joomla! and Standalone versions lack a visual cohesiveness that would aid in establishing an identity and easing user interaction. 

 

The home page for a CiviCRM installation presents the user with either a vertical or a horizontal menu bar, with a secondary vertical menu underneath. Dependent on the platform and the user's screen resolution, these menus can extend beyond the first screen presented to the end user, resulting in the user having to scroll both horizontally and vertically to access the options.

 

The base installation for CiviCRM needs to embrace a consistent look across platforms. Whether hosted in Drupal, Joomla! or used as a Standalone, the usability and design needs to remain the same. To that end, some standards and requirements have to be implemented into CiviCRM.

 

1. Identity

 

An identity that is portable and easy to use within the different installation options is vital. Use of the CiviCRM logo is the ideal solution; however, even mimicking just the text from the logo, with the word 'civi' bold followed by CRM in normal typeface, would aid brand identity.

 

Additionally, aiding user migration between platforms by ensuring a cohesive look and feel to CiviCRM would ensure that CiviCRM provided the same experience without being dependent on its platform. 

 

2. Menu Layout

 

A consistent top menu across platforms and screen resolutions is necessary. Starting with a base resolution of 800 x 600 and working out takes a majority of end users into consideration. The  final look must ensure that any technological requirements, such as images, javascript, et. al, degrade gracefully as required by user settings/preferences.

 

To this end, the final design requires a more compact and fluid navigational menu. Giving the user the ability to customize this menu allows the reordering and/or removing of options without alienating the installation base. Following a tighter menu to submenu trail from the home page ensures satisfaction of the standards while taking users into consideration. 

 

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.

 

4. Sub-pages

 

Modules to allow customization and swappable components. Utilizing a basic template allows the end user the ability to customize the theme. 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.

 

5. Special Considerations

 

A solid and flexible framework for any changes helps to address any special considerations. It facilitates that the changes gracefully handle all major browsers with additional support for deprecated versions. It would also handle any possible accessibility issues, addressing concerns that arise from screen readers, scanning software and other methodology.

 

Show other articles of this author

3 Comments

  1. Great comments. A strong visual identity is really important. I actually have my own administrator module (that I put in the cpanel position) that I use to have a customized menu. For example, one of my most common actions is to create or modify a profile. Right now that is buried deep in the administration menu. So I have that link up front. For Joomla users, having the display share some of the common look and feel of the Joomla! interface would also be great. However, I know this is a challenge with the attempt to be cross platform.
  2. This is truly a highly anticipated and much needed project! I must tell you that the non-profit organizations that I do pro-bono work for are excited by this addition to GSoC as am I. I like what you have proposed so far and look forward to the final solution.
  3. CiviCRM won't be able to establish clear cross-platform standards due to the inherent differences in the way both Joomla & Drupal work. The best solution is to refine and create look & feel consistency *within* the host application. It's important to remember that while both Joomla & Drupal are CMSs, they use a totally different usability paradigm. It *may* be possible for CiviCRM to find a cross-platform balance, but not likely. It makes better sense to adjust each to match that of the host application. Usually users pick one application or the other—so cross-platform consistency isn't as important as unifying the user experience with the host. Brand identity and user experience trump cross-platform consistency.

Add Comment