GSoC Project - Aesthetics and Usability

[rat79]

Hey everyone,
  Well, the summer has started, and I am working with CiviCRM as part of Google's Summer of Code. A rough outline of what I am hoping to achieve this summer is:

"CiviCRM works great, but its visual design and layout could be better. Rest of abstract is on the CiviCRM wiki."

The first phase of my project involves creating some standards and requirements for the project through documentation. 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 should remain the same. To that end, some standards and requirements need to be implemented into CiviCRM. They should include:
* An identity that is portable and easy to use within the different installation options. Use of the CiviCRM logo, or even a baseline of civicrm in the menus would be ideal.
* A menu system that can be easily adapted for each installation option.
* A more compact menu and navigation system to accommodate various screen resolutions effectively.

I am going to expand this further later tonight, but I wanted to start getting some feedback from the community. There is a wiki entry as well, and I am blogging through Joomla!'s developer blog for the project duration.

So, what I would like to know is:
1) What do you think when you think of CiviCRM and, more importantly, its aesthetics and usability?
2) Are there any technical limitations (browser size, javascript limitations, connection speed) that need to be addressed or that I need to be aware of?
3) Any of the main menu options that could be grouped together? Any that could be added?

Please, be honest. I have some ideas, but the only way to make changes that the community will embrace is to include them and ensure their needs are addressed. I hope to have a rough draft of the standards and requirements posted later today.

[rat79]

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.

----------------------------------

This is the base document that I will be expanding and changing. Also residing on the wiki, any thoughts/concerns/etc. greatly appreciated.

[MonicaHayes]

So how did the project go? What changes did you make and how did you get on. I've just read through your posts on the things you would like to make changes too but then it just stops. An update on your project would be nice!