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.

Earl’s Nascar Experience

Ravens Cliffs Day Hike

Gregor, CeZar, and I took a daytrip to Ravens Cliffs, Georgia. There was a really cool little part of the stream where there were many families of stacked rocks. This is my landscape lens,  16-35mm f/2.8L ll USM Zoom Lens.

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.

Checking on DNS

LeafDNS

Recently I had to check on a DNS problem at work, and the support person said “the DNS isn’t even pointed at us (the hosting)”.  I asked him how he could see that, and the response I received was:

Hey Sandy,

I rely on a Chrome extension that tells me what the IP address is for the particular page I’m on. Everybody has their own way of digging into this.

You can also use a tool like http://leafdns.com/ to get a view of the DNS records for a given parent domain.

Cheers!

I checked the leafdns website and I could see the nameserver error and the IP’s pointed at the domain in question (of course not the correct ones).  Filing this here for the next time I need to diagnose / troubleshoot DNS problems.

LeafDNS

Case Study of Schema Proper Markup

schema example

While checking the NAP (Name Address Phone) details on my clients location in Google Maps, I saw a clear case study for implementing Schema data with proper markup code. No other work was done for the local business on Google maps, but we can clearly see a link to it’s menu. When this website was published some years ago, I implemented the markup on just the menu items to denote them as “menu”.  This markup is used to better index information for findability purposes.  Because every item on the menu page is designated as “menu”, Google knows that this is the menu page for this establishment, and has conveniently added a link to the menu page. This was done organically, meaning we didn’t directly tell Google to put that link there, but Google put that link there on it’s own.

schema example

Affix a class on scroll

Code Snippet

Bootstrap’s data-spy functionality was working, but then it started getting hung-up and not loading.  This site had the possibility of caching from 3 different sources (Bootstrap CDN, hosting caching, and Cloudflare CDN) and I think it was not allowing resources to load correctly.  I eliminated the data-spy option, and went straight to executing with just JavaScript, which seemed to eliminate the erratic behavior.

//caches a jQuery object containing the header element
var bumperredcon = $(".noBumper");
//the data-spy functionality for bootstrap stopped working, prob conflict with caching. Disable dataspy, rely only on this JS to add/remove the .affix class.
var bumperwhitepart = $(".noaffix");
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 100) {
bumperredcon.removeClass('noBumper').addClass("navBumper");
bumperwhitepart.removeClass('noaffix').addClass("affix");
} else {
bumperredcon.removeClass("navBumper").addClass('noBumper');
bumperwhitepart.removeClass("affix").addClass('noaffix');
}
});

The bumperredcon and bumperwhitepart are just some variables I have to declare so the script can continue to look for the actual named classes to remove (and then add). So unlike CSS or other coding techniques, it’s not actually looking for #bumperredcon nor #bumperwhitepart, those do not exist in my DOM.  It’s like I had to create a “car” and that car looks around the DOM for the specified classes it is supposed to add and remove.  Additionally, I had to add “noaffix” as the default class so the car had something to look for to get to replacing.

This was a bit of a hard concept for me to understand.

Improving Google PageSpeed in WordPress

Google PageSpeed 100

I set out to improve my Google PageSpeed score to 100. Through many trial & errors, I finally dumped my current theme and used just the default 2016 WordPress theme. Technically I should create a child theme if I was going to put it into production, but I just needed some insight so I ripped into the parent theme.

The end results for making 2016 theme score 100 is:

  1. Remove the external stylesheet style.css, minify it, and place it in the head.
  2. Remove references to Genericons and specialty fonts out of the functions.php file
  3. Minify the functions.js file
  4. Add this to functions.php to move the jquery scripts to the footer:
add_action('wp_enqueue_scripts', 'rudr_move_jquery_to_footer');  
 
function rudr_move_jquery_to_footer() {  
 	// unregister the jQuery at first
        wp_deregister_script('jquery');  
 
        // register to footer (the last function argument should be true)
        wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);  
 
        wp_enqueue_script('jquery');  
}

This last step got me past the dreaded “remove render-blocking js”.

Practicality?

While this theme is now technically scoring 100, getting a site ready for production will be a little harder. As plugins are added and dependencies appear, the score will decline, but at least I now have a basis to start from (start a new theme) and can work on the score each step of the way.

Bookmark: Function found here:

https://rudrastyh.com/wordpress/render-blocking-javascript-css.html

 

Google PageSpeed 100