This Week's Top 5 UX Improvements

Postified on June 14th, 2019

At this point in the process most of the heavy application-level lifting and architecting is done. This week we've been able to focus on more gritty UX improvements, from big features to small interactions. No detail is too small to be optimized for clarity and simplicity.

Let's take a look at a few of those improvements.

1. Toggle to see field "handles"

Have you ever been in the control panel and wondered what the actual variable name of a given field was? Now all you need to do is click it to find out.

Bonus detail: You'll notice throughout the control panel that (generally) whenever a bit of data is meant for a developer, it'll be shown in a monospaced font.

Toggle handle

2. Global search result content type icons

Context is king. Global search results now have unique icons depending on which type of content the result is (collections, assets, and users).

Bonus detail: We also show an entry's collection and an asset's container for a little extra context.

 Global search result context

3. Save & publish actions contextual clarity

Noticing a pattern? Contextual clarity is one of the corner stones of good UX design.

While revisions are off each entry has just two states (like Statamic v2): published and unpublished. If you're about to save an entry and change that publish status, the primary action button's text reflects the change you're making.

Save button context

When revisions are enabled, the save action is decoupled from the publish action because you have a working copy with revision history that is separate from the published state of the entry. You can't publish until you've saved changes that differ from the published version of your entry.

Bonus detail: You'll also see help text around the publish and save state to avoid any uncertainty between what you're working on and what's live.

Publish button context

4. Element Queries

We use element queries in a number of places throughout the control panel. Instead of traditional CSS breakpoints that depend on the size of the viewport (your browser window size), element queries let you adapt your layouts based on the relative container a given element is inside.

Let's look at the Date/Time fieldtype as an example. It can be placed inside the narrow sidebar and main content area, and like all fields -- the live preview pane. With native media queries it's impossible to know how much space you have to work with, and whether you have enough room to show the optional time field next to the date. Sure, you can sorta get there with flexbox and wrapping, but not as precise as you'd like.

Bonus detail: This same pattern is used to determine if there's enough room to show sidebars, stacks, and other UI elements.

Save button context

In case you're curious, haven't seen element queries before, and don't have the time to click the link and read a bit, here's what one looks like in your CSS.

@element .date-time-container and (max-width: 260px) {
    :self {
        /* The magic goes here */
    }
}

5. More info in the user list

We thought it would be nice if the user listing would show their avatar along with the last time they logged in. We can't imagine you'll disagree.

Bonus detail: Weird Al.

 Global search result context
Jack McDade
Jack McDade, Creator of Statamic
Creator of Statamic

Copyright 2019 ⚔️ Statamic