Matching User Emotion in the Buying Experience

A pink bra, shopping and the user experience

If you want me to buy something, you have to match my user emotion at that moment. Meaning, you can’t present something to me, the user, until I’m ready.

I am presented with a bra manufacturer post on Facebook. I need a bra, but refuse to buy underwire. I click on the post and go to the bra website to see if they have non-underwire options.

Instead of being presented bras to browse, I am presented with “Take our Fit Finder™”. No bras to look at. I am forced with “GET STARTED”.

Oh, so you want to look at our bras, do you?  Not until we force you through our interactive fit finder.

Present your bra fitter at the time of checkout.
Still wish I had a new bra.

I anticipate it will force me to get up and go get the tape measure because it’s going to ask me for all kinds of measurements. I don’t want to. I am especially not going to do that if you don’t offer a non-underwire options.  Why can’t I just see the damn merchandise?

Good bye. Easy click backward to continue my perusing of Facebook.

Introduce your Tool at the Right time

Had I been allowed to browse bras, I might have found one I liked. I most likely would have even put it in a shopping cart to hold there while I shopped more. I would have deliberated over color, padding, and the non underwire options for a while, then I would be looking for fit options.

I believe fit options and sizing charts are most useful at the time I am selecting it to put in the shopping cart because it most closely resembles the in-store shopping experience. I select something on style and color first, then I search the rack to see if they have my size before placing it in my cart.

Move Your Fit Finder to the Shopping Cart

So dear manufacturer, I don’t care about your nifty, interactive size fitter until I’m ready, which is at the point of placing it in my cart. Move your interactive tool to the shopping cart, and offer it as a helpful service.

I would love that.

The only interstitial popup I’ve ever liked

interstitial popup

This is the only interstitial popup I’ve ever liked. When visiting a UX company’s website, the contact page presented this:

interstitial popup

Why do I like this one? It makes me feel like I am talking directly to the company, and that they care why I am here. This pop-up is not trying to sell me something. It’s not (yet again) asking me sign up for your stupid email list. It is simply asking a question, and I am most likely to answer.

WP Engine Onboarding

WP Engine Dashboard

I like how WP Engine orientates you to their product, aka onboarding. The help button opens up a sidebar to the right, and if you click on a topic a voice recorded tutorial starts. You can control the playback with buttons on the bottom. Both the sidebar and playback controls stay fixed during page navigation, so she continues to talk while you look around.

The maker of the tutorial is

Finger Wag Usability

computer screen showing a big animated finger wagging

He got a real chuckle out of the finger wagging at him. Love a user interaction that elicits emotions.

He tried to upload multiple files at once, but the application can only process one at a time. As user feedback, the program shows a large, illustrated finger pointing into the screen. Why do we like this? It’s recognizable as a no-no, it’s unexpected, and it’s informational guidance.


Ad Seen in Captcha

form captcha showing ad

I was filling out a form and came across one of those captchas. to get the image verification code, I had to watch an ad first, right in the form.

form captcha showing ad

I Can’t Put My Finger on it

add too close to close button

I see what you did there. The close button on the ad is so small that I can’t get my finger on the X without hitting the ad button immediately to the left. This is bad design on purpose, who do you think you’re fooling? Additionally the ad is covering the content image. Ads suck. #usability

Best Employee Page

The group at Wistia has the best employee page I’ve seen. The rollover effect on the employee image shows the person in different poses. It gives life and character to an otherwise boring page of employee pics. Applause.

Then I wondered what it looked like on the phone, and how it acted since there is no “hover” on a phone.  At first I didn’t think the phone version was working correctly because I expected clicking an image would take me to a link, and it didn’t.  I started tapping all around to accidentally find a link to Twitter. Upon going back to the desktop version for a closer look, I see the images contain no links. You have to click the textural link under the name to get a link to Twitter. This is how the designer got around the “no hover” on phone issue.  The tapping of the image on phone cycles through the different poses of the employee, and a deliberate tap on the textural link activates the link. Cycling of the poses only happens at 100% resolution, so if you zoom in on the phone you lose the effect, nothing happens.

This is a good way for video marketer to make use of video footage, without actually playing a video. No need, just put still shots in the hover effect. Looks like because there are 3 hover shots per employee, so the typical :hover is not being used. I am trying to locate the script they used for this. Because.  I’m geeky like that.


Best pics of employees
Best pics of employees

Wistia Employee
Wistia Employee

WordPress 2016 No Main Navigation

WordPress logo

The new WordPress 2016 theme does not come with the main navigation installed. While we will most likely (first-thing) look into installing the main nav, it makes me stop and evaluate “is this is intentionally left off as a hint of upcoming design trends?” As a designer I like the idea of getting rid of the clunky weight our clients keep adding onto our headers, but at what cost?

Will users become accustom to going straight to the search bar? I don’t mind it personally, but what if someone wanted to see what other content is available internally? The argument to be careful about removing the main nav is documented by nngroup (of course). But there are other arguments for removing it, and it forces us to build websites that are more intuitive, removing the need for it.

“Immediately when we start designing, we are taught to think of the sitemap and how everything is going to connect. Imagine if we spent that time thinking about what the audience wants and how they’re going to use it. ”
– KENDRA GAINES, WebDesignerDepot


Mobile First is Like A Tiny House

Mobile first is like a tiny house

I have been thinking about how to explain the mobile first concept to designers in my industry that obviously do not understand what it is. It bothers me when they don’t want to try, and quote “we will never be a mobile first company”.  It makes me think about different ways I can explain the concept, so that even the stubborn will start to learn.

Have you heard of the “tiny house” fad/movement? People are foregoing the traditional size homes and basically living out of a shed.  The small square footage is maximized to accommodate modern amenities. You have everything you need to live in just a few square feet.

Now, imagine you live in a tiny home. If I were to ask a tiny home dweller “what are your most important possessions?”, I would expect them to reply with something like “toilet paper”, or “toothpaste”.   The home is so small, there is no room for anything non essential, therefore you learn to live with just the bare minimum. Now imagine asking someone in a larger home what their most important possession is.  I would expect them to look around the room, and say something like “large flat screen TV”, or something similar.

So do you think toilet paper is less important to the large home dweller because they didn’t list it? No. I think we can safely bet that toilet paper is just as important to the large home dweller as it is to the small home dweller. Why the difference in answers? Because there is so much room in the larger house, it can be easy to overlook what’s important because there is so much more to evaluate in the larger home.  The toilet paper is lost, or overlooked.

It is imperative to prioritize what things can occupy your shared space in tiny homes. It forces you to make decisions about the worth of something vs. the amount of space it requires. You are deciding the hierarchy of importance.

Once you have lived in a tiny home, you will instinctively know that what is important to you in the tiny house will also be important in the larger house. It doesn’t work too well in reverse, you can’t expect the large home dweller to get the hierarchy correct because they are too preoccupied with the big screen TV. The tiny home guy doesn’t have that distraction.

The tiny home dwellers are synonymous to mobile designs, while the large home dwellers are synonymous to desktop designs. Once you have lived in the smaller space, you will more clearly see the hierarchy of importance because the large distractions are removed. The same principal applies to design. The mobile space needs to be defined with a correct hierarchy defined. This is not to say that once you lived in the tiny home, that you could not upgrade to a larger space (via media queries) and then once we are in the bigger space, you can bring the TV into play.  One must realize, though, that you can’t bring the big screen TV to the tiny home, there is just no space for it. So if there is no space for it in the tiny home, then it becomes far less important an item.

But you wouldn’t know that until you lived in the tiny home FIRST. 🙂


Adding to the UX Drinking Game

I love the UX drinking game, I think it it absolutely hysterical. It is funny, and sad, at the same time because some of these hit a nerve and are so true. Actually, I am learning something from this. I am not alone. These ridiculous absurdities have been experienced elsewhere, by other competent designers. Do I need to learn to accept the fact that I will be faced with this mentality in the workplace? Do I need to fight harder for the user experience? When do I throw in the towel and give up on a company?

Here are a few of my own:

  • If the Design Director is quoted saying “We’re never going to be a mobile first company”, drink at lunch.
  • Someone says “98% of our users are desktop users” on a product has not launched yet, have a drink.

And my most applicable existing quotes on the site:

  • If your team thinks Agile means endless changes and no documentation, finish the bottle
  • If multiple inline scroll panes are considered user friendly, drink a White Russian
  • If the error messages are in uppercase and red, drink

And this one I don’t understand at all:

  • If a design question is answered with “Lets see how others do it,” go visit another bar
    • Not sure I agree with this… isn’t research part of the learning process to craft an excellent user interface? Why wouldn’t we want to learn from other’s mistakes?