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.

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

Emotional Review of the Pop Up

a mid screen popup

While reading about RankBrain I surfed over to Tim Urban’s website and was presented with this popup, “At least I’m not a mid-screen pop-up”.  My dislike for the mid-screen (and full-screen) pop-up is so strong that I immediately identify with the disclaimer. There is something about this annoying little friend (foe?) that is highly successful in my opinion.

  • The disclaimer understands my emotion towards the popup. It addresses my feelings immediately. I feel validated. I feel like it understands me. I feel it is on my side because it (he? she?) is trying to not be annoying by covering the content I was in the middle of reading.
  • It’s not pretending to be something that it’s not.  It acknowledges that it’s a pop-up. It owns up to it, making the little guy credible.
  • It tells me exactly why it’s here and what it can do for me.  It’s not begging, it’s not demanding, it’s not yelling at me.  It is reassuring me that the email list, if I decide to sign up, will only be sent 2 – 4 times a month.
  • The small accompanying graphic says it all.  Everyone wants to be loved. The little popup is telling you want it wants is the same thing we all want, to be loved. That makes us the same, and on the same side. We understand each other.

I still hate pop-ups. I will not sign up for whatever you are selling just because you rudely put a pop-up in front of me, but this one is a little different. This is as successful a pop-up can be, and if my employment forces (pays) me to do deliver a pop-up, this is my new model.

I believe the little guy. After all, he is on my side. He knows how I feel.

 

AMP Accelerated Mobile Pages

Lightning bolt symbols AMP compliant

Accelerated Mobile Pages is an open source project aimed to make news pages load faster on the web. It dictates how the page resources are loaded, primarily Javascript, because JS can be a resource hog that does not allow the rest of the page to load until it finished loading all it’s JS first. This is called render-blocking JS. It also requires knowing the dimensions of your assets so it can take control of your page layout. In other words, it knows the final dimensions of assets in the page, so it won’t half load the content, allow the user to start reading, and then have content “jump” around because it’s still loading content. This is a particularly painful point around ads, because this is what a slow-loading ad does to the user experience. Additionally, users are turning to “ad blockers” to mitigate the poor user experience. The AMP project is finding a solution that benefits not only the user experience, but a better solution for monetized publishers also. The hope of the project is to have content, and ads, load so fast that utilizing a 3rd party ad blocker will be the slower experience, thus eliminating the need for the blocker.

To load fast, there are certain rules a developer must follow when implementing the website. Most of these rules are centered around loading all JS files async, portion-sizing the CSS down to what is needed at just the page level, concentrate on loading above-the-fold content immediately, and limiting CPU usage.

WordPress is adopting the AMP methods so we might see this baked-into core WordPress in the future. Right now there are a couple of plugins available. I downloaded and tried the AMP plugin on this blog and observed what it is doing.

AMP research
Comparing the website with and without the AMP plugin for WordPress.
  • To see the AMP styling, you have to append “/amp” to the end of your URL.
  • It adds the appropriate js framework needed to make the page AMP compliant.
  • It adds “async” to javascript files so they are not render-blocking.
  • It added it’s own CSS to the head of the page, including @font-face definitions for custom fonts
  • It removed the main navigation and sidebar
  • Images are replaced with amp-img so the SRCSET is baked right into the solution.
  • Speed test shows the AMP page scores an 88 for the speed test, while non AMP page scores 32.

You don’t get to choose which version of the page the user sees, that is handled by the Google Cache System.

Plugins are only able to AMP the POSTS, not pages and not the archives.

The key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be validated.” So I guess this is the advantage AMP has over using just a CDN to deliver speed.

See that Lightning Bolt?

At first I thought this was a sign of AMP compliant pages, but it is instead a symbol of Facebook’s Instant Articles:

AMP in the wild
AMP in the wild: on Facebook

I clicked it to see what it looks like, and it really was “lightning” fast, and this is what the article looked like:

AMP article found in the wild

This article has 3 sponsored ads in it that I scrolled right on by… but the ads were just as fast as the content delivery so as a user, I really didn’t mind them being there because they did not hinder my experience.  This article also has an embedded video that auto played as I scrolled over it.  I wasn’t too thrilled about the sound coming from my phone (since I was at work) but even the video, sound, and ads never slowed down my browsing experience.

Notice the URL for this ends in .html.

 

Title Attribute is Dead?

Jeffrey Zeldman

The once “must have” title attribute on links is no longer relevant for SEO purposes. Even Zeldman says so. I love this article and how it gives a video of how screen readers interpret the title tag.

https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/

But is it really dead? Even the attached article points to the w3c recommendations of DO put ALL the text in the anchor tag, but hide it for the sighted person. We see “read more”, but the screen reader announces “Link: Sandy’s great article on links. Read More”.

Wow, everything I have been taught about hiding text is that it is bad. It has always been bad. Until now.  In this case it is now recommended.  I get it. I will always support techniques for more digestible content especially for the disabled.

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?

http://www.uxdrinkinggame.com/

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?