Interface Design - Chapter 2 - Pixie 1.0

My final university project (completed almost two years ago) was to take SMX (Pixies predecessor) and work on a new interface design. The project lasted five months and included a number of usability studies, eight variations of the design and a great deal of work to come up with something that felt unique and usable.

If truth be told the current interface that Pixie uses (in version 1.0+) is only loosely based on the ideas I developed during that project. The reason for the differences are largely due to my development knowledge - designer first, coder second; but without that project Pixie would not look or behave like it does today. I am not going to fill this post with screenshots of how Pixie looks now (you can see for yourself by trying the demo) but I did want to introduce the final design I came up with at university and also introduce the other eight interface ideas (which I will write about in the coming weeks and months).

Future Pixie?

Pixie interface small

The screenshot above is taken from an interactive demo that was put together as the final showcase of my work. I thought it might be nice to upload this demo onto the Pixie site to show you how the interface worked. Please bear in mind that the demo is not tied to a database and is only partially functional - it gives you a feel for my ideas:

Try the "Future Pixie" Demo »

Features of this design included:

  • Front end editing - click on the text within a page to edit it directly.
  • Comprehensive dashboard that allows control of all aspect of the site.
  • Drag and drop dashboard panels - customisable by user.
  • Drag and drop page re-ordering.
  • Tabbed interface between all open pages and the dashboard. 
  • Collapsible pages menu for maximum screen view when editing a page.
  • Sub-level navigation with breadcrumbs. 
  • Page "flip" for page settings.
  • Tacky interface noises.
What worked?

For me one of the best features of this design was the ability to edit pages from the front end of the site. As web technology improves I think we will see more and more systems making use of this idea. Changes are placed into context instantly and it saves the constant switching between the administration panel and the actual pages of the site. Another idea that I feel works well is the idea that behind a page you will have access to the settings. The visual page "flip" is a real help to users who are new to CMS systems - it communicates the idea of hidden features perfectly.

What didn't?

One thing that plagues the current interface and this demo is the ability to visualise more than one level of pages through the publish section. Having large distinguishable icons to represent pages really helps users to understand (and easily identify with) the interface but it also becomes difficult to manage when sites have a larger number of pages. We have had one report of Pixie powering a site with over 100 pages, in version 1.0 and this demo that is a great deal of clicking back and forth to get to the right page you want to edit. This is why Pixie is currently better suited to smaller websites and a problem we face going forward.

Will this become the new Pixie?

Probably not. Since completing the project my ideas for design have developed further and while I think we can take some of the ideas from this design I think there is also plenty of room for improvement. What do you think of it? Would you like to see us develop this idea?

Our next few posts in the "interface design" series will be looking at some of the ideas developed as part of my final university project.

By Pixie Admin Last updated: 28 June 2009, 21:39


Gravatar Image #1 Michael 5327 days ago.

first of all, I have to say thank you - pixie is simply amazing. with that said, cool design - I'm excited for what's around the bend

Gravatar Image #2 Melle 5324 days ago.

I've just explored this site and take a thorough look at the demo. I really really really like the concept and the simplicity. I'm going to use this great CMS for future sites from now. ;) But I think the way the pixie user and admin area now is, is better. I like the simple tabinterface which I understood at once. This new interface is harder to learn and above of all, I think my grandma won't understand it anymore. I'm sorry to say it, but I don't like it at all. I think (personally of course) that a dashboard with so much information on it will be confusing and it will look like something that is complicated for normal users. Don't go the way they gone with WordPress! Please don't! Don't force people to learn to know the interface over and over again every new version introduced to the users! My advice for Pixie (maybe a bit offtopic): The only thing I think is missing is the function to be able to use an older backup of the site and it would also be nice if you could import a zip backup from you localhost or another website just within the adminarea. That would make it for me unneccesary to anything else than just to login my Pixie install. Keep up the great work! Melle W.

Gravatar Image #3 Graziano 5320 days ago.

Simply amazing. Good work. Can't wait for the final point of this development. Congrats Scott! and greetings from Italy :)

Gravatar Image #4 Scott Evans 5320 days ago.

Thanks for your feedback folks, it is great to hear your thoughts. As always we have to walk the fine line between functionality and usability. The trick is to show what matters to the right people and not over complicate things. @Melle While the interface changes at WordPress have been quite drastic it is also necessary. Part of our progress must be to embrace change.

Comments now closed.