The control panel needs a designer’s eye, not just a theme, especially for a CMS that is lauded by designers.
High time I guess that I wrote an article about the interface design work I did for ExpressionEngine 2. I've seen people jump the conclusion that everything that they see UX-wise is designed by me, or that I decided what it should be. Working with clients is a two way street and involves compromising and letting things go. I've touched on that subject last year when I spoke EECI conference in Leiden. That talk only scratched the surface. Today, there still is this misunderstanding, because people don't know or see which part I was involved with and what part was out of my hands. Hopefully this article will help clarifying this.
The 'brief' briefing and 'tight' deadline
I started working on this project mid December 2007, the deadline was around end of January 2008. With the Christmas season in between I had to come up with a GUI design in about 1 month and a half (between other jobs running at that time too), where the briefing was no longer than 580 words with some suggestions of how the structure should look. Just think about this for a moment. Talking about a challenge, right?
How I envisioned the new EE2 CP
One of the items mentioned in the briefing was to work with beginner, intermediate, and advanced. The way I envisioned this was to use a UX that has different levels. The starting point being the client. No matter what you say, it's the client that has to use ExpressionEngine. If he doesn't like it, chances are you aren't going to build many projects with it. In an ideal world, where time was no issue a survey of clients using EE would have helped a lot more. Now I tried to take everything out that confuses clients in EE1.6 (from my little experience in watching clients use it and asking me questions about it). I wanted to make the structure more logical for them too. In doing this I had to adhere to what was set in the brief. The structure was already largely defined so I couldn't make very drastic changes. I would have loved to make it adapt more to how clients think about the structure of their site, they think in pages and sections etc. That's why the add-on Structure is successful as it takes those principals to heart.
One of my initial EE2 CP homepage wireframes
The way I saw these versions of the control panel, was to have a different approach for each group of users. I divided them into: the client, the designer and the developer. The client is the one I tried to start from and where the current design is based on. That's why it looks 'pretty' to some, as it needs to appeal to the client so that he or she feels comfortable using it. For the designer I would have taken it one step back and for the developer it would almost look 'pale' compared to the others, in terms of skinning. The thing is, you just can't design one and the same theme or skin for these different groups and have everybody liking it. For example, a developer will not want the images I've used, he might prefer a smaller font, less rounded corners etc. Somehow the other groups never came to life and everything got built on top of my client starting point.
Besides the skin, I also saw a different CP in terms of structure and content for each of these groups. For example, the client has totally different tasks, than the designer or developer. He'll be editing and posting entries. He needs to see as less as possible. In other words the CP needs to be adaptable in that way. Maybe in a later stage it could go 1 step further with some kind of preference panel to refine certain settings. I thought this was something vital, as Ellislab suggested to have these groups too remember: beginner, intermediate and advanced. We both agreed, too bad that none of this really saw daylight.
The few pages I designed
Another important thing I should bring up is that I designed only a few of the major pages of the Control Panel. Those who know EE2, will also quickly realize that there are a bunch of pages. EE2 isn't what I would refer to as small. Considering the limited timing I only got to help the team, it's impossible to design them all. What follows is a list of pages I delivered a design for:
- CP homepage
- CP Admin page
- CP Design page
- CP Edit page
- CP Publish page
- CP Template page
As you can see the list is rather limited, but these were the screens I designed and delivered as Photoshop files. It was a start for the team to get the ball rolling and create a demo version for SXSWi 2008. Not everything what you see now in EE2 is 100% in line of how I envisioned it in these 6 pages.
EE2 CP Publish page template design in the color scheme of my choice. Notice the handles to indicate that the fields are draggable.
Suggestions that never got implemented
Because of this short time line a lot of things never got implemented. In the whole process of designing this, there were a lot of smaller discussions going on about making things easier for the user. Things like less clicks to get to a certain area of the CP. There was for example the Admin section that I thought could use some work in terms of making things more logical. One aspect would be the way you manage comments on entries, something I deal with here on the blog. A lot of these suggestions all got heard, but because there was so much going in such a limited amount of time some of those got lost in the grand scheme of things. Some adjustments to the way you handle comments should see daylight soon in a future point release.
Being kept in the dark during development
The thing is, after I delivered the Photoshop files of these pages, I wasn't really involved anymore in their development process. The first glance of my design work was at the demo of SXSWi 2008. It's not that the intention wasn't there to involve me judging by this quote below.
— Paul Burdick
On some level, you are going to be our compass on this design. Pointing us in a new direction to help us explore a new way of getting people to use and understand ExpressionEngine.
Somehow it got side tracked by whatever issues popped up during development. I didn't get to see anything *real* until the first beta release, just like most other people who had access to the beta version. My first reaction was one of being overwhelmed. I finally got to see it in action and take it for a spin. What followed was a bag of mixed feelings, because I saw a ton of imperfections. Knowing that people knew 'I was the designer' it got me a bit frustrated because the designer that I am wants to make things pixel-perfect and a lot of things weren't. In a way I was proud to be part of it, but on the other hand I wish I had full control to go fix what I thought was still wrong.
During the beta period I spend about 2 full days going over each CP page using CCSEdit's Xray feature to track the specific CSS and trying to fix things. In some situations it was impossible because it affected things that were OK elsewhere. For example, I used 2 different types of buttons. There are the priority buttons which use the highlight color (cherry red), and there are the buttons with less priority who have a more subtle grey-ish styling. On some pages, all the buttons had this cherry red color, which wasn't the case in my design. When you use too much of that color you loose its hierarchy. The frustrating part was that it wasn't always possible to fix this as the HTML (class name) had to be changed. Going through the CP page by page like that was really a tough job. It wasn't my code and I really had trouble finding my way in the logic behind it, if there was any. I delivered a 16 pages PDF with things to edit, plus explanations. Working with somebody else's code is always difficult and if I had done the html & css I would have approached things differently. One thing I touched on was the big usage of jQuery in the CP. If I had it my way I would have used more CSS3 for styling, rounded corners and animation where possible. If you didn't have a more modern browser it would still have worked alas with less panache.
Another thing that frustrates me is that there are no handles to indicate that the template groups in the Template Manager are draggable. I didn't have any involvement in this, but it looks like I'm the person responsible for that decision. Guess what I'm not. When I delivered my templates nobody mentioned that this would become draggable in a working version. In fact, I only found out by accident that you *could* drag them. This is one of the many little things that people seem to misunderstand and blame me for.
At the time I was working on the interface, the person in charge was Paul Burdick. Paul is a very nice guy that you can have great laughs with, but he's also very strong minded. Don't misunderstand me, I love working with people that know what they want, much more than with people who haven't the faintest idea. To give you an example, in my original design, I opted for a horizontal sub navigation, because I didn't want to repeat the annoyance of having the menu close again when you accidentally leave the click field. It's very annoying when the menu collapses and you have to repeat your action. The way I envisioned it was that the crumb trail would be temporarily hidden each time you go into the menu to reach the sub menu. This was my suggestion to go against Paul's argument of trying to save as much vertical space as possible. My argument didn't stand because Paul didn't really like the idea of a horizontal menu. He strongly suggested to go for a vertical menu instead. He wanted it to be like how desktop menus work. He was also very verbal on loosing pixels of screen estate. I thought it was better to loose some screen estate than to get frustration in return. I've lost this battle and eventually gave up on bringing it up. You know, you have to move forward. This is just one of the situations where you can't just do what you want personally.
Flexible CSS for custom skinning
As I mentioned earlier, it was also my intention to have different skins for each group of users. One of the ideas that I had was to create the skin in a smart way, so that people could easily use their own custom CSS for colors or typography. I learned this years ago while working on a Google Blogger skin. Each skin consisted of 3 stylesheets: layout, color and type which makes it very flexible for custom skins. I wasn't really involved in the coding part, but it would have been ideal for people to change the cherry red, or pink, for those that should learn colors :) The current default theme was entered by myself because 'I' preferred it, and I asked if they could provide it as an alternative theme. The initial default theme was green/orange (Paul's Autumn theme). I wasn't 100% happy with that theme but it was a compromise that I could live with. So I entered 'my theme' instead, one that I created rather quickly. Since Paul had left EllisLab by that time, the team preferred this version over the green/orange one, and so they decided to make that the default theme instead. It was never my intention to make this theme the default one.
On the topic of custom theming
The thing with custom themes like Leevi Graham's morphine CP theme is that you have total freedom to do what 'you' want. So it's easy to say 'it's nicer' or it 'tweaks the CP styles removing many of the "flourishes" and promoting a more professional image'. Leevi toyed around with the html and css via his own add-on, all things that aren't possible when you aren't involved in the coding part and when you work with a client. If I did everything my way, things would look and function different too. Some people don't seem to understand this when they judge the CP. A good designer works with clients and meets them halfway if needed, and gives up battles that they can't win in favor of finishing a project on time.
Hopefully this doesn't come over as a rant because that is the last thing I want. Just try to see it from my perspective that it is a little frustrating to see people say that EE2 has UX problems and make a leap in their mind that I was responsible for it. Believe me when I say that I am not easily satisfied or give up quickly when discussing UX or UI problems. However I was less involved then I would have liked and I tried to work with what they gave me. Do I know everything? Not in a long shot, I make mistakes too just like anybody else. However I feel that I needed to say this. Don't get me wrong I am still proud to have worked with the wonderful people of Ellislab and I would do it all over again but with the lessons learned in mind. I'm sure they think that too after reading Kenny's article. We all live to learn. Many of the points that Kenny touches on are valid. A full-time designer at EllisLab would certainly help improve things. I'm speaking against my own shop here, but it would be for the greater good. When there was such person there during the development of EE2, many of the issues we are having now would probably have been solved. A good in-house designer would have understood the path that I set out and would have followed that up better with questions towards me during the development stage. Design is now an afterthought most of the time. I'm still excited to see what the future has in store and I'm still convinced that Ellislab will guides us in the right direction eventually.