Interface design; an interative process

I was looking back at some old mockups and screenshots of the MySource Mini today and it is really amazing to see how the product's interface has progressed over the last 12 months or so. It's interesting to see how elements of the design changed, and while not all these mockups were built, all contributed something to the design we have today.

In this post, I'm going to show you the mockups we produced of the Settings/Administration interface. This is where you configure things like designs and caching for individual assets and for the site as a whole.

This first mockup was implemented in early 2007 and represents the first interface of the MySource Mini. We went for a desktop feel with large icons, but it gave us very little space to fit the actual editing interface. We still love large icons, and the concept of icons to represent different systems remains today.


It was soon clear we needed more space for the editing interfaces, so we went full screen. That meant sacrificing the large icons we loved so much and moving to a toolbar along the top, a concept that remains today.


The start of 2008 saw us bring on a dedicated interface designer who began reworking the main concepts of the interface. At the time, the inline content editing interface was progressing well and we wanted to bring the context you get from that interface into the settings screens. So we scaled back from full screen a little so you could see the page underneath.

This mockup was done in January 2008 and implemented soon after. It was the first time we really tried to bring that context into the rest of the interface, which we have now done using thumbnails of the page. Notice the side menu, which is almost identical to the current multi-add wizard interface.


One thing that always bothered us with this temporary interface was how dark it was. We didn't want to go for the desktop-inspired background image from the earlier mockups, but we wanted something lighter to contrast well with the black MySource Mini toolbar.

This mockup was done in March 2008 and was not implemented. It was used in most of our mockups for quite a while and was growing on us. It was light and looked fresh. It didn't have large icons, but the chunky menu buttons made up for it.


There was one thing lacking though; context. We needed somewhere to put our thumbnail and asset information.

This next mockup was very close to being the final interface. It was designed in May 2008 and implemented, although all the system icons were the same at the time. It is the first time the blue info box made an appearance, which gave us room to add a thumbnail and asset information.

In this mockup, an administration screen is shown, so the blue box does not contain asset information, but you should be able to see how we jumped to our final interface design from here.


In August 2008, we changed our minds again. The grey bar at the top was looking too much like a second toolbar and didn't feel polished enough. The whole interface was looking a bit too much like an old desktop application and we wanted something fresh.

We decided to lighten everything up and add the large icons back in. We had heaps of room for the content editing area, so we could go very web 2.0 with large menus and bright colours.


I've promised the team that I wont change my mind again, so this is the interface we will be using in the final MySource Mini release. I'm sure you'll agree it is a big improvement over our original interface and I hope you've enjoyed this small insight into our interface design process.

MySource Mini demonstration

Update: After being featured on Ajaxian, Vimeo decided they don't want to host my videos any more and deleted my account without warning. I've re-posted the 30 min demo below, but be warned - it is 117MB!

I recorded the 30 minute demonstration of the MySource Mini that I gave at the MySource Matrix International User Conference a couple of weeks ago. I've posted the demonstration online so everyone can check out this new product from Squiz, even if you couldn't make it to beautiful Coogee for the conference this year.

PHP_CodeSniffer == CSS_CodeSniffer?

Earlier this year, I added support for tokenizing JavaScript files to PHP_CodeSniffer so developers could ensure their JS files also conform to their coding standards. With new products like the MySource Mini using such rich JS interfaces, PHP developers are having to move away from traditional server-side coding improve their client-side coding skills. Having JS support in PHP_CodeSniffer was a move to recognise this and we are now using it very successfully within Squiz to check for formatting and performance errors.

The next natural step was to add support for checking CSS files. These same PHP developers are having to write large amounts of CSS these days and, in my experience, CSS files tend to be fairly messy when a large number of developers are working on them. To counter this, I've added a basic CSS tokenizer to PHP_CodeSniffer and the Squiz coding standard now enforces formatting standards such as indentation and spacing around colons.

Sniffs can be written to improve the performance of both PHP and JS code and the same is true for CSS files, although it works a little differently. One of the sniffs in the Squiz standard ensures that shorthand notation is used to define CSS colours where possible (e.g., #F0F instead of #FF00FF). This helps to ensure developers focus on keeping the size of CSS files down, even though we will certainly minimise the size before deployment. I think PHP_CodeSniffer helps to remind developers of these performance issues each time they run the checker, which can only be a good thing.

I've committed the CSS tokenizing code to CVS, so you can grab it directly from there or wait until the 1.2.0a1 release in the next few weeks.

MySource Mini hands-on at the MMIUC 2008

The MySource Matrix International User Conference for 2008 finished up just over a week ago. On the final day, I gave a 30 min live demonstration of the MySource Mini, which was followed by an afternoon of hands-on demonstrations with conference attendees on three test systems we had made available at the conference.





We all use Macs for development, but rest assured that the MySource Mini will work on Windows and Linux as well!

The whole MySource Mini team was available to walk people through the product and answer questions about both existing and upcoming features. The test systems were very popular and the developers kept busy throughout the afternoon.







Congratulations to the whole MySource Mini team for producing such an amazing product and for being such fantastic instructors on the day. The Mini was well received and plenty of people are looking forward to its release in March next year, so get back to work!

MySource Mini at the MMIUC 2008

I've been really quiet on this blog for a few months, and have even let some PHP_CodeSniffer bug reports go unfixed for several weeks. That's pretty unusual for me, but I've been both sick and very focused on the MySource Mini that will be presented at the MySource Matrix International User Conference 2008 in less than 2 weeks!

I can't say much about the Mini, but now that the agenda has been posted, I can at least use the name and confirm it has something to do with MySource4, which I've been babbling about on this blog for a while now.

I've gone a bit quiet about parts of MySource4 that we have been working on, but not because they are any less amazing than the features I have spoken about. Apart from our custom-built true inline WYSIWYG editor that I demonstrated last year, I'll be showing the caching system I've mentioned before, a versioning system to replace rollback that I've had to stop myself blogging about so I don't give away its secrets, and the most amazing context sensitive help system I've ever seen in any application. There will also be some systems available for conference attendees to play around with, and the whole MySource4 team (development, interface and documentation) will be there to answer all your questions.

Want to come along? Register here.

Sebastian Bergmann giving 3-day QA workshop in Sydney

Earlier in the year, Sebastian gave QA workshops in both Melbourne and Brisbane. He's heading back to Australia in December to run his 3-day QA workshop in Sydney.

This 3-day workshop will introduce the attendees to writing unit tests for the backend and system tests for the frontend of a web application as well as managing the quality from development to deployment and maintainance using tools such as PHPUnit, Selenium RC, phpUnderControl, PHP_CodeSniffer, and PHP_Depend.

The workshop costs $1695 + GST and is running between Mon 8 Dec and Wed 10 Dec. You can read more about it at Sebastian's blog.

The cost of the workshop is minimal compared to the skills you will learn and the QA tools you will be introduced to (over 3 days remember!). I think it is so worthwhile that I want all the PHP developers at Squiz (some already familiar with PHPUnit and PHP_CodeSniffer) to attend. Now that would really hurt the budget and our timelines, so I'm hoping to get Sebastian in to give a shortend workshop at Squiz. He is available for custom in-house training if you are also interested. More details at Open Query.