In user interface design, addition is easy. Subtraction is difficult, if not downright impossible. As we work to improve the creative publishing power of Koken we're also keeping a watchful eye on complexity, redundancy, and targeting areas on the front and back end that can be combined or simplified. Here's a recent example of this practice at work.

The "Add links" sheet in Site is where publishers toggle on/off content in their site navigation. For example, a link to a single album, all their albums, etc. Overall we think it's a simple, effective way to build a site navigation.

But then things got...well, complicated. We asked ourselves, what if a publisher wanted more than one page of albums? For example, a page displaying all albums assigned a particular category? And another displaying featured albums? How could they create those pages and add links to each?

The solution we originally came up with was to offload the creation of those page links to a different interface. A button labeled "Add link to new section" was added to the bottom of "Add links", as shown below.

Clicking that button closed "Add links" and spawned a new, similar-looking sheet containing the templates new pages could be created from.

Did we solve the problem? Yes. Was it executed well? No.

For one, it introduced the phrase "section" into the interface language. What exactly does "section" mean? In terms of functionality it meant to add a new template, but on face-value it could be interpreted to mean a new area of the site, or who knows what else. So we knew that had to go.

Second, by displaying a secondary sheet to add those pages we implied (visually) that its templates were different from the templates on the "Add links" sheet, when in reality they were not. They were the same.

So we took a step back and looked at this from a different angle. How could we eliminate the "section" button and sheet without losing the functionality?

Our solution, new in 0.9.3, is simple. First, we killed the "section" language. Second, we grouped all templates -- both standard and custom -- under a single "Templates" header. Third, and most important of all, we allowed for additional page links to be created by adding a plus button alongside each template's on/off toggle.

Net result? A single "Add links" sheet and template list where a publisher can toggle on/off what they want and create additional copies of each template from the same interface. This eliminated the section button, sheet, and visual separation of templates for a more unified user experience.

Expect to see more case studies like this down the road as we continue to poke holes in our work and improve.

Categories: Interface