| A stab at standards. CiviCRM: look and feel. |
| 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.
|




Wed 28 May 2008 12:33:54 EDT
Wed 28 May 2008 13:47:29 EDT
Mon 02 Jun 2008 20:41:09 EDT