WordPress Layout Customization

WordPress added some excellent layout customization options on administration screens in version 2.7. The most obvious change comes in the form of the Screen Options tab, which expands a settings panel that let's the admin hide or show parts of the UI being viewed, and saves those settings for the user immediately.

The UI also provides a drag and drop behavior to re-arrange modules. When hovering over a module heading, the icon turns into a full hand and lets the user move modules up or down in the column, or between columns. A down arrow appears on hover over the headings and allows the user to collapse the body of the module.

This seems like an excellent idea for an administrative interface, and the behaviors were very intuitive. I noticed the options, and my changes without even knowing that this was a new feature. At some point I wondered if it would be desirable to reset all your customizations to move the modules to their default positions. Other than that, everything I could to customize the layout seemed easy, and it seemed particularly nice to be able to modify the post forms. Good stuff.

1. Default admin dashboard.
2. Clicking the screen options tab to expose settings below nav bar.
3. Changes are reflected immediately in the body of the page.
4. Doing a module layout change using drag and drop.
5. Collapsing a module using down arrow in the module heading.


Gifting Feature at Nintendo

Nintendo provides excellent illustrations to describe the gifting process on the Wii, using storyboards. The gifting page shows a table of contents at the top, for each use case: sending, receiving, confirmation, and faq. Clicking one of the use cases jumps the user down to the storyboard illustrating steps to complete each case. It's a simple, very clear, and visual. I wish every support site worked that way.

Thanks to Boon Sheridan for the tip.

1. Table of contents (use cases) at the top of the page.
2. Sending a gift.
3. Receiving a gift.
4. Gift confirmation.


Pano Logic Expanding Call to Action

Pano Logic sells a simple network PC. Their product site features a large graphic of the product, and 3 simple informational modules at the bottom to find out more about the product, read reviews and press, and watch a demo webinar. The modules expand when the user hovers over each box. There isn't much information added, except for a call to action that tells the user a little more about what they'll see if they click the link.

Very simple expand/collapse transition that can be used to highlight a call to action and display more below the surface.

1. Calls to action below the marquee, showing plus icons to expand.
2. First box expanded, now shows minus icon, and call to action text with arrow.
3. Second box expanded.


Daylife Drop Down Menus

Daylife's drop down menu in global navigation that provides a wide ribbon to show both navigation to secondary levels and to show teaser content, e.g. the Latest News menu shows top level news categories as well as recent articles in each category.

News sites like Daylife and NewsVine have been coming up with interesting ways of changing user's expectations of what can exist in global navigation. In some cases, the labels and categories for what appear in global navigation suggest a shifting information architecture that is based on what's interesting now or what people have been reading.

The notion of either letting editorial selectivity or bottom-up data analysis determine navigation is what's interesting to me here when combined with a ribbon menu. It extends the idea of what can be done with a top tags navigation bar, to show more context within each category, which may be more useful with large sets of categories or freetags than displaying every top level in a hierarhical list. I imagine it would even be useful for promoting information or advertising. Ack! I'm sure someone already does it.

1. Global navigation at the top of the page shows down arrows to indicate expansion of the control.
2. Top news categories with 3 news items for each.
3. Photos drop down shows editor's picks, recent photos, and photos recently starred by users.
4. Content selected by editorial staff.
5. Your favorite topics, articles, and photos.


Google Analytics Date Selector

Google Analytics offers one of the most sophisticated date selectors for data filtering that I've seen. The interface allows you to filter reports to a single day by clicking one square in a 3 month range. To select a date range, you click the start input, click a day, and do the same for the end date range. Or you can enter dates in the text inputs.

The timeline control allows you to visualize the volume of visitor activity as vertical bars, and adjust the date range by pulling slider handles. They don't include tick marks for date milestones, e.g. month/week ticks would be useful, so you have to watch the dates change in the inputs as you drag. The "Compare to past" functionality works well here too, because you really need to compare ranges of equal length. Clicking compare to past opens up a second range in green, and you can drag the ranges back and forth in time.

Comparing to past is a little less intuitive in the calendar view if you rely on clicking to make your selections. I just found it hard to click the input first before clicking the calendar to indicate whether I'm enter a start or end date. The best bet is to use the input controls there because it's easy to mistakenly create ranges of different length and overlap ranges. They do provide visual cues when there's an overlap by showing those dates as mixed green/blue squares.

1. Default date range.
2. Filtering to a single day.
3. Clicking to expand the date range.
4. Viewing the range in timeline display.
5. Push the blue bar to move the date range, and pull handles on range to fine-tune start/end dates. Dates update in text inputs at right.
6. Compare to past shows second date range. When there is overlap, the colors are mixed.
7. Compare to past in calendar view.
8. Overlapping date shown in teal.


Google Analytics Drop Down Menus

I'm a fan of the drop down menus that span a wide area, e.g. the main body or full page, in order to show a wider range of options rather showing fewer in a vertical drop down and forcing navigation through a fly-out tree. This convention is showing up mostly in global navigation, and with the introduction of Microsoft's Ribbon, we can expect to see more of it.

Google shows buttons with down arrows to indicate that clicking one of those controls will show expanded options in-screen, a la the drop down menu. However, rather than floating a div above the flow of the page, their control expands a div in place below the button, and the expanded div is attached to the button which now looks like a tab. The page flow is respected and content is pushed down, and as each control is opened, any expanded controls are collapsed.

1. Analytics Dashboard. Controls with down arrows indicate that options are available.
2. Clicking the date range selector displays calendar or timeline controls.
3. The segment control expands to show granular selection options for filtering your report.
4. Simple inline list of export options.
5. Visit filtering options.


Netflix Mouseover Info

The video details shown on mouseover in Netflix is one of those behaviors I just take for granted now. They've used their quick-loading, shadowed mouseover call outs for years now and they've always felt very useful to me and effortless to deal with. They're always available, and even work in areas you might not expect to see them, like in a recommendation list within a lightbox dialog.

The mouseovers even make up for some things that I feel are design shortcomings, like the lack of a feature to show a gallery of poster images or sort by genre in the instant play queue. I have 225 videos in my instant queue and that list is not the same to me as my DVD queue in terms of how I use it, because I don't always want the top thing in the list, and since I can choose without thinking about order, I want to filter and view more info here. Oh well. The mouseover suffice to some degree. While the Netflix mouseover is really excellent, they could take a lesson from the Apple TV in designing some of their listings/views. Don't even get me started on the painful experience that is the Roku UI.

1. A mouseover showing video details in a module.
2. A mouseover showing video details in the queue.
3. Mouseovers even show up on lightbox layers.


Netflix Quick Add

The video queue on Netflix offers a "Quick Add" functionality at the bottom of the queue that lets users search for a particular title and add it to their queue without having to view the video page. It's a single input with an auto-completion behavior to suggest videos based on what you type. Clicking a title from the suggestion list or hitting return on an exact match adds the video and shows a confirmation.

This is a really efficient utility. The only slight change I would make is in the heading "Looking for a specific title?" which doesn't really hint at the purpose of that input--quickly adding videos to your. Something like "Add a specific title to your queue" might be better. I happened to capture an earlier version of this above in screen 3.

1. Looking up specific titles to quickly add to the queue.
2. Confirmation when video added.
3. An earlier version of this interface.


Netflix Rate for Recommendations

Netflix shows a module to signed in users at the top of their home page asking the user to rate recent returns. The module promises to give 2 recommendations immediately after they've rated. On sites like Flickr, the recommendation engine is perhaps one of the single best incentives for adding ratings. On a lot of sites, ratings give you nothing back. This is a good example to illustrate quickly why you'd want to add a rating, and would be particularly useful to demonstrate the value to new users.

1. Module on home page shows movies you recently returned.
2. After rating the return, you get 2 recommendations back immediately.