Redesigning Joomla!

Written by | 01 August 2010 | Published in 2010 August
Joomla! 1.6 stable is right around the corner. With it comes an administrator interface that although significantly updated, remains largely the same as the previous interface from Joomla! 1.5. The Joomla! 1.5 admin interface was an updated version of the original Joomla! 1.0 interface, which was inherited from Mambo. One could say that we're using an interface that's been around the better part of this decade. That's an eternity in software.

Joomla!’s features and functionality have grown at impressive rates, though the admin interface has never received quite as much attention. Andy Miller, Ron Severdia and Andrea Tarr have done some phenomenal work with limited resources. These interfaces have gotten Joomla! where it is today and we owe these developers a debt of gratitude.

The Joomla! Administrator Interface History:
admin-history

It's Time For An Admin Team

An unofficial all star Joomla! developer team is being assembled on the Joomla! People Site. This team’s goal will be to start working on the Joomla! 1.7 admin interface immediately.

There’s never been a true team devoted solely to the UX and UI of Joomla. The team that we’re assembling for the J!UX group will be able to transition as an official team to maintain this new admin moving forward and fuel future advancements.

The current team consists of some experienced Joomla! designers like myself, Chris Rault (ProThemer), Anthony Olsen (Joomla Bamboo) as well other well known Joomla! advocates such as Brian Teeman and Amy Stephen. But there is still plenty of room if you are interested in helping to shape the direction of the group.

Observing Other Systems

Drupal and WordPress have very different interfaces which have been developed in completely different fashions. The common denominator is the fact that these interfaces have evolved, quite dramatically.

The WordPress admin has been one of constant evolution and has changed on a regular basis.
wp-history

Drupal’s community realized the problem with their interface and the difficulties content creators had in using it. The Drupal 7 Experience Project helped provide and entire new interface for Drupal 7.
drupal-history

Where Do We Start?

How do you eat an elephant? One bite at a time.

We’re currently in the planning process. We’re going to start by identifying the problems of the old UI and defining the goals of this process. From there we’ll divide this massive process up into small, bite-sized chunks and begin executing. The first stages will include examining and gathering information regarding user experience and then creating some initial mockups or wireframes.

User Experience

User Experience, or UX, has historically been an area of criticism with Joomla. You can’t design a user experience, but rather design for a user experience as Wikipedia says.

We want to build this new interface around the content creator. The challenge is that Joomla is so powerful and flexible that there isn’t just one type of content creator. I think this is why WordPress has always been deemed “easy”, since its interface is designed around writing blog posts. You can certainly do a ton more with WordPress, especially now with content types in 3.0, so I think we’ll see some changes in their UI.

I personally spend more time with Joomla!’s administrator site than I do with my family (not sure if I’m proud about that), so I want this thing to be comfortable. Just as carpenters want the best power tools, I want the latest that technology has to offer when using Joomla!

Design Patterns

When designing an interface, you shouldn't re-create the wheel. There are always exceptions to the rule, but you generally want to create an experience that’s similar to other software the user has used in the past so things feel logical and the learning curve is lessened. Design patterns are reusable solutions for common tasks.

Wireframing

Once all of the brainstorming for features, functionality and workflow have been put together we need to start wireframing. There are two types of wireframing: Lo-fi and Hi-fi. I’m a big fan of jumping right into Fireworks and putting down an idea, which is a Hi-fi wireframe. Since I live in Fireworks I work just as fast as one would using wireframing software like Balsamiq (which produces Lo-fi wireframes), although I have started sketching quick ideas on my iPad using a stylus (I use the Pogo stylus and love it) in one of several iPad sketch apps.

As 52 Weeks of UX says “There is no right way to wireframe. You must understand the context and the requirements for the project and move ahead accordingly.” — and that’s what we plan to do.

Some Fun Stuff That's Already Happening

Chris Rault’s Installer Idea

Chris laid down some Hi-fi wireframes of a more simplistic Joomla! install process
1.7-installer

Minima from Marco Barbosa

Marco, who started the J!UX group has put together a minimal template for Joomla! 1.6 as an proof of concept.
minima

These aren’t final by any means, but they’re great examples of the creativity the Joomla! community has to offer.

Joomla! Needs You!

This new push is really just getting started and so there is plenty of opportunity for you to add your input to the process. Building an all new Joomla! experience won’t be easy. We’ll need contributions from all areas of expertise. If you have ideas or want to help in any way, join the group!

Feedback from users of all levels of experience is absolutely necessary. A content writer users Joomla in a very different way than a site administrator. We want an interface that works for everyone. You finally have the chance to say “that button don’t many any kind of sense!”

Stay Tuned for Updates!

Look forward to lots of exciting progress as we continue coverage of the J!UX team here in the Design Studio.

Follow the fun on Twitter:
Look for the #jux17 hashtag on twitter for J!UX updates.

Read 57541 times Tagged under Designers
Kyle Ledbetter

Kyle Ledbetter

Kyle is Principle Usability Engineer for eBay.

Kyle also owns Pixel Praise, the developer of AdminPraiseTapTheme and Projectfork.