Modern Image Loading Best Practices (Via StackExchange.com)

Why answer StackExchange questions?

I’m a firm believer that you need to do something each day to build your skill set. Like so many other technology professionals, one of my favorite proving grounds is StackExchange.com.  I’ve long used the site to hone my front end development skills, but in the past year or so I’ve spent some time becoming a more active user on the UX Stack Exchange community.

These days, I try to drop by and answer a question there every day.  I do this for a few reasons.  Most importantly, answering questions allows me to tackle practical UX problems on a daily basis– problems that I am likely to encounter in the real world at some point in time.  It’s also a great way to meet other UXers, to build the community’s overall skills, and correct errors in assumptions or logic on my end.

Today a good question popped up, and I took a stab at answering it.

Spinner vs Blurry for image loading in 2017?

Q: My client is a photographer, his website contains 3 types of images:

1)Homepage Full screen background gallery images

2)Gallery slider images

3)Blog posts with images

I can’t decide which option to choose for each one.

When it comes to enjoying the experience of watching photos, is it ok to use the spinner?

Or should I blur them while they are loading?

A: Due to its perception of fast load speed and ability to give users content to focus on while waiting, use the ‘blurry loading’ technique on pages with multiple large images.

Much has been written about the need to load page content quickly, with some studies showing that even an extra half second delay can lead to a 20% increase in page abandonment.

The purpose of any loading progress indicator, whether a simple spinner or a more complex system, is to give feedback that the page is, in fact, loading, thus reducing the user’s perception of time passed and giving them a reason to wait. For this reason, however, progress indicators have come to have a negative connotation as users correlate their appearance with a lack of overall site speed.

Conversely, the blurry image approach is meant to give the impression of speed in loading without actually increasing page load time. Especially on pages with multiple large images, this approach works because it gives users content to focus on while waiting for other content to load. It provides faux speed to the user by giving the impression of faster loading without necessarily delivering extra speed.

It’s worth noting that there are several different implementations of the blurry image approach, each with its own load time and usage considerations.

Pectoralis Major’s points on the utility of lazy loading and the necessity of using a consistent approach across pages are well-founded, and should be adhered to if at all possible.

Kids’ UX: Why Childhood Experience Design is a Growing Art

Most of what we know about the psychology of HCI (human-computer interaction) and human learning principles is based around studies conducted on college students.

This is one of the primary complaints about the study of psychology in general. We have mountains of data pertaining to 18-25-year olds. Much of what’s been studied has varying applications to either the psychology of older adults or children. And very little about kids’ UX has been studied.

SesameStreet.com: While many websites can ignore Kids' UX, some websites must rely on it.
While many websites can ignore kids’ UX, some websites must rely on it.

As such, there is an opportunity for emerging specialists in the fields of either adult or childhood learning UX.  It’s a great skill to build, as we should all spend some time every day sharpening our UX tools.

To help us out, the Nielsen-Norman group completed a couple of interesting studies into children’s usability.  NNGroup.com produced 170 recommendations for childhood usability.  Additionally, they were able to make some general statements about how childhood usability differs from adult usability:

A matrix of the differences and similarities of adult vs. Kids' UX, taken from nngroup.com.
A matrix of the differences and similarities of adult vs. Kids’ UX, taken from nngroup.com.

Some of the more interesting findings:

  • Kids are generally much more wary of giving away personal information online, whereas adults are “recklessly willing to give out personal info.”
  • Multiple/redundant navigation is more confusing for children than it is for adults.
  • Kids often do not use the back button, whereas it’s an absolutely necessity for adults.
  • Real-life metaphors are much better digested by children than by adults.

If you’re interested in reading the full report, you can purchase a license to the report for $188.

A few additional resources:


Note that all screenshots used in this post are claimed as “Fair Use” for educational purposes.  To use them on your site in a commercial perspective, please be sure to contact their respective owners.

This post was driven by a discussion in the UXMastery.com community

Featured Article: Native Apps are Doomed

By Eric Elliott for Medium.com

From now on, I won’t be building any more native apps. All my apps going forward will be progressive web apps. Progressive web apps are web applications which are designed to work even more seamlessly on mobile devices than native mobile apps.

What do I mean by “more seamlessly?” I mean that most web traffic comes from mobile devices, and that users install between 0–3 new apps per month, on average. That means that people aren’t spending a lot of time looking for new apps to try out in the app store, but they are spending lots of time on the web, where they might discover and use your app.

Progressive web applications start out just like any other web app, but when a user returns to the app and demonstrates through usage that they’re interested in using the app more regularly, browsers will invite the user to install the app to their home screens. PWA’s can also benefit from push notifications, like native apps.

Read the full article at Medium.com

When Worlds Collide: My Cup of Tea (of a Kind)

It’s not often that my love of good food and drink intersects with engaging and fun user experience and interfaces.  An exception to this rule is the relatively-new (at least to the Denver area) Tea of a Kind, which is a tea unlike any other I’ve yet experienced.

When you find Tea of a Kind (hereafter abbreviated as “ToaK” because I’m just that lazy) on store shelves, it looks something like an eco-friendly, bottle of purified water.  This is hardly surprising, as, at this point in its life, that’s all it really is.

But do you see notice the weird looking cap?  It’s the secret to ToaK’s success.

This weird little gizmo is called, fittingly, a Gizmo.
This weird little gizmo is called, fittingly, a Gizmo.

In a moment, this little cap, which ToaK has termed a “Gizmo,” transforms the contents of the fresh little bottle of water into even more refreshing tea.

If you can’t make out Marty McFly’s jawline, it’s only because it’s on the floor.

Seriously, how cool is that?

What’s more, not only does this little Gizmo provide the single best physical UX element of any drink I’ve yet encountered, ToaK maintains that it “prevents degradation of key ingredients” such as vitamins, antioxidants, and other key functional ingredients.

Now, let’s be frank for a moment.  Is ToaK any better tasting than other tea brands out there?  I’ve sampled the unsweetened black and peach ginger varieties and I’ve come to the conclusion of “not particularly.”  ToaK may be marginally more fresh, but compared to its competitors its flavor is average.

The reason I pick one of these up every. damn. time. I’m at the one convenience store in the Denver area I’ve been able to find them is because of just how cool the user experience is.  I don’t care that it’s supposedly fresher, or that the bottle looks cool, or even that it’s slightly more expensive that a majority of its competitors.  I’ll buy it just to show it off the fantastic experience of watching tea brewed instantaneously before my eyes.

Kudos, Tea of a Kind.  Until someone else comes up with something similar and more delicious, you’ve made a loyal customer (and fan) out of me.

 

Stepping Up Your Game

I have always been a Boy Scout at heart (and, since the age of 18, an Eagle Scout in real life).  The motto of “Be Prepared” has always spoken to me.  In my day-to-day life, being prepared has been key to my success, be it church league softball, making it through the airport quickly, or advancing my UX career.

Lately, I’ve been putting a lot of effort into advancing the latter.

I get a tremendous amount of good out of establishing a daily practice of self improvement. Being relatively new to UX myself, I constantly feel like I have a lot to learn. Imposter syndrome has always been a particular bane of mine, especially when staring a new job in a new field. In a career that’s ever changing and evolving, keeping up with the fluctuating best practices and research can be challenging as well. By spending a bit of time each day working to make myself a better UX’er, I’ve found that I’ve been able to slay all of these proverbial dragons.

The big question, then, is how to go about honing your skills, especially when you’re not on a project team.

For me, there are a handful of things I do on a daily basis that I’d recommend to any UX’er looking to bump their game up a notch.

1.) Read something. There’s so much written knowledge out there about our field. I find that reading something each day is always a great first step to build my skill set. There’s quite a bit of good stuff here on UXMastery.com, User Testing Blog, UX Booth, UX Magazine, and many others. I have a Feedly feed setup that drops in all the articles from these groups so that I can pick out a couple to read every day.

2.) Interact with the Community. The UX/UI community is notorious for being welcoming. I don’t think I’ve ever met another professional group that’s more approachable, even at the higher levels. Apart from getting started here, you’ll probably want to look at ux.stackexchange.com to get a good look at what questions others are asking. On Twitter there are some excellent people to follow: my favorites are Tobias van Schneider, Daniel Burka, and Jonathan Colman.

Shameless plug time: my twitter handle is @5280_CS, if you’re at all interested. I try to retweet the articles I like best each day, and to post any unique thoughts or scenarios I come accross. It’s a great way for me to meet people in the business, and to hone my skills while doing it.

3.) Problem solve. One of the best ways to get experience in a field is to work on tackling real-life problems other people are facing. UXMastery’s forums is a great place to start, but don’t overlook ux.stackexchange.com either. Take a problem that you feel is just a little out of your comfort zone, and get to work. Approach it like you would if you were working on a UX team. Do research, whiteboard, iterate, and test.

You don’t have to post your answer to the question if you don’t feel comfortable doing so, but posting will help you get used to putting you work out there for public consumption, and defending position as well. Additionally, you can compare your approach to others to see how your outcome is different, and analyze how your process may have affected that outcome.

With such an open community, I’ve never met a UX’er with their salt who wasn’t patient when asked to describe their process or logic pretaining to their solutions.

What do you do to build your skill set on a daily basis?