Your friends at Viget present Inspire, a Design & Interaction Blog

Now and Later User Experience Design

As a child, I was baffled by my parents' reluctance to feed me candy at mealtime. Candy made me happy. Didn't they value my happiness?

Of course they did, but like most parents, they knew that to make their children truly happy in the long-term, they must forego the occasional, sugary, short-term happiness.

Like parenting, modern user experience design requires a delicate balance of careful short- and long-term considerations.

Interactive WCAG

The Web Content Accessibility Guidelines (WCAG) is an invaluable resource for developing accessible websites, and necessary if those sites need to conform to a specific accessibility level. But for those who are unfamiliar with or only partially familiar with WCAG, it can be an overwhelming and confusing document. Recently I've needed to share parts of the document with several other people and groups, and I didn't have a good way of customizing the content for each audience.

Refreshing Search: Testing Search Box Variations

One of the most interesting research studies I’ve had the chance to work on during my time at Viget was an experiment to optimize the design of a keyword search box. Our team ran this experiment to help inform Viget’s redesign of, a trusted regional news source that pulls in a staggering 100 million pageviews a month.

One of the most heavily used features of the website is its keyword search, so we wanted to make absolutely certain that our redesigned search box didn’t make search harder for users to find and use.

We were also eager to test our design because it was somewhat unconventional: instead of showing a search input field by default, the field had to be revealed with a click. We considered this a clean, stylish solution, but we were curious about what effect it might have on users, many of whom are older folks who might be less receptive to a novel approach.

The hidden-input search element we originally proposed for

Our original proposed redesign of search, with the input box hidden by default.

The experiment was one of several tests we ran for the project, but I find these results particularly interesting for UI designers, both in the way we were able to quantify the costs of a novel UI element and in what we learned about the iconography of keyword search.

Smoothing Responsive Designs with +spread

Building for “breakpoints"

One of the hard parts of building responsive sites is making decisions about the between-states — that is, what a page looks like when it’s not Xpx or Zpx wide, but Ypx. Sometimes you only have two or three design documents about a single component to build off, leaving you with big gaps in which you have to reason about how to pad, size fonts, etc. How do you decide what to do in the middle?

Bridging the gap

On the mobile-size comp, a component is padded at 10px, but the wide-screen one is padded out to an airy 50px — what do you do on tablets? You’d probably keep the 10px up until a “desktop” breakpoint like 1024px, then switch to 50px. Maybe you’d have an in-between value of 30px at some point, but you’d have to do the math on where to put it yourself, and you’d have to repeat that logic anywhere you wanted to match the 10-30-50 ratio.

And you’re still stuck with gaps — window sizes at which you have to pick either/or, and at which the design balance is still subtly thrown off:

In a perfect world, you’d want the padding to just stretch between 10px and 50px based on window width, right? That way the spacing and breathing room on the page is consistent across all device sizes. It might even be what you imagined it would turn out like when you were designing, but unfortunately, CSS just doesn’t work that way….OR DOES IT!?

Embracing the Messiness

Messy chalkboard

Designers by nature want to assert order on the universe. We love websites that are thoughtful and well-organized. Websites where everything just seems to make sense. When admiring others' work, it's often too easy to imagine a design process that is similarly straightforward. A process where the ideas were arrived at logically and effortlessly. How could it not be, given the polish of the finished product?