Reconstructing The Record Editor

04 May 2016 by Tim Campbell

Sometimes making software is like landscaping. As seasons change and time passes, different areas show signs of weathering and damage. Some overgrowth sets in and unexpected foot paths are tread. Certain areas aren’t getting enough water while others get far too much with nothing to show for it. It’s an unyielding ebb and flow of different parts vying for attention, upkeep, and enhancement. At Fulcrum, we battle with this on a daily basis. Our focus is constantly shifting from freshly shipped features to issues caused by unforeseen use cases and an endless list of other variables and gotcha-juggling scenarios. In these past few months, however, we’ve been able to focus our complete attention on pulling every weed we could from one of our Web App’s core components, the Record Editor, and reconstructing it for better usability.

In the Web App, the record editor is the main touch point for manually creating new records and editing existing records. After waiting patiently for us to “landscape” many other areas, the editor finally got its turn and received some sorely needed TLC. Here’s what we did:

The Header & Action Buttons

The purpose of the header is to give the user a sense of where they are in the editor as well as let them perform global actions such as closing the editor, entering edit mode, deleting the record, and so on. In the interest of clarity, the original design included a big bold record title. In practice, however, the string was often truncated due to longer titles like addresses being used. Another issue contributing to the absence of room was the lack of prioritization of the action buttons. Some actions, like entering edit mode or closing the editor, are used nearly every time a user looks at a record. However, precious space was being soaked up by actions that some users wouldn’t ever execute.

Original Editor Header

(Old) Long titles need not apply

While a bit taller, the new header affords users a much clearer hierarchy, making the most useful actions the most prominent. We also added new reference points like the App Name (Park Inventory) and the record status (the orange box) to give user more context than the previous editor allowed. In addition, when drilling into a record the new subheading area houses navigational elements like breadcrumbs so traversing the record becomes much more intuitive. We then moved the more seldom used actions into a dropdown menu so they’re out of the way, but still easily accessible.

Original Editor Header

(New) New header with App name, better in-record navigation

The View / Edit / Preview States

When you’re viewing and editing records all day, everything starts to run together. We wanted to improve the way the record editor provided context for the user depending on what state they were in (editing data vs. simply viewing it). As you can see in the old editor, there isn’t much difference between viewing and editing a record, visually. This can lead to a situation where a user is in edit mode without realizing it which can lead to unintended changes in the data.

Edit States Old

(Old) View & Edit

To provide more context for the user, we added a blue background to the header to indicate that the editor is in its edit state. In pushing this concept a bit further, we also added a completely new state to the record editor: the App Preview. Available in the App Builder, this allows users to see what a record will look like in the editor while they’re still building the app. This preview state is indicated by a yellow background in the header, making it clear that data cannot yet be entered or saved in this view. The new preview state gives users an unprecedented ability to check the actual workflow of their record without having to exit the builder.

Edit States New

(New) View & Edit & Preview

The Map

The map in the record editor is a polarizing feature; typically users either need it every time, or never use it at all. The old editor served both camps but not very well. While users who didn’t need the map were able to scroll past it to get to their content, there was no way to permanently hide or collapse it. Users that did rely on the map faced a similar compromise, seeing their map front and center only to have it disappear as the scrolled their record, forcing them into an undesirable scrolling yo-yo situation. Not pleasant.

We addressed both concerns in the new editor. For map users, we made it a bit larger and fixed its position so the fields are traversable with it still in view. For those who never need the map, we added a new toggle button that remembers your preference. Once you collapse it, there it shall stay until you ask for it again.

New Map Toggle

New map with toggle ability

The Sections

One of the biggest gripes internally about the old record editor was how difficult it was to tell sections (and their content) apart. Without any separation between them, sections and the fields therein all ran together making long forms extremely difficult to parse. It’s hard enough trying to find a needle in a haystack, but what if you couldn’t even tell where the haystacks began and ended? We fixed this in two ways: by adding a subtle but very effective visual separator after each section, and by giving users the ability to collapse entire sections of fields. In a complex form, being able to collapse anything not relevant to what you’re changing can be a life saver.

New Section Collapse

Now you see it, now you dont

The Drill Downs / Repeatable Fields

When you drill into section or repeatable field, the continuity of context is always strained. You’re no longer at the root of the editor and at times it can be easy to lose your way or forget how many levels you’ve traversed. We wanted to improve the “flatness” of the old editor and design something with more perceived context and layering.

Old Record Traversal

(Old) Placing yourself gets more difficult the deeper you go

With the improved header we were able to add essential breadcrumbs to the second level of a record, but the nesting doesn’t stop there. For deeper record traversal, we added a layering effect which effectively illustrates to the user where they are and gives them a visual way to remember their path.

New Record Traversal

(New) More points of context and layering removes some of the cognitive burden

The Media Viewer

Consuming images, video, and audio while in the editor has always been a bit barebones and inconsistent. We displayed the image and provided some meta data but nothing ever seemed as well-placed or useful as it should have been. Not to mention, the image, video, and audio viewers all had slight variations in layout, adding to them feeling disconnected. Enter a fully redesigned media viewer with a much larger (and collapsable, of course) map as well as more comprehensive meta data and download options. Below is an example of the change in the image view, but the new audio and video viewer share the same ecosystem.

Old Image Viewer

(Old) ...at least it works.

New Image Viewer

(New) And it even has thumbnails!

Change Is The Only Constant

Whenever we design and release something, we love it and think it’s great. We thought the old version of the record editor was fantastic when it first rolled off the showroom floor. However - to paraphrase an old adage - no software survives first contact with the end user, and just like that we’re making tweaks.

We really enjoyed evolving this feature and hope the new record editor improves your workflow as much as it has ours.

About the author

Tim is our creative director. He oversees the visual and interactive aspects of our development process.

comments powered by Disqus

Sign Up Today & Start Collecting Data In Just Minutes!

Start Your FREE Trial