Photos Spare Cycles MythBusters

MovableType 4, my attempted redesign

I'll have some more thoughts on the MovableType 4 beta, but for now I wanted to focus on one of the major changes for MT4: the new UI. MT4 looks similar to some of the early Vox UIs, which clusters the menu items at the top of the screen in pulldown menus. MT3 and MT2 used a combination of left-hand sidebar and top navigation. This reorganization has its pluses and minuses: it dedicates more page width to the focal content (e.g. your new entry screen), but it also takes a lot longer to access menu items -- with MT3 every menu item was visible and immediately click-able. The MT4 designers clearly recognized this sacrifice and added a dedicated "Write Entry" button so that it would remain quickly accessible.

You spend more time writing an entry than navigating, so it seems a good trade-off to reclaim pixels from navigation buttons. But I feel like the potential isn't fully realized with MT4. If navigation speed is going to be sacrificed to optimize content space, there is a lot more that could be done. The new entry-editing box is only ~25% wider (686 pixels vs. 554) and only about 14% taller (131 pixels versus 115). With some 5-minutes of quick redesigning in Photoshop, I came up with a layout that is 75% taller than the MT4 design: 14 lines of editable content instead of just 8. That's a lot less scrolling to see what you've written. My 'redesign' is just a quick hack job, but I think it demonstrates the potential.

Here's my reorganized layout (~174 pixels above the entry editing box):


Update: m has already implemented this design with a modified structure.css

I've put more side-by-side comparisons in the extended entry.

MT4 layout (8 lines of editable content, ~320 pixels above the entry editing box):


MT3 comparison (7 lines of thinner editable content, ~320 pixels above the entry editing box):


Comments (5)

This is extremely interesting feedback, I do like your mockup where the tabs/buttons were moved to the same line as the MT Logo and System Links. Make sure you send it to the MT Team via the Feedback form: I know that they're extremely interested in feedback like this!


On MT4, the text entry box has a pulldown bar, allowing for more text editing space. Regardless, taking out all that padding results in a layout that I think works better.


@m: the pulldown bar froze my browser window twice, which partly inspired me to do this mockup.

Ken - thanks for your re-design. It's pretty clever and similar to the header design that existed before the current navigation.

I'd prefer a slimmer navigation but there are many things we have to balance. The current navigation has more room for the navigation to expand when used in other languages which require more horizontal space, and it also allows for a longer blog name... though an edge case for sure.

The way the header is coded should allow for many alternate interpretations of the header. I'm doing my best to keep a parallel stylesheet up to date as well... maybe even turn it into a plugin if I have time. =) ... but don't hold ur breath. =P

There is still a lot of old CSS to filter through in order to have the site coded to my standards, but as a last step I hope to separate the colors and background images from structure.css into paint.css to assist in further ease customization.

Thanks again for your suggestions.


@Beau: thanks for stopping by with the positive comments and hope of a seeing an alternate design (either stock or plugin). It helps to hear about the issues that your team has to balance, be it internationalization or otherwise.

I've been very impressed with the feedback that your team has been able to maintain -- Chris Hall has also given thoughtful replies to bug reports, etc... via the feedback form. Thanks!

Post a comment


related entries.

what is this?

This page contains a single entry from kwc blog posted on June 5, 2007 9:30 PM.

The previous post was New which results are paid?.

The next post is PageOfText:Wiki as Twitter:Blogging.

Current entries can be found on the main page.