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.

Red Swingline Staplers: My Best Communication Tool

Red Swingline Staplers as Communication Tools

I use my red Swingline stapler every day, though I can’t recall actually stapling anything in years.

The colour of the stapler is no coincidence, as my first encounter with a red Swingline was the cult classic Office Space. In the movie, Milton Waddams defends his prized piece of office equipment from theft and destruction at the hands of unscrupulous coworkers.

For Milton and millions of office workers worldwide, the red Swingline has become a symbol of those pieces of our work life for which we would, if ignored, set the world on fire.

My stapler’s daily use is as a reminder that everyone has red-stapler issues in their work life, and that a failure to communicate on those issues could have dire, unforeseen consequences.

It’s an important reminder, to be sure. Our placement in our company’s organization and workflow means that communicating as a UX professional is both imperative and, at times, extremely difficult.

Here are a few important lessons to learn to help avoid those red-stapler situations.

Learn and translate new languages

My wife and I do not speak the same language.

My wife is an Archivist, and I’m a User Experience Engineer. Unsurprisingly, there is very little crossover between the world of antiquities and modern technology and design. Any dinner table conversation that begins with the inane question of “How was your day?” can lead to a whole meal spent translating different professional terms and concepts into language the other can understand.

This simply goes to illustrate this point: no one speaks the same language. Our individual collections of idioms, slang, and jargon is unique to each of us. What’s more, our own language changes and evolves depending on the group of people we’re interacting with at the moment.

Read more at UXMastery.com


Related: Programmer Humor: How IT People See Each Other (Warning: Middle Fingers)

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

Programmer Humor: How IT People See Each Other (Warning: Middle Fingers)

Programmer Humor: How IT people see each other.
We all have a lot of negative stigmas to overcome.

Though the above image is a great example of programmer humor, the very nature of human existence is a tribal one.  From time immemorial, humans have banded together in small groups for the purposes of protection, sharing of food resources, and camaraderie.

The modern workplace is a reflection of this, with a few twists.  Instead of protecting against beasts and burdens, we now protect against rogue stakeholders.  We share work resources like helpdesk professionals and software licenses instead of food.  And our camaraderie is limited in most cases to the 8-5 workday hours.

So it’s no surprise that we get content cropping up like the above image, submitted to reddit today by /u/super_good_aim_guy. It couldn’t be more accurate.

I couldn’t agree more with this matrix, especially as someone who’s worked as a Front End Developer, UX Engineer, UI Designer, Project Manager, and done some moderate System Admin work.

From a Designer perspective, which is closest to my current role as a UX Engineer, I’m not surprised that the view of Designers in general is pretty childish.  To Developers, we add seemingly random complexity without adding value.  QAs and Sysadmins tend to have a knowledge of the requirements, but lack an understanding of the “why” behind the knowledge.  Project Managers, who have a better overall view of a feature, tend to have a more favorable but practical view of our work.

So what can we do to increase our overall image and promote understanding of our design process among the other business tribes?

  • Include as many relevant people as when running through our baseline UX process.
  • Communicate our goals and and desires through whiteboarding and iterative designs involving our business partners.
  • Provide consistent, engaging designs.
  • Design with empathy for developers, QA pros, PM’s, and Sysadmins.

Taking these precautions should be a part of our everyday work, unless we want to be seen as childish monkeys.  That’s bad.

Leadership & Mentoring in the UX World

I hang out (probably more than I should) on UX Mastery’s great forums.  It’s a great way to network with different professionals in the world, and to try and help anyone who might need a hand on anything from real-world UX issues to help getting into the industry.

Today, one user in particular posed a few questions about leadership and mentoring within the UX world that I found particularly interesting.

screen-shot-2016-11-22-at-9-45-04-am

That got me thinking about my role in the UX universe as a whole.  Admittedly, my influence is minimal compared to the titans of the industry, but that doesn’t mean I don’t play a part in any way.  How would I answer these questions?

After a bit of thought, I decided to chime in and give the best response I could.


@HAWK is right– true leaders prefer to be acknowledged by their peers rather than self-declared. That said, I’ll do what I can to answer your questions.

1) My thoughts:

i.) The web design industry, as a whole, does not have a good understanding of the difference and value propositions focusing on both user interface and user experience. While the two are often related, they are also often confused. Muddying the waters is the fact that many professionals in our industry are asked to perform a variety of functions that, ideally, would either be performed by both a UI and a UX professional. The crossover is negating some of the gains of having two separate teams focusing on different elements of each. To get a feel for the difference and why it’s important, please feel free to check out my blog post on the subject. Educating young professionals and corporate leadership on the difference is one way I work to negate the impact of this issue.

ii.) Many professionals come to the UX industry from a wide variety of backgrounds and experiences. In truth, you don’t have to be a good technology professional to be a good UX’er– you need to have a passion for solving problems, a drive for improvement, and the ability and empathy to see things from your users’ perspectives. As a result, UX professionals come from a variety of backgrounds. Here on UX Mastery, we have architects, engineers, journalists, and a variety of other professionals.

This is both a strength of the industry, as it means we have a wide variety of valuable and interesting skill sets to draw from, but it’s also a detriment in that many look to get into the UX industry without having a common skill set. Furthermore, the skill set employers ask for is often at odds with the value of the skills of a potential employee could offer.

Defining that skill set and working to create a common conception of what basic skills a UX’er should possess before getting into different areas of the business is one of the reasons I’m here on UX Mastery. I personally had careers as a sports journalist, freelance web developer, digital sign developer, restaurant server, retail manager, call center phone jockey, and corporate trainer before I finally settled into this career. Each job taught me something valuable to my UX career, and I feel that I have a lot to offer the community at large. I’m here on UX Mastery offering my experience and thoughts in every way possible to try and lessen the impact of gaps in knowledge or experience within the community.

iii.) The wide variety of technology requiring UX focus, along with the variety of different roles a UX’er might pursue, make finding a niche difficult for many people. Simply put, there’s a lot of opportunities out there in the UX world at the moment. Different people might be more well-suited to different careers at different points in time.

As an example, I’m currently mentoring a really great young professional who’s trying to get his foot into the UX world. His background is in the financial world, where he interacts with customers and provides technical support on a daily basis. Due to his relative newness to the industry, his affinity for statistics, and his excellent people skills, I’m guiding him towards exploring a career as a UX Researcher, a career very different from a UX Designer or Engineer role.

By providing online and in-person mentoring, I’m doing what I can to help new professionals build their skills and find their niche. My hope is this will, in some small way, help to eliminate this barrier to entry for many who would be well-suited to the UX world.

2.) Being successful and being a leader are two very different things. Some of the most successful people I know are people who merely follow orders to a T, providing excellent execution of the ideas and thoughts of others. There’s absolutely nothing wrong with this. I merely use it as an example of how the two aren’t necessarily correlated.

To be successful, I’d recommend anyone looking to get into the world of UX do three things– build the basic skills required of every UX professional, find a niche within the industry to focus on, and to find ways to get practical, real-world experience.

I talk a bit about the first two points in my answer to your first question, but when it comes to building real-world experience it can often be difficult to find opportunities to which you can contribute. @seyonwind, perhaps, can provide some insight into some ways to get some good experience ahead of trying to enter the industry full-time as his work ethic and diligence in volunteering for UX-related projects and causes is apparent to all who know him, online or not. My advice is to work on your own projects, to volunteer for open source projects, or offer your skills to charity (catchafire.org/ is a great place to start.)

To be a leader, it’s imperative that you seek to serve the industry in any way you can. For different people, that means different things. For me, it means hanging out in places like this and answering questions for the interested and inquisitive individuals like you. For others, it takes the shape of volunteering their services to nonprofits, blogging on the subject of UX, and providing mentoring services for young professionals.

3.) Who knows where UX growth will come from in the next 3-5 years? One of my favorite areas that hasn’t had much discussion, but will need a lot of UX attention, will be in self-driving cars and related applications. Tesla right now is leading the world in this area, but major and minor players alike will create quite a bit of competition as they enter the industry. That means more specific UX jobs for the industry.

4.) In general, corporate leadership will need the ability to better understand the value proposition of investing in user experience. At the moment, it feels like a bit of a reaction to buzzwords rather than true understanding of the UX professional and their value that’s driving the UX industry.

I hope that helps! Apologies for any typos– I’m hammering this out before a meeting and not giving it my usual once-over before I post as said meeting starts in just a minute or two. Let me know if I can clarify anything or provide any additional context :slight_smile:


What do you think the challenges that UX as a whole will face in the coming years?

When are Ageless, Genderless User Personas Effective?

On the web, everyone is equal.

This is a problem, especially for those of us engaged in the business of writing user personas.

It should be no secret by this point that the how-to of creating user personas is still up in the air.  There is a modicum of agreement that personas should be based around the analytics gathered on the website in question.  How treat data in comparison and contrasts with your target audience, and how to synthesize that comparison into user personas, is still widely up for debate.

So where do we start when it comes to building user personas?

One of the most helpful resources I point newcomers to is usability.gov, which has a list of some great user persona standards. Among other things, they suggest you provide a persona with an age and gender.

This is a tricky bit, however.  There are many who want to treat everyone in all walks of life with equality, including some industry leaders that believe in removing age and gender from personas. The argument they provide is that these facets of a user don’t provide relevant context, and only add biased, unproven assumptions to the equations. Personas, they state, should be based on story archs, and not on aspects of the user that provide useless context to that story.

On a certain level, that makes sense.  We all make assumptions about people of different gender and ages based on our own experiences and the influence of the different people and institutions in our lives.  We’ve probably all heard that women are terrible drivers, or that teenagers don’t care about the world around them.  In general, we’re fighting a battle against the stereotypes we as individuals and as a culture use to label these groups.

This extension of ethnocentrism is the antitheses of what the world wide web is all about– providing the same opportunities to explore, learn, and consume to individuals the world over.

There are others (myself included) that believe the usefulness of a persona is at least two-fold. A persona allows you to synthesize data captured from analytics into usable format, true.  They also allow for designers to design for actual human beings rather than the generalized “user” that is so often discussed around the conference table.

By putting a face and name with a set of requirements, you’re suddenly working to make Susie Shopper’s experience better, not some nameless, faceless, un-relatable “user.”  Your work is more personal. You feel like you’re connecting with and solving the problems of actual customers.

Removing aspects such as age and gender only serve to de-personify the persona, which seems a bit of a contradiction of terms.  So long as we’re aware of our own presuppositions and actively seek to counter them, there’s no problem with keeping age and gender as part of our user personas.

But that’s not the only issue I have with this approach.

But wait! There's more!
But wait! There’s more!

The difficulty we run into here is the age old “ideal vs reality” conundrum.

I absolutely agree that men and women should be treated as equals.  Everyone, regardless of age, should have the same fair treatment when it comes to their web experiences.

However, the fact of the matter is that there is a good deal of difference to how men, women, and different age groups consume user interfaces and experiences.

According to a study conducted by the Worcester Polytechnic Institute,  women notice and use different aspects of a UI than men. Women, for instance, are more prone to notice people and faces, whereas men are more drawn to dynamic color choices. There’s also empirical evidence that things such as font choice may have a large effect on how men and women consume user interfaces.

The study on font consumption in UI dealt specifically with cars, but has far-reaching implications.
The study on font consumption in UI dealt specifically with cars, but has far-reaching implications.

Additionally, the age range of your demographic should affect your UX design, especially if you’re designing for older audiences. There’s a significant amount of research and knowledge behind understanding how older adults interact with the web.  Things like font choice and size, which you might expect has a larger impact for older audiences, actually have negligible effects on usability for older adults, while persistent and consistent navigation have a huge benefit.

While it may be politically correct to have the concept that “women are no different from men,” and that “age doesn’t matter,” the reality of the situation, when it comes to UX at least, is that there’s a distinct difference between the groups.  How this difference is applied will vary depending on you site’s demographics and target audience.

If your site is age and gender agnostic, then by all means, go ahead and strip out this information.  If not, ensure that your user persona, as well as your assumptions about that user, are based on a solid scientific grounding, and not your stereotypical presuppositions.

As UX professionals, it’s our duty to provide everyone an equally effective and awesome experience, tailored to our users’ collective needs and wants.

Afer all, on the web, everyone is equal.

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.

 

The Best Illustration of UI vs. UX

To those that wonder exactly what it is that I do everyday, this is a pretty succinct way of explaining what us UX people do.

Other people suggest the need for a slide. I suggest where to put it, what it should be made out of, where it should take you, and how you should feel when you use it (awesome, hopefully).

You can read more about the Sky Slide in LA here.

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?