Shopify Expert Insights

E-Com Advice from our experienced in-house team

Sometimes usability doesn't have to be complicated. By recognizing convention, we can build consistent and easy to use interfaces.

In every state, in every city, at every intersection across America, stop lights are red. Red means stop. But what if a city planner thought, "Hey, red is boring and I think it's hard to see. Everyone does red. Our city is new, and different, and exciting. Let's do a different color. Let's go with purple." The results are obvious. People wouldn't know what the purple light meant. The city planner might then say, "Ah, we just need to label it STOP to teach them." Now we've moved from ambiguity to cognitive dissonance. Drivers know it's a signal that says STOP, and they'd probably STOP, but they'd have to think about why its not red because they've been trained by a thousand other stop lights that red means stop and stop is red.

Consistency and convention are important elements of design. We can build on convention so that new visitors to a website can intuit how to use it and where to find what they're looking for. We can reinforce convention through consistency. By designing content templates instead of individual pages, we'll keep elements and layouts of a website similar, so that our returning visitors will recognize new content but it'll still feel familiar. Familiarity makes for happy customers.

In his blog, Eric Davis recently wrote, “Many years back I heard from somewhere that you should learn one layer above and below where you do most of your work. This was specifically for programming and implied your programming stack.”

I think the same rule can be applied to designers. For some designers, Photoshop is the primary layer of their work. But what's below it? For a web designer, HTML and CSS are below it. To be a better designer, I learned HTML and CSS. Above Photoshop is the user. Now that's a complicated layer. To understand the user, we need to study usability, accessibility, and even human psychology.

A designer that doesn't understand the layers above and below Photoshop doesn't want to be a designer, they want to be an artist. A designer who knows their stack, makes informed design choices from the start that result in sites that are go beyond aesthetics, they're functional to meet demanding goals.

OS X 10.9 Mavericks' energy-saving feature may be delaying your uploads.

After updating to OS X 10.9 Mavericks, we noticed that when saving in TextMate to a remote server with Transmit, the upload would be delayed by several seconds. This is a side effect of App Nap, a new feature suite of energy-saving policies applied by default upon applications.

Fortunately, there's an easy fix. From Finder, Get Info on Transmit.app. Check "Prevent App Nap". You're done!

What if you wanted to have greyscale images on a site that turn to color when the user hovers or taps?

Rather than load two separate images, we can apply a grayscale effect to a single color image using CSS.

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */    
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray; /* IE 6-9 */
}

Then, to disable it on hover...

img:hover {
   -webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   filter: none;
}

It's even cross-browser compatible down to IE6.

Hosting provider Radware compared the performance of top retail websites. As web pages continue to slow down, user demands increase. 57% of users abandon pages that take longer than 3 seconds to load, and are measurably less likely to convert from browsing to buying.


Source: Radware

We love fast things. Fast cars, fast food, and especially fast websites. That's why we put together the Website Performance Checklist. It's 23 tips, tweaks, and best practices to improve the performance of any website.