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).
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:
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.
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.
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.