Caffeine

Evolution is one of the most important and interesting challenges of designing interfaces. As your application matures your user base grows, the number of features increases, and new use cases are discovered. Because of this, it is vital that you continue to revisit your original design decisions often. Otherwise, your simple and straightforward experiences can easily turn in to splintered, confusing processes.

A good interface is only ever as complicated as it needs to be

Recently, we redesigned the Onehub editing interface for this exact reason. When we launched Onehub last year, we started with 5 widgets. Now we have 11 (with more in the pipe). We had already begun to run out of space in our editing pop-ups (modals) when we added recurring events to our Calendar Widget. This change resulted in a modal that was simply too big and too complicated. In order to make the feature work, we had to break our own rules and give Calendar Events a much larger editing space.

Consistency is everything

The instant that we decided to move Calendar Events outside our modal framework, I started working on a new editing interface. Why? Because once you figure out how a process works, any part of it that works differently sticks out. Inconsistency breaks workflow. The interface had lost the consistency it once had and it was important that we get it back as soon as possible.

Making changes work for your existing users

Major interface changes can be difficult on existing users. Adding features is one thing, but you can’t just change everything overnight. Sometimes, abrupt changes can be just as disappointing to existing users as subtracting features. The only way to minimize frustration is with usability testing – so we did a lot of it. With usability tests, we ensured that the new interface worked for both new and existing users while delivering on our design requirements.

Design challenges

• Ensure that every widget can be edited in the same manner
• Ensure that the interface is just as easy for new users as it is for existing users
• Keep the interface flexible to changes in the future
• Add in two highly requested features (comments and tags)
• Add in our own new features (next/previous navigation and edit-in-place)
• Maintain all existing features

The concept

Architecture

A. Navigation

This area provides navigation that allows the user to return to where they were and cycle between items in their widgets.

B. Banner

This area contains the most important information for each item. When glancing at an item, you will spend the majority of your time in this area. This always includes Title and Description along with a piece of primary meta information (e.g. Completed, Location). The banner also contains a breadcrumb trail to keep you abreast of where you are at all times. Last but not least, the banner is host to the action buttons (e.g. Edit and Delete).

The action buttons are at the top of the page, while the submit buttons (E) are at the bottom. This was intentionally done to mimic the following workflow:

• Click in or navigate to the desired item
• Click Edit
• Make any necessary changes from top to bottom
• Click Save

C. Tabs

A row of tabs for showing/hiding additional information without losing the primary information from the banner. By default, each item contains a Details tab containing all of the meta information for that item. Once created, a Comments tab is also added to the view.

This area is flexible horizontally. For example, Files contain a Versions tabs which displays version control information. This will give us the ability to add more information without requiring us to change the interface again.

D. Content

This area contains less important information for each item (e.g. Priority, All Day Event) and additional features (e.g. Comments). When working on an item, you will spend the majority of your time in this area.

E. Submit Buttons

This area is where you finalize your interaction with each item. Depending on what you’re doing, the submit buttons will change. For example, when creating new items you will see a Save and Add Another button.

F. Sidebar

This area contains related information for each item. For every item in Onehub that now means Tags; we have some cool ideas for future additions as well. This area is flexible vertically. For example, Files contain a Preview that shows a thumbnail of what the file looks like.

The end result

Measuring success

Another difficult aspect of interface design is measuring success. If you’ve done a horrible job, people will certainly let you know. If you’ve done an awesome job, you most likely won’t hear about it – users will be off using your new interface. It never hurts to be sure though. So, please play around with the new editing interface. If you’ve got any feedback, please let us know. Leave a comment below or ping us at feedback@onehub.com.