guidelines – Vlad Malik

February 21, 2019February 28, 2019

Designing for Trial and Error

Most things in life get done through trial and error, and digital products need to support that sort of fuzziness.

What scares people about technology is that it’s precise and uncompromising. A bank machine asks you for THE number — you can’t type anything else and nothing happens until you do. When you turn a dial on a washing machine, it does exactly and only what you choose. At the other extreme, automated systems take all control away from us.

The beauty of machines is that machines don’t lie. They just do what they are programmed to do. But that’s not how people interact, and that’s what makes machines hard to interact with. Sometimes we need to be guided even as we remain in control.

Many real-life decisions follow a similar pattern:

Julie tries decorating her apartment. She chooses some colors and pieces. She then hires a Designer to pull it all together . The Designer generates potential floor plans and finds photo inspiration. Julie provides feedback: more like this, less like that. She rejects or accepts ideas until the picture comes together.

Many products fail to find a place in our lives, because they try to be too simple, too smart. Perfect anticipation of user’s intent will likely never happen. Even my wife with her human brain and a decade of experience can’t always predict what I will like. So digital products should make educated guesses, but they shouldn’t expect to be right. Instead, technology should be optimized for making suggestions, making corrections, and listening for feedback.

Here are some patterns I’ve been paying attention to lately:

User Input Optimization

Basic ways to integrate lightweight guides into our workflow are found in features like:

“snap“ in drawing software gently shifts objects so they lie on a grid or align with guides or other objects; “auto-smoothing” makes lines straighter or curves smoother,
“quantization” in music sequencing software automatically aligns notes precisely to a rhythm (or conversely “swing” humanizes rhythms so they sound more natural); “pitch correction” corrects out of pitch singing even in real time; “compressors” or “limiters” remove outliers to maintain a consistent loudness

In these cases, software smooths the rough edges of the user’s input through very light automation, which can be enabled or disabled easily.

Undo (Your Best Friend)

Undo is a powerful feature, which allows users to generate randomized content manually. Randomness is a key part of my creative process.

A few years ago, I created several comic strips for the Suicide Prevention program at the City of Toronto. Although I know nothing about drawing human faces, I was able to create characters real enough to convey emotion. Here is Ida, one of the fictional people at risk, opening her door cautiously:

Ida, a character I created using trial and error in Illustrator.

Ida and the rest were created purely through trial and error. I drew randomized shapes and hit undo a lot, until I assembled a realistic face.

Multiple Takes (Undo’s Big Brother)

The opposite feature is the ability to generate lots of content quickly to be sifted through later. For example, I rely on my ability to take hundreds of shots on my camera, to increase the chance that more will be in focus and that some may even contain pleasant surprises I can extract later in Photoshop.

Multiple Presets

“Smart default” is a great way make an interface easier to use, but why does it have to be just one default? When you open visual effect filters or audio effect plugins, each filter has a default setting. Often there is just the default, and sometimes it’s not so great. A better case is when multiple presets are offered in a pull-down, so I can flip through to see what the filter is capable of. But an even better feature would be to offer an intelligently random set of presets.

Some products make users do work, for example, to categorize their content like emails or photos… It is common for software to start with a suggested categorization and force it on the user — remember when Gmail in 2013 rolled out an automatic and hugely unpopular categorization of email into Social, Primary, etc. Is there a way to quickly generate multiple suggestions based on the user’s own activity and let the user choose?

Randomized Content Generation

Users of complex digital products can’t always express their full potential, because their technical skills are limited. I already showed how I use undo and multiple takes to overcome my limitations.

The key insight for me is that when users hit the limit of what they can create intentionally, they are still able to recognize if shown some options. Besides, people enjoy surprising themselves. They don’t always want predictable outcomes.

The Nord Lead 4 synthesizer has a Mutator function, which takes a seed sound and changes it in slight or major ways. I’ve come to depend on this feature in my creative process. It works on demand — meaning it’s easy to access, so I can easily trigger it manually.

Mutator feature on the Nord Lead 4 synthesizer

There 3 types of randomization and 5 levels of randomization strength. I can hear endless variations on a single sound (similar to the many-takes pattern), evolve a sound gradually, or create a completely random sound.

Here is a sample of gradual mutation followed by a big mutation at the end:

What makes the Mutator effective for me is that the Nord Lead

chooses optimal parameters to randomize (bounded randomness), so most generated sounds are viable,
allows fluid change from manual editing to mutation — I can generate a very random sound, then tweak an aspect I don’t like manually, then randomize slightly

To me it feels just like asking the device for suggestions. It’s not intrusive.

In Closing

I would like to see more light automation and more explicit support for trial-and-error in software.

In the future, I can imagine my sketching app recognize that I am trying to draw a person. The app will automatically fix and elaborate the sketch, using my own line style. It will even be able to ask me, “Hey, how about this?” My writing app will offer alternative ways to arrange my content and offer better headlines to choose from.

That said, I have two concerns:

Products that try to be too smart often fail to listen to feedback. Products should have humility as a feature. How do we create digital collaborators and partners rather than intrusive automatons? Past attempts to do this failed miserably — remember Clipy from MS Office? Many people were frustrated with the Nest thermostat. And so on.
Are there good working patterns for a digital product to offer content and ask for feedback without obstructing the user’s workflow? Most cases of such interaction today are intrusive and built on selling the user something, not on truly being helpful. How do we avoid unwanted help?

Let me know your thoughts and please share examples.

Update: Check out the workflow when working with AI to create music https://www.theverge.com/2018/8/31/17777008/artificial-intelligence-taryn-southern-amper-music

February 17, 2019April 4, 2019

Compact Mobile Navigation Patterns

Problem: Running Out of Width

What if all your navigation items don’t fit onto one line on mobile? In the screenshot below, if Habanero opens another office, it won’t fit:

Pattern 1: Horizontal Swipe

You can let the choices go off-canvas. You’ll find this in use on the web and in native apps.

Make sure to hint at the concealed content. Adjust spacing to ensure the last item is cut off:

Google adds a fade effect as an added cue, which also makes the cut off item less awkward:

Strymon adds fade effect AND a small arrow for clarity. Moreover, they turned the links into buttons, which makes it easier to see they are cut off (not a video):

This pattern isn’t useful just on mobile. LinkedIn uses this pattern in their Create Post pop-up, where width is restricted and the concealed tags are low priority:

Samsung adds motion as an affordance. In the video below, notice that it’s important to auto-pan the selected item into view after a page redirect:

This diversity and number of cues highlights the main disadvantage of this pattern: discoverability. A user may not recognize a swipeable menu and may miss out on the concealed choices.

Pattern 2: Hide Low Priority Items

A common pattern is to hide complex navigation behind a hamburger icon or icon + label. You should avoid hiding important choices if possible. It may be appropriate if the menu is redundant and the high priority options are prominent in the body of the page.

Try a hybrid approach to achieve a balance between discoverability and layout constraints.

CASE STUDY: Interaction Design Foundation Home Page
IDF decided to hide all its links, including “UX Courses”. The courses offered are listed in large cards way down the page. So at first blush, it’s not obvious what courses they offer, although it’s the primary interest of visitors.

Here’s how the page looks now:

SOLUTION 1: Move Courses Higher
Here we leave navigation unchanged but move the relevant content above the fold:

SOLUTION 2: Expose Top Priority Menu Item
Here we leave the page unchanged but surface the UX Courses as a button:

Another hybrid example
Vivobarefoot exposes the high-level filters but conceals more precise filters behind an icon. This is better than hiding all filters, but the “filter” row is empty, so they should use available space to expose 1 or 2 mostly frequently used
precise filters:

Pattern 3: Simplify and Fit

You can save some space by using icons without labels, but you should avoid pure icons if possible. When you choose this approach, be pragmatic. Certain icons like Home are safe, while others are less recognizable. I use YouTube every day, but I don’t know what the flame icon represents:

Simon Cowell’s gesture symbolizes the idea that if a user doesn’t know what something means, it’s as if it’s not there.

You can fit links by grouping them under pulldowns:

Another approach is to shorten text labels on mobile. Here is a desktop nav I did for a client:

On mobile, I kept just the key words:

Here’s how the code for this looks: <a>Promote <span class=”mobile-hide”>Your Listing</span></a>. A media query hides .mobile-hide class on narrow screens. Note that assistive technologies may still be able to read the full label depending on how you hide it (e.g., if you make it 0 width and height).

Sometimes the links are just too long and won’t fit. In that case, you can let them overflow:

On that note, let’s talk about my preferred approach.

Pattern 4: Let It Overflow (Counter-Pattern)

The approach I generally prefer is to not hide anything. As you can see in the previous example, I let the links overflow on mobile. I want them all visible at a glance as an overview.

If you visit my site on mobile, you’ll notice my sitemap is fully exposed right at the top to orient visitors to what I’m about:

On the inner pages, I’ve removed low priority items, but I still let items overflow onto a second row:

This works for a limited number of links, 3 rows at most. I do the same thing for inline tabs:

When I worked on GoodUI.org, we usually exposed links in the body and let users scroll through them normally. 100% discoverable:

Sometimes you have tabs that are not links but switch up some text in-page. If the tabs take up a lot of height, the user may not be aware that the text below has changed. In those cases, checking if text is out of view and auto-scrolling to it may be an option.

Wrapping Up: Best Practices

Keep choices exposed whenever possible to ensure disoverability
Try simplifying to fit the choices on one line by using icons carefully, simplifying text labels, or grouping (simplify without sacrificing function and clarity)
If you rely on horizontal swipe, use fading, cut-off text / buttons, and motion to increase discoverability
If you decide to hide choices, use available space to keep high priority choices exposed in the nav area or the page body
Don’t be afraid to give navigation a large treatment if it makes sense

Do you need a UX audit of your mobile app or site? Send me a link, and I’ll check it out.

October 6, 2017February 28, 2019

Guidelines for instant search filters

Vivareal.com.br recently ran a test, where they removed the Apply Filter button and instead updated the search results instantly (screenshot from goodui.org/evidence):

The results are weak but suggest a simple filter behavior might improve a deep metric like Leads (form submits). Given that many prominent sites are doing it, it gives the rest something to try. It also raises questions about what is the best implementation for a given site.

Progress Indicator Is Mandatory

On other sites, like Reverb.com, the transition is smooth. The search results go grey, then they populate in-place:

If search results take more than 200ms to update, use a spinner and/or grey out results, or use another progress indicator (see Jeff Johnson, 2010 for more on human timing requirements). Beyond that, the search filter won’t be perceived as instant and users will be off-put.

Autotrader.ca doesn’t show results instantly. To avoid confusion, they grey out the results and shows a green alert to confirm that user’s filter changes have not yet applied:

Page Refresh Or Not?

On many big sites like eBay and Amazon, filters behave as links. There is a delay and a full page refresh. Here’s eBay:

Some problems with this:

The redirect always takes too long. And after a page refresh, I find I need a second to refocus and figure out what happened.
I usually don’t find it obvious how to undo a filter or go back in that case, because the UI has changed. I’m probably not the only one.
Change Blindness could obscure some important visual change (e.g., people may not notice that some other categories have been updated).

A page refresh may be necessary if there’s a long list of filters that goes past the fold. If you update listings immediately in that case, the top results could be out of sight, at the top. Many sites also update related categories and sub-filters based on the filter chosen, so essentially the whole page does have to change.

I would be very interested to see an alternative pattern to this that is less jarring, faster, and allows easy backtracking. For instance, an animated scroll back to the top may be a better option than a full page refresh in some cases.

Submit For Inputs Or Update As You Type

In the case of Reverb, notice there is a small submit button for the text inputs. All the other fields are instant, but you submit an input field manually when you’re done typing:

In contrast, on sites like Netflix and platforms like Apple TV, filter-as-you-type is heavily used and is very effective:

My recommendation is to use this only if you serve results FAST and if the search terms are bounded. For example, Netflix is a repository of movies and there are only so many movies that start with “Fast and”. So it’s a good solution for them. Likewise, on a stock site, showing the most common stocks might work, because stock symbols are a limited set.

Autocomplete

If filter-as-you-type is not feasible, consider using Autocomplete on the input fields. When using Autocomplete, you can delay showing results until enough characters are typed. And when you show matches, it’s text-only and right below, so it’s not distracting. Moreover, web users are all familiar with this pattern.

Reverb uses Autocomplete in its main search input on the home page, but not on the Keywords filter.

Do Not Freeze

When a search filter is clicked, it should not block the whole app. That is, a user could apply more filters while the previous ones are still fetching data. Similarly, removing a filter should apply opportunistically. For example, when I click an enabled checkbox filter, it should immediately show as “off”, even while the data is still being fetched.

Cache Results

If data sets take a long time to load, we should cache the results. That way when people undo a filter, we can go back to the previous view instantly. It may also be a good idea to keep the original results until new ones are ready. That way, if a user accidentally clicks a filter and then undoes it, you can just cancel the new lookup and show the original results.

Best For Simpler Searches

If a user is expected to enter multiple filters, then there is no point submitting after every search. A manual submit is best in this case. This is also true when there are many filters. For example, your basic search could be instant, but if the user pulls down the massive set of Advanced filters, then a submit button would be needed.

Also if the data set takes a long time to filter (because it’s vast or complex), a manual submit may be better. For example, the search filter for the ChemTrac municipal chemical data repository has an Apply button which filters a very busy map:

Estimate Search Time

It’s a good idea to log search times to see if it’s taking too long. If searches take more than 1 sec on average, then you could show the ETA using a progress indicator or countdown, rather than just a generic spinner. For example, the map for ChemTrac can take a few seconds to populate. Here’s what it might look like with an ETA:

What is your experience with Instant Filters?

Share your thoughts and additional criteria.

September 16, 2017February 28, 2019

Patterns for optimizing checkouts: flow

When a visitor knows what to expect and completes a process smoothly, I call this good “flow”. This post shows some options for how a checkout can be organized and presented to anticipate questions like: Does everything look right with my order? How long will this take? Is it going to be complicated? What are my options?)

Account Creation

Allow users to checkout as guests without side-stepping into an account creation flow:

Better yet, conceal account creation. For example, ask customers if they want to save their information at the bottom of the form (or on the Confirmation page after the order is completed):

For existing customers, you can provide a link to login or a small sign-in form on the side. If a user chooses not to login, you might check if their email is already in the system and offer to retrieve their last used info:

If someone forgot their password, you can tell them to continue as a guest to avoid the delay of recovering their password:

Express Checkouts

Give existing customer an express checkout option. On different sites, it may be called “express checkout” or “1-click purchase”:

Another type of express checkout is when your email recipient clicks a unique email link, so when they land on the page, they get the option of using same billing and shipping details. A Complete Money Back Guarantee helps ease doubts about an “express” checkout, since the customer sometimes doesn’t even get to see their last used information. If you offer 1-click purchases, include a Cancel/Undo option right on the Confirmation page. I’ve used a 1-step checkout before, not realizing it would literally put in the order without any confirmation.

Checkout Tunnels (Enclosed Checkouts)

A checkout that keeps normal navigation and sidebars creates a more natural transition. It tells customers “Check out now if you want, or keep looking around for other products”.

In contrast, a checkout tunnel removes all distractions. It tells customers “You’ve finished browsing. Time for payment”. Test the impact on your total order value, time to purchase, as well as completion rate. Keep consistent branding, and keep some common elements as visual anchors (e.g., remove the navigation links but preserve the area, so content areas don’t jump too much after the page transition).

One hybrid approach is opening the checkout in a modal with a faded background. The fading shifts attention away from background elements. At the same time, it maintains a strong connection to the product, since the product page remains in the background. One way to preserve that on a separate checkout is to include the image of the product being purchased.

Form Layout

The goal is to make the form look easy to fill.

Direct flow of attention in one direction, top to bottom. Avoid columns. That said, you can group short and closely related fields, especially if it’s expected (e.g., credit card dd/mm/yy expiry fields should appear together):

Give fields an appropriate maximum width. A narrow form will look simpler, because it appears to require less typing in each field:

Keep labels above fields to make the field-label unit easier to process. Left-aligned labels have advantages – they shorten the form and are easier to scan (see Top, Right or Left Aligned Form labels):

Avoid placeholder text and inner labels, because it creates confusion about which fields are completed and which are not. Inner labels may be ok on very short forms (2-3 fields), but make sure the label remains visible once the user starts typing. I like the pattern that moves the label over to the border area rather than removes it.

Stepped Progress

To make the form look like less work, chunk it up. You can have a long form with numbered sections separated with spaces or lines. Alternatively, you can use the “accordion” pattern to show one section at a time, while other sections are collapsed. Some checkouts span separate pages, such as Personal Info > Shipping > Payment (see examples with test data on GoodUI Evidence):

If you use a single long form, create distinct, intuitive sections (like Shipping Address, Payment), which you can also number. Test for best field to start with: Is it the email? Is it shipping preference? What is low friction? What is high engagement? What is high commitment?

If you use a multi-page checkout, use a breadcrumb or other progress indicator. For your “Next” buttons, use a label that sets an expectation, such as “Next: Payment”.

In your analytics, measure drop-offs at each step and engagement with key fields, so you can compare effectiveness of each layout (e.g., how many people start filling credit card).

Payment Alternatives

Choose a transaction processor with a high success rate. In addition to your default processor, you can offer an alternative gateway, such as PayPal. Conversely, see if removing the choice increases revenue:

A 3rd party checkouts usually takes the user away from your site and provides an experience you can’t track and have no control over, but it may increases revenue.

You can also use a fallback processor when a transaction is declined. If automating that is not possible, you can show a more informative Declined message with a link to the alternative, like PayPal.

Order Review

If you have a review step, try removing it, as it’s likely unnecessary. However, if you have a long checkout spanning several screens, it may be reassuring to see a summary before committing to the order. See what works.

In the next post, I plan to look at the Fields aspect of a checkout, which tells the user what data to provide and in what format. If you’re interested in reading that, please leave a comment so I know you’re interested.

Are there other patterns and aspects of a checkout I have not covered?