Buttons As Actions

One of the UX issues I’ve been struggling with is designing my web apps to make their workflow as clear as possible. Most web-pages will use a combination of buttons, links, icons, and outlines to establish a visual hierarchy of elements. The web apps that I maintain for the County are essentially information portals. They allow you to search for content, see the results of your query, look at information specific to one of the results of your query, and link you out to other information related to that result. The user flow here is Search, Find, Read, Extend. This is the core work flow loop for both Parcel Details and Parcel Search.

This is the old general page of Parcel Details. Inside of the four step workflow this page would be step 3: Read. How does the user move from consuming the information on the page to extending from this information out to other county services? They’d need to use the nav bar at the top or click on one of the two in-text hyperlinks on this page. Any thing that takes you away from this page is an extend action of the page.

Rethinking Hyperlinks

The issue here is that the only visual signals this page uses to flag those links are brackets and the light blue text coloring typical of hyperlinks. Based on the feedback (questions from citizens) we’ve received this was not enough to guide users in the right direction.

How do we make it crystal clear what parts of this page are devoted to the Read step of the loop and what parts of the page are devoted to the Extend step? Buttons as Actions.

Styling links that change the context from one page to another as button is an effective and consistent way to highlight options for the user and set their expectations for what will occur if they click on it.

Here is the current version of this page. We’ve converted the small “(Change Mailing Address)” hyperlink to a button and removed the unnecessary county code link to reduce clutter. The number of users that send us emails asking how to change their tax payer name or address has dropped from a half dozen a month to zero.

Minimizing the Footer

You’ll notice that we are not applying this buttons-as-actions theme to the hyperlink in the page footer. They remain the same as before in an attempt to de-emphasize their importance. If the user is actively engaging with the page footer this means that something has gone wrong. They’re lost, the app is broken, and we need to provide them with a safety railing to bump up against.

If Parcel Details is working as intended the footer is noise. We need to have a safety railing for failure states, but we want to minimize the visual and informational noise on the page. Right now the best way to accomplish this is to leave the footer as a block of small, unassuming, text and hyperlinks.

Menu Carrots?

The other significant change is that we’ve added carrots back into the navbar menu items that expand into drop downs. Internally we’ve gone back and forth on the necessity of these carrots. Minimalism is an important and worth while goal. But we also need to give the users hints about what to expect when the click on a menu item.

As a developer, I’ve found that it’s easy to get distracted from the hurtles and pain-points that a first-time or occasional user faces. The feedback that’s most easy to solicit is our own and we already know the app. The next easiest feedback is that of our internal customers and power users because they’re happy to tell us what they want. Finally we have everyone else, for which we don’t have good methods of collecting feedback from outside of support requests and complaints.

One thing that we can always do to make our apps more approachable is to piggy back on standards. The menu carrot is visual noise, but it’s a UX standard that people know and understand. The way it improves usability is a bigger benefit that the cost of the space it consumes.

This is another example of how buttons-as-action makes it clear that clicking on a Parcel number will extend the user’s understanding of their property and its context.

UX design rules are always changing but defining buttons-as-action is one of the clearest lessons that I’ve learned over the past year of maintaining Parcel Details.