CiviCRM: Aesthetics and Usability
Full steam ahead ... finally.
CiviCRM: Aesthetics and Usability
Written by Jon T. Volkman   

 Hey everyone,

Some technical issues sidelined me for a bit, as Linux, my PC, and code issues stalled my progress. That's what makes this endeavor exciting though, right?

Anyway, in the next week, I hope to get some changes implemented in the menus, starting with Drupal and working my way through. The hope is that the menu layout will remain the same in Drupal, Joomla! and the Standalone with the changes being to the look and feel of the menu.

Menu System

I have already done some preliminary work on the menus and I have an idea of how I see the changes being implemented. Now, it's time to dig into the code and make the changes work within CiviCRM. The plan is to have a sandbox up with the menu changes implemented by the end of the week so I can gather feedback on the changes. 

 
47 Votes

0 Comments

Piece by piece
CiviCRM: Aesthetics and Usability
Written by Jon T. Volkman   

As I move into actually implementing some of the standards I have been finalizing, I wanted to thank everyone for their feedback so far. Moving forward, I am planning to tackle my project piece by piece as the summer progresses.

Now that I have some standards in place, I am going to work on getting a new menu established. Keys to this included identifying what is missing and/or extra on the current menus.

I plan on implementing a horizontal menu. I also plan on ensuring that any necessary links are present above the "fold" of the page, making it so users do not have to scroll down to access options. Hopefully, some rough implementation of this will be done soon.

After the menu, I'll take some time and brush up the standards documentation before moving onto the next piece. 

 
41 Votes

1 Comment

Further forays into standards.
CiviCRM: Aesthetics and Usability
Written by Jon T. Volkman   

Thanks. That's the first thing I want to say. Between here, the CiviCRM wiki, the CiviCRM forums and the CiviCRM blog, all the comments and feedback have been wonderful. It's been great engaging the community and I hope this is the start and not the end.

Thanks to some peer reviews and all the feedback I continue to receive, I have spent the last week trying to begin the documentation process. Quick, define aethetics... how about usability? *crickets chirping*

These can be very personal things and it can be hard as an organization to define standards and be firm about them. So, I have been researching aethetics and usability. I've been also trying to ensure I document everything in a logical fashion. This will make the changes I implement easier and make it easier for future development to follow.

To that end, so far so good. The wiki has a solid framework that I will work on fleshing out through this week. By the end of the weekend, I hope to have the standards largely done. Or at least in place and ready to be audited and adapted as needed.

My project this summer will then shift its focus to working on the navigation within CiviCRM and the home page look. I'll hopefully be doing some mockups and identifying issues with usability and aesthetics as able.

Comments, suggestions and feedback are greatly appreciated. Oh, and finding things like this on a List Apart this week is so wonderful.

 
46 Votes

0 Comments

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.

 
44 Votes

3 Comments

Establishing contact and facilitating feedback
CiviCRM: Aesthetics and Usability
Written by Jon T. Volkman   

 Is it really time to get this party started? It seems like just yesterday that I was accepted into the Summer of Code and now, here we are, beginning the summer in earnest. This is also where everyone else comes in.

 
Over the last month or so, I have been introducing myself to CiviCRM and its visual identity. As part of this first phase, I want to hear from the developers and the users of CiviCRM. What about its aesthetics and usability is good? What is bad?
 
As I begin to draft new documentation in regards to CiviCRM's usability and aesthetics, I am hoping to engage them through here, the CiviCRM wiki and the CiviCRM forums
 
While I refine the documentation and garner feedback, I am also subjecting myself to a peer review. The created documentation and my plans for the summer will be presented to someone unassociated with the project in hopes of getting a fair and balanced assessment of my project. This individual is an industry professional in regards to project management, business analysis and technical writing.
 
My success this summer hinges on community feedback and strong, well-defined documentation. I hope to establish this within the next two weeks and utilize these two items throughout the project duration.
 
40 Votes

0 Comments

Team: CiviCRM Aesthetics and Usability
CiviCRM: Aesthetics and Usability

Jon Volkman

Jon Volkman is a student from Seattle working towards a certificate in software testing and quality assurance. He holds two associate degrees, one in web design and another in database management. Jon has a solid set of skills in CSS, HTML, and PHP and is familar with Linux, Mac OSX and Windows and PC hardware. Jon is a trained barista who has spent the last two years doing quality assurance on a wide variety of Xbox, PS3 and PC games. Jon enjoys reading a wide range of books, exploring Seattle and the surrounding area, finding new vegetarian delicacies and hanging out with friends.

Wes Morgan Mentor: Wes Morgan is an online organizer and software developer for Environment America. He works to get people involved in environmental advocacy in their backyard and across the US. He is also a user and contributor to open source software like WebGUI and CiviCRM. This summer, he is working with the Joomla! GSoC team to mentor projects relating to CiviCRM (CiviCRM integrates with Joomla!). When not working or coding, Wes enjoys spending time in the Colorado Rocky Mountains hiking or skiing, and/or sampling the many delicious microbrews of the Front Range. You'll also often find him running through the park (and only sometimes being chased).

 
47 Votes

0 Comments

Abstract: CiviCRM Aesthetics and Usability
CiviCRM: Aesthetics and Usability
Written by Jon T. Volkman   
"CiviCRM works great, but its visual design and layout could be better. Joomla! has great aesthetics and usability which would greatly benefit CiviCRM."

 

Integration will be a key to improving CiviCRM. Not only does it need to have its own distinct design, but it needs to integrate into Joomla! and feel as if it belongs. Integration of Joomla!'s aesthetics and usability into CiviCRM would improve the product, but having its own unique identity would be just as beneficial.

Consequently, this project will focus on building a strong design for CiviCRM and applying it not only to the UI but to the template system. Improving the underlying design would also improve the quality of the entire product. As a result, the project would begin with building a strong design and then shift to improving the UI and the template system using the new design standards.

Preliminary work would involve standards and design requirements. Documentation would be created to formalize the design process and ease future improvements to the theme. The documentation would also establish standards specific to CiviCRM and their unique needs. These documents would undergo thorough reviews before any further advancement on the project.

The design itself would rely heavily on HTML and CSS to provide a solid and flexible framework. Any changes would 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.

The template would also address the need for end user customization. In addition to being broken into modules that could be easily swapped by user created components, it would be easily adaptable and clearly commented for those desiring further customization. Additionally, the basic template would strive to provide even the most basic 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.

 
41 Votes

1 Comment