Blog

[Pods 2.0 UI] Setup

I spent some time today speaking with @sc0ttkclark about the process of setting up Pods. We discussed the need for the UI to mirror WordPress as close as possible but also recognize that Pods will be doing things that aren’t available in the current WordPress UI (via widgets, interactions, form elements, or otherwise) — that said, we reworked the Pods 2.0 Menu IA and came up with a workflow up for review.

I’m taking a new, more rapid approach to wireframing. The name of the game is to use as much WordPress markup and style as possible. That said, we’re all intimiately familiar with the WordPress admin and our imaginations can fill in the blanks if we’re looking at some quickly built wireframes. The thing to keep in mind here is workflow, as using Pods is the most important part.

Based on the new Pods 2.0 Menu IA, the Setup screen can look like this:

What we’re looking at is a list of existing Pods as well as some data about each, for a quick glance. This screen will mostly be used to add a new Pod or edit an existing Pod. Hovering items reveals edit/delete/etc functionality a la WordPress (not displayed here)

When clicking an edit link for an existing Pod, you’re brought to a separate screen:

Here, the same view UI is used but instead of listing existing Pods, we’re shown existing data columns. This screen will probably be used most often and should cater to rapid interaction as much as possible. That said, adding and editing will be handled via Thickbox:

Since the number of columns is essentially unlimited, we’re going with a sticky Save button that should be extremely prominent, it’ll always be pinned in the upper right corner of the Thickbox. This same interaction will be used for editing existing columns. There are many more options for each column type in Pods 2.0 and as such, the column-type-specific data fields will be shown after choosing the column type. Additionally, the Advanced column options will be hidden when first loaded (on display in the wireframe above)

Reordering columns is usually a one time thing, sometimes two, the point remains that it’s rare. To remove some complexity, we’ll keep column reordering on it’s own screen:

Updating the order will be completed on release, perhaps with some passive, inline notification that the order has been updated.

Last, and certainly not least, the Pod Settings will also be displayed via Thickbox:

The aim here is to keep things streamlined and simple.

I’ve posted this workflow in an effort to get some feedback from other devs. @sc0ttkclark and I spent a bit of time on it this afternoon but it’s about ready for some finalization. We’re trying to get wireframes completed within a week or so, as the timeline is advancing quickly. Thoughts and comments are more than welcome!